Merge pull request 'Generalised datetime picker into component for reuse' (#21) from products into master

Reviewed-on: #21

ShopAdmin/Components/ConsoleDatePicker.razor

@@ -0,0 +1,100 @@
+<div class="custom-date-trigger-box @(isCalendarOpen ? "focused" : "")" @onclick="ToggleCalendar">
+    <span>@Value.ToString("yyyy / MM / dd")</span>
+    <i class="bi bi-calendar3 calendar-icon"></i>
+</div>
+
+@if (isCalendarOpen)
+{
+    <div class="brand-calendar-popup">
+        <div class="calendar-nav-header">
+            <button type="button" class="btn-cal-nav" @onclick="NavigateMonthPrevious">&lt;</button>
+            <span class="calendar-current-month">@currentMonthDisplay.ToString("MMMM yyyy")</span>
+            <button type="button" class="btn-cal-nav" @onclick="NavigateMonthNext">&gt;</button>
+        </div>
+
+        <div class="calendar-days-grid-header">
+            <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
+        </div>
+
+        <div class="calendar-days-matrix">
+            @foreach (var day in paddingDays)
+            {
+                <div class="calendar-day-blank"></div>
+            }
+            @foreach (var day in currentMonthDays)
+            {
+                var loopDay = day;
+                <button type="button"
+                        class="calendar-day-btn @(IsToday(loopDay) ? "is-today" : "") @(IsSelected(loopDay) ? "is-selected" : "")"
+                        @onclick="() => SelectDate(loopDay)">
+                    @loopDay.Day
+                </button>
+            }
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter]
+    public DateTime Value { get; set; } = DateTime.Today;
+
+    [Parameter]
+    public EventCallback<DateTime> ValueChanged { get; set; }
+
+    private bool isCalendarOpen = false;
+    private DateTime currentMonthDisplay;
+    private List<DateTime> paddingDays = new();
+    private List<DateTime> currentMonthDays = new();
+
+    protected override void OnParametersSet()
+    {
+        if (currentMonthDisplay == DateTime.MinValue)
+        {
+            currentMonthDisplay = new DateTime(Value.Year, Value.Month, 1);
+            GenerateCalendarMatrix();
+        }
+    }
+
+    private void ToggleCalendar() => isCalendarOpen = !isCalendarOpen;
+
+    private async Task SelectDate(DateTime date)
+    {
+        Value = date;
+        isCalendarOpen = false;
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private void NavigateMonthPrevious()
+    {
+        currentMonthDisplay = currentMonthDisplay.AddMonths(-1);
+        GenerateCalendarMatrix();
+    }
+
+    private void NavigateMonthNext()
+    {
+        currentMonthDisplay = currentMonthDisplay.AddMonths(1);
+        GenerateCalendarMatrix();
+    }
+
+    private void GenerateCalendarMatrix()
+    {
+        currentMonthDays.Clear();
+        paddingDays.Clear();
+
+        int daysInMonth = DateTime.DaysInMonth(currentMonthDisplay.Year, currentMonthDisplay.Month);
+        DayOfWeek firstDayOfWeek = currentMonthDisplay.DayOfWeek;
+
+        for (int i = 0; i < (int)firstDayOfWeek; i++)
+        {
+            paddingDays.Add(DateTime.MinValue);
+        }
+
+        for (int day = 1; day <= daysInMonth; day++)
+        {
+            currentMonthDays.Add(new DateTime(currentMonthDisplay.Year, currentMonthDisplay.Month, day));
+        }
+    }
+
+    private bool IsToday(DateTime date) => date.Date == DateTime.Today;
+    private bool IsSelected(DateTime date) => date.Date == Value.Date;
+}

ShopAdmin/Components/ConsoleDatePicker.razor.css

@@ -0,0 +1,124 @@
+/* Custom Date Trigger and Box Engines only */
+.custom-date-trigger-box {
+    width: 100%;
+    box-sizing: border-box;
+    background: #060b13 !important;
+    border: 1px solid #1e293b !important;
+    border-radius: 4px;
+    padding: 0.85rem 1rem;
+    color: #f8fafc !important;
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+    .custom-date-trigger-box.focused {
+        border-color: #00f2fe !important;
+        box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.2), 0 0 12px rgba(0, 242, 254, 0.1) !important;
+        background: #02060d !important;
+    }
+
+.calendar-icon {
+    color: #64748b;
+    flex-shrink: 0;
+}
+
+/* Floating Overlay Window Panel Layout */
+.brand-calendar-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    width: 100% !important;
+    box-sizing: border-box;
+    padding: 1rem;
+    background-color: #0b0f19;
+    border: 1px solid #1e293b;
+    border-radius: 6px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
+    margin-top: 0.5rem;
+}
+
+.calendar-nav-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.calendar-current-month {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #f1f5f9;
+    font-family: monospace;
+}
+
+.btn-cal-nav {
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    font-size: 0.9rem;
+    cursor: pointer;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.1s;
+}
+
+    .btn-cal-nav:hover {
+        background-color: #1e293b;
+        color: #f8fafc;
+    }
+
+.calendar-days-grid-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #475569;
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+}
+
+.calendar-days-matrix {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+}
+
+.calendar-day-blank {
+    padding: 0.4rem 0;
+}
+
+.calendar-day-btn {
+    background: transparent;
+    border: none;
+    color: #cbd5e1;
+    font-size: 0.8rem;
+    padding: 0.4rem 0;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    font-family: monospace;
+    transition: all 0.1s ease;
+}
+
+    .calendar-day-btn:hover {
+        background-color: #1e293b;
+        color: #ffffff;
+    }
+
+    .calendar-day-btn.is-today {
+        color: #00f2fe;
+        font-weight: 700;
+    }
+
+    .calendar-day-btn.is-selected {
+        background-color: #0284c7 !important;
+        color: #ffffff !important;
+        font-weight: 700;
+    }

