crayonix/nimbusflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Replace React with Blazor frontend

Browse Source
This commit is contained in:
Giovani
2025-08-30 19:29:40 -04:00
parent 3b9c074bc7
commit 6063ed62e0
82 changed files with 22786 additions and 3435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/Components/Pages/Error.razor Normal file
View File

@@ -0,0 +1,36 @@
@page "/Error"
@using System.Diagnostics
<PageTitle>Error</PageTitle>
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
@if (ShowRequestId)
{
<p>
<strong>Request ID:</strong> <code>@RequestId</code>
</p>
}
<h3>Development Mode</h3>
<p>
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>
@code{
[CascadingParameter]
private HttpContext? HttpContext { get; set; }
private string? RequestId { get; set; }
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
protected override void OnInitialized() =>
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
}

138
frontend/Components/Pages/Home.razor Normal file
View File

@@ -0,0 +1,138 @@
@page "/"
@using NimbusFlow.Frontend.Services
@using NimbusFlow.Frontend.Models
@inject IApiService ApiService
<PageTitle>NimbusFlow Dashboard</PageTitle>
<h1>NimbusFlow Dashboard</h1>
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary mb-3">
<div class="card-header">Active Members</div>
<div class="card-body">
<h4 class="card-title">@activeMemberCount</h4>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success mb-3">
<div class="card-header">Pending Schedules</div>
<div class="card-body">
<h4 class="card-title">@pendingScheduleCount</h4>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-warning mb-3">
<div class="card-header">Upcoming Services</div>
<div class="card-body">
<h4 class="card-title">@upcomingServiceCount</h4>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-info mb-3">
<div class="card-header">Total Classifications</div>
<div class="card-body">
<h4 class="card-title">@classificationCount</h4>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Recent Schedules</h5>
</div>
<div class="card-body">
@if (recentSchedules.Any())
{
<div class="list-group">
@foreach (var schedule in recentSchedules.Take(5))
{
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">@($"{schedule.Member?.FullName}")</h6>
<small class="badge @GetStatusBadgeClass(schedule.Status)">@schedule.Status</small>
</div>
<p class="mb-1">Service: @schedule.Service?.ServiceDate.ToString("MMM dd, yyyy")</p>
<small>Scheduled: @schedule.ScheduledAt.ToString("MMM dd, yyyy HH:mm")</small>
</div>
}
</div>
}
else
{
<p class="text-muted">No recent schedules found.</p>
}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Quick Actions</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<a href="/schedules/create" class="btn btn-primary">Schedule Next Member</a>
<a href="/members/create" class="btn btn-success">Add New Member</a>
<a href="/services/create" class="btn btn-warning">Create New Service</a>
<a href="/schedules" class="btn btn-info">View All Schedules</a>
</div>
</div>
</div>
</div>
</div>
@code {
private int activeMemberCount = 0;
private int pendingScheduleCount = 0;
private int upcomingServiceCount = 0;
private int classificationCount = 0;
private List<Schedule> recentSchedules = new();
protected override async Task OnInitializedAsync()
{
try
{
// Load dashboard data
var members = await ApiService.GetMembersAsync();
activeMemberCount = members.Count(m => m.IsActive);
var schedules = await ApiService.GetSchedulesAsync();
recentSchedules = schedules.OrderByDescending(s => s.ScheduledAt).ToList();
pendingScheduleCount = schedules.Count(s => s.Status == "pending");
var services = await ApiService.GetServicesAsync();
upcomingServiceCount = services.Count(s => s.ServiceDate >= DateTime.Today);
var classifications = await ApiService.GetClassificationsAsync();
classificationCount = classifications.Count;
}
catch (Exception ex)
{
// Handle API errors gracefully
Console.WriteLine($"Error loading dashboard data: {ex.Message}");
}
}
private string GetStatusBadgeClass(string status)
{
return status switch
{
"pending" => "bg-warning",
"accepted" => "bg-success",
"declined" => "bg-danger",
_ => "bg-secondary"
};
}
}

181
frontend/Components/Pages/Members.razor Normal file
View File

