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.

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

WebApp/Components/Pages/Home.razor

@@ -26,57 +26,153 @@
     </div>
 </MudPaper>
 
-<MudPaper Elevation="0" Class="mb-6">
+@if (!_hasStudents)
-<MudText Typo="Typo.h4" Class="mb-2">Data</MudText>
+{
-</MudPaper>
+    <!-- Getting Started: No students yet -->
-<MudGrid>
+    <MudPaper Elevation="0" Class="mb-4">
-    <!-- Events Card -->
+        <MudText Typo="Typo.h4" Color="Color.Primary">Getting Started</MudText>
-    <DashboardCard Icon="@AppIcons.Events"
+        <MudText Typo="Typo.body2" Color="Color.Secondary">Add your chapter's students to begin</MudText>
-                   Title="Events"
+    </MudPaper>
-                   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>
-
     <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();

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))

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">
+        <MudNavGroup Title="Scheduling" Icon="@Icons.Material.Filled.CalendarMonth" Expanded="true">
-            <MudNavLink Href="/teams" Match="NavLinkMatch.All"  Icon="@AppIcons.Teams">Teams</MudNavLink>
+            <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="false">
-        <MudNavGroup Title="Team Building" Icon="@Icons.Material.Filled.GroupAdd" Expanded="true">
             <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>