ShopAdmin/Components/CreateProduct.razor

@@ -42,10 +42,37 @@
                         <ValidationMessage For="@(() => ProductModel.Summary)" style="color: #ff5722; font-size: 0.75rem;" />
                     </div>
 
+                    <div class="console-field-row">
+                        <div class="console-field-group">
+                            <label class="console-field-label">Base Ledger Price (ZAR)</label>
+                            <InputNumber @bind-Value="ProductModel.Price" class="console-input" placeholder="0.00" />
+                            <ValidationMessage For="@(() => ProductModel.Price)" style="color: #ff5722; font-size: 0.75rem;" />
+                        </div>
+
+                        <div class="console-field-group">
+                            <label class="console-field-label">ISBN Reference</label>
+                            <InputText @bind-Value="ProductModel.Isbn" class="console-input" placeholder="e.g., 978-0393312836" />
+                            <ValidationMessage For="@(() => ProductModel.Isbn)" style="color: #ff5722; font-size: 0.75rem;" />
+                        </div>
+                    </div>
+
+                    <div class="console-field-row">
+                        <div class="console-field-group">
+                            <label class="console-field-label">Author / Creator</label>
+                            <InputText @bind-Value="ProductModel.Author" class="console-input" placeholder="e.g., William Gibson" />
+                            <ValidationMessage For="@(() => ProductModel.Author)" style="color: #ff5722; font-size: 0.75rem;" />
+                        </div>
+
+                        <div class="console-field-group">
+                            <label class="console-field-label">Date of Publication</label>
+                            <ConsoleDatePicker @bind-Value="ProductModel.PublishDate" />
+                        </div>
+                    </div>
+
                     <div class="console-field-group">
-                        <label class="console-field-label">Base Ledger Price (ZAR)</label>
-                        <InputNumber @bind-Value="ProductModel.Price" class="console-input" placeholder="0.00" />
-                        <ValidationMessage For="@(() => ProductModel.Price)" style="color: #ff5722; font-size: 0.75rem;" />
+                        <label class="console-field-label">Copyright Information</label>
+                        <InputText @bind-Value="ProductModel.CopyrightInfo" class="console-input" placeholder="e.g., © 1984 William Gibson. All rights reserved." />
+                        <ValidationMessage For="@(() => ProductModel.CopyrightInfo)" style="color: #ff5722; font-size: 0.75rem;" />
                     </div>
 
                     <div class="console-field-group">