@@ -0,0 +1,181 @@
@page "/members"
@using NimbusFlow.Frontend.Services
@using NimbusFlow.Frontend.Models
@inject IApiService ApiService
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime
<PageTitle>Members</PageTitle>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>Members</h1>
<a href="/members/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Add Member
</a>
</div>
@if (loading)
{
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
}
else if (members.Any())
{
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Classification</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
<th>Last Accepted</th>
<th>Decline Streak</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var member in filteredMembers)
{
<tr>
<td>
<strong>@member.FullName</strong>
</td>
<td>
<span class="badge bg-secondary">@member.ClassificationName</span>
</td>
<td>@member.Email</td>
<td>@member.PhoneNumber</td>
<td>
@if (member.IsActive)
{
<span class="badge bg-success">Active</span>
}
else
{
<span class="badge bg-danger">Inactive</span>
}
</td>
<td>
@if (member.LastAcceptedAt.HasValue)
{
@member.LastAcceptedAt.Value.ToString("MMM dd, yyyy")
}
else
{
<span class="text-muted">Never</span>
}
</td>
<td>
@if (member.DeclineStreak > 0)
{
<span class="badge bg-warning">@member.DeclineStreak</span>
}
else
{
<span class="text-muted">0</span>
}
</td>
<td>
<div class="btn-group" role="group">
<a href="/members/@member.MemberId" class="btn btn-sm btn-outline-primary">View</a>
<a href="/members/@member.MemberId/edit" class="btn btn-sm btn-outline-warning">Edit</a>
<button class="btn btn-sm btn-outline-danger" @onclick="() => ConfirmDelete(member)">Delete</button>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
Showing @filteredMembers.Count() of @members.Count members
</small>
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="showInactiveMembers" id="showInactive">
<label class="form-check-label" for="showInactive">
Show inactive members
</label>
</div>
</div>
</div>
</div>
}
else
{
<div class="text-center">
<div class="alert alert-info">
<h4>No Members Found</h4>
<p>There are currently no members in the system.</p>
<a href="/members/create" class="btn btn-primary">Add Your First Member</a>
</div>
</div>
}
@code {
private List<Member> members = new();
private bool loading = true;
private bool showInactiveMembers = false;
private IEnumerable<Member> filteredMembers =>
showInactiveMembers ? members : members.Where(m => m.IsActive);
protected override async Task OnInitializedAsync()
{
await LoadMembers();
}
private async Task LoadMembers()
{
try
{
loading = true;
members = await ApiService.GetMembersAsync();
}
catch (Exception ex)
{
// Handle error (could show toast notification)
Console.WriteLine($"Error loading members: {ex.Message}");
}
finally
{
loading = false;
}
}
private async Task ConfirmDelete(Member member)
{
var confirmed = await JSRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to delete {member.FullName}?");
if (confirmed)
{
try
{
var success = await ApiService.DeleteMemberAsync(member.MemberId);
if (success)
{
await LoadMembers(); // Refresh the list
}
}
catch (Exception ex)
{
Console.WriteLine($"Error deleting member: {ex.Message}");
}
}
}
}

298
frontend/Components/Pages/Schedules.razor Normal file
View File

