From bfaebfbb138f9d9dbc5013fe3fcbced08431a524 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Mon, 1 Dec 2025 00:03:25 -0500
Subject: [PATCH] Fix up CRUD pages a bit.

---
 .../Pages/EventDefinitionPages/Create.razor   |  14 +-
 .../Pages/EventDefinitionPages/Details.razor  | 136 +++++++++++-------
 .../Pages/EventDefinitionPages/Edit.razor     |  12 +-
 .../Pages/StudentPages/Details.razor          |  98 ++++++++-----
 WebApp/Components/Pages/TeamPages/Index.razor |   1 -
 5 files changed, 152 insertions(+), 109 deletions(-)

diff --git a/WebApp/Components/Pages/EventDefinitionPages/Create.razor b/WebApp/Components/Pages/EventDefinitionPages/Create.razor
index 8e47749..cf74e2a 100644
--- a/WebApp/Components/Pages/EventDefinitionPages/Create.razor
+++ b/WebApp/Components/Pages/EventDefinitionPages/Create.razor
@@ -17,18 +17,16 @@
             <MudPaper Class="pa-4">
                 <MudTextField T="string" Label="Event Name" @bind-Value="EventDefinition.Name" For="@(() => EventDefinition.Name)"></MudTextField>
                 <MudTextField T="string" Label="Short Name" @bind-Value="EventDefinition.ShortName" For="@(() => EventDefinition.ShortName)"></MudTextField>
-                
-                <label for="@EventDefinition.EventFormat" class="form-label">Format:</label>
-                <MudRadioGroup T="EventFormat" @bind-Value="@EventDefinition.EventFormat">
-                    @* <MudRadio T="EventFormat" Value="EventFormat.Team">Team</MudRadio>
-                    <MudRadio T="EventFormat" Value="EventFormat.Individual">Individual</MudRadio> *@
+
+                <MudText Typo="Typo.subtitle2" Class="mt-4 mb-2">Format</MudText>
+                <MudRadioGroup T="EventFormat" @bind-Value="@EventDefinition.EventFormat" For="@(() => EventDefinition.EventFormat)">
                     @foreach (EventFormat format in Enum.GetValues(typeof(EventFormat)))
                     {
-                        <MudRadio T="EventFormat" value="@format">@(format.ToString())</MudRadio>
+                        <MudRadio T="EventFormat" Value="@format">@format.ToString()</MudRadio>
                     }
                 </MudRadioGroup>
-                <ValidationMessage For="() => EventDefinition.EventFormat" class="text-danger" />
-                <MudTextField T="string" Label="Theme" AutoGrow="true" @bind-Value="EventDefinition.Description" For="@(() => EventDefinition.Description)"></MudTextField>
+
+                <MudTextField T="string" Label="Description" AutoGrow="true" @bind-Value="EventDefinition.Description" For="@(() => EventDefinition.Description)" Class="mt-4"></MudTextField>
                 <MudTextField T="string" Label="Theme" AutoGrow="true" @bind-Value="EventDefinition.Theme" For="@(() => EventDefinition.Theme)"></MudTextField>
                 <MudTextField T="string" Label="Documentation" @bind-Value="EventDefinition.Documentation" For="@(() => EventDefinition.Documentation)"></MudTextField>
                 <MudNumericField T="int?" Label="Level of Effort" @bind-Value="EventDefinition.LevelOfEffort" For="@(() => EventDefinition.LevelOfEffort)"></MudNumericField>
diff --git a/WebApp/Components/Pages/EventDefinitionPages/Details.razor b/WebApp/Components/Pages/EventDefinitionPages/Details.razor
index 1f10461..b90fb1f 100644
--- a/WebApp/Components/Pages/EventDefinitionPages/Details.razor
+++ b/WebApp/Components/Pages/EventDefinitionPages/Details.razor
@@ -1,65 +1,91 @@
-@page "/events/details"
+@page "/events/details"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @inject AppDbContext context
 @inject NavigationManager NavigationManager
 
-<PageTitle>Details</PageTitle>
+<PageTitle>Event Details - TSA Chapter Organizer</PageTitle>
 