@@ -69,7 +96,6 @@
 
                                 @if (string.IsNullOrEmpty(ProductModel.ImageUrl))
                                 {
-                                    /* Clicking anywhere inside this label launches the file system picker */
                                     <label for="main-image-file" class="dropzone-interactive-layer">
                                         <div class="empty-slot-blueprint">
                                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -120,7 +146,6 @@
                                         }
                                         else
                                         {
-                                            /* Clean hidden execution context matched back to label action surfaces */
                                             <InputFile OnChange="@(e => HandleThumbnailUpload(e, index))" accept=".png,.jpg,.jpeg,.webp" class="hidden-file-input" id="@($"thumb-file-{index}")" />
                                             <label for="@($"thumb-file-{index}")" class="empty-slot-blueprint">
                                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

ShopAdmin/Components/CreateProduct.razor.cs

@@ -1,12 +1,15 @@
 using LiteCharms.Features.S3.Abstractions;
-using Microsoft.AspNetCore.Components.Forms;
-using System.ComponentModel.DataAnnotations;
 using static LiteCharms.Features.S3.Constants;
 
 namespace ShopAdmin.Components;
 
 public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Service s3Service)
 {
+    private bool isCalendarOpen = false;
+    private DateTime calendarViewingMonth = DateTime.Today;
+    private List<DateTime?> calendarDays = new();
+    private string currentCalendarMonthYearText => calendarViewingMonth.ToString("MMMM yyyy");
+
     private readonly CancellationTokenSource cancellationTokenSource = new();
     private CancellationToken cancellationToken;
 
@@ -16,6 +19,8 @@ public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Se
 
     private const long MaxAllowedFileSize = 1024 * 1024 * 5;
 
+    private readonly Func<string, string> GetFileKeyFromUrl = url => url.Split('/').Last();
+
     protected override void OnInitialized()
     {
         base.OnInitialized();
@@ -26,34 +31,28 @@ public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Se
             ProductModel.Thumbnails = [.. Enumerable.Repeat(string.Empty, 5)];
     }
 
-    // Your saving logic goes here when the ledger button is clicked
     public Task HandleValidSubmit() => Task.CompletedTask;
 
-    // Checks if a valid URL asset exists at the specified position
-    public bool HasAssetAt(int index) => ProductModel?.Thumbnails == null || index >= ProductModel.Thumbnails.Count
-        ? false
-        : !string.IsNullOrWhiteSpace(ProductModel.Thumbnails[index]);
+    public bool HasAssetAt(int index) => (ProductModel?.Thumbnails) != null && index < ProductModel.Thumbnails.Count &&
+        !string.IsNullOrWhiteSpace(ProductModel.Thumbnails[index]);
 
-    // Handles uploading the primary image node
     private async Task HandleMainImageUpload(InputFileChangeEventArgs e)
     {
         try
         {
             var file = e.File;
-
             if (file == null) return;
 
             using var stream = new MemoryStream();
-
             await file.OpenReadStream(MaxAllowedFileSize).CopyToAsync(stream, cancellationToken);
+            stream.Seek(0, SeekOrigin.Begin);
 
-            var result = await s3Service.UploadFileAsync(file.Name,stream, 
+            var result = await s3Service.UploadFileAsync(file.Name, stream,
                 MimeTypes.GetMimeType(file.Name), cancellationToken);
 
             if (result.IsSuccess)
             {
                 ProductModel.ImageUrl = result.Value;
-
                 StateHasChanged();
             }
         }
@@ -65,11 +64,9 @@ public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Se
 
     public void SetPreviewActive(string? url)
     {
-        if (!string.IsNullOrWhiteSpace(url))
-        {
-            ActivePreviewUrl = url;
-            StateHasChanged();
-        }
+        if (string.IsNullOrWhiteSpace(url)) return;
+        ActivePreviewUrl = url;
+        StateHasChanged();
     }
 
     public void ClosePreviewDrawer()
@@ -78,26 +75,23 @@ public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Se
         StateHasChanged();
     }
 
-    // Handles uploading a thumbnail image into its specific slot index
     private async Task HandleThumbnailUpload(InputFileChangeEventArgs e, int index)
     {
         try
         {
             var file = e.File;
-
             if (file == null) return;
 
             using var stream = new MemoryStream();
-
             await file.OpenReadStream(MaxAllowedFileSize, cancellationToken).CopyToAsync(stream, cancellationToken);
+            stream.Seek(0, SeekOrigin.Begin);
 
-            var result = await s3Service.UploadFileAsync(file.Name, stream, 
+            var result = await s3Service.UploadFileAsync(file.Name, stream,
                 MimeTypes.GetMimeType(file.Name), cancellationToken);
 
             if (result.IsSuccess && index < ProductModel.Thumbnails.Count)
             {
                 ProductModel.Thumbnails[index] = result.Value;
-
                 StateHasChanged();
             }
         }
@@ -107,25 +101,89 @@ public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Se
         }
     }
 
-    public void ClearMainImage()
+    public async Task ClearMainImage()
     {
-        if (ActivePreviewUrl == ProductModel.ImageUrl)
-        {
-            ActivePreviewUrl = null;
-        }
+        if (string.IsNullOrEmpty(ProductModel.ImageUrl)) return;
+
+        var targetUrl = ProductModel.ImageUrl;
+        if (ActivePreviewUrl == targetUrl) ActivePreviewUrl = null;
+
         ProductModel.ImageUrl = null;
+        StateHasChanged();
+
+        var result = await s3Service.DeleteFileAsync(GetFileKeyFromUrl(targetUrl));
+
+        if (!result.IsSuccess)
+            Console.WriteLine($"[S3 Orphan Cleanup Failure]: {result.Errors[0].Message}");
     }
 
-    public void RemoveThumbnailAt(int index)
+    public async Task RemoveThumbnailAt(int index)
     {
-        if (index >= 0 && index < ProductModel.Thumbnails.Count)
+        if (index < 0 || index >= ProductModel.Thumbnails.Count) return;
+
+        var targetUrl = ProductModel.Thumbnails[index];
+        if (string.IsNullOrEmpty(targetUrl)) return;
+
+        if (ActivePreviewUrl == targetUrl) ActivePreviewUrl = null;
+
+        ProductModel.Thumbnails[index] = string.Empty;
+        StateHasChanged();
+
+        var result = await s3Service.DeleteFileAsync(GetFileKeyFromUrl(targetUrl));
+
+        if (result.IsFailed)
+            Console.WriteLine($"[S3 Thumbnail Cleanup Failure]: {result.Errors[0].Message}");
+    }
+
+    private void ToggleCalendar()
+    {
+        if (!isCalendarOpen)
         {
-            if (ActivePreviewUrl == ProductModel.Thumbnails[index])
-            {
-                ActivePreviewUrl = null;
-            }
-            ProductModel.Thumbnails[index] = string.Empty;
+            // Default viewport context to currently selected value or fallback to today
+            calendarViewingMonth = ProductModel.PublishDate;
+            RebuildCalendarMatrix();
         }
+        isCalendarOpen = !isCalendarOpen;
+    }
+
+    private void RebuildCalendarMatrix()
+    {
+        calendarDays.Clear();
+
+        var firstDayOfMonth = new DateTime(calendarViewingMonth.Year, calendarViewingMonth.Month, 1);
+        var totalDaysInMonth = DateTime.DaysInMonth(calendarViewingMonth.Year, calendarViewingMonth.Month);
+
+        // Offset leading days to align day positions correctly with day of week headers
+        int leadingOffsets = (int)firstDayOfMonth.DayOfWeek;
+        for (int i = 0; i < leadingOffsets; i++)
+        {
+            calendarDays.Add(null);
+        }
+
+        // Populate active dates
+        for (int day = 1; day <= totalDaysInMonth; day++)
+        {
+            calendarDays.Add(new DateTime(calendarViewingMonth.Year, calendarViewingMonth.Month, day));
+        }
+    }
+
+    private void NavigateToPreviousMonth()
+    {
+        calendarViewingMonth = calendarViewingMonth.AddMonths(-1);
+        RebuildCalendarMatrix();
+    }
+
+    private void NavigateToNextMonth()
+    {
+        calendarViewingMonth = calendarViewingMonth.AddMonths(1);
+        RebuildCalendarMatrix();
+    }
+
+    private void SelectCalendarDate(DateTime date)
+    {
+        ProductModel.PublishDate = date;
+        isCalendarOpen = false; // Collapse popup smoothly on successful selection
+        StateHasChanged();
     }
 }
 
@@ -143,6 +201,19 @@ public class CreateProductModel
     [Range(0.01, double.MaxValue, ErrorMessage = "Price must be greater than zero.")]
     public decimal Price { get; set; }
 
+    [Required(ErrorMessage = "Author metadata is required.")]
+    public string? Author { get; set; }
+
+    [Required(ErrorMessage = "Publication Date is required.")]
+    public DateTime PublishDate { get; set; } = DateTime.Today;
+
+    [Required(ErrorMessage = "Copyright Information field is required.")]
+    public string? CopyrightInfo { get; set; }
+
+    [Required(ErrorMessage = "ISBN code is required.")]
+    [RegularExpression(@"^(?=(?:\D*\d){10}(?:(?:\D*\d){3})?$)[\d-]+$", ErrorMessage = "Please enter a valid ISBN-10 or ISBN-13 string.")]
+    public string? Isbn { get; set; }
+
     [Required(ErrorMessage = "Primary image is required.")]
     public string? ImageUrl { get; set; }
 

ShopAdmin/Components/CreateProduct.razor.css

@@ -59,7 +59,7 @@
     flex-direction: column;
     gap: 1.5rem;
     width: 100%;
-    margin-bottom: 3rem; /* Generates clear space before the media controls block */
+    margin-bottom: 3rem;
 }
 
 .form-media-deck-section {
@@ -69,7 +69,6 @@
     width: 100%;
 }
 
