From c9ef169989cf4daa2049971033ca591c18ffd7ce Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Sat, 27 Dec 2025 22:01:41 -0500
Subject: [PATCH] Refactor Calendar and Home components for improved navigation
 and user experience

Updated the Calendar component's route from "/event-calendar" to "/calendar" for clarity. Enhanced the Home component to provide dynamic content based on the presence of students and teams, introducing new sections for "Getting Started" and "Team Building". Improved the DashboardCard component to support emphasized styling for better visual hierarchy. Updated the navigation menu to reflect these changes and ensure a more intuitive user experience.
---
 .../Components/Features/Calendar/Index.razor  |   2 +-
 WebApp/Components/Pages/Home.razor            | 187 +++++++++++++-----
 .../Shared/Components/DashboardCard.razor     |   8 +-
 WebApp/Components/Shared/Layout/NavMenu.razor |  24 ++-
 4 files changed, 167 insertions(+), 54 deletions(-)

diff --git a/WebApp/Components/Features/Calendar/Index.razor b/WebApp/Components/Features/Calendar/Index.razor
index ae44787..6ffac55 100644
--- a/WebApp/Components/Features/Calendar/Index.razor
+++ b/WebApp/Components/Features/Calendar/Index.razor
@@ -1,4 +1,4 @@
-@page "/event-calendar"
+@page "/calendar"
 @attribute [Authorize]
 @using WebApp.Components.Shared.Components
 @using WebApp.Models
diff --git a/WebApp/Components/Pages/Home.razor b/WebApp/Components/Pages/Home.razor
index a92424a..5117fc4 100644
--- a/WebApp/Components/Pages/Home.razor
+++ b/WebApp/Components/Pages/Home.razor
@@ -26,57 +26,153 @@
     </div>
 </MudPaper>
 