@@ -0,0 +1,298 @@
@page "/schedules"
@using NimbusFlow.Frontend.Services
@using NimbusFlow.Frontend.Models
@inject IApiService ApiService
@inject IJSRuntime JSRuntime
<PageTitle>Schedules</PageTitle>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>Schedules</h1>
<a href="/schedules/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Schedule Member
</a>
</div>
@if (loading)
{
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
}
else if (schedules.Any())
{
<!-- Filter Controls -->
<div class="row mb-3">
<div class="col-md-4">
<select class="form-select" @bind="selectedStatus">
<option value="">All Statuses</option>
<option value="pending">Pending</option>
<option value="accepted">Accepted</option>
<option value="declined">Declined</option>
</select>
</div>
<div class="col-md-4">
<input type="date" class="form-control" @bind="filterDate" />
</div>
<div class="col-md-4">
<button class="btn btn-outline-secondary" @onclick="ClearFilters">Clear Filters</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Member</th>
<th>Service Date</th>
<th>Service Type</th>
<th>Status</th>
<th>Scheduled At</th>
<th>Response Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var schedule in filteredSchedules.OrderByDescending(s => s.ScheduledAt))
{
<tr>
<td>
<strong>@schedule.Member?.FullName</strong>
</td>
<td>
@schedule.Service?.ServiceDate.ToString("MMM dd, yyyy")
</td>
<td>
<span class="badge bg-info">@schedule.Service?.ServiceTypeName</span>
</td>
<td>
<span class="badge @GetStatusBadgeClass(schedule.Status)">
@schedule.Status.ToUpper()
</span>
</td>
<td>
@schedule.ScheduledAt.ToString("MMM dd, yyyy HH:mm")
</td>
<td>
@if (schedule.AcceptedAt.HasValue)
{
@schedule.AcceptedAt.Value.ToString("MMM dd, yyyy HH:mm")
}
else if (schedule.DeclinedAt.HasValue)
{
@schedule.DeclinedAt.Value.ToString("MMM dd, yyyy HH:mm")
}
else
{
<span class="text-muted">-</span>
}
</td>
<td>
<div class="btn-group" role="group">
@if (schedule.Status == "pending")
{
<button class="btn btn-sm btn-success" @onclick="() => AcceptSchedule(schedule.ScheduleId)">
Accept
</button>
<button class="btn btn-sm btn-warning" @onclick="() => ShowDeclineModal(schedule)">
Decline
</button>
}
<a href="/schedules/@schedule.ScheduleId" class="btn btn-sm btn-outline-primary">View</a>
<button class="btn btn-sm btn-outline-danger" @onclick="() => ConfirmRemove(schedule)">
Remove
</button>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<small class="text-muted">
Showing @filteredSchedules.Count() of @schedules.Count schedules
</small>
</div>
</div>
}
else
{
<div class="text-center">
<div class="alert alert-info">
<h4>No Schedules Found</h4>
<p>There are currently no schedules in the system.</p>
<a href="/schedules/create" class="btn btn-primary">Create Your First Schedule</a>
</div>
</div>
}
<!-- Decline Modal -->
@if (showDeclineModal)
{
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Decline Schedule</h5>
<button type="button" class="btn-close" @onclick="HideDeclineModal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Decline Reason (Optional)</label>
<textarea class="form-control" @bind="declineReason" rows="3" placeholder="Enter reason for declining..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @onclick="HideDeclineModal">Cancel</button>
<button type="button" class="btn btn-warning" @onclick="ConfirmDecline">Decline Schedule</button>
</div>
</div>
</div>
</div>
}
@code {
private List<Schedule> schedules = new();
private bool loading = true;
private string selectedStatus = "";
private DateTime? filterDate;
private bool showDeclineModal = false;
private Schedule? scheduleToDecline;
private string declineReason = "";
private IEnumerable<Schedule> filteredSchedules
{
get
{
var filtered = schedules.AsEnumerable();
if (!string.IsNullOrEmpty(selectedStatus))
{
filtered = filtered.Where(s => s.Status == selectedStatus);
}
if (filterDate.HasValue)
{
filtered = filtered.Where(s => s.Service?.ServiceDate.Date == filterDate.Value.Date);
}
return filtered;
}
}
protected override async Task OnInitializedAsync()
{
await LoadSchedules();
}
private async Task LoadSchedules()
{
try
{
loading = true;
schedules = await ApiService.GetSchedulesAsync();
}
catch (Exception ex)
{
Console.WriteLine($"Error loading schedules: {ex.Message}");
}
finally
{
loading = false;
}
}
private string GetStatusBadgeClass(string status)
{
return status switch
{
"pending" => "bg-warning text-dark",
"accepted" => "bg-success",
"declined" => "bg-danger",
_ => "bg-secondary"
};
}
private async Task AcceptSchedule(int scheduleId)
{
try
{
await ApiService.AcceptScheduleAsync(scheduleId);
await LoadSchedules(); // Refresh the list
}
catch (Exception ex)
{
Console.WriteLine($"Error accepting schedule: {ex.Message}");
}
}
private void ShowDeclineModal(Schedule schedule)
{
scheduleToDecline = schedule;
declineReason = "";
showDeclineModal = true;
}
private void HideDeclineModal()
{
showDeclineModal = false;
scheduleToDecline = null;
declineReason = "";
}
private async Task ConfirmDecline()
{
if (scheduleToDecline != null)
{
try
{
await ApiService.DeclineScheduleAsync(scheduleToDecline.ScheduleId, declineReason);
await LoadSchedules(); // Refresh the list
HideDeclineModal();
}
catch (Exception ex)
{
Console.WriteLine($"Error declining schedule: {ex.Message}");
}
}
}
private async Task ConfirmRemove(Schedule schedule)
{
var confirmed = await JSRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to remove the schedule for {schedule.Member?.FullName}?");
if (confirmed)
{
try
{
var success = await ApiService.RemoveScheduleAsync(schedule.ScheduleId);
if (success)
{
await LoadSchedules(); // Refresh the list
}
}
catch (Exception ex)
{
Console.WriteLine($"Error removing schedule: {ex.Message}");
}
}
}
private void ClearFilters()
{
selectedStatus = "";
filterDate = null;
}
}

238
frontend/Components/Pages/Services.razor Normal file
View File

