Merge pull request 'mock-data' (#29) from mock-data into main

Reviewed-on: #29

MidrandBookshop/Components/BookCard.razor

@@ -1,26 +1,64 @@
-<div class="col-12 col-md-6 col-lg-4 mb-4">
-    <div class="card border-0 h-100 p-4 position-relative" style="background-color: #F1F1F1; border-radius: var(--mb-radius);">
+<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
+    <div class="d-flex flex-column h-100 justify-content-between">
+
+        <div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
+             style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
+             @onclick="OnCardClick">
+
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                @if (IsNew)
+                {
+                    <span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
+                }
+                else
+                {
+                    <div></div>
+                }
+                <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
+                        <line x1="7" y1="17" x2="17" y2="7" />
+                        <polyline points="7,7 17,7 17,17" />
+                    </svg>
+                </button>
+            </div>
+
+            <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
+                @if (!string.IsNullOrWhiteSpace(BookImageUrl))
+                {
+                    <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+                }
+                else
+                {
+                    <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
+                         style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
+                        <div style="max-width: 100%; overflow: hidden; word-break: break-word;">
+                            @Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
+                        </div>
+                    </div>
+                }
+            </div>
 
-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <span class="badge rounded-pill px-3 py-2" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
-            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
-                <i data-lucide="arrow-up-right" style="width: 16px; height: 16px; color: var(--mb-text-dark);"></i>
-            </button>
         </div>
 
-        <div class="d-flex justify-content-center align-items-center flex-grow-1 my-3" style="min-height: 260px;">
-            <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+        <div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
+            <div style="max-width: 72%;">
+                <span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
+                <span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
+            </div>
+            <span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
         </div>
 
     </div>
-    <div class="d-flex justify-content-between align-items-center mt-3 px-2">
-        <span class="fw-medium text-dark" style="font-size: 0.9rem;">@Title</span>
-        <span class="text-muted fw-semibold" style="font-size: 0.9rem;">$@Price</span>
-    </div>
 </div>
 
 @code {
-    [Parameter] public string Title { get; set; } = "";
+    [Parameter] public long Id { get; set; }
+    [Parameter] public string Title { get; set; } = string.Empty;
+    [Parameter] public string Author { get; set; } = string.Empty;
     [Parameter] public decimal Price { get; set; }
-    [Parameter] public string BookImageUrl { get; set; } = "";
+    [Parameter] public string Category { get; set; } = string.Empty;
+    [Parameter] public bool IsNew { get; set; }
+    [Parameter] public string BookImageUrl { get; set; } = string.Empty;
+
+    [Parameter] public EventCallback OnCardClick { get; set; }
 }

MidrandBookshop/Components/Pages/Home.razor

@@ -1,6 +1,5 @@
 @page "/"
 @rendermode InteractiveServer
-@inject NavigationManager Navigation
 
 <div id="top-target" class="container text-center text-hero-wrapper">
     <h1 class="display-3 text-dark mb-3 px-2 master-headline">
@@ -12,123 +11,133 @@
 </div>
 
 <div class="container mb-5 px-md-5">
-    <div class="row align-items-center justify-content-between pb-3 g-3">
 
+    @if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
+    {
+        <div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
+            <div class="d-flex align-items-center gap-2">
+                <span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
+                <span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
+            </div>
+            <button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
+        </div>
+    }
+
+    <div class="row align-items-center justify-content-between pb-3 g-3">
         <div class="col-12 col-md-8">
             <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
-                @foreach (var category in MainCategories)
+                @if (!AuthorId.HasValue)
                 {
-                    var catName = category;
-                    <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                        @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                            @onclick="() => SelectCategory(catName)">
-                        @catName
+                    @foreach (var category in MainCategories)
+                    {
+                        var catName = category;
+                        <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
+                            @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
+                                @onclick="() => SelectCategory(catName)">
+                            @catName
+                        </button>
+                    }
+
+                    @if (DynamicExtendedCategories.Count > 0)
+                    {
+                        <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
+                                @onclick="ToggleExtraCategories">
+                            <span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
+                            <svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
+                        </button>
+                    }
+                }
+                else
+                {
+                    <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
+                        &larr; Return to Catalog Index
                     </button>
                 }
-
-                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
-                        @onclick="ToggleExtraCategories">
-                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
             </div>
         </div>
 
         <div class="col-12 col-md-4">
-            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">
-
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
-                        style="height: 32px; font-size: 0.8rem;"
+            <div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
+                <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
                         @onclick="ToggleFilterMenu">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-                    </svg>
-                    <span>Filter & Sort</span>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
+                    <span>Refine Curation</span>
                 </button>
 
-                <div class="d-flex align-items-center bg-light p-1 rounded-pill border border-light-subtle" style="height: 32px;">
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.Grid ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px;"
-                            @onclick="() => SetViewMode(ViewMode.Grid)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
+                <div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
                     </button>
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.List ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px; margin-left: 2px;"
-                            @onclick="() => SetViewMode(ViewMode.List)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
                     </button>
                 </div>
-
             </div>
         </div>
     </div>
 
-    @if (ShowExpandedCategories)
+    @if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
     {
-        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
-            @foreach (var category in DynamicExtendedCategories)
-            {
-                var catName = category;
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                    @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                        @onclick="() => SelectCategory(catName)">
-                    @catName
-                </button>
-            }
+        <div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
+            <h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
+            <div class="d-flex flex-wrap gap-2">
+                @foreach (var subCategory in DynamicExtendedCategories)
+                {
+                    var subName = subCategory;
+                    <button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
+                        @(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
+                            style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
+                        #@subName
+                    </button>
+                }
+            </div>
         </div>
     }
 
     @if (ShowFilterMenu)
     {
-        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
-            <div class="row g-4">
+        <div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
+            <div class="row g-4 text-start">
                 <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
-                    </div>
+                    <label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
+                    <select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
+                        <option value="default">Release Timeline</option>
+                        <option value="price-low">Value: Low to High</option>
+                        <option value="price-high">Value: High to Low</option>
+                        <option value="title-asc">Alphabetical Order</option>
+                    </select>
                 </div>
                 <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
+                    <label class="form-label small fw-semibold text-dark">Price Thresholds</label>
+                    <div class="d-flex flex-wrap gap-2">
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
                     </div>
                 </div>
-                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
-                    <div class="form-check form-switch pt-1 ms-1">
-                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
-                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
+                <div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
+                    <div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
+                        <input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
+                        <label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
                     </div>
-                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
                 </div>
             </div>
+            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
+                <button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
+                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
+            </div>
         </div>
     }
 
-    <div class="position-relative w-100 custom-milled-line">
-        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
-        <div class="position-absolute w-100 core-horizontal-rule"></div>
-    </div>
-</div>
-
-<div class="container px-md-5 pb-5">
-
     @if (!PaginatedBooks.Any())
     {
-        <div class="text-center text-muted py-5">
-            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
+        <div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
+            <svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
+            <p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
+            <span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
         </div>
     }
     else if (CurrentViewMode == ViewMode.Grid)
@@ -136,59 +145,36 @@
         <div class="row g-4 animate-fade-in">
             @foreach (var book in PaginatedBooks)
             {
-                <div class="col-12 col-md-6 col-lg-4">
-                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
-                         style="cursor: pointer;"
-                         @onclick="() => NavigateToProduct(book.Id)">
-                        <div class="d-flex justify-content-between align-items-center">
-                            @if (book.IsNew)
-                            {
-                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
-                            }
-                            else
-                            {
-                                <div></div>
-                            }
-                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
-                            </button>
-                        </div>
-                        <div class="d-flex justify-content-center align-items-center my-auto py-3">
-                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
-                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
-                        <div>
-                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
-                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
-                        </div>
-                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
-                    </div>
-                </div>
+                <BookCard Id="@book.Id"
+                          Title="@book.Name"
+                          Author="@(ActiveAuthorFilterName ?? "Multiple Authors")"
+                          Price="@ProductPriceCache[book.Id]"
+                          Category="@ProductPrimaryCategoryCache[book.Id]"
+                          IsNew="@book.Enabled"
+                          BookImageUrl="@book.ImageUrl"
+                          OnCardClick="() => NavigateToProduct(book.Id)" />
             }
         </div>
     }
-    else
+    else if (CurrentViewMode == ViewMode.List)
     {
-        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
+        <div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
             @foreach (var book in PaginatedBooks)
             {
                 <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
                      style="cursor: pointer;"
                      @onclick="() => NavigateToProduct(book.Id)">
                     <div class="d-flex align-items-center gap-4 structural-list-left">
-                        <span class="text-dark fw-medium list-item-title">@book.Title</span>
-                        <span class="text-muted small list-item-author">by @book.Author</span>
-                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
+                        <span class="text-dark fw-medium list-item-title">@book.Name</span>
+                        <span class="text-muted small list-item-author">by @(ActiveAuthorFilterName ?? "Multiple Authors")</span>
+                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
                     </div>
                     <div class="d-flex align-items-center gap-4">
-                        @if (book.IsNew)
+                        @if (book.Enabled)
                         {
                             <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
                         }
-                        <span class="text-dark font-monospace fw-medium list-item-price">R @book.Price.ToString("N0")</span>
+                        <span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
                         <button class="btn btn-link text-dark p-1">
                             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                         </button>
@@ -211,139 +197,6 @@
 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
    aria-label="Back to top"
    href="#top-target"
-   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="12" y1="19" x2="12" y2="5"></line>
-        <polyline points="5 12 12 5 19 12"></polyline>
-    </svg>
-</a>
-
-@code {
-    public enum ViewMode { Grid, List }
-    private ViewMode CurrentViewMode = ViewMode.Grid;
-
-    [CascadingParameter]
-    public string SharedSearchQuery { get; set; } = string.Empty;
-
-    private string ActiveCategory = "All";
-    private bool ShowExpandedCategories = false;
-    private bool ShowFilterMenu = false;
-
-    private string SelectedSortOption = "default";
-    private string ActivePriceFilter = "all";
-    private bool OnlyShowNew = false;
-
-    private List<string> MainCategories = new() { "All", "Graphic Design", "Product Design", "Architecture" };
-    private List<string> DynamicExtendedCategories = new();
-
-    private int ItemsPerPage = 12;
-    private int VisibleCount = 12;
-
-    public class BookItem
-    {
-        public long Id { get; set; } // Refactored to hold unique record indices of type long
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public decimal Price { get; set; }
-        public string Category { get; set; } = string.Empty;
-        public bool IsNew { get; set; }
-        public string Isbn { get; set; } = string.Empty;
-    }
-
-    private List<BookItem> BooksCollection = new();
-
-    private IEnumerable<BookItem> FilteredData
-    {
-        get
-        {
-            var data = BooksCollection.AsEnumerable();
-
-            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
-            {
-                var q = SharedSearchQuery.Trim();
-                data = data.Where(b =>
-                    b.Title.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Author.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Isbn.Contains(q, StringComparison.OrdinalIgnoreCase)
-                );
-            }
-
-            if (ActiveCategory != "All")
-            {
-                data = data.Where(b => b.Category.Equals(ActiveCategory, StringComparison.OrdinalIgnoreCase));
-            }
-
-            if (OnlyShowNew) { data = data.Where(b => b.IsNew); }
-
-            data = ActivePriceFilter switch
-            {
-                "under-500" => data.Where(b => b.Price < 500),
-                "500-1000" => data.Where(b => b.Price >= 500 && b.Price <= 1000),
-                "over-1000" => data.Where(b => b.Price > 1000),
-                _ => data
-            };
-
-            return data;
-        }
-    }
-
-    private IEnumerable<BookItem> SortedAndFilteredBooks => SelectedSortOption switch
-    {
-        "price-low" => FilteredData.OrderBy(b => b.Price),
-        "price-high" => FilteredData.OrderByDescending(b => b.Price),
-        "title-asc" => FilteredData.OrderBy(b => b.Title),
-        _ => FilteredData
-    };
-
-    private IEnumerable<BookItem> PaginatedBooks => SortedAndFilteredBooks.Take(VisibleCount);
-    private int TotalFilteredCount => FilteredData.Count();
-    private bool HasMoreItems => VisibleCount < TotalFilteredCount;
-
-    protected override void OnInitialized()
-    {
-        var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
-        DynamicExtendedCategories.AddRange(extraSourceCategories);
-
-        // Updated mock items to supply long IDs matching your screenshot items
-        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
-        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
-        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
-
-        var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
-        var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
-        var designers = new[] { "J. Morrison", "K. Fujita", "Studio Bouroullec", "Es Devlin", "Kenya Hara" };
-
-        var entireCategoryPool = MainCategories.Concat(DynamicExtendedCategories).Where(c => c != "All").ToArray();
-        var random = new Random(42);
-
-        for (int i = 4; i <= 60; i++)
-        {
-            BooksCollection.Add(new BookItem
-            {
-                Id = (long)i,
-                Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
-                Author = designers[random.Next(designers.Length)],
-                Price = random.Next(25, 135) * 10,
-                Category = entireCategoryPool[random.Next(entireCategoryPool.Length)],
-                IsNew = random.NextDouble() > 0.7,
-                Isbn = $"978000000{i}"
-            });
-        }
-    }
-
-    // Handles the explicit page transition routing
-    private void NavigateToProduct(long id)
-    {
-        Navigation.NavigateTo($"/product/{id}");
-    }
-
-    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
-    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
-    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
-    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
-    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
-    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
-    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
-    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
-    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
-}
+   onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
+</a>

MidrandBookshop/Components/Pages/Home.razor.cs

@@ -0,0 +1,170 @@
+using LiteCharms.Features.MidrandBooks;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Categories;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+using LiteCharms.Features.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Home : ComponentBase
+{
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private CategoryService CategoryService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+
+    [CascadingParameter] public string SharedSearchQuery { get; set; } = string.Empty;
+    [SupplyParameterFromQuery] public long? AuthorId { get; set; }
+
+    public enum ViewMode { Grid, List }
+    private ViewMode CurrentViewMode = ViewMode.Grid;
+    private string ActiveCategory = "All";
+    private bool ShowExpandedCategories = false;
+    private bool ShowFilterMenu = false;
+    private string SelectedSortOption = "default";
+    private string ActivePriceFilter = "all";
+    private bool OnlyShowNew = false;
+
+    private List<string> MainCategories { get; set; } = ["All"];
+    private List<string> DynamicExtendedCategories { get; set; } = [];
+
+    private int ItemsPerPage = 12;
+    private int VisibleCount = 12;
+
+    private List<Product> ProductsCollection { get; set; } = [];
+
+    protected string? ActiveAuthorFilterName { get; private set; }
+
+    private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
+    private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
+
+    private IEnumerable<Product> FilteredData
+    {
+        get
+        {
+            var data = ProductsCollection.AsEnumerable();
+
+            // Category filtering restricts rendering solely when checking the open catalog
+            if (ActiveCategory != "All" && !AuthorId.HasValue)
+                data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
+                    ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
+
+            // Text matching is completely restricted from evaluating author metadata properties
+            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
+            {
+                var q = SharedSearchQuery.Trim();
+
+                data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
+            }
+
+            return data;
+        }
+    }
+
+    private IEnumerable<Product> PaginatedBooks => FilteredData.Take(VisibleCount);
+
+    private bool HasMoreItems => FilteredData.Count() > VisibleCount;
+
+    protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
+
+    private async Task LoadCatalogDataAsync()
+    {
+        ProductsCollection.Clear();
+        ProductPriceCache.Clear();
+        ProductPrimaryCategoryCache.Clear();
+        ActiveAuthorFilterName = null;
+
+        // Pipeline A: Extract scoped books directly associated with an ID token parameter
+        if (AuthorId.HasValue)
+        {
+            var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
+
+            if (authorResult.IsSuccess && authorResult.Value != null)
+            {
+                var author = authorResult.Value;
+
+                ActiveAuthorFilterName = author.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(author.Company)
+                    ? author.Company
+                    : $"{author.Name} {author.LastName}".Trim();
+            }
+
+            var authorBooksResult = await BooksService.GetBooksByAuthorAsync(AuthorId.Value);
+
+            if (authorBooksResult.IsSuccess && authorBooksResult.Value != null)
+            {
+                foreach (var authorBook in authorBooksResult.Value)
+                {
+                    if (authorBook.Product != null)
+                    {
+                        var product = authorBook.Product;
+
+                        ProductsCollection.Add(product);
+
+                        ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
+
+                        var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+
+                        ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                            ? (categoryResult.Value[0].Name ?? "General")
+                            : "General";
+                    }
+                }
+            }
+            return;
+        }
+
+        // Pipeline B: Safe structural fallback mapping utilizing the exact backend DateRange object setup
+        var selectionRange = new DateRange
+        {
+            From = new DateOnly(2020, 1, 1),
+            To = DateOnly.FromDateTime(DateTime.UtcNow.AddDays(1)),
+            MaxRecords = 100
+        };
+
+        var allProductsResult = await ProductService.GetProductsAsync(0, selectionRange);
+
+        if (allProductsResult.IsSuccess && allProductsResult.Value != null)
+        {
+            ProductsCollection = allProductsResult.Value.ToList();
+
+            foreach (var product in ProductsCollection)
+            {
+                var priceResult = await ProductService.GetProductPriceAsync(product.Id);
+                ProductPriceCache[product.Id] = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+
+                var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+                ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                    ? (categoryResult.Value[0].Name ?? "General")
+                    : "General";
+            }
+        }
+
+        var categoriesResult = await CategoryService.GetCategoriesAsync();
+
+        if (categoriesResult.IsSuccess && categoriesResult.Value != null)
+        {
+            var cleanNames = categoriesResult.Value
+                .Select(c => c.Name)
+                .Where(n => !string.IsNullOrEmpty(n)).Cast<string>()
+                .ToList();
+
+            MainCategories = ["All", .. cleanNames.Take(3)];
+            DynamicExtendedCategories = [.. cleanNames.Skip(3)];
+        }
+    }
+
+    private void ClearAuthorFilter() => Navigation.NavigateTo("/");
+    private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
+    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
+    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
+    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
+    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
+    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
+    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
+    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
+    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
+    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
+}

MidrandBookshop/Components/Pages/Product.razor

@@ -1,137 +0,0 @@
-@page "/product/{BookId:long}"
-@inject NavigationManager Navigation
-
-<div class="product-container">
-    <nav class="breadcrumb">
-        <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
-        <span class="crumb-separator">/</span>
-        <span class="crumb-current">@BookTitle</span>
-    </nav>
-
-    <div class="product-layout">
-        <div class="gallery-section">
-            <div class="main-image-wrapper">
-                <img src="@ActiveImageUrl" alt="@BookTitle" class="main-image" />
-
-                <div class="format-badges">
-                    @if (IsPhysicalBook)
-                    {
-                        <span class="badge badge-physical">Book</span>
-                    }
-                    @if (IsEBook)
-                    {
-                        <span class="badge badge-ebook">E-Book</span>
-                    }
-                    @if (CanReadOnline)
-                    {
-                        <span class="badge badge-online">Read Online</span>
-                    }
-                </div>
-            </div>
-
-            <div class="thumbnail-grid">
-                @foreach (var img in Thumbnails)
-                {
-                    <div class="thumbnail-wrapper @(ActiveImageUrl == img ? "active" : "")"
-                         @onclick="() => ActiveImageUrl = img">
-                        <img src="@img" alt="Thumbnail" />
-                    </div>
-                }
-            </div>
-        </div>
-
-        <div class="details-section">
-            <div class="meta-header">
-                <span class="author-name">@AuthorName</span>
-                <div class="rating-stars">
-                    @for (int i = 1; i <= 5; i++)
-                    {
-                        <span class="star @(i <= CurrentRating ? "filled" : "")">★</span>
-                    }
-                    <span class="rating-text">(@CurrentRating.ToString("F1"))</span>
-                </div>
-            </div>
-
-            <h1 class="product-title">@BookTitle</h1>
-            <div class="product-price">R @Price.ToString("N2")</div>
-
-            <div class="purchase-actions">
-                <div class="quantity-picker">
-                    <button @onclick="DecreaseQty" class="qty-btn">-</button>
-                    <span class="qty-val">@Quantity</span>
-                    <button @onclick="IncreaseQty" class="qty-btn">+</button>
-                </div>
-                <button class="btn-add-to-cart" @onclick="HandleAddToCart">
-                    Add to Cart
-                </button>
-            </div>
-
-            <hr class="divider" />
-
-            <div class="info-block">
-                <h3>Description</h3>
-                <p class="description-text">@BookDescription</p>
-            </div>
-
-            <div class="info-block author-bio-card">
-                <h3>About the Author</h3>
-                <p class="author-bio">@AuthorBio</p>
-                <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
-                    View all books by @AuthorName →
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-@code {
-    [Parameter] public long BookId { get; set; }
-
-    // Mock State - In production, pull these via a Service using BookId inside OnInitialized
-    private string BookTitle { get; set; } = "Letters from M/M (Paris)";
-    private string AuthorName { get; set; } = "M/M Paris";
-    private string AuthorBio { get; set; } = "M/M Paris is an art and design partnership consisting of Michaël Amzalag and Mathias Augustyniak, established in 1992. Renowned globally for their influence on fashion, music, and contemporary art layout structures.";
-    private string BookDescription { get; set; } = "An exquisite archive tracking visual graphics, typography, and structural design curation over three decades. Beautifully bound with matte-coated plates and custom layouts.";
-    private decimal Price { get; set; } = 720.00m;
-
-    // Dynamic Ratings State
-    private double CurrentRating { get; set; } = 4.7;
-
-    // Formats supported
-    private bool IsPhysicalBook { get; set; } = true;
-    private bool IsEBook { get; set; } = true;
-    private bool CanReadOnline { get; set; } = false;
-
-    // Image Caching Gallery State
-    private string ActiveImageUrl { get; set; } = "images/book-cover-large.png";
-    private List<string> Thumbnails { get; set; } = new()
-    {
-        "images/book-cover-large.png",
-        "images/book-inside-1.png",
-        "images/book-inside-2.png"
-    };
-
-    private int Quantity { get; set; } = 1;
-
-    protected override void OnInitialized()
-    {
-        // Default the gallery viewer context logic
-        if (Thumbnails.Any())
-        {
-            ActiveImageUrl = Thumbnails.First();
-        }
-    }
-
-    private void IncreaseQty() => Quantity++;
-    private void DecreaseQty() { if (Quantity > 1) Quantity--; }
-
-    private void HandleAddToCart()
-    {
-        // Event logic hooked into your structural state layout
-    }
-
-    private void ViewAllAuthorBooks()
-    {
-        Navigation.NavigateTo($"/catalog?author={Uri.EscapeDataString(AuthorName)}");
-    }
-}

MidrandBookshop/Components/Pages/ProductView.razor

@@ -0,0 +1,126 @@
+@page "/product/{BookId:long}"
+@rendermode InteractiveServer
+
+<div class="product-container">
+    @if (IsLoading)
+    {
+        <div class="text-center py-5">
+            <div class="spinner-border text-dark" role="status">
+                <span class="visually-hidden">Loading product details...</span>
+            </div>
+            <p class="text-muted mt-2">Loading curated details...</p>
+        </div>
+    }
+    else if (CurrentProduct == null)
+    {
+        <div class="text-center py-5 animate-fade-in">
+            <svg class="text-muted mb-3" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            <h2 class="h5 text-dark fw-medium">Artifact Not Found</h2>
+            <p class="text-muted small">The requested book could not be found in our current catalog.</p>
+            <button class="btn btn-dark btn-sm rounded-pill px-4 mt-2" @onclick='() => Navigation.NavigateTo("/")'>Return to Books</button>
+        </div>
+    }
+    else
+    {
+        <nav class="breadcrumb">
+            <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
+            <span class="crumb-separator">/</span>
+            <span class="crumb-current">@CurrentProduct.Name</span>
+        </nav>
+
+        <div class="product-layout">
+            <div class="gallery-section">
+                <div class="main-image-wrapper">
+                    @if (!string.IsNullOrWhiteSpace(ActiveImageUrl))
+                    {
+                        <img src="@ActiveImageUrl" alt="@CurrentProduct.Name" class="main-image" />
+                    }
+                    else
+                    {
+                        <div class="book-spine-fallback-large bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50 shadow-sm">
+                            <div>
+                                <span class="fw-semibold tracking-wider d-block">@PrimaryCategory.ToUpper()</span>
+                                <span class="opacity-50 small" style="font-size: 0.65rem;">CURATED EDITION</span>
+                            </div>
+                        </div>
+                    }
+
+                    <div class="format-badges">
+                        @if (CurrentProduct.Enabled)
+                        {
+                            <span class="badge badge-physical">Physical Book</span>
+                        }
+                        <span class="badge badge-ebook">In Stock</span>
+                    </div>
+                </div>
+
+                @if (Thumbnails.Count > 1)
+                {
+                    <div class="thumbnail-grid">
+                        @foreach (var img in Thumbnails)
+                        {
+                            var currentImg = img;
+                            <div class="thumbnail-wrapper @(ActiveImageUrl == currentImg ? "active" : "")"
+                                 @onclick="() => ActiveImageUrl = currentImg">
+                                <img src="@currentImg" alt="Catalog gallery thumbnail" />
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+
+            <div class="details-section">
+                <div class="meta-header">
+                    <span class="author-name">@AuthorName</span>
+                    <div class="rating-stars">
+                        @for (int i = 1; i <= 5; i++)
+                        {
+                            <span class="star @(i <= 4 ? "filled" : "")">★</span>
+                        }
+                        <span class="rating-text">(4.8)</span>
+                    </div>
+                </div>
+
+                <h1 class="product-title">@CurrentProduct.Name</h1>
+                <div class="product-price">R @LivePrice.ToString("N2")</div>
+
+                <div class="purchase-actions">
+                    <div class="quantity-picker">
+                        <button @onclick="DecreaseQty" class="qty-btn">-</button>
+                        <span class="qty-val">@Quantity</span>
+                        <button @onclick="IncreaseQty" class="qty-btn">+</button>
+                    </div>
+                    <button class="btn-add-to-cart" @onclick="HandleAddToCart">
+                        Add to Cart
+                    </button>
+                </div>
+
+                <hr class="divider" />
+
+                @if (!string.IsNullOrWhiteSpace(CurrentProduct.Description))
+                {
+                    <div class="info-block">
+                        <h3>Description</h3>
+                        <p class="description-text">@CurrentProduct.Description</p>
+                    </div>
+                }
+
+                <div class="info-block author-bio-card">
+                    <h3>About the Author</h3>
+                    <p class="author-bio">
+                        @(string.IsNullOrWhiteSpace(CurrentProduct.Metadata?.Manufacturer)
+                            ? "Details regarding this publisher/author are maintained inside our curated archives."
+                            : $"{CurrentProduct.Metadata.Manufacturer} is globally recognized for their direct contribution to this specific genre spectrum.")
+                    </p>
+                    <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
+                        View all books by @AuthorName →
+                    </button>
+                </div>
+            </div>
+        </div>
+    }
+</div>

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -0,0 +1,104 @@
+using LiteCharms.Features.MidrandBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Authors.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class ProductView : ComponentBase
+{
+    [Parameter] public long BookId { get; set; }
+
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+
+    protected bool IsLoading { get; private set; } = true;
+    protected Product? CurrentProduct { get; private set; }
+    protected decimal LivePrice { get; private set; } = 0.00m;
+    protected string AuthorName { get; private set; } = "Unknown Author";
+    protected string PrimaryCategory { get; private set; } = "General";
+
+    protected string ActiveImageUrl { get; set; } = string.Empty;
+    protected List<string> Thumbnails { get; private set; } = [];
+    protected int Quantity { get; private set; } = 1;
+
+    protected Author? CurrentAuthor { get; private set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        try
+        {
+            IsLoading = true;
+            CurrentProduct = null;
+            CurrentAuthor = null;
+            Thumbnails.Clear();
+
+            // 1. Resolve product listing details
+            var productResult = await ProductService.GetProductAsync(BookId);
+
+            if (productResult.IsSuccess && productResult.Value != null)
+            {
+                CurrentProduct = productResult.Value;
+                AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
+
+                // 2. Load pricing data
+                var priceResult = await ProductService.GetProductPriceAsync(BookId);
+                LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+
+                // 3. Extract active catalog categories
+                var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
+                if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                {
+                    PrimaryCategory = categoryResult.Value[0].Name ?? "General";
+                }
+
+                // 4. Retrieve complete contextual model through the newly instantiated AuthorService lookup
+                var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
+                if (authorResult.IsSuccess && authorResult.Value != null)
+                {
+                    CurrentAuthor = authorResult.Value;
+
+                    // Format fully qualified author text cleanly depending on their publisher model details
+                    if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
+                        AuthorName = CurrentAuthor.Company;
+                    else
+                        AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
+                }
+
+                // 5. Build presentation image viewer variables
+                if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
+                    Thumbnails.Add(CurrentProduct.ImageUrl);
+
+                if (CurrentProduct.ThumbnailUrls != null && CurrentProduct.ThumbnailUrls?.Length != 0)
+                    foreach (var url in CurrentProduct.ThumbnailUrls!)
+                        if (!string.IsNullOrWhiteSpace(url) && !Thumbnails.Contains(url)) Thumbnails.Add(url);
+
+                ActiveImageUrl = Thumbnails.FirstOrDefault() ?? string.Empty;
+            }
+        }
+        catch (Exception)
+        {
+            CurrentProduct = null;
+        }
+        finally
+        {
+            IsLoading = false;
+        }
+    }
+
+    protected void IncreaseQty() => Quantity++;
+    protected void DecreaseQty() { if (Quantity > 1) Quantity--; }
+
+    protected void HandleAddToCart()
+    {
+        if (CurrentProduct == null) return;
+    }
+        
+    protected void ViewAllAuthorBooks()
+    {
+        if (CurrentAuthor is not null)
+            Navigation.NavigateTo($"/?authorId={CurrentAuthor.Id}");
+    }
+}

MidrandBookshop/Components/Pages/ProductView.razor.css

@@ -1,20 +1,36 @@
-.product-container {
+/* ==========================================================================
+   Structural Layout Containers
+   ========================================================================== */
+
+.product-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem 1.5rem;
     font-family: system-ui, -apple-system, sans-serif;
 }
 
-/* Breadcrumbs */
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+/* ==========================================================================
+   Breadcrumb Navigation Links
+   ========================================================================== */
+
 .breadcrumb {
     font-size: 0.85rem;
     margin-bottom: 2.5rem;
     color: #8c8c8c;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
 }
 
 .crumb-link {
     cursor: pointer;
-    transition: color 0.2s;
+    transition: color 0.2s ease;
 }
 
     .crumb-link:hover {
@@ -30,52 +46,46 @@
     font-weight: 500;
 }
 
-/* Two-Column Grid Layout Structure */
-.product-layout {
-    display: grid;
-    grid-template-columns: 1.1fr 0.9fr;
-    gap: 4rem;
-}
+/* ==========================================================================
+   Left Section: Media Gallery Components
+   ========================================================================== */
 
-@media (max-width: 992px) {
-    .product-layout {
-        grid-template-columns: 1fr;
-        gap: 2.5rem;
-    }
-}
-
-/* Left Section: Visual Images/Thumbnails Layout */
 .gallery-section {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    width: 100%;
 }
 
 .main-image-wrapper {
     position: relative;
     background-color: #f9f9f9;
     border-radius: 8px;
-    padding: 3rem;
+    padding: 3rem 3rem 4.5rem 3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 480px;
+    width: 100%;
 }
 
 .main-image {
     max-height: 450px;
+    max-width: 100%;
     object-fit: contain;
     mix-blend-mode: multiply;
 }
 
-/* Format Badges Overlay Styles */
+/* Dynamic Overlaid Attribute Badges */
 .format-badges {
     position: absolute;
-    top: 1rem;
-    left: 1rem;
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
+    white-space: nowrap;
 }
 
 .badge {
@@ -105,9 +115,10 @@
     border-color: #bbf7d0;
 }
 
-/* Thumbnails container */
+/* Interactive Gallery Thumbnails Grid */
 .thumbnail-grid {
     display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
 }
 
@@ -122,7 +133,8 @@
     transition: all 0.2s ease;
 }
 
-    .thumbnail-wrapper:hover, .thumbnail-wrapper.active {
+    .thumbnail-wrapper:hover,
+    .thumbnail-wrapper.active {
         border-color: #111;
     }
 
@@ -133,7 +145,10 @@
         mix-blend-mode: multiply;
     }
 
-/* Right Section: Core Text Typography Controls */
+/* ==========================================================================
+   Right Section: Product Details & Typography Controls
+   ========================================================================== */
+
 .details-section {
     display: flex;
     flex-direction: column;
@@ -144,6 +159,8 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
 .author-name {
@@ -151,7 +168,7 @@
     color: #666;
 }
 
-/* Dynamic Stars C# rendering mapping */
+/* Review Star Components */
 .rating-stars {
     display: flex;
     align-items: center;
@@ -164,7 +181,7 @@
 }
 
     .star.filled {
-        color: #111; /* Solid black stars fits your clean aesthetic perfectly */
+        color: #ffc107;
     }
 
 .rating-text {
@@ -175,7 +192,7 @@
 
 .product-title {
     font-size: 2.5rem;
-    font-family: 'Playfair Display', serif, Georgia; /* Fits the luxury typography tone */
+    font-family: 'Playfair Display', serif, Georgia;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 1rem;
@@ -189,7 +206,10 @@
     color: #111;
 }
 
-/* Standard E-commerce Action Bar Block */
+/* ==========================================================================
+   Interactive E-Commerce Selection Bars
+   ========================================================================== */
+
 .purchase-actions {
     display: flex;
     gap: 1rem;
@@ -215,7 +235,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
 }
 
     .qty-btn:hover {
@@ -237,7 +257,8 @@
     font-weight: 500;
     letter-spacing: 0.02em;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
+    padding: 0.5rem 1.5rem;
 }
 
     .btn-add-to-cart:hover {
@@ -250,7 +271,10 @@
     margin-bottom: 2rem;
 }
 
-/* General Layout Text and Cross-Selling */
+/* ==========================================================================
+   Informational Text Elements & Links
+   ========================================================================== */
+
 .info-block {
     margin-bottom: 2rem;
 }
@@ -263,7 +287,8 @@
         margin-bottom: 0.75rem;
     }
 
-.description-text, .author-bio {
+.description-text,
+.author-bio {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #444;
@@ -292,3 +317,44 @@
     .btn-text-link:hover {
         color: #444;
     }
+
+/* ==========================================================================
+   Responsive Adaptations & Breakpoints
+   ========================================================================== */
+
+@media (max-width: 992px) {
+    .product-layout {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+
+    .main-image-wrapper {
+        min-height: 380px;
+    }
+}
+
+@media (max-width: 576px) {
+    .product-container {
+        padding: 1rem 1rem;
+    }
+
+    .product-title {
+        font-size: 1.85rem;
+    }
+
+    .purchase-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .quantity-picker {
+        justify-content: space-between;
+        width: 100%;
+        padding: 0.5rem;
+    }
+
+    .btn-add-to-cart {
+        width: 100%;
+        padding: 0.85rem;
+    }
+}

MidrandBookshop/MidrandBookshop.csproj

@@ -18,12 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.43.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.56.0" />
   </ItemGroup>
 
   <!-- UI -->
   <ItemGroup>
     <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.56.0" />
     
     <!-- Global Usings -->
     <Using Include="Blazored.Toast.Services" />
@@ -50,6 +51,7 @@
   <!-- Shared Global Usings -->
   <ItemGroup>
     <Using Include="Blazored.Toast" />
+    <Using Include="Microsoft.AspNetCore.Components" />
   </ItemGroup>
 
 </Project>

MidrandBookshop/Program.cs

@@ -1,5 +1,6 @@
 using LiteCharms.Features.Extensions;
 using LiteCharms.Features.Mediator;
+using LiteCharms.Features.MidrandBooks.Extensions;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;
 
@@ -11,22 +12,21 @@ builder.Services.AddRazorComponents()
 builder.AddMonitoring();
 builder.Services.AddEndpointsApiExplorer();
 
-//builder.Services.AddMediator();
+builder.Services.AddMediator();
 
-//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
-//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
 
-//builder.Services.AddSalesServiceBus();
-//builder.Services.AddGeneralServiceBus();
 builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
 
-//builder.Services.AddEmailServices(builder.Configuration);
-//builder.Services.AddEmailServiceBus();
+builder.Services.AddEmailServices(builder.Configuration);
+builder.Services.AddEmailServiceBus();
 
+builder.Services.AddShopServices();
 builder.Services.AddMidrandShopDatabase(builder.Configuration);
 
 builder.Services.AddMidrandShopPostgresHealthCheck();
-//builder.Services.AddMidrandShopQuartzHealthCheck();
+builder.Services.AddMidrandShopQuartzHealthCheck();
 builder.Services.AddHealthChecksSupport(builder.Configuration);
 
 var app = builder.Build();

MidrandBookshop/appsettings.json

@@ -1,16 +1,14 @@
 {
-  "Email": {
-    "Credentials": {
-      "Username": "shop@litecharms.co.za"
-    },
-    "Port": 465,
-    "Host": "mail.litecharms.co.za",
-    "UseSsl": true
+  "BookshopS3Settings": {
+    "ServiceUrl": "http://192.168.1.177:30900",
+    "Region": "garage",
+    "BucketName": "bookshop",
+    "CdnBaseUrl": "https://bookshop.cdn.khongisa.co.za"
   },
   "Monitoring": {
     "ApiKey": "",
     "Address": "http://aspire-dashboard-service.aspire.svc.cluster.local:18889",
-    "ServiceName": "LiteCharms.Shop"
+    "ServiceName": "MidrandBooks.DEV"
   },
   "Logging": {
     "LogLevel": {

midrandbooks-uat.yml

@@ -44,7 +44,7 @@ metadata:
   name: midrandbooks
   namespace: midrandbooks-uat
 spec:
-  replicas: 1
+  replicas: 2
   selector:
     matchLabels:
       app: midrandbooks
@@ -82,7 +82,7 @@ spec:
                 secretKeyRef:
                   name: midrandbooks-secrets
                   key: connection-string-quartz
-            - name: ConnectionStrings__PostgresMidrandShop
+            - name: ConnectionStrings__PostgresMidrandBooks
               valueFrom:
                 secretKeyRef:
                   name: midrandbooks-secrets