-<h1>Details</h1>
+<MudText Typo="Typo.h3">Details</MudText>
+<MudText Typo="Typo.h4">Event Definition</MudText>
+<MudDivider />
 
-<div>
-    <h2>EventDefinition</h2>
-    <hr />
-    @if (eventdefinition is null)
-    {
-        <p><em>Loading...</em></p>
-    }
-    else {
-        <dl class="row">
-            <dt class="col-sm-2">Name</dt>
-            <dd class="col-sm-10">@eventdefinition.Name</dd>
-            <dt class="col-sm-2">ShortName</dt>
-            <dd class="col-sm-10">@eventdefinition.ShortName</dd>
-            <dt class="col-sm-2">EventFormat</dt>
-            <dd class="col-sm-10">@eventdefinition.EventFormat</dd>
-            <dt class="col-sm-2">MinTeamSize</dt>
-            <dd class="col-sm-10">@eventdefinition.MinTeamSize</dd>
-            <dt class="col-sm-2">MaxTeamSize</dt>
-            <dd class="col-sm-10">@eventdefinition.MaxTeamSize</dd>
-            <dt class="col-sm-2">SemifinalistActivity</dt>
-            <dd class="col-sm-10">@eventdefinition.SemifinalistActivity</dd>
-            <dt class="col-sm-2">Notes</dt>
-            <dd class="col-sm-10">@eventdefinition.Notes</dd>
-            <dt class="col-sm-2">ChapterEligibilityCountState</dt>
-            <dd class="col-sm-10">@eventdefinition.ChapterEligibilityCountState</dd>
-            <dt class="col-sm-2">RegionalEvent</dt>
-            <dd class="col-sm-10">@eventdefinition.RegionalEvent</dd>
-            <dt class="col-sm-2">RegionalPresubmit</dt>
-            @* <dd class="col-sm-10">@eventdefinition.RegionalPresubmit</dd> *@
-            <dt class="col-sm-2">Presubmission</dt>
-            <dd class="col-sm-10">@eventdefinition.Presubmission</dd>
-            <dt class="col-sm-2">StatePretesting</dt>
-            @* <dd class="col-sm-10">@eventdefinition.StatePretesting</dd> *@
-            <dt class="col-sm-2">StatePreliminaryRound</dt>
-            @* <dd class="col-sm-10">@eventdefinition.StatePreliminaryRound</dd> *@
-            <dt class="col-sm-2">Documentation</dt>
-            <dd class="col-sm-10">@eventdefinition.Documentation</dd>
-            <dt class="col-sm-2">Eligibility</dt>
-            <dd class="col-sm-10">@eventdefinition.Eligibility</dd>
-            <dt class="col-sm-2">Theme</dt>
-            <dd class="col-sm-10">@eventdefinition.Theme</dd>
-            <dt class="col-sm-2">Description</dt>
-            <dd class="col-sm-10">@eventdefinition.Description</dd>
-            <dt class="col-sm-2">LevelOfEffort</dt>
-            <dd class="col-sm-10">@eventdefinition.LevelOfEffort</dd>
-        </dl>
-        <div>
-            <a href="@($"/eventdefinitions/edit?id={eventdefinition.Id}")">Edit</a> |
-            <a href="@($"/events")">Back to List</a>
-        </div>
-    }
-</div>
+@if (eventdefinition is null)
+{
+    <MudText><em>Loading...</em></MudText>
+}
+else
+{
+    <MudPaper Class="pa-4 mt-4">
+        <MudGrid>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Name</MudText>
+                <MudText>@eventdefinition.Name</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Short Name</MudText>
+                <MudText>@eventdefinition.ShortName</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Event Format</MudText>
+                <MudText>@eventdefinition.EventFormat</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Min Team Size</MudText>
+                <MudText>@eventdefinition.MinTeamSize</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Max Team Size</MudText>
+                <MudText>@eventdefinition.MaxTeamSize</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Chapter Eligibility Count (State)</MudText>
+                <MudText>@eventdefinition.ChapterEligibilityCountState</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Regional Event</MudText>
+                <MudText>@eventdefinition.RegionalEvent</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Presubmission Required</MudText>
+                <MudText>@eventdefinition.Presubmission</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Level of Effort</MudText>
+                <MudText>@eventdefinition.LevelOfEffort</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Semifinalist Activity</MudText>
+                <MudText>@eventdefinition.SemifinalistActivity</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Notes</MudText>
+                <MudText>@eventdefinition.Notes</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Documentation</MudText>
+                <MudText>@eventdefinition.Documentation</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Eligibility</MudText>
+                <MudText>@eventdefinition.Eligibility</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Theme</MudText>
+                <MudText>@eventdefinition.Theme</MudText>
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2">Description</MudText>
+                <MudText>@eventdefinition.Description</MudText>
+            </MudItem>
+        </MudGrid>
+    </MudPaper>
+
+    <div class="mt-4">
+        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="/events" Variant="Variant.Text">Back to List</MudButton>
+    </div>
+}
 
 @code {
     private EventDefinition? eventdefinition;
diff --git a/WebApp/Components/Pages/EventDefinitionPages/Edit.razor b/WebApp/Components/Pages/EventDefinitionPages/Edit.razor
index df0b9ed..437a77e 100644
--- a/WebApp/Components/Pages/EventDefinitionPages/Edit.razor
+++ b/WebApp/Components/Pages/EventDefinitionPages/Edit.razor
@@ -19,17 +19,15 @@
                 <MudTextField T="string" Label="Event Name" @bind-Value="EventDefinition.Name" For="@(() => EventDefinition.Name)"></MudTextField>
                 <MudTextField T="string" Label="Short Name" @bind-Value="EventDefinition.ShortName" For="@(() => EventDefinition.ShortName)"></MudTextField>
 
-                <label for="@EventDefinition.EventFormat" class="form-label">Format:</label>
-                <MudRadioGroup T="EventFormat" @bind-Value="@EventDefinition.EventFormat">
-                    @* <MudRadio T="EventFormat" Value="EventFormat.Team">Team</MudRadio>
-                    <MudRadio T="EventFormat" Value="EventFormat.Individual">Individual</MudRadio> *@
+                <MudText Typo="Typo.subtitle2" Class="mt-4 mb-2">Format</MudText>
+                <MudRadioGroup T="EventFormat" @bind-Value="@EventDefinition.EventFormat" For="@(() => EventDefinition.EventFormat)">
                     @foreach (EventFormat format in Enum.GetValues(typeof(EventFormat)))
                     {
-                        <MudRadio T="EventFormat" value="@format">@(format.ToString())</MudRadio>
+                        <MudRadio T="EventFormat" Value="@format">@format.ToString()</MudRadio>
                     }
                 </MudRadioGroup>
-                <ValidationMessage For="() => EventDefinition.EventFormat" class="text-danger" />
-                <MudTextField T="string" Label="Theme" AutoGrow="true" @bind-Value="EventDefinition.Description" For="@(() => EventDefinition.Description)"></MudTextField>
+
+                <MudTextField T="string" Label="Description" AutoGrow="true" @bind-Value="EventDefinition.Description" For="@(() => EventDefinition.Description)" Class="mt-4"></MudTextField>
                 <MudTextField T="string" Label="Theme" AutoGrow="true" @bind-Value="EventDefinition.Theme" For="@(() => EventDefinition.Theme)"></MudTextField>
                 <MudTextField T="string" Label="Documentation" @bind-Value="EventDefinition.Documentation" For="@(() => EventDefinition.Documentation)"></MudTextField>
                 <MudNumericField T="int?" Label="Level of Effort" @bind-Value="EventDefinition.LevelOfEffort" For="@(() => EventDefinition.LevelOfEffort)"></MudNumericField>
diff --git a/WebApp/Components/Pages/StudentPages/Details.razor b/WebApp/Components/Pages/StudentPages/Details.razor
index c39d84d..1c4bc0a 100644
--- a/WebApp/Components/Pages/StudentPages/Details.razor
+++ b/WebApp/Components/Pages/StudentPages/Details.razor
@@ -1,4 +1,4 @@
-@page "/students/details"
+@page "/students/details"
 @attribute [Authorize]
 @using Microsoft.EntityFrameworkCore
 @using Core.Entities
@@ -8,44 +8,66 @@
 
 <PageTitle>Student Details - TSA Chapter Organizer</PageTitle>
 
-<h1>Details</h1>
+<MudText Typo="Typo.h3">Details</MudText>
+<MudText Typo="Typo.h4">Student</MudText>
+<MudDivider />
 
-<div>
-    <h2>Student</h2>
-    <hr />
-    @if (student is null)
-    {
-        <p><em>Loading...</em></p>
-    }
-    else {
-        <dl class="row">
-            <dt class="col-sm-2">FirstName</dt>
-            <dd class="col-sm-10">@student.FirstName</dd>
-            <dt class="col-sm-2">LastName</dt>
-            <dd class="col-sm-10">@student.LastName</dd>
-            <dt class="col-sm-2">Grade</dt>
-            <dd class="col-sm-10">@student.Grade</dd>
-            <dt class="col-sm-2">Email</dt>
-            <dd class="col-sm-10">@student.Email</dd>
-            <dt class="col-sm-2">PhoneNumber</dt>
-            <dd class="col-sm-10">@student.PhoneNumber</dd>
-            <dt class="col-sm-2">TsaYear</dt>
-            <dd class="col-sm-10">@student.TsaYear</dd>
-            <dt class="col-sm-2">StateId</dt>
-            <dd class="col-sm-10">@student.StateId</dd>
-            <dt class="col-sm-2">RegionalId</dt>
-            <dd class="col-sm-10">@student.RegionalId</dd>
-            <dt class="col-sm-2">NationalId</dt>
-            <dd class="col-sm-10">@student.NationalId</dd>
-            <dt class="col-sm-2">OfficerRole</dt>
-            <dd class="col-sm-10">@student.OfficerRole</dd>
-        </dl>
-        <div>
-            <a href="@($"/students/edit?id={student.Id}")">Edit</a> |
-            <a href="@($"/students")">Back to List</a>
-        </div>
-    }
-</div>
+@if (student is null)
+{
+    <MudText><em>Loading...</em></MudText>
+}
+else
+{
+    <MudPaper Class="pa-4 mt-4">
+        <MudGrid>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">First Name</MudText>
+                <MudText>@student.FirstName</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Last Name</MudText>
+                <MudText>@student.LastName</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Grade</MudText>
+                <MudText>@student.Grade</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Email</MudText>
+                <MudText>@student.Email</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Phone Number</MudText>
+                <MudText>@student.PhoneNumber</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">TSA Year</MudText>
+                <MudText>@student.TsaYear</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">State ID</MudText>
+                <MudText>@student.StateId</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Regional ID</MudText>
+                <MudText>@student.RegionalId</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">National ID</MudText>
+                <MudText>@student.NationalId</MudText>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="4">
+                <MudText Typo="Typo.subtitle2">Officer Role</MudText>
+                <MudText>@student.OfficerRole</MudText>
+            </MudItem>
+        </MudGrid>
+    </MudPaper>
+
+    <div class="mt-4">
+        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}")" Variant="Variant.Filled" Color="Color.Primary">Edit</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="/students" Variant="Variant.Text">Back to List</MudButton>
+    </div>
+}
 
 @code {
     private Student? student;
diff --git a/WebApp/Components/Pages/TeamPages/Index.razor b/WebApp/Components/Pages/TeamPages/Index.razor
index 73c836b..2bc3444 100644
--- a/WebApp/Components/Pages/TeamPages/Index.razor
+++ b/WebApp/Components/Pages/TeamPages/Index.razor
@@ -34,7 +34,6 @@
         <TemplateColumn>
             <CellTemplate>
                 <CrudActions
-                    DetailsHref="@($"/teams/details?id={context.Item!.Id}")"
                     EditHref="@($"/teams/edit?id={context.Item!.Id}")"
                     DeleteOnClick="() => DeleteTeam(context.Item!)">
                 </CrudActions>