feat(frontend): Replace React with Blazor frontend
This commit is contained in:
20
frontend/Components/App.razor
Normal file
20
frontend/Components/App.razor
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="app.css" />
|
||||
<link rel="stylesheet" href="NimbusFlow.Frontend.styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Routes />
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
frontend/Components/Layout/MainLayout.razor
Normal file
23
frontend/Components/Layout/MainLayout.razor
Normal file
@@ -0,0 +1,23 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
<a href="" class="reload">Reload</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
96
frontend/Components/Layout/MainLayout.razor.css
Normal file
96
frontend/Components/Layout/MainLayout.razor.css
Normal file
@@ -0,0 +1,96 @@
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
36
frontend/Components/Layout/NavMenu.razor
Normal file
36
frontend/Components/Layout/NavMenu.razor
Normal file
@@ -0,0 +1,36 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">NimbusFlow</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Dashboard
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="members">
|
||||
<span class="bi bi-people-fill-nav-menu" aria-hidden="true"></span> Members
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="schedules">
|
||||
<span class="bi bi-calendar-event-fill-nav-menu" aria-hidden="true"></span> Schedules
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="services">
|
||||
<span class="bi bi-calendar-plus-fill-nav-menu" aria-hidden="true"></span> Services
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
105
frontend/Components/Layout/NavMenu.razor.css
Normal file
105
frontend/Components/Layout/NavMenu.razor.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.navbar-toggler {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 3.5rem;
|
||||
height: 2.5rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-toggler:checked {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.75rem;
|
||||
top: -1px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bi-house-door-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-plus-square-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-list-nested-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link {
|
||||
color: #d7d7d7;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.37);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:checked ~ .nav-scrollable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
36
frontend/Components/Pages/Error.razor
Normal file
36
frontend/Components/Pages/Error.razor
Normal 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
138
frontend/Components/Pages/Home.razor
Normal 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
181
frontend/Components/Pages/Members.razor
Normal 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
298
frontend/Components/Pages/Schedules.razor
Normal 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
238
frontend/Components/Pages/Services.razor
Normal 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"
|
||||
};
|
||||
}
|
||||
}
|
||||
6
frontend/Components/Routes.razor
Normal file
6
frontend/Components/Routes.razor
Normal file
@@ -0,0 +1,6 @@
|
||||
<Router AppAssembly="typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
10
frontend/Components/_Imports.razor
Normal file
10
frontend/Components/_Imports.razor
Normal file
@@ -0,0 +1,10 @@
|
||||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.JSInterop
|
||||
@using NimbusFlow.Frontend
|
||||
@using NimbusFlow.Frontend.Components
|
||||
Reference in New Issue
Block a user