-<MudPaper Elevation="0" Class="mb-6">
-<MudText Typo="Typo.h4" Class="mb-2">Data</MudText>
-</MudPaper>
-<MudGrid>
-    <!-- Events Card -->
-    <DashboardCard Icon="@AppIcons.Events"
-                   Title="Events"
-                   Count="@_eventCount"
-                   Subtitle="Total Events"
-                   Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
-                   NavigateUrl="/events" />
-
-    <!-- Students Card -->
-    <DashboardCard Icon="@AppIcons.Student"
-                   Title="Students"
-                   Count="@_studentCount"
-                   Subtitle="Active Students"
-                   NavigateUrl="/students">
-        @if (!string.IsNullOrEmpty(_gradeDistribution) && _gradeDistribution != "No students yet")
-        {
-            <MudStack>
-                <MudText Typo="Typo.caption">@((MarkupString)_gradeDistribution)</MudText>
-            </MudStack>
-        }
-        else
-        {
-            <MudText Typo="Typo.caption" Class="mt-2">No students yet</MudText>
-        }
-    </DashboardCard>
-
-    <!-- Teams Card -->
-    <DashboardCard Icon="@AppIcons.Teams"
-                   Title="Teams"
-                   Count="@_teamCount"
-                   Subtitle="Total Teams"
-                   Caption="@($"{_groupTeamsCount} Team | {_individualTeamsCount} Individual")"
-                   NavigateUrl="/teams" />
-</MudGrid>
-<MudPaper Elevation="0" Class="my-6">
-    <MudText Typo="Typo.h4">Tools</MudText>
-</MudPaper>
-
+@if (!_hasStudents)
+{
+    <!-- Getting Started: No students yet -->
+    <MudPaper Elevation="0" Class="mb-4">
+        <MudText Typo="Typo.h4" Color="Color.Primary">Getting Started</MudText>
+        <MudText Typo="Typo.body2" Color="Color.Secondary">Add your chapter's students to begin</MudText>
+    </MudPaper>
     <MudGrid>
+        <DashboardCard Icon="@AppIcons.Student"
+                       Title="Students"
+                       Count="@_studentCount"
+                       Subtitle="Add Students"
+                       NavigateUrl="/students"
+                       Emphasized="true">
+            <MudText Typo="Typo.caption" Class="mt-2">Import or add your chapter roster</MudText>
+        </DashboardCard>
 
-        <!-- Meeting Schedule Card -->
+        <DashboardCard Icon="@AppIcons.Events"
+                       Title="Events"
+                       Count="@_eventCount"
+                       Subtitle="Total Events"
+                       Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
+                       NavigateUrl="/events" />
+    </MudGrid>
+}
+else if (!_hasTeams)
+{
+    <!-- Team Building: Students exist but no teams yet -->
+    <MudPaper Elevation="0" Class="mb-4">
+        <MudText Typo="Typo.h4" Color="Color.Primary">Team Building</MudText>
+        <MudText Typo="Typo.body2" Color="Color.Secondary">Collect event rankings and build your teams</MudText>
+    </MudPaper>
+    <MudGrid>
+        <DashboardCard Icon="@AppIcons.EventRank"
+                       Title="Event Ranking"
+                       Caption="Collect student event preferences"
+                       NavigateUrl="/students/event-ranking"
+                       Emphasized="true"/>
+
+        <DashboardCard Icon="@AppIcons.TeamAssignment"
+                       Title="Team Assignment"
+                       Caption="Build optimal teams"
+                       NavigateUrl="/teams/assignment"
+                       Emphasized="true"/>
+    </MudGrid>
+
+    <MudPaper Elevation="0" Class="my-4">
+        <MudText Typo="Typo.h4">Chapter Data</MudText>
+    </MudPaper>
+    <MudGrid>
+        <DashboardCard Icon="@AppIcons.Student"
+                       Title="Students"
+                       Count="@_studentCount"
+                       Subtitle="Active Students"
+                       NavigateUrl="/students">
+            @if (!string.IsNullOrEmpty(_gradeDistribution) && _gradeDistribution != "No students yet")
+            {
+                <MudStack>
+                    <MudText Typo="Typo.caption">@((MarkupString)_gradeDistribution)</MudText>
+                </MudStack>
+            }
+        </DashboardCard>
+
+        <DashboardCard Icon="@AppIcons.Events"
+                       Title="Events"
+                       Count="@_eventCount"
+                       Subtitle="Total Events"
+                       Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
+                       NavigateUrl="/events" />
+    </MudGrid>
+}
+else
+{
+    <!-- Normal view: Students and teams exist -->
+    <MudPaper Elevation="0" Class="mb-4">
+        <MudText Typo="Typo.h4">Scheduling</MudText>
+    </MudPaper>
+    <MudGrid>
         <DashboardCard Icon="@AppIcons.Scheduler"
-                       Title="Schedule"
+                       Title="Meeting Schedule"
                        Caption="Optimize meeting times"
                        NavigateUrl="/meeting-schedule"/>
+
+        <DashboardCard Icon="@Icons.Material.Filled.Event"
+                       Title="Event Calendar"
+                       Caption="Conference schedules"
+                       NavigateUrl="/calendar"/>
     </MudGrid>
 
+    <MudPaper Elevation="0" Class="my-4">
+        <MudText Typo="Typo.h4">Teams & Registration</MudText>
+    </MudPaper>
+    <MudGrid>
+        <DashboardCard Icon="@Icons.Material.Filled.AppRegistration"
+                       Title="Registration"
+                       Caption="View student registrations"
+                       NavigateUrl="/students/teams"/>
+
+        <DashboardCard Icon="@AppIcons.Teams"
+                       Title="Teams"
+                       Count="@_teamCount"
+                       Subtitle="Total Teams"
+                       Caption="@($"{_groupTeamsCount} Team | {_individualTeamsCount} Individual")"
+                       NavigateUrl="/teams" />
+    </MudGrid>
+
+    <MudPaper Elevation="0" Class="my-4">
+        <MudText Typo="Typo.h4">Team Building</MudText>
+    </MudPaper>
+    <MudGrid>
+        <DashboardCard Icon="@AppIcons.EventRank"
+                       Title="Event Ranking"
+                       Caption="Student event preferences"
+                       NavigateUrl="/students/event-ranking"/>
+
+        <DashboardCard Icon="@AppIcons.TeamAssignment"
+                       Title="Team Assignment"
+                       Caption="Build optimal teams"
+                       NavigateUrl="/teams/assignment"/>
+    </MudGrid>
+
+    <MudPaper Elevation="0" Class="my-4">
+        <MudText Typo="Typo.h4">Chapter Data</MudText>
+    </MudPaper>
+    <MudGrid>
+        <DashboardCard Icon="@AppIcons.Student"
+                       Title="Students"
+                       Count="@_studentCount"
+                       Subtitle="Active Students"
+                       NavigateUrl="/students">
+            @if (!string.IsNullOrEmpty(_gradeDistribution) && _gradeDistribution != "No students yet")
+            {
+                <MudStack>
+                    <MudText Typo="Typo.caption">@((MarkupString)_gradeDistribution)</MudText>
+                </MudStack>
+            }
+        </DashboardCard>
+
+        <DashboardCard Icon="@AppIcons.Events"
+                       Title="Events"
+                       Count="@_eventCount"
+                       Subtitle="Total Events"
+                       Caption="@($"{_teamEventsCount} Team | {_individualEventsCount} Individual")"
+                       NavigateUrl="/events" />
+    </MudGrid>
+}
+
 @code {
     private int _eventCount;
     private int _individualEventsCount;
@@ -87,6 +183,9 @@
     private int _individualTeamsCount;
     private int _groupTeamsCount;
 
+    private bool _hasStudents => _studentCount > 0;
+    private bool _hasTeams => _teamCount > 0;
+
     protected override async Task OnInitializedAsync()
     {
         await LoadStatistics();
diff --git a/WebApp/Components/Shared/Components/DashboardCard.razor b/WebApp/Components/Shared/Components/DashboardCard.razor
index 542d5c2..8a8ac4e 100644
--- a/WebApp/Components/Shared/Components/DashboardCard.razor
+++ b/WebApp/Components/Shared/Components/DashboardCard.razor
@@ -1,7 +1,7 @@
 @using Microsoft.AspNetCore.Components
 
 <MudItem xs="12" sm="6" md="3">
-    <MudCard Elevation="4" Class="pa-4" Style="cursor: pointer; height: 100%;" @onclick="HandleClick">
+    <MudCard Elevation="@(Emphasized ? 8 : 4)" Class="@CardClass" Style="@CardStyle" @onclick="HandleClick">
         <MudCardContent>
             <div class="d-flex align-center mb-2">
                 <MudIcon Icon="@Icon" Size="Size.Large" Class="mr-2" />
@@ -33,8 +33,14 @@
     [Parameter] public string? Caption { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string NavigateUrl { get; set; } = string.Empty;
+    [Parameter] public bool Emphasized { get; set; }
     [Inject] private NavigationManager Navigation { get; set; } = default!;
 
+    private string CardClass => Emphasized ? "pa-4 emphasized-card" : "pa-4";
+    private string CardStyle => Emphasized
+        ? "cursor: pointer; height: 100%; border: 2px solid var(--mud-palette-primary);"
+        : "cursor: pointer; height: 100%;";
+
     private void HandleClick()
     {
         if (!string.IsNullOrEmpty(NavigateUrl))
diff --git a/WebApp/Components/Shared/Layout/NavMenu.razor b/WebApp/Components/Shared/Layout/NavMenu.razor
index c4451b2..db6a2c1 100644
--- a/WebApp/Components/Shared/Layout/NavMenu.razor
+++ b/WebApp/Components/Shared/Layout/NavMenu.razor
@@ -7,25 +7,33 @@
         <MudLink Typo="Typo.h6" Href="/" Class="px-4">TSA Chapter Organizer</MudLink>
         <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">@Configuration["ChapterSettings:Name"]</MudText>
         <MudDivider Class="my-2"/>
-        <MudNavLink Href="/events" Icon="@AppIcons.Events">Events</MudNavLink>
-        <MudNavLink Href="/students" Icon="@Icons.Material.Filled.People">Students</MudNavLink>
 
-        <MudNavGroup Title="Teams" Icon="@Icons.Material.Outlined.Groups" Expanded="true">
-            <MudNavLink Href="/teams" Match="NavLinkMatch.All"  Icon="@AppIcons.Teams">Teams</MudNavLink>
+        <MudNavGroup Title="Scheduling" Icon="@Icons.Material.Filled.CalendarMonth" Expanded="true">
+            <MudNavLink Href="/meeting-schedule/" Icon="@AppIcons.Scheduler">Meeting Schedule</MudNavLink>
+            <MudNavLink Href="/calendar/" Icon="@Icons.Material.Filled.Event">Event Calendar</MudNavLink>
+        </MudNavGroup>
+
+        <MudNavGroup Title="Teams & Registration" Icon="@Icons.Material.Outlined.Groups" Expanded="true">
             <MudNavLink Href="/students/teams" Icon="@Icons.Material.Filled.AppRegistration">Registration</MudNavLink>
+            <MudNavLink Href="/teams" Match="NavLinkMatch.All" Icon="@AppIcons.Teams">Teams</MudNavLink>
             <MudNavLink Href="/teams/printout" Icon="@Icons.Material.Filled.Print">Print out</MudNavLink>
             <MudNavLink Href="/teams/handout" Icon="@Icons.Material.Filled.Print">Handout</MudNavLink>
         </MudNavGroup>
-        <MudNavLink Href="/meeting-schedule/" Icon="@AppIcons.Scheduler">Schedule</MudNavLink>
-        <MudNavLink Href="/event-calendar" Icon="@Icons.Material.Filled.CalendarMonth">Event Calendar</MudNavLink>
-        <MudNavGroup Title="Team Building" Icon="@Icons.Material.Filled.GroupAdd" Expanded="true">
+
+        <MudNavGroup Title="Team Building" Icon="@Icons.Material.Filled.GroupAdd" Expanded="false">
             <MudNavLink Href="/students/event-ranking" Icon="@AppIcons.EventRank">Event Ranking</MudNavLink>
             <MudNavLink Href="/teams/assignment" Icon="@AppIcons.TeamAssignment">Team Assignment</MudNavLink>
         </MudNavGroup>
+
+        <MudNavGroup Title="Chapter Data" Icon="@Icons.Material.Filled.Storage" Expanded="false">
+            <MudNavLink Href="/students" Icon="@Icons.Material.Filled.People">Students</MudNavLink>
+            <MudNavLink Href="/events" Icon="@AppIcons.Events">Events</MudNavLink>
+        </MudNavGroup>
+
         <AuthorizeView Roles="Administrator">
             <MudDivider Class="my-2"/>
             <MudNavLink Href="/settings/chapter" Icon="@Icons.Material.Filled.School">Chapter Settings</MudNavLink>
-            <MudNavLink Href="/settings/validation" Icon="@Icons.Material.Filled.Settings">Validation Settings</MudNavLink>
+            <MudNavLink Href="/settings/validation" Icon="@Icons.Material.Filled.Tune">Validation Settings</MudNavLink>
         </AuthorizeView>
     </MudNavMenu>
 </MudPaper>