-/* Horizontal alignment grid for cover upload & thumbnail array side-by-side */
 .media-deck-row {
     display: grid;
     grid-template-columns: 240px 1fr;
@@ -79,10 +78,12 @@
 }
 
 .console-field-group {
+    position: relative; /* Clamps absolute children to this specific slot's bounds */
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
     width: 100%;
+    margin-bottom: 1.5rem;
 }
 
 .console-field-label {
@@ -93,25 +94,53 @@
     text-transform: uppercase;
 }
 
+/* Handles responsive multi-column layout split blocks for form metrics */
+.console-field-row {
+    display: flex;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+    .console-field-row .console-field-group {
+        flex: 1;
+        min-width: 0;
+    }
+
+@media (max-width: 768px) {
+    .console-field-row {
+        flex-direction: column;
+        gap: 0;
+    }
+}
+
 /* ==========================================================================
-   Input Form Elements
+   Input Form Elements & Custom Date Trigger Matching
    ========================================================================== */
 ::deep .console-input,
-::deep .console-textarea {
+::deep .console-textarea,
+.custom-date-trigger-box {
     width: 100%;
     box-sizing: border-box;
     background: #060b13 !important;
     border: 1px solid #1e293b !important;
     border-radius: 4px;
-    padding: 0.85rem 1rem;
+    padding: 0.85rem 1rem; /* Matched exactly to snap row heights in line */
     color: #f8fafc !important;
     font-size: 0.9rem;
     outline: none;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.custom-date-trigger-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
     ::deep .console-input:focus,
-    ::deep .console-textarea:focus {
+    ::deep .console-textarea:focus,
+    .custom-date-trigger-box.focused {
         border-color: #00f2fe !important;
         box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.2), 0 0 12px rgba(0, 242, 254, 0.1) !important;
         background: #02060d !important;
@@ -122,23 +151,114 @@
     line-height: 1.5;
 }
 
+.calendar-icon {
+    color: #64748b;
+    flex-shrink: 0;
+}
+
+/* ==========================================================================
+   Deep Isolated Custom Popup Window
+   ========================================================================== */
+::deep .brand-calendar-popup,
+.brand-calendar-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    width: 100% !important; /* Force complete row span constraint */
+    box-sizing: border-box;
+    padding: 1rem;
+    background-color: #0b0f19;
+    border: 1px solid #1e293b;
+    border-radius: 6px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
+}
+
+.calendar-nav-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.calendar-current-month {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #f1f5f9;
+    font-family: monospace;
+}
+
+.btn-cal-nav {
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    font-size: 0.9rem;
+    cursor: pointer;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.1s;
+}
+
+    .btn-cal-nav:hover {
+        background-color: #1e293b;
+        color: #f8fafc;
+    }
+
+.calendar-days-grid-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #475569;
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+}
+
+.calendar-days-matrix {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+}
+
+.calendar-day-btn {
+    background: transparent;
+    border: none;
+    color: #cbd5e1;
+    font-size: 0.8rem;
+    padding: 0.4rem 0;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    font-family: monospace;
+    transition: all 0.1s ease;
+}
+
+    .calendar-day-btn:hover {
+        background-color: #1e293b;
+        color: #ffffff;
+    }
+
+    .calendar-day-btn.is-today {
+        color: #00f2fe; /* Aligned with your brand's primary neon cyan glow */
+        font-weight: 700;
+    }
+
+    .calendar-day-btn.is-selected {
+        background-color: #0284c7 !important;
+        color: #ffffff !important;
+        font-weight: 700;
+    }
+
 /* ==========================================================================
    Image Slots & Cloud Upload Dropzones
    ========================================================================== */
 ::deep .hidden-file-input,
 .hidden-file-input {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 0 !important;
-    height: 0 !important;
-    opacity: 0 !important;
-    overflow: hidden !important;
+    display: none !important;
     pointer-events: none !important;
-    display: none !important; /* Forces layout removal */
 }
 
-/* Book Cover - Enforced Portrait Display Frame Aspect Ratio */
 .book-cover-dropzone {
     width: 240px;
     aspect-ratio: 2 / 3;
@@ -169,7 +289,6 @@
     user-select: none;
 }
 
-/* Thumbnails Grid */
 .thumbnail-deck-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
@@ -178,7 +297,7 @@
 }
 
 .thumbnail-slot-node {
-    aspect-ratio: 2 / 3; /* Matches portrait layout format smoothly */
+    aspect-ratio: 2 / 3;
     background: #060b13;
     border: 1px solid #1e293b;
     border-radius: 4px;
@@ -231,7 +350,6 @@
     transition: opacity 0.2s ease;
 }
 