@@ -0,0 +1,238 @@
@page "/services"
@using NimbusFlow.Frontend.Services
@using NimbusFlow.Frontend.Models
@inject IApiService ApiService
<PageTitle>Services</PageTitle>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>Services</h1>
<a href="/services/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create Service
</a>
</div>
@if (loading)
{
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
}
else if (services.Any())
{
<!-- Filter Controls -->
<div class="row mb-3">
<div class="col-md-4">
<select class="form-select" @bind="selectedServiceType">
<option value="">All Service Types</option>
@foreach (var serviceType in serviceTypes)
{
<option value="@serviceType.ServiceTypeId">@serviceType.TypeName</option>
}
</select>
</div>
<div class="col-md-4">
<input type="date" class="form-control" @bind="filterDate" />
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" @bind="showPastServices" id="showPast">
<label class="form-check-label" for="showPast">
Show past services
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Date</th>
<th>Service Type</th>
<th>Scheduled Members</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var service in filteredServices.OrderBy(s => s.ServiceDate))
{
<tr class="@(service.ServiceDate < DateTime.Today ? "text-muted" : "")">
<td>
<strong>@service.ServiceDate.ToString("MMM dd, yyyy (dddd)")</strong>
</td>
<td>
<span class="badge @GetServiceTypeBadgeClass(service.ServiceTypeName)">
@service.ServiceTypeName
</span>
</td>
<td>
@{
var serviceSchedules = schedules.Where(s => s.ServiceId == service.ServiceId).ToList();
var acceptedCount = serviceSchedules.Count(s => s.Status == "accepted");
var pendingCount = serviceSchedules.Count(s => s.Status == "pending");
var declinedCount = serviceSchedules.Count(s => s.Status == "declined");
}
<div class="d-flex gap-1">
@if (acceptedCount > 0)
{
<span class="badge bg-success">@acceptedCount accepted</span>
}
@if (pendingCount > 0)
{
<span class="badge bg-warning text-dark">@pendingCount pending</span>
}
@if (declinedCount > 0)
{
<span class="badge bg-danger">@declinedCount declined</span>
}
@if (serviceSchedules.Count == 0)
{
<span class="text-muted">No schedules</span>
}
</div>
</td>
<td>
@if (service.ServiceDate < DateTime.Today)
{
<span class="badge bg-secondary">Past</span>
}
else if (service.ServiceDate == DateTime.Today)
{
<span class="badge bg-primary">Today</span>
}
else
{
<span class="badge bg-success">Upcoming</span>
}
</td>
<td>
<div class="btn-group" role="group">
<a href="/services/@service.ServiceId" class="btn btn-sm btn-outline-primary">View</a>
@if (service.ServiceDate >= DateTime.Today)
{
<a href="/schedules/create?serviceId=@service.ServiceId" class="btn btn-sm btn-success">Schedule</a>
<a href="/services/@service.ServiceId/edit" class="btn btn-sm btn-outline-warning">Edit</a>
}
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<small class="text-muted">
Showing @filteredServices.Count() of @services.Count services
</small>
</div>
</div>
}
else
{
<div class="text-center">
<div class="alert alert-info">
<h4>No Services Found</h4>
<p>There are currently no services in the system.</p>
<a href="/services/create" class="btn btn-primary">Create Your First Service</a>
</div>
</div>
}
@code {
private List<Service> services = new();
private List<ServiceType> serviceTypes = new();
private List<Schedule> schedules = new();
private bool loading = true;
private string selectedServiceType = "";
private DateTime? filterDate;
private bool showPastServices = false;
private IEnumerable<Service> filteredServices
{
get
{
var filtered = services.AsEnumerable();
if (!showPastServices)
{
filtered = filtered.Where(s => s.ServiceDate >= DateTime.Today);
}
if (!string.IsNullOrEmpty(selectedServiceType) && int.TryParse(selectedServiceType, out int typeId))
{
filtered = filtered.Where(s => s.ServiceTypeId == typeId);
}
if (filterDate.HasValue)
{
filtered = filtered.Where(s => s.ServiceDate.Date == filterDate.Value.Date);
}
return filtered;
}
}
protected override async Task OnInitializedAsync()
{
await LoadData();
}
private async Task LoadData()
{
try
{
loading = true;
// Load all data in parallel
var servicesTask = ApiService.GetServicesAsync();
var serviceTypesTask = ApiService.GetServiceTypesAsync();
var schedulesTask = ApiService.GetSchedulesAsync();
await Task.WhenAll(servicesTask, serviceTypesTask, schedulesTask);
services = servicesTask.Result;
serviceTypes = serviceTypesTask.Result;
schedules = schedulesTask.Result;
// Map service type names to services
foreach (var service in services)
{
var serviceType = serviceTypes.FirstOrDefault(st => st.ServiceTypeId == service.ServiceTypeId);
service.ServiceTypeName = serviceType?.TypeName ?? "Unknown";
}
}
catch (Exception ex)
{
Console.WriteLine($"Error loading services data: {ex.Message}");
}
finally
{
loading = false;
}
}
private string GetServiceTypeBadgeClass(string? serviceTypeName)
{
return serviceTypeName switch
{
"9AM" => "bg-info",
"11AM" => "bg-primary",
"6PM" => "bg-dark",
_ => "bg-secondary"
};
}
}