-/* Show floating control node buttons cleanly on hover state */
 .book-cover-dropzone:hover .image-actions-overlay,
 .thumbnail-slot-node:hover .image-actions-overlay {
     opacity: 1;
@@ -306,7 +424,6 @@
         object-fit: cover;
     }
 
-/* Floating Close Action Icon sitting directly on top inside the drawer viewport frame */
 .btn-close-preview-floating {
     position: absolute;
     top: 12px;
@@ -332,7 +449,7 @@
 
 /* ==========================================================================
    Footer Action Dashboard Bar
-   ========================================================================= */
+   ========================================================================== */
 .form-action-footer {
     padding: 0.85rem 2.5rem;
     background: #04080f;

ShopAdmin/ShopAdmin.csproj

@@ -16,7 +16,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.39.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.40.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="10.0.8" />
     <PackageReference Include="Polly" Version="8.6.6" />
   </ItemGroup>
@@ -59,6 +59,8 @@
   <!-- Shared Global Usings -->
   <ItemGroup>
     <Using Include="MimeKit" />
+    <Using Include="System.ComponentModel.DataAnnotations" />
+    <Using Include="Microsoft.AspNetCore.Components.Forms" />
     <Using Include="Microsoft.AspNetCore.Components.QuickGrid" />
     <Using Include="Microsoft.AspNetCore.HttpOverrides" />
     <Using Include="Microsoft.AspNetCore.Authentication" />