Merge pull request 'Removed https failsafe' (#92 ) from cart into main

Reviewed-on: #92
Removed https failsafe
2026-06-15 22:54:33 +02:00 · 2026-06-15 22:53:55 +02:00 · 2026-06-15 22:40:51 +02:00 · 2026-06-15 22:39:41 +02:00 · 2026-06-15 17:22:44 +02:00 · 2026-06-15 17:22:20 +02:00
42 changed files with 3606 additions and 261 deletions
@@ -1,6 +1,7 @@
 <Solution>
  <Folder Name="/Solution Items/">
    <File Path=".drone.yml" />
    <File Path=".editorconfig" />
    <File Path="Dockerfile" />
    <File Path="midrandbooks-uat.yml" />
    <File Path="README.md" />
@@ -6,18 +6,20 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <ResourcePreloader />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["MidrandBookshop.styles.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
-    <HeadOutlet />
+    <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body>
-    <Routes />
+    <Routes @rendermode="InteractiveServer" />
    <ReconnectModal />
    <script src="@Assets["_framework/blazor.web.js"]"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
 </body>
 </html>
@@ -0,0 +1,52 @@
 <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>
        <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>
@@ -0,0 +1,14 @@
 namespace MidrandBookshop.Components;
 public partial class BookCard
 {
    [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 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; }
 }
@@ -0,0 +1,9 @@
 .book-shadow {
    filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
 }
 .sm-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
 }
@@ -1,13 +1,297 @@
@inherits LayoutComponentBase
@inject NavigationManager Navigation
-<div class="page">
+<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
-    <main>
+    <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
-        <div class="top-row px-4">
+    <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
-            <h2>Midrand Books</h2>
+        <div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
            <h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
                YOUR CART (@ShoppingCart.Items.Count())
            </h5>
            <button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
-        <article class="content px-4">
+        <div class="cart-body flex-grow-1 overflow-y-auto p-4">
-            @Body
+            @if (!ShoppingCart.Items.Any())
-        </article>
+            {
-    </main>
+                <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
                    <svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
                    </svg>
                    <span class="small tracking-wide">Your collection is empty.</span>
                </div>
            }
            else
            {
                <div class="d-flex flex-column gap-4">
                    @foreach (var item in ShoppingCart.Items)
                    {
                        <div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
                            <div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
                                @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
                                {
                                    <img src="@item.Product!.ImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@item.Product.Name" />
                                }
                                else
                                {
                                    @:[COVER]
                                }
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Product!.Name</h6>
                                <p class="text-muted xx-small mb-2">by @($"{item.Author!.Name} {item.Author.LastName}")</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@ShoppingCart.Items.FirstOrDefault(i => i.Price!.Id == item.Price!.Id)!.Quantity</span>
                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
                                    </div>
                                    <span class="small fw-semibold text-dark">R @(item.Price!.Amount * item.Quantity)</span>
                                </div>
                            </div>
                            <button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                            </button>
                        </div>
                    }
                </div>
            }
        </div>
        @if (ShoppingCart.Items.Any())
        {
            <div class="cart-footer p-4 bg-light border-top mt-auto">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <span class="text-secondary small fw-medium tracking-wider">TOTAL DUE</span>
                    <span class="text-dark h5 fw-bold mb-0">R @GetCartTotal()</span>
                </div>
                <div class="d-flex flex-column gap-2">
                    <button class="btn btn-dark w-100 rounded-pill py-2.5 fw-medium shadow-sm small tracking-wide" @onclick="RedirectToCheckout" type="button">
                        Proceed to Checkout
                    </button>
                    <button class="btn btn-outline-dark w-100 rounded-pill py-2.5 fw-medium bg-white small tracking-wide" @onclick="RedirectToCart" type="button">
                        Go to Cart Page
                    </button>
                </div>
            </div>
        }
    </div>
    <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
        <div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
            <svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
                <circle cx="100" cy="100" r="92" stroke="#1A1A1A" stroke-width="0.4" />
                <circle cx="100" cy="100" r="86" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="2 1" />
                <circle cx="100" cy="100" r="80" stroke="#1A1A1A" stroke-width="0.3" />
                <path d="M100 20 A80 80 0 0 1 180 100 A80 80 0 0 1 100 180 A80 80 0 0 1 20 100 A80 80 0 0 1 100 20" stroke="#1A1A1A" stroke-width="0.15" />
                <path d="M100 20 A80 80 0 0 0 180 100 A80 80 0 0 0 100 180 A80 80 0 0 0 20 100 A80 80 0 0 0 100 20" stroke="#1A1A1A" stroke-width="0.15" />
                <line x1="40" y1="100" x2="160" y2="100" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
                <line x1="100" y1="40" x2="100" y2="160" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
                <g transform="translate(65, 82)" stroke="#1A1A1A" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
                    <path d="M16 18 C 16 10, 24 10, 24 18" stroke-width="0.5" />
                    <line x1="20" y1="10" x2="20" y2="4" />
                    <path d="M28 18 C 28 14, 34 14, 34 18" stroke-width="0.5" />
                    <line x1="31" y1="14" x2="31" y2="7" />
                    <rect x="3" y="8" width="5" height="10" stroke-width="0.5" />
                    <rect x="11" y="5" width="5" height="13" stroke-width="0.5" />
                    <rect x="38" y="3" width="7" height="15" stroke-width="0.5" />
                    <polygon points="38,3 41.5,0 45,3" stroke-width="0.4" />
                    <rect x="49" y="9" width="6" height="9" stroke-width="0.5" />
                    <line x1="0" y1="18" x2="70" y2="18" stroke-width="0.75" />
                </g>
            </svg>
        </div>
        <nav class="navbar navbar-expand-lg py-3" style="pointer-events: auto;">
            <div class="container-fluid px-md-5">
                <a class="navbar-brand d-flex align-items-center" href="/" style="transform: scale(1.6); transform-origin: left center; margin-right: 4rem;">
                    <svg class="me-2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 17c-2.5 0-4.5-1.8-4.5-4s2-4 4.5-4 4.5 1.8 4.5 4-2 4-4.5 4Z" />
                        <path d="M12 9c2.2 0 4-1.6 4-3.5S14.2 2 12 2 8 3.6 8 5.5 9.8 9 12 9Z" />
                        <path d="M2 12h20" stroke-width="1" stroke-dasharray="1 2" opacity="0.5" />
                    </svg>
                    <span class="fw-bold tracking-tight text-dark" style="font-size: 0.65rem; letter-spacing: 0.8px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
                </a>
                <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                    <div class="nav-pill-wrapper d-flex align-items-center">
                        <a class="nav-pill-link active" href="/">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>
                            Books
                        </a>
                        <a class="nav-pill-link" href="/audiobooks">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6" /><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" /></svg>
                            Audiobooks
                        </a>
                        <a class="nav-pill-link" href="/ebooks">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12.01" y2="18" /></svg>
                            E-Books
                        </a>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2 position-relative">
                    <div class="search-input-container d-flex align-items-center @(IsSearchActive ? "is-active" : "")">
                        <input type="text"
                               class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
                               placeholder="Search by ISBN, Author, Title..."
                               @bind="SearchInputBuffer"
                               @bind:event="oninput"
                               @onkeydown="HandleSearchKeyDown" />
                    </div>
                    <button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
                            @onclick="ToggleGlobalSearch"
                            type="button"
                            aria-label="Toggle Search">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </button>
                    <button class="btn d-flex align-items-center justify-content-center p-2 position-relative border-0"
                            style="background: transparent; color: #1A1A1A; width: 36px; height: 36px;"
                            @onclick="ToggleCart"
                            type="button">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
                        </svg>
                        @if (ShoppingCart.Items.Any())
                        {
                            <span class="cart-badge">@ShoppingCart.Items.Count</span>
                        }
                    </button>
                    <div class="dropdown header-account-dropdown">
                        <button class="btn btn-sm d-flex align-items-center gap-1.5 p-1 text-dark border-0 dropdown-toggle no-caret"
                                type="button"
                                id="accountDropdownMenu"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                            <span class="d-none d-md-inline font-monospace text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.05em;">Account</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end brand-dropdown-pane p-0 m-0" aria-labelledby="accountDropdownMenu">
                            <AuthorizeView>
                                <Authorized>
                                    <li class="dropdown-header-identity p-3 border-bottom bg-light">
                                        <span class="d-block text-muted text-uppercase font-monospace xx-small" style="font-size: 0.6rem; letter-spacing: 0.1em;">Active Identity</span>
                                        <span class="fw-bold text-dark text-truncate d-block" style="font-size: 0.85rem;">@(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")</span>
                                    </li>
                                    <li>
                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/account">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                            My Orders
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" target="_blank">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                                            Security Center
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider m-0" /></li>
                                    <li>
                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="/logout">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                                <polyline points="16 17 21 12 16 7"></polyline>
                                                <line x1="21" y1="12" x2="9" y2="12"></line>
                                            </svg>
                                            Logout
                                        </a>
                                    </li>
                                </Authorized>
                                <NotAuthorized>
                                    <li>
                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/login">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
                                            Sign In
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="/account">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                                            Order Status
                                        </a>
                                    </li>
                                </NotAuthorized>
                            </AuthorizeView>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
        <main class="position-relative" style="z-index: 5;">
            <CascadingValue Value="GlobalSearchQuery">
                @Body
            </CascadingValue>
        </main>
        <footer class="custom-site-footer border-top mt-auto">
            <div class="container-fluid px-md-5">
                <div class="row g-4 pb-4 justify-content-between footer-content-section">
                    <div class="col-12 col-md-5">
                        <span class="footer-brand-title d-block mb-2">MIDRAND BOOKS</span>
                        <p class="footer-desc mb-3">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
                        <div class="d-flex flex-column gap-2">
                            <a href="mailto:info@midrandbooks.co.za" class="footer-contact-link">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
                                info@midrandbooks.co.za
                            </a>
                            <a href="tel:+27872650198" class="footer-contact-link">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
                                +27 87 265 9463
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-5 text-start">
                        <div class="row row-cols-2 justify-content-md-end g-3">
                            <div style="max-width: 160px;">
                                <span class="footer-section-heading d-block mb-2">PLATFORM</span>
                                <ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
                                    <li><a href="/about" class="footer-nav-link">About Us</a></li>
                                    <li><a href="/" class="footer-nav-link">Browse Catalog</a></li>
                                    <li><a href="/contact" class="footer-nav-link">Contact Us</a></li>
                                </ul>
                            </div>
                            <div style="max-width: 210px;">
                                <span class="footer-section-heading d-block mb-2">ENTERPRISE</span>
                                <ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
                                    <li class="footer-meta-item d-flex align-items-center gap-1.5">
                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
                                        Lite Charms (PTY) Ltd
                                    </li>
                                    <li><a href="/terms" class="footer-nav-link">Terms & Conditions</a></li>
                                    <li><a href="/privacy" class="footer-nav-link">Privacy Policy</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center pt-3 footer-copyright-section">
                    <div class="col-12 text-center text-md-start">
                        <span class="footer-copyright">
                            &copy; @DateTime.Now.Year Midrand Books. All rights reserved.
                        </span>
                    </div>
                </div>
            </div>
        </footer>
    </div>
 </div>
@@ -0,0 +1,142 @@
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Payments.Models;
 namespace MidrandBookshop.Components.Layout;
 public partial class MainLayout(CartService cartService) : IDisposable
 {
    [Inject]
    private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
    private Cart ShoppingCart => cartService.ShoppingCart;
    private AuthenticationState? AuthState { get; set; }
    private System.Security.Claims.ClaimsPrincipal? User { get; set; }
    private bool IsAuthenticated => User?.Identity?.IsAuthenticated ?? false;
    private string SearchInputBuffer { get; set; } = string.Empty;
    private string GlobalSearchQuery { get; set; } = string.Empty;
    private bool IsSearchActive { get; set; } = false;
    private bool IsCartOpen { get; set; } = false;
    protected override async Task OnInitializedAsync()
    {
        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
        User = AuthState!.User;
        Navigation.LocationChanged += OnLocationChanged;
        cartService.OnCartChanged += CartService_OnCartChanged;
        await cartService.LoadCartFromStorageAsync();
        SyncSearchQueryFromUrl();
    }
    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        SyncSearchQueryFromUrl();
        StateHasChanged();
    }
    private void SyncSearchQueryFromUrl()
    {
        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
        if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
        {
            GlobalSearchQuery = queryVal.ToString();
            SearchInputBuffer = GlobalSearchQuery;
            IsSearchActive = true;
        }
        else
        {
            GlobalSearchQuery = string.Empty;
            SearchInputBuffer = string.Empty;
            IsSearchActive = false;
        }
    }
    private void ToggleGlobalSearch()
    {
        if (!IsSearchActive)
            IsSearchActive = true;
        else
            CommitSearchNavigation();
    }
    private void HandleSearchKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter") CommitSearchNavigation();
    }
    private void CommitSearchNavigation()
    {
        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
        var newRouteParams = new Dictionary<string, object?>();
        foreach (var param in queryParameters)
        {
            if (param.Key != "q")
            {
                newRouteParams[param.Key] = param.Value.ToString();
            }
        }
        if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
            newRouteParams["q"] = SearchInputBuffer.Trim();
        else
            newRouteParams["q"] = null;
        var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
        var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
        Navigation.NavigateTo(updatedUri);
    }
    private void ToggleCart() => IsCartOpen = !IsCartOpen;
    private async Task ChangeQuantity(CartItem item, int delta)
    {
        var peekQuantity = item.Quantity + delta;
        if (peekQuantity < 1) return;
        cartService.UpdateQuantity(item.Price!.Id, delta);
        await cartService.SaveCartToStorageAsync();
    }
    private async Task RemoveFromCart(CartItem item)
    {
        cartService.RemoveOneItem(item.Price!.Id);
        await cartService.SaveCartToStorageAsync();
    }
    private decimal GetCartTotal() => ShoppingCart?.TotalAmount ?? 0.00m;
    private void RedirectToCart()
    {
        IsCartOpen = false;
        Navigation.NavigateTo("/cart");
    }
    private void RedirectToCheckout()
    {
        IsCartOpen = false;
        Navigation.NavigateTo("/checkout");
    }
    public void Dispose()
    {
        Navigation.LocationChanged -= OnLocationChanged;
        cartService.OnCartChanged -= CartService_OnCartChanged;
        GC.SuppressFinalize(this);
    }
 }
@@ -1,98 +1,225 @@
-.page {
+.sticky-top {
-    position: relative;
+    position: -webkit-sticky !important;
-    display: flex;
+    position: sticky !important;
-    flex-direction: column;
+    top: 0 !important;
    z-index: 1000 !important;
 }
-main {
+.cart-overlay {
-    flex: 1;
+    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.sidebar {
+    .cart-overlay.is-visible {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+        opacity: 1;
        pointer-events: auto;
    }
 .cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    z-index: 1050;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.top-row {
+    .cart-drawer.is-open {
-    background-color: #f7f7f7;
+        transform: translateX(-420px);
-    border-bottom: 1px solid #d6d5d5;
+        pointer-events: auto;
-    justify-content: flex-end;
+    }
-    height: 3.5rem;
+
 .cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #1A1A1A;
    color: #FFF;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
 }
-    .top-row ::deep a, .top-row ::deep .btn-link {
+.xx-small {
-        white-space: nowrap;
+    font-size: 0.68rem;
        margin-left: 1.5rem;
        text-decoration: none;
    }
    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }
    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }
    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
 }
-@media (min-width: 641px) {
+.border-bottom-dashed {
-    .page {
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
        flex-direction: row;
    }
    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
 }
-#blazor-error-ui {
+.quantity-picker {
-    color-scheme: light only;
+    padding: 2px 4px;
-    background: lightyellow;
+}
-    bottom: 0;
+
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    .quantity-picker button {
-    box-sizing: border-box;
+        font-size: 0.85rem;
-    display: none;
+        font-weight: 600;
-    left: 0;
+        line-height: 1;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    }
-    position: fixed;
+
        .quantity-picker button:hover {
            background-color: rgba(0,0,0,0.05);
            border-radius: 50%;
        }
 .custom-site-footer {
    width: 100%;
-    z-index: 1000;
+    position: relative;
    z-index: 10;
    background-color: #1A1A1A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 3rem 0 2rem 0;
 }
-    #blazor-error-ui .dismiss {
+.footer-content-section {
-        cursor: pointer;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
-        position: absolute;
+}
-        right: 0.75rem;
+
-        top: 0.5rem;
+.footer-brand-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF !important;
 }
 .footer-desc {
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 360px;
    color: #A0AEC0 !important;
 }
 .footer-contact-link {
    text-decoration: none;
    font-size: 0.8rem;
    color: #A0AEC0 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
 }
    .footer-contact-link:hover {
        color: #FFFFFF !important;
    }
 .footer-section-heading {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #FFFFFF !important;
 }
 .footer-nav-link {
    text-decoration: none;
    font-size: 0.8rem;
    color: #A0AEC0 !important;
    transition: color 0.2s ease;
 }
    .footer-nav-link:hover {
        color: #FFFFFF !important;
    }
 .footer-meta-item {
    font-size: 0.8rem;
    font-weight: 500;
    color: #FFFFFF !important;
 }
 .footer-copyright-section {
    color: #718096 !important;
 }
 .footer-copyright {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2px;
 }
 .btn-back-to-top {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: #1A1A1A;
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1010;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
 }
    .btn-back-to-top:hover {
        background-color: #333333;
        transform: translateY(-2px);
    }
    .btn-back-to-top:active {
        transform: translateY(0);
    }
 .scroll-container {
    scroll-behavior: smooth;
 }
 .no-caret::after {
    display: none !important;
 }
 .brand-dropdown-pane {
    border-radius: 0px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    min-width: 190px;
    z-index: 1050;
 }
    .brand-dropdown-pane .dropdown-item {
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
        .brand-dropdown-pane .dropdown-item:hover {
            background-color: #1A1A1A !important;
            color: #FFFFFF !important;
        }
        .brand-dropdown-pane .dropdown-item.text-danger:hover {
            background-color: #DC3545 !important;
            color: #FFFFFF !important;
        }
 .dropdown-header-identity {
    user-select: none;
 }
@@ -0,0 +1,228 @@
@page "/account"
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Navigation
@rendermode InteractiveServer
@attribute [Authorize]
 <div class="container py-5">
    <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
    <div class="row g-5">
        <div class="col-md-3">
            <div class="nav flex-column nav-pills" role="tablist">
                <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
                <hr />
                <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
            </div>
        </div>
        <div class="col-md-9">
            <AuthorizeView>
                <Authorized>
                    <div class="profile-hero-banner mb-5 d-flex align-items-center justify-content-between p-4 border border-light bg-white">
                        <div class="hero-text-content">
                            <div class="meta-tag font-monospace text-uppercase text-muted mb-1">Customer Profile // Active Session</div>
                            <h4 class="fw-bold mb-1 brand-greeting">Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!</h4>
                            <p class="text-muted small mb-0 font-monospace">@context.User.FindFirst("email")?.Value</p>
                        </div>
                        <div class="hero-crest-svg d-none d-sm-block">
                            <svg viewBox="0 0 100 100" width="70" height="70" stroke="#1A1A1A" stroke-width="1.5" fill="none">
                                <circle cx="50" cy="50" r="40" stroke-dasharray="2 2" stroke="#DDD" />
                                <circle cx="50" cy="50" r="30" />
                                <polygon points="50,20 76,65 24,65" stroke="#1A1A1A" />
                                <line x1="50" y1="20" x2="50" y2="80" stroke-width="1" stroke="#1A1A1A" />
                            </svg>
                        </div>
                    </div>
                </Authorized>
            </AuthorizeView>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="orders" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Order History</h5>
                    </div>
                    <div class="d-flex flex-column gap-3">
                        @if (orderHistory != null)
                        {
                            @foreach (var order in orderHistory)
                            {
                                <div class="card p-4 shadow-sm order-history-card">
                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
                                        <div class="flex-grow-1 w-100">
                                            <div class="order-meta-track mb-2">
                                                <div class="meta-item-id">
                                                    <span class="fw-bold text-dark">@order.OrderId</span>
                                                </div>
                                                <div class="meta-item-date">
                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
                                                </div>
                                                <div class="meta-item-status">
                                                    <span class="badge status-badge-base status-@order.Status?.ToLower() text-uppercase">
                                                        @order.Status
                                                    </span>
                                                </div>
                                            </div>
                                            <h6 class="mb-2">
                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" title="@order.ProductTitle">
                                                    @order.ProductTitle
                                                </a>
                                            </h6>
                                            <div class="d-flex align-items-center text-secondary small">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                                                </svg>
                                                <span class="text-muted text-uppercase tracking-wider font-monospace" style="font-size: 0.7rem;">Shipping to:</span>&nbsp;<span class="text-dark fw-medium">@order.ShippingAddressName</span>
                                            </div>
                                        </div>
                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
                                            <div class="text-sm-end mb-sm-2">
                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider" style="font-size: 0.6rem;">Total Paid</span>
                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
                                            </div>
                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="svg-icon">
                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                        else
                        {
                            <div class="card p-4 text-center text-muted">
                                Loading order history...
                            </div>
                        }
                    </div>
                </div>
                <div class="tab-pane fade" id="shipping" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Saved Addresses</h5>
                        @if (!showAddForm && editingAddress == null)
                        {
                            <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
                        }
                    </div>
                    @if (showAddForm)
                    {
                        <div class="card p-4 border shadow-sm mb-4 bg-light">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold m-0">New Address</h6>
                                <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
                            </div>
                            <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
                            <div class="d-flex gap-2 mb-3">
                                <input type="text" class="form-control" placeholder="City" @bind="newCity" />
                                <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
                            </div>
                            <div class="mb-3 d-flex gap-3">
                                <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
                                <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
                            </div>
                            <div class="d-flex">
                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
                            </div>
                        </div>
                    }
                    @if (editingAddress != null)
                    {
                        <div class="card p-4 border shadow-sm mb-4 bg-light">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold m-0">Edit Address</h6>
                                <button type="button" class="btn-close" @onclick="CancelEditing"></button>
                            </div>
                            <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
                            <div class="d-flex gap-2 mb-3">
                                <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
                                <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
                            </div>
                            <div class="mb-3 d-flex gap-3">
                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
                            </div>
                            <div class="d-flex">
                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
                            </div>
                        </div>
                    }
                    @foreach (var addr in savedAddresses)
                    {
                        <div class="card p-4 shadow-sm mb-3 address-card">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="fw-bold mb-1">@addr.Name</h6>
                                    <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
                                        @if (addr.IsBilling)
                                        {
                                            <span class="badge bg-light text-dark border">[Billing]</span>
                                        }
                                        @if (addr.IsShipping)
                                        {
                                            <span class="badge bg-light text-dark border">[Shipping]</span>
                                        }
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-2 actions-container">
                                    <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
                                        <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
                                    </label>
                                    <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                                        </svg>
                                    </button>
                                    <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    }
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
                    </div>
                    <div class="card p-5 text-center bg-white border">
                        <div class="mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#1A1A1A" stroke-width="1.5">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                            </svg>
                        </div>
                        <h5 class="fw-bold mb-2">Centralized Identity Management</h5>
                        <p class="text-muted small mx-auto mb-4" style="max-width: 480px;">
                            For your protection, password modifications, recovery settings, authentication methods, and core credentials are managed through our secure Identity Node.
                        </p>
                        <a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" class="btn btn-dark rounded-pill px-5 py-2.5 btn-sm font-monospace text-uppercase tracking-wider">
                            Access Security Center
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,75 @@
 namespace MidrandBookshop.Components.Pages;
 public partial class Account
 {
    private bool showAddForm = false;
    private AddressItem? editingAddress = null;
    private string newAddressName = "";
    private string newStreetAddress = "";
    private string newCity = "";
    private string newPostalCode = "";
    private bool isBilling, isShipping;
    private List<OrderItem> orderHistory = new()
    {
        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
    };
    private List<AddressItem> savedAddresses = new()
    {
        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
    };
    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
    private void DownloadInvoice(string orderId) { /* Handle download sequence here */ }
    private void OpenAddForm() { editingAddress = null; showAddForm = true; }
    private void SaveAddress()
    {
        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
        {
            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
            savedAddresses.Add(new AddressItem
            {
                Id = nextId,
                Name = newAddressName,
                Street = newStreetAddress,
                City = newCity,
                PostalCode = newPostalCode,
                IsBilling = isBilling,
                IsShipping = isShipping,
                IsPrimary = !savedAddresses.Any()
            });
            ResetAddForm();
        }
    }
    private void ResetAddForm() { newAddressName = ""; newStreetAddress = ""; newCity = ""; newPostalCode = ""; isBilling = isShipping = showAddForm = false; }
    private void StartEditing(AddressItem addr) { showAddForm = false; editingAddress = new AddressItem { Id = addr.Id, Name = addr.Name, Street = addr.Street, City = addr.City, PostalCode = addr.PostalCode, IsBilling = addr.IsBilling, IsShipping = addr.IsShipping, IsPrimary = addr.IsPrimary }; }
    private void CancelEditing() => editingAddress = null;
    private void UpdateAddress()
    {
        if (editingAddress != null)
        {
            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
            if (target != null) { target.Name = editingAddress.Name; target.Street = editingAddress.Street; target.City = editingAddress.City; target.PostalCode = editingAddress.PostalCode; target.IsBilling = editingAddress.IsBilling; target.IsShipping = editingAddress.IsShipping; }
            editingAddress = null;
        }
    }
    private void DeleteAddress(AddressItem addr) { if (editingAddress?.Id == addr.Id) editingAddress = null; savedAddresses.Remove(addr); if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true; }
    private void SetPrimary(AddressItem target, ChangeEventArgs e)
    {
        var isChecked = (bool)(e.Value ?? false);
        if (isChecked) { foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id); }
        else target.IsPrimary = false;
    }
    public class AddressItem { public int Id { get; set; } public string Name { get; set; } = ""; public string Street { get; set; } = ""; public string City { get; set; } = ""; public string PostalCode { get; set; } = ""; public bool IsBilling { get; set; } public bool IsShipping { get; set; } public bool IsPrimary { get; set; } }
    public class OrderItem { public string OrderId { get; set; } = ""; public string ProductId { get; set; } = ""; public string ProductTitle { get; set; } = ""; public DateTime OrderDate { get; set; } public string ShippingAddressName { get; set; } = ""; public string Status { get; set; } = ""; public double Total { get; set; } }
 }
@@ -0,0 +1,147 @@
 ::deep .container {
    max-width: 1100px;
 }
 /* Navigation Layout Overrides - Black & White Architectural Style */
 .nav-pills .nav-link {
    color: #6c757d;
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-family: var(--bs-body-font-family);
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    background: transparent !important;
 }
    /* Active State - Solid Black Fill with stark white text */
    .nav-pills .nav-link.active {
        background-color: #1A1A1A !important;
        color: #FFFFFF !important;
        border-color: #1A1A1A;
    }
    /* Hover State for Unselected Buttons */
    .nav-pills .nav-link:hover:not(.active) {
        color: #1A1A1A;
        background-color: #F8F8F8 !important;
    }
    /* Logout Button Link Alignment rules */
    .nav-pills .nav-link.text-danger {
        color: #DC3545 !important;
    }
        .nav-pills .nav-link.text-danger:hover {
            background-color: #FFF5F5 !important;
            color: #A94442 !important;
        }
 hr {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 1.5rem 0;
 }
 /* Profile Banner Design Definitions */
 .profile-hero-banner {
    border-color: rgba(0, 0, 0, 0.05) !important;
    background-color: #FAFAFA !important;
 }
 .brand-greeting {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    letter-spacing: -0.01em;
    color: #111111;
 }
 .meta-tag {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
 }
 .hero-crest-svg svg {
    transition: transform 0.4s ease-in-out;
 }
 .profile-hero-banner:hover .hero-crest-svg svg {
    transform: rotate(15deg);
 }
 /* Cards Layout Rules */
 .card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
 }
 .address-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
    .address-card:hover {
        border-color: rgba(0, 0, 0, 0.16);
    }
 /* Order Meta Tracks & Status Badges Setup */
 .order-meta-track {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
 }
 .status-badge-base {
    font-family: var(--bs-font-monospace);
    font-size: 0.68rem !important;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.65rem !important;
    border-radius: 0px !important;
    font-weight: 600;
 }
 .status-delivered {
    background-color: #E2F0D9 !important;
    color: #385723 !important;
 }
 .status-shipped {
    background-color: #FFF2CC !important;
    color: #7F6000 !important;
 }
 .status-processing, .status-pending {
    background-color: #F2F2F2 !important;
    color: #595959 !important;
    border: 1px dashed #D9D9D9;
 }
 /* Restored Action Button Interactive Properties */
 .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #1A1A1A;
    transition: background-color 0.15s ease, transform 0.1s ease;
 }
    .action-btn:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    .action-btn:active {
        transform: scale(0.92);
    }
 .pointer-label {
    cursor: pointer;
    user-select: none;
 }
 .tab-pane #profile .card {
    border: 1px dashed rgba(0, 0, 0, 0.15) !important;
 }
@@ -0,0 +1,98 @@
@page "/cart"
@rendermode InteractiveServer
 <div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">
    <div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
        <h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
        <a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
    </div>
    @if (!ShoppingCart.Items.Any())
    {
        <div class="text-center py-5 my-4">
            <div class="mb-4 text-muted-50">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            </div>
            <h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
            <p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
            <a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
        </div>
    }
    else
    {
        <div class="row g-5">
            <div class="col-12 col-lg-7">
                <div class="d-flex flex-column gap-1">
                    @foreach (var item in ShoppingCart.Items)
                    {
                        <div class="row align-items-center py-4 border-bottom position-relative">
                            <div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
                                <div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
                                     style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
                                    @if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
                                    {
                                        <img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
                                    }
                                    else
                                    {
                                        <span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
                                    }
                                </div>
                                <div style="max-width: 75%;">
                                    <h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
                                    <p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
                                </div>
                            </div>
                            <div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
                                <div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
                                    <span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
                                    <button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
                                </div>
                            </div>
                            <div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
                                <span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                                <button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div class="col-12 col-lg-5">
                <div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
                    <h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>
                    <div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
                        <span class="text-muted">VAT (15%)</span>
                        <span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>
                    <hr style="border-color: #f1f3f5;" />
                    <div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
                        <span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
                        <span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
                    </div>
                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
                       style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
                        Proceed to Checkout
                    </a>
                </div>
            </div>
        </div>
    }
 </div>
@@ -0,0 +1,36 @@
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Payments.Models;
 namespace MidrandBookshop.Components.Pages;
 public partial class CartReview(CartService cartService)
 {
    protected Cart ShoppingCart => cartService?.ShoppingCart!;
    protected async void IncreaseQty(CartItem item)
    {
        if (item is not null)
        {
            cartService.UpdateQuantity(item!.Price!.Id, 1);
            await cartService.SaveCartToStorageAsync();
        }
    }
    protected async void DecreaseQty(CartItem item, int delta)
    {
        var peekQuantity = item.Quantity + delta;
        if (peekQuantity < 1) return;
        cartService.UpdateQuantity(item!.Price!.Id, delta);
        await cartService.SaveCartToStorageAsync();
    }
    private async void RemoveFromCart(CartItem item)
    {
        cartService.RemoveOneItem(item.Price!.Id);
        await cartService.SaveCartToStorageAsync();
    }
 }
@@ -0,0 +1,2 @@
 body {
 }
@@ -0,0 +1,76 @@
@page "/checkout"
@inject NavigationManager Navigation
@rendermode InteractiveServer
@attribute [Authorize]
 <div class="container py-5">
    <h2 class="fw-bold mb-4">Checkout</h2>
    <div class="row g-5">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Your Items</h5>
                @foreach (var item in ShoppingCart.Items)
                {
                    <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
                        <div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</small></div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="d-flex border rounded-pill">
                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
                                <span class="px-2 pt-1">@item.Quantity</span>
                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
                            </div>
                            <button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
                        </div>
                    </div>
                }
            </div>
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Shipping Method</h5>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="shipping" id="pickup"
                           checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
                    <label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="shipping" id="delivery"
                           checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
                    <label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
                </div>
            </div>
            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold mb-3">Shipping Address</h5>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
                    <label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
                <h5 class="fw-bold mb-3">Order Summary</h5>
                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @ShoppingCart.TotalAmount.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @ShoppingCart.TotalVat.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost:F2}")</span></div>
                <hr />
                <div class="d-flex justify-content-between mb-4">
                    <span class="fw-bold">Total Due</span>
                    <h4 class="fw-bold">R @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
                </div>
                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="PayNow">Complete Purchase</button>
            </div>
        </div>
        @if (IsProcessing == true && CheckoutPayload?.Count > 0)
        {
            <form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
                @foreach (var field in CheckoutPayload)
                {
                    <input type="hidden" name="@field.Key" value="@field.Value" />
                }
            </form>
        }
    </div>
 </div>
@@ -0,0 +1,160 @@
 using LiteCharms.Features.Api.Configuration;
 using LiteCharms.Features.Hasher;
 using LiteCharms.Features.MidrandBooks.AuthorBooks;
 using LiteCharms.Features.MidrandBooks.Orders;
 using LiteCharms.Features.MidrandBooks.Orders.Models;
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Payments.Models;
 namespace MidrandBookshop.Components.Pages;
 public partial class Checkout()
 {
    [Inject] public HashService HashService { get; set; } = default!;
    [Inject] public PaymentService PaymentService { get; set; } = default!;
    [Inject] public OrderService OrderService { get; set; } = default!;
    [Inject] public BooksService BooksService { get; set; } = default!;
    [Inject] public CartService CartService { get; set; } = default!;
    [Inject] public PayfastService PayfastService { get; set; } = default!;
    [Inject] public IOptions<PayfastSettings> PayfastOptions { get; set; } = default!;
    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
    [Inject] public IJSRuntime JSRuntime { get; set; } = default!;
    [Inject] private HydrationService HydrationService { get; set; } = default!;
    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
    private Cart ShoppingCart => CartService.ShoppingCart;
    private ClaimsPrincipal? User { get; set; }
    private bool IsProcessing { get; set; }
    private decimal ShippingCost = 0;
    private bool IsSameAddress = true;
    private Dictionary<string, string> CheckoutPayload { get; set; } = [];
    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        User = authState!.User;
        Navigation.LocationChanged += OnLocationChanged;
        CartService.OnCartChanged += CartService_OnCartChanged;
        await CartService.LoadCartFromStorageAsync();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender == false && HydrationService.CartHydrated == false)
        {
            await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
            await HydrationService.RehydrateCartFromPendingOrderAsync(CancellationToken);
            CartService.NotifyStateChanged();
        }
    }
    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
    private async Task ChangeQuantity(CartItem item, int delta)
    {
        var peekQuantity = item.Quantity + delta;
        if (peekQuantity < 1) return;
        CartService.UpdateQuantity(item.Price!.Id, delta);
        await CartService.SaveCartToStorageAsync();
    }
    private async Task RemoveFromCart(CartItem item)
    {
        CartService.RemoveOneItem(item.Price!.Id);
        await CartService.SaveCartToStorageAsync();
    }
    private async Task PayNow(MouseEventArgs args)
    {
        if (IsProcessing) return;
        try
        {
            IsProcessing = true;
            StateHasChanged();
            Result<long> orderResult;
            var customerId = (long)ShoppingCart.CustomerId!;
            if (!ShoppingCart.OrderId.HasValue)
            {
                CreateOrder request = new(ShoppingCart.TotalAmount, null);
                orderResult = await OrderService.CreateOrderAsync(customerId, request, CancellationToken);
                ShoppingCart.OrderId = orderResult.Value;
            }
            List<CreateOrderItem> orderItems = [];
            var orderId = (long)ShoppingCart.OrderId;
            await OrderService.ClearOrderItemsAsync(orderId, CancellationToken);
            foreach (var item in ShoppingCart.Items)
            {
                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id, CancellationToken);
                if (bookRequest.IsSuccess)
                {
                    var orderItem = new CreateOrderItem(bookRequest.Value.Id, item.Price.Id, item.Quantity);
                    orderItems.Add(orderItem);
                }
            }
            var orderHash = HashService.HashEncodeLongId(orderId).Value;
            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, orderId, orderHash, CancellationToken);
            CreateLedgerEntry ledgerRequest = new()
            {
                OrderId = orderId,
                CustomerId = customerId,
                PaymentGatewayId = 1, // TODO: lookup value to match user selection
                PaymentGatewayReference = orderHash,
                PaymentId = paymentGen.Value,
                Status = LiteCharms.Features.LedgerStatuses.Sent,
            };
            await PaymentService.WriteLedgerEntryAsync(ledgerRequest, CancellationToken);
            var addItemsResult = await OrderService.AddItemsToOrderAsync(orderId, [.. orderItems], CancellationToken);
            var hostAddress = Navigation.BaseUri.TrimEnd('/');
            CheckoutPayload = new Dictionary<string, string>
            {
                { "merchant_id", PayfastOptions.Value.MerchantId! },
                { "merchant_key", PayfastOptions.Value.MerchantKey! },
                { "return_url", $"{hostAddress}/payment-success" },
                { "cancel_url", $"{hostAddress}/payment-failed" },
                { "notify_url", "https://api.uat.midrandbooks.co.za/v1/payments/payfast/confirm" },
                { "email_address", User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value! },
                { "m_payment_id", orderHash },
                { "amount", ShoppingCart.TotalAmount.ToString("F2", CultureInfo.InvariantCulture) },
                { "item_name", "MidrandBooks Sale" },
            };
            var signature = PayfastService.GenerateSignature(CheckoutPayload!, PayfastOptions.Value.Passphrase).Value;
            CheckoutPayload.Add("signature", signature);
            StateHasChanged();
            await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
        }
        catch
        {
            IsProcessing = false;
            StateHasChanged();
        }
    }
 }
@@ -1,33 +1,46 @@
@page "/Error"
@using System.Diagnostics
@inject NavigationManager Navigation
-<PageTitle>Error</PageTitle>
+<PageTitle>System Exception | Midrand Books</PageTitle>
-<h1 class="text-danger">Error.</h1>
+<div class="artistic-error-container">
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+    <div class="container h-100">
        <div class="row align-items-center justify-content-center min-vh-70 py-5">
-@if (ShowRequestId)
+            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
-{
+                <svg viewBox="0 0 400 400" width="300" height="300" fill="none" stroke="#1A1A1A" stroke-width="1.5">
-    <p>
+                    <rect x="100" y="100" width="200" height="200" transform="rotate(45 200 200)" opacity="0.2" />
-        <strong>Request ID:</strong> <code>@RequestId</code>
+                    <line x1="150" y1="150" x2="250" y2="250" />
-    </p>
+                    <line x1="250" y1="150" x2="150" y2="250" />
-}
+                    <circle cx="200" cy="200" r="80" stroke-dasharray="10 10" />
                </svg>
            </div>
-<h3>Development Mode</h3>
+            <div class="col-12 col-md-6 offset-md-1">
-<p>
+                <div class="meta-tag font-monospace text-uppercase text-danger mb-3">System Exception // Critical Halt</div>
    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
 </p>
 <p>
    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
    It can result in displaying sensitive information from exceptions to end users.
    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
    and restarting the app.
 </p>
-@code{
+                <h1 class="display-4 text-dark mb-4 editorial-headline">An unexpected<br />interruption.</h1>
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }
                <p class="text-muted mb-5 body-manifesto-text">
                    We are experiencing a technical disruption in our processing stream. Our team has been notified of this structural anomaly.
                </p>
                @if (ShowRequestId)
                {
                    <p class="font-monospace text-muted small mb-4">
                        Ref: <code>@RequestId</code>
                    </p>
                }
                <button class="btn btn-outline-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Library</button>
            </div>
        </div>
    </div>
 </div>
@code {
    [CascadingParameter] private HttpContext? HttpContext { get; set; }
    private string? RequestId { get; set; }
    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
@@ -0,0 +1,37 @@
 .artistic-error-container {
    background-color: #ffffff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 5rem 0;
 }
 .editorial-headline {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111111;
 }
 .body-manifesto-text {
    font-size: 1.1rem;
    max-width: 400px;
    line-height: 1.7;
 }
 .meta-tag {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #dc3545; /* Subtle red for system status */
 }
 .btn-outline-dark {
    border: 1px solid #111;
    transition: all 0.3s ease;
 }
    .btn-outline-dark:hover {
        background-color: #111;
        color: #fff;
    }
@@ -1,7 +1,203 @@
@page "/"
@rendermode InteractiveServer
-<PageTitle>Midrand Books</PageTitle>
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
-<h3>midrandbooks.co.za</h3>
+<div class="container text-center text-hero-wrapper">
    <h1 class="display-3 text-dark mb-3 px-2 master-headline">
        Discover thoughtfully curated<br>books for every reader.
    </h1>
    <p class="text-muted mx-auto mb-0 sub-headline">
        Explorations into books, reading culture, and the art of thoughtful curation from Midrand to the world.
    </p>
 </div>
-Welcome to the Midrand Books online bookstore! We are passionate about providing a wide selection of books to readers of all ages and interests. Whether you're looking for the latest bestsellers, classic literature, or educational resources, we have something for everyone.
+<div class="container mb-5 px-md-5">
    @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">
                @if (!AuthorId.HasValue)
                {
                    @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>
                }
            </div>
        </div>
        <div class="col-12 col-md-4">
            <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"><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="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-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 && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
    {
        <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="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">
                    <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">
                    <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 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>
                </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>
    }
    @if (!PaginatedBooks.Any())
    {
        <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)
    {
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
                <BookCard Id="@book.Id"
                          Title="@book.Name"
                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
                          Price="@ProductPriceCache[book.Id]"
                          Category="@ProductPrimaryCategoryCache[book.Id]"
                          IsNew="@book.Enabled"
                          BookImageUrl="@book.ImageUrl"
                          OnCardClick="() => NavigateToProduct(book.Id)" />
            }
        </div>
    }
    else if (CurrentViewMode == ViewMode.List)
    {
        <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.Name</span>
                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</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.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 @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>
                    </div>
                </div>
            }
        </div>
    }
    @if (HasMoreItems)
    {
        <div class="d-flex flex-column align-items-center justify-content-center mt-5 pt-4">
            <button class="btn btn-outline-dark rounded-pill px-5 py-2.5 fw-medium shadow-sm" style="font-size: 0.85rem;" @onclick="LoadNextPage">
                <span>Show More Artifacts</span>
            </button>
        </div>
    }
 </div>
 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
   aria-label="Back to top"
   href="#top-target">
    <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>
@@ -0,0 +1,239 @@
 using LiteCharms.Features;
 using LiteCharms.Features.MidrandBooks.AuthorBooks;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Categories;
 using LiteCharms.Features.MidrandBooks.Payments;
 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!;
    [Inject] private HydrationService HydrationService { get; set; } = default!;
    [Inject] private CancellationToken CancellationToken { get; set; } = default!;
    [Inject] private CartService CartService { get; set; } = default!;
    [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
    [SupplyParameterFromQuery] public long? AuthorId { get; set; }
    private ElementReference topTargetRef;
    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 Dictionary<long, string> ProductAuthorCache { get; set; } = [];
    private IEnumerable<Product> FilteredData
    {
        get
        {
            var data = ProductsCollection.AsEnumerable();
            if (ActiveCategory != "All" && !AuthorId.HasValue)
            {
                data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
                    ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
            }
            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
            {
                var q = SharedSearchQuery.Trim();
                data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
            }
            if (ActivePriceFilter != "all")
            {
                data = data.Where(p =>
                {
                    var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
                    return ActivePriceFilter switch
                    {
                        "under-500" => price < 500m,
                        "500-1000" => price >= 500m && price <= 1000m,
                        "over-1000" => price > 1000m,
                        _ => true
                    };
                });
            }
            if (OnlyShowNew) data = data.Where(p => p.Enabled);
            data = SelectedSortOption switch
            {
                "price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
                "price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
                "title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
                "default" or _ => data
            };
            return data;
        }
    }
    private IEnumerable<Product> PaginatedBooks => FilteredData.Take(VisibleCount);
    private bool HasMoreItems => FilteredData.Count() > VisibleCount;
    protected override async Task OnInitializedAsync() => await CartService.LoadCartFromStorageAsync();
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender == false && HydrationService.CartHydrated == false)
        {
            await HydrationService.EnsureCustomerExistsAsync(CancellationToken);
            await HydrationService.RehydrateCartFromPendingOrderAsync(CancellationToken);
        }
    }
    protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
    private async Task LoadCatalogDataAsync()
    {
        ProductsCollection.Clear();
        ProductPriceCache.Clear();
        ProductPrimaryCategoryCache.Clear();
        ProductAuthorCache.Clear();
        ActiveAuthorFilterName = null;
        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;
                        ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
                        var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
                        ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
                            ? (categoryResult.Value[0].Name ?? "General")
                            : "General";
                    }
                }
            }
            return;
        }
        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";
                ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
                    ? product.Metadata.Manufacturer
                    : "Unknown Author";
            }
        }
        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()
    {
        var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
        Navigation.NavigateTo(newUri);
    }
    private void ResetFilters()
    {
        SelectedSortOption = "default";
        ActivePriceFilter = "all";
        OnlyShowNew = false;
        VisibleCount = ItemsPerPage;
    }
    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;
        var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
        Navigation.NavigateTo(updatedUri);
    }
    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 LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
 }
@@ -0,0 +1,177 @@
 /* Expanding Search Input Controls */
 .search-input-container {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
 }
    .search-input-container.is-active {
        max-width: 280px;
        opacity: 1;
    }
 .custom-search-field {
    font-size: 0.8rem;
    height: 32px;
    box-shadow: none !important;
 }
 /* Structural Layout Typography */
 .branding-logo {
    font-size: 1.1rem;
    letter-spacing: -0.5px;
 }
 .text-hero-wrapper {
    margin-top: 5rem;
    margin-bottom: 3.5rem;
 }
 .master-headline {
    letter-spacing: -1.5px;
    font-weight: 400;
    line-height: 1.15;
 }
 .sub-headline {
    max-width: 520px;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
 }
 /* Filtering Dropdown Drawer Settings */
 .filter-dropdown-panel {
    border-radius: 12px;
 }
 .panel-section-heading {
    letter-spacing: 0.5px;
    font-size: 0.7rem;
 }
 .reset-link-btn {
    font-size: 0.7rem;
 }
 /* Custom Minimal Separator Rule Layout */
 .custom-milled-line {
    height: 35px;
    margin-top: 5px;
    margin-bottom: 25px;
    z-index: 0;
    pointer-events: none;
 }
 .center-bloom-shadow {
    bottom: 15px;
    width: 55%;
    height: 50px;
    background: radial-gradient(ellipse at bottom, rgba(20, 20, 20, 0.07) 0%, rgba(40, 40, 40, 0.02) 60%, rgba(255, 255, 255, 0) 100%);
    filter: blur(10px);
 }
 .core-horizontal-rule {
    bottom: 15px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
 }
 /* View Engine Layout Presentation Variants: Grid Cards */
 .book-grid-card {
    background-color: #F1F1F1;
    border-radius: 12px;
    min-height: 380px;
 }
 .badge-new-arrival {
    background-color: #E63946;
    font-size: 0.75rem;
 }
 .book-spine-fallback {
    width: 130px;
    height: 185px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    border-radius: 2px;
 }
 .product-card-title {
    font-size: 0.95rem;
    font-weight: 500;
 }
 /* View Engine Layout Presentation Variants: List Rows */
 .list-row-item {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background-color 0.2s ease;
 }
    .list-row-item:hover {
        background-color: rgba(0,0,0,0.01);
    }
 .structural-list-left {
    flex: 2;
 }
 .list-item-title {
    font-size: 0.95rem;
    min-width: 260px;
 }
 .list-item-author {
    min-width: 160px;
 }
 .list-item-tag {
    font-size: 0.65rem;
 }
 .list-new-badge {
    font-size: 0.65rem;
 }
 .list-item-price {
    font-size: 0.9rem;
    min-width: 80px;
    text-align: right;
 }
 /* Enable native smooth scrolling page-wide */
 html {
    scroll-behavior: smooth;
 }
 /* Back to Top Icon Layout Presentation */
 .back-to-top-btn {
    position: fixed !important;
    bottom: 32px;
    right: 32px;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    text-decoration: none !important;
    /* Dual-tone contrast visibility profile */
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 2147483647 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
    .back-to-top-btn:hover {
        transform: translateY(-4px);
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    }
 /* Direct the smooth scroll action straight to the layout viewport boundary */
 #top-target {
    scroll-margin-top: 100vh;
 }
@@ -1,5 +1,35 @@
@page "/not-found"
-@layout MainLayout
+@inject NavigationManager Navigation
-<h3>Not Found</h3>
+<div class="artistic-404-container">
-<p>Sorry, the content you are looking for does not exist.</p>
+    <div class="container h-100">
        <div class="row align-items-center justify-content-center min-vh-70 py-5">
            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
                <div class="artistic-svg-wrapper">
                    <svg viewBox="0 0 400 400" width="350" height="350" stroke="#1A1A1A" stroke-width="2" fill="none">
                        <path d="M60 80 Q80 60 100 80" />
                        <path d="M100 60 Q120 40 140 60" />
                        <path d="M280 70 Q300 50 320 70" />
                        <path d="M100 200 L200 180 L300 200 L300 300 L200 320 L100 300 Z" fill="#F8F8F8" />
                        <path d="M200 180 L200 320" />
                        <path d="M120 220 L180 220 M120 250 L180 250 M220 220 L280 220 M220 250 L280 250" stroke="#DDD" />
                        <circle cx="230" cy="230" r="40" />
                        <line x1="258" y1="258" x2="290" y2="290" />
                    </svg>
                </div>
            </div>
            <div class="col-12 col-md-6 offset-md-1">
                <div class="meta-tag font-monospace text-uppercase text-muted mb-3">System Index // Uncharted Territory</div>
                <h1 class="display-4 text-dark mb-4 editorial-headline">Nothing was found<br />in this search.</h1>
                <p class="text-muted mb-5 body-manifesto-text">
                    Even with careful scrutiny, the requested volume remains elusive. It appears the shelf you are exploring is currently vacant.
                </p>
                <button class="btn btn-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Collection</button>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,76 @@
 .artistic-404-container {
    background-color: #ffffff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 5rem 0;
 }
 .terrain-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Static, grounded look */
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 2rem;
 }
 .editorial-headline {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111111;
 }
 .body-manifesto-text {
    font-size: 1.1rem;
    max-width: 400px;
    line-height: 1.7;
 }
 .meta-tag {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
 }
 .btn-dark {
    transition: background 0.3s ease;
 }
    .btn-dark:hover {
        background: #444;
    }
 .artistic-404-container {
    background-color: #ffffff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 5rem 0;
 }
 .artistic-svg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .editorial-headline {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111111;
 }
 .body-manifesto-text {
    font-size: 1.1rem;
    max-width: 400px;
    line-height: 1.7;
 }
 .meta-tag {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
 }
@@ -0,0 +1,41 @@
@page "/payment-failed"
@rendermode InteractiveServer
@attribute [Authorize]
 <div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 text-center">
            <div class="mb-4">
                <div class="d-inline-block p-4 rounded-circle bg-danger bg-opacity-10 text-danger mb-3">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                </div>
                <h1 class="fw-bold mb-3">Payment Failed</h1>
                <p class="text-muted fs-5">We couldn't process your transaction. Don't worry, no money was deducted from your account, and your cart items are safe.</p>
                <div class="bg-light p-3 rounded mt-4">
                    <p class="mb-0 text-muted small text-uppercase fw-bold">Common Causes</p>
                    <p class="mb-0 fs-6 text-dark mt-1">Insufficient funds, incorrect card details, or a temporary bank gateway timeout.</p>
                </div>
            </div>
            <div class="d-grid gap-3 mt-5">
                <a href="/checkout" class="btn btn-dark btn-lg rounded-pill py-3">Try Again</a>
                <div class="row g-3">
                    <div class="col-6">
                        <a href="/" class="btn btn-outline-dark w-100 rounded-pill py-3">View Store</a>
                    </div>
                    <div class="col-6">
                        <a href="/support" class="btn btn-outline-dark w-100 rounded-pill py-3">Get Help</a>
                    </div>
                </div>
            </div>
            <p class="mt-5 text-muted small">If you noticed a charge or have any order questions, please contact our support desk with your account email <strong>user@email.com</strong>.</p>
        </div>
    </div>
 </div>
@@ -0,0 +1,38 @@
@page "/payment-success"
@rendermode InteractiveServer
@attribute [Authorize]
 <div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 text-center">
            <div class="mb-4">
                <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <h1 class="fw-bold mb-3">Order Confirmed</h1>
                <p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
                <div class="bg-light p-3 rounded mt-4">
                    <p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
                    <h5 class="fw-bold mb-0">#MB-2026-8834</h5>
                </div>
            </div>
            <div class="d-grid gap-3 mt-5">
                <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
                <div class="row g-3">
                    <div class="col-6">
                        <a href="/account" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
                    </div>
                    <div class="col-6">
                        <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
                    </div>
                </div>
            </div>
            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
        </div>
    </div>
 </div>
@@ -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>
@@ -0,0 +1,142 @@
 using LiteCharms.Features;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Authors.Models;
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Payments.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!;
    [Inject] private CartService CartService { get; set; } = default!;
    protected Cart ShoppingCart => CartService?.ShoppingCart!;
    protected bool IsLoading { get; private set; } = true;
    protected Product? CurrentProduct { get; private set; }
    protected ProductPrice? CurrentPrice { 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();
            var productResult = await ProductService.GetProductAsync(BookId);
            if (productResult.IsSuccess && productResult.Value != null)
            {
                CurrentProduct = productResult.Value;
                AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
                var priceResult = await ProductService.GetProductPriceAsync(BookId);
                LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
                CurrentPrice = priceResult.IsSuccess ? priceResult.Value : null;
                var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
                if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
                    PrimaryCategory = categoryResult.Value[0].Name ?? "General";
                var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
                if (authorResult.IsSuccess && authorResult.Value != null)
                {
                    CurrentAuthor = authorResult.Value;
                    if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
                        AuthorName = CurrentAuthor.Company;
                    else
                        AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
                }
                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;
            CurrentPrice = null;
        }
        finally
        {
            IsLoading = false;
        }
    }
    protected async void IncreaseQty()
    {
        if (CurrentPrice is not null)
        {
            CartService.UpdateQuantity(CurrentPrice!.Id, 1);
            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
            await CartService.SaveCartToStorageAsync();
        }
    }
    protected async void DecreaseQty() 
    {
        if (Quantity >= 1)
        {
            CartService.UpdateQuantity(CurrentPrice!.Id, -1);
            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
            await CartService.SaveCartToStorageAsync();
        }
    }
    protected async void HandleAddToCart()
    {
        if (CurrentProduct == null) return;
        if (CurrentPrice is not null)
        {
            if(ShoppingCart.Items.Any(p => p.Price!.Id == CurrentPrice.Id))
            {
                CartService.UpdateQuantity(CurrentPrice.Id, 1);
                await CartService.SaveCartToStorageAsync();
                return;
            }
            CartService.AddItem(CurrentPrice, CurrentProduct, CurrentAuthor!);
            Quantity = CartService.GetCartItemQuantity(ShoppingCart, CurrentPrice.Id);
            await CartService.SaveCartToStorageAsync();
        }
    }
    protected void ViewAllAuthorBooks()
    {
        if (CurrentAuthor is not null)
            Navigation.NavigateTo($"/?authorId={CurrentAuthor.Id}");
    }
 }
@@ -0,0 +1,379 @@
 /* ==========================================================================
   Structural Layout Containers
   ========================================================================== */
 .product-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
 }
 .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 ease;
 }
    .crumb-link:hover {
        color: #111;
    }
 .crumb-separator {
    margin: 0 0.5rem;
 }
 .crumb-current {
    color: #111;
    font-weight: 500;
 }
 /* ==========================================================================
   Left Section: Media Gallery Components
   ========================================================================== */
 .gallery-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
 }
 .main-image-wrapper {
    position: relative;
    background-color: #f9f9f9;
    border-radius: 8px;
    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;
 }
 /* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
 .format-badges {
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 50% !important; /* Move anchor point to exactly half-width */
    right: auto !important;
    transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: max-content !important; /* Expands safely according to badges text values */
    max-width: 90% !important; /* Keeps bounding box clean of parent borders */
 }
 .badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    font-weight: 600;
    border: 1px solid transparent;
    display: inline-block !important;
    white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
 }
 .badge-physical {
    background-color: #111;
    color: #fff;
 }
 .badge-ebook {
    background-color: #fff;
    color: #111;
    border-color: #e5e5e5;
 }
 .badge-online {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
 }
 /* Interactive Gallery Thumbnails Grid */
 .thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
 }
 .thumbnail-wrapper {
    width: 80px;
    height: 80px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    background: #f9f9f9;
    transition: all 0.2s ease;
 }
    .thumbnail-wrapper:hover,
    .thumbnail-wrapper.active {
        border-color: #111;
    }
    .thumbnail-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }
 /* ==========================================================================
   Right Section: Product Details & Typography Controls
   ========================================================================== */
 .details-section {
    display: flex;
    flex-direction: column;
 }
 .meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
 }
 .author-name {
    font-size: 1.1rem;
    color: #666;
 }
 /* Review Star Components */
 .rating-stars {
    display: flex;
    align-items: center;
    gap: 0.2rem;
 }
 .star {
    color: #e5e5e5;
    font-size: 1.1rem;
 }
    .star.filled {
        color: #ffc107;
    }
 .rating-text {
    font-size: 0.85rem;
    color: #666;
    margin-left: 0.4rem;
 }
 .product-title {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif, Georgia;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #111;
 }
 .product-price {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #111;
 }
 /* ==========================================================================
   Interactive E-Commerce Selection Bars
   ========================================================================== */
 .purchase-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
 }
 .quantity-picker {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 100px;
    padding: 0.25rem 0.5rem;
 }
 .qty-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
 }
    .qty-btn:hover {
        background-color: #f5f5f5;
    }
 .qty-val {
    min-width: 30px;
    text-align: center;
    font-weight: 500;
 }
 .btn-add-to-cart {
    flex-grow: 1;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem 1.5rem;
 }
    .btn-add-to-cart:hover {
        background-color: #2a2a2a;
    }
 .divider {
    border: 0;
    border-top: 1px solid #eee;
    margin-bottom: 2rem;
 }
 /* ==========================================================================
   Informational Text Elements & Links
   ========================================================================== */
 .info-block {
    margin-bottom: 2rem;
 }
    .info-block h3 {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #8c8c8c;
        margin-bottom: 0.75rem;
    }
 .description-text,
 .author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
 }
 .author-bio-card {
    background-color: #fafafa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
 }
 .btn-text-link {
    background: none;
    border: none;
    padding: 0;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
 }
    .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;
    }
    .main-image-wrapper {
        min-height: 320px;
        padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
    }
    .main-image {
        max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
    }
    .format-badges {
        bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
        gap: 0.4rem !important;
    }
    .badge {
        font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
        padding: 0.25rem 0.65rem !important;
    }
    .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;
    }
 }
@@ -0,0 +1,33 @@
@inject NavigationManager Navigation
 <div class="artistic-redirect-container">
    <div class="container h-100">
        <div class="row align-items-center justify-content-center min-vh-70 py-5">
            <div class="col-12 col-md-5 d-flex flex-column align-items-center text-center">
                <div class="artistic-svg-wrapper mb-4">
                    <svg viewBox="0 0 400 400" width="280" height="280" stroke="#1A1A1A" stroke-width="2" fill="none">
                        <path d="M60 300 L340 300" stroke-dasharray="4 4" />
                        <path d="M120 300 L120 160 Q120 100 200 100 Q280 100 280 160 L280 300" />
                        <path d="M170 170 L230 170 L220 230 L200 250 L180 230 Z" fill="#F8F8F8" />
                        <circle cx="200" cy="195" r="8" fill="#1A1A1A" />
                        <line x1="200" y1="203" x2="200" y2="218" stroke-width="3" />
                        <circle class="animated-pulse-ring" cx="200" cy="180" r="60" stroke="#DDD" stroke-width="1" />
                        <circle class="animated-pulse-ring-delayed" cx="200" cy="180" r="45" stroke="#EEE" stroke-width="1" />
                    </svg>
                </div>
                <div class="editorial-spinner mb-4"></div>
                <div class="meta-tag font-monospace text-uppercase text-muted mb-2">Secure Connection // Identity Node</div>
                <h2 class="fw-bold text-dark mb-3 editorial-subheadline">Verifying Session</h2>
                <p class="text-muted body-manifesto-text-center">
                    Redirecting you safely to the identity gateway to authorize your access permissions...
                </p>
            </div>
        </div>
    </div>
 </div>
@@ -0,0 +1,12 @@
 namespace MidrandBookshop.Components;
 public partial class RedirectToLogin
 {
    protected override void OnInitialized()
    {
        var relativePath = Navigation.ToBaseRelativePath(Navigation.Uri);
        var sanitizedRedirectPath = relativePath.StartsWith('/') ? relativePath : $"/{relativePath}";
        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(sanitizedRedirectPath)}", forceLoad: true);
    }
 }
@@ -0,0 +1,77 @@
 .artistic-redirect-container {
    background-color: #ffffff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 5rem 0;
 }
 .artistic-svg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
 }
 .editorial-subheadline {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #111111;
 }
 .body-manifesto-text-center {
    font-size: 1rem;
    max-width: 360px;
    line-height: 1.6;
 }
 .meta-tag {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
 }
 /* Custom Minimalist Spinner Concept */
 .editorial-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid #F0F0F0;
    border-top: 2px solid #1A1A1A; /* High contrast matching the SVG path line color */
    border-radius: 50%;
    animation: spin-editorial 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 /* Subtle background ring pulse paths */
 .animated-pulse-ring {
    transform-origin: 200px 180px;
    animation: gate-pulse 3s ease-in-out infinite;
 }
 .animated-pulse-ring-delayed {
    transform-origin: 200px 180px;
    animation: gate-pulse 3s ease-in-out infinite;
    animation-delay: 1.5s;
 }
@keyframes spin-editorial {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
 }
@keyframes gate-pulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
 }
@@ -1,6 +1,20 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@using Microsoft.AspNetCore.Components.Authorization
-    <Found Context="routeData">
+@using MidrandBookshop.Components.Pages
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+
-        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+<CascadingAuthenticationState>
-    </Found>
+    <Router AppAssembly="@typeof(Program).Assembly">
-</Router>
+        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>                    
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <NotFound />
            </LayoutView>
        </NotFound>
    </Router>
 </CascadingAuthenticationState>
@@ -9,3 +9,4 @@
@using MidrandBookshop
@using MidrandBookshop.Components
@using MidrandBookshop.Components.Layout
@using Microsoft.AspNetCore.Authorization;@using Microsoft.AspNetCore.Components.Authorization
@@ -0,0 +1,116 @@
 using LiteCharms.Features.MidrandBooks.AuthorBooks;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Customers;
 using LiteCharms.Features.MidrandBooks.Customers.Models;
 using LiteCharms.Features.MidrandBooks.Orders;
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.MidrandBooks.Payments.Models;
 using LiteCharms.Features.MidrandBooks.Products;
 namespace MidrandBookshop;
 public sealed class HydrationService(AuthenticationStateProvider authStateProvider, CustomerService customerService,
    ProductService productService, OrderService orderService, BooksService booksService, AuthorService authorService, 
    CartService cartService)
 {
    private Cart ShoppingCart => cartService.ShoppingCart;
    private AuthenticationState? AuthState { get; set; }
    private ClaimsPrincipal? User { get; set; }
    public bool CartHydrated { get; set; }
    public async Task EnsureCustomerExistsAsync(CancellationToken cancellationToken = default)
    {
        if (ShoppingCart.CustomerId > 0) return;
        AuthState = await authStateProvider.GetAuthenticationStateAsync();
        User = AuthState!.User;
        if (User?.Identity?.IsAuthenticated == false) return;
        var email = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
        var existingCustomer = await customerService.GetCustomerAsync(email, cancellationToken);
        if (existingCustomer.IsSuccess)
            ShoppingCart.CustomerId = existingCustomer.Value.Id;
        if (existingCustomer.IsFailed)
        {
            var name = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Name)!.Value!;
            var lastname = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Surname)!.Value!;
            var mobile = User!.Claims.FirstOrDefault(c => c.Type == ClaimTypes.MobilePhone)!.Value!;
            var customerCreate = await customerService.CreateCustomerAsync(new CreateCustomer { Email = email }, cancellationToken);
            if (customerCreate.IsSuccess)
            {
                ShoppingCart.CustomerId = customerCreate.Value;
                if (!string.IsNullOrWhiteSpace(name))
                    await customerService.CreateCustomerContactAsync((long)ShoppingCart.CustomerId, new CreateCustomerContact
                    {
                        Email = email,
                        Name = name,
                        LastName = lastname,
                        Phone = mobile,
                        Type = LiteCharms.Features.ContactTypes.Personal
                    }, cancellationToken);
            }
        }
    }
    public async Task RehydrateCartFromPendingOrderAsync(CancellationToken cancellationToken = default)
    {
        if (User?.Identity?.IsAuthenticated == false) return;
        if (ShoppingCart.OrderId > 0 && ShoppingCart.CustomerId > 0)
        {
            cartService.CalculateTotalPrice();
            CartHydrated = true;
            return;
        }
        var orderResult = await orderService.GetPendingOrderAsync((long)ShoppingCart.CustomerId!, cancellationToken);
        if (orderResult.IsFailed) return;
        if(orderResult.Value.Id == ShoppingCart.OrderId)
        {
            cartService.CalculateTotalPrice();
            CartHydrated = true;
            return;
        }
        var orderItemsResult = await orderService.GetOrderItemsAsync((long)orderResult.Value.Id!, cancellationToken);
        ShoppingCart.OrderId = orderResult.Value.Id;
        if(orderItemsResult.IsFailed) return;
        foreach (var item in orderItemsResult.Value)
        {
            var priceFetchResult = await productService.GetProductPriceAsync(item.ProductPriceId, cancellationToken);
            if (priceFetchResult.IsFailed) continue;
            var bookFetchResult = await booksService.GetBookByProductIdAsync(priceFetchResult.Value.ProductId, cancellationToken);
            if (bookFetchResult.IsFailed) continue;
            var authorFetchResult = await authorService.GetAuthorAsync(bookFetchResult.Value.AuthorId, cancellationToken);
            if (authorFetchResult.IsFailed) continue;
            if(!ShoppingCart.Items.Any(i => i.Price!.Id == item.ProductPriceId))
                cartService.AddItem(priceFetchResult.Value, bookFetchResult.Value.Product!, authorFetchResult.Value);
        }
        CartHydrated = true;
        await cartService.SaveCartToStorageAsync();
    }
 }
@@ -18,12 +18,13 @@
  </ItemGroup>
  <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.43.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.137.0" />
  </ItemGroup>
  <!-- UI -->
  <ItemGroup>
    <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.137.0" />
    <!-- Global Usings -->
    <Using Include="Blazored.Toast.Services" />
@@ -50,6 +51,18 @@
  <!-- Shared Global Usings -->
  <ItemGroup>
    <Using Include="Blazored.Toast" />
    <Using Include="Microsoft.JSInterop" />
    <Using Include="System.Globalization" />
    <Using Include="System.Security.Claims" />
    <Using Include="Microsoft.Extensions.Options" />
    <Using Include="Microsoft.EntityFrameworkCore" />
    <Using Include="Microsoft.AspNetCore.HttpOverrides" />
    <Using Include="Microsoft.AspNetCore.Components.Authorization" />
    <Using Include="Microsoft.AspNetCore.Components.Routing" />
    <Using Include="Microsoft.AspNetCore.Components.Web" />
    <Using Include="Microsoft.AspNetCore.WebUtilities" />
    <Using Include="Microsoft.AspNetCore.Components" />
    <Using Include="System.Security.Cryptography.X509Certificates" />
  </ItemGroup>
 </Project>
@@ -1,59 +1,51 @@
 using LiteCharms.Features.Extensions;
-using LiteCharms.Features.Mediator;
+using LiteCharms.Features.Postgres;
 using MidrandBookshop;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;
 var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
 builder.AddMonitoring();
-builder.Services.AddEndpointsApiExplorer();
+builder.Services.RegisterServices(builder.Configuration);
 //builder.Services.AddMediator();
 //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.AddMidrandShopDatabase(builder.Configuration);
 builder.Services.AddMidrandShopPostgresHealthCheck();
 //builder.Services.AddMidrandShopQuartzHealthCheck();
 builder.Services.AddHealthChecksSupport(builder.Configuration);
 var app = builder.Build();
 var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
 var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
 if (!scheduler!.IsStarted)
    await scheduler.Start();
 if (!app.Environment.IsDevelopment())
 {
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
 }
 app.UseForwardedHeaders();
 app.UseHttpsRedirection();
 app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHealthChecks("/health", new HealthCheckOptions
 {
    ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
 });
 app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHttpsRedirection();
 app.UseAntiforgery();
 app.MapStaticAssets();
 app.UseCookiePolicy();
 app.UseAuthentication();
 app.UseAuthorization();
 app.UseAntiforgery();
 app.AddSecurityEndpoints();
 using (var security = app.Services.CreateScope())
 {
    var dataProtectionContext = security.ServiceProvider.GetRequiredService<DataProtectionDbContext>();
    await dataProtectionContext.Database.MigrateAsync();
 }
 var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
 var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
 if (!scheduler!.IsStarted) await scheduler.Start();
 app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
@@ -13,8 +13,8 @@
      "https": {
        "commandName": "Project",
        "dotnetRunMessages": true,
-        "launchBrowser": true,
+        "launchBrowser": false,
-        "applicationUrl": "https://localhost:7021;http://localhost:5053",
+        "applicationUrl": "https://localhost:8443;http://localhost:8080",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
@@ -0,0 +1,60 @@
 using LiteCharms.Features.Mediator;
 using LiteCharms.Features.MidrandBooks.Payments;
 using LiteCharms.Features.Extensions;
 using LiteCharms.Features.MidrandBooks.Extensions;
 using static LiteCharms.Features.Extensions.Quartz;
 namespace MidrandBookshop;
 public static class Setup
 {
    public static IServiceCollection RegisterServices(this IServiceCollection services, IConfiguration configuration)
    {
        services.AddCancellationToken();
        services.AddAntiforgery();
        services.AddRazorComponents()
            .AddInteractiveServerComponents();
        services.AddEndpointsApiExplorer();
        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
        services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
        services.AddQuartzSchedulerClient(MidrandShopSchedulerName, configuration);
        services.AddMediator();
        services.AddEmailServices(configuration);
        services.AddEmailServiceBus();
        services.AddHttpClient();
        services.AddScoped<CartService>();
        services.AddScoped<HydrationService>();
        services.AddShopServices(includeLocalStorage: true);
        services.AddHashServices(configuration);
        services.AddPayfastServices(configuration);
        services.AddDataProtectionDatabase(configuration);
        services.AddMidrandShopDatabase(configuration);
        services.AddSecurityApiSdk(configuration);
        services.AddLiteCharmsWebSecurity(configuration);
        services.AddMidrandShopPostgresHealthCheck();
        services.AddMidrandShopQuartzHealthCheck();
        services.AddHealthChecksSupport(configuration);
        services.Configure<ForwardedHeadersOptions>(options =>
        {
            options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
            options.KnownProxies.Clear();
            options.KnownIPNetworks.Clear();
            options.ForwardLimit = null;
            options.RequireHeaderSymmetry = false;
        });
        return services;
    }
 }
@@ -1,16 +1,35 @@
 {
-  "Email": {
+  "PayfastSettings": {
-    "Credentials": {
+    "CheckoutUrl": "https://sandbox.payfast.co.za/eng/process",
-      "Username": "shop@litecharms.co.za"
+    "ValidHosts": [
-    },
+      "www.payfast.co.za",
-    "Port": 465,
+      "sandbox.payfast.co.za",
-    "Host": "mail.litecharms.co.za",
+      "ips.payfast.co.za",
-    "UseSsl": true
+      "api.payfast.co.za",
      "payment.payfast.io"
    ]
  },
  "LiteCharmsSettings": {
    "Authority": "https://sts.security.khongisa.co.za"
  },
  "LiteCharmsClientSettings": {
    "Authority": "https://sts.security.khongisa.co.za",
    "GrantType": "client_credentials",
    "Scope": "midrandbooks-api"
  },
  "HasherSettings": {
    "MinHashLength": 11
  },
  "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": {
@@ -1,60 +1,114 @@
-html, body {
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
 :root {
    /* Fonts */
    --font-heading: 'Instrument Serif', serif;
    --font-ui: 'Inter', sans-serif;
    /* Color Palette */
    --mb-bg: #F9F9F9;
    --mb-card-bg: #FFFFFF;
    --mb-text-dark: #1A1A1A;
    --mb-text-muted: #666666;
    --mb-accent-red: #E63946;
    --mb-radius: 12px;
    /* High-Visibility Machined White Metal Core Surface Definition */
    /* Sharp linear reflection channels paired with micro-milled density grids */
    --brushed-metal-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 245, 0.95) 25%, rgba(255, 255, 255, 1) 50%, rgba(238, 240, 244, 0.95) 75%, rgba(255, 255, 255, 1) 100% ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.012) 0px, rgba(0, 0, 0, 0.012) 1px, transparent 1px, transparent 2px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 1px, transparent 1px, transparent 3px ), #EDEFF4; /* Definitive satin platinum breakout base fallback */
 }
-a, .btn-link {
+/* Global Reset & Core Variables Mapping */
-    color: #006bb7;
+body {
    background-color: var(--mb-bg);
    color: var(--mb-text-dark);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
 }
-.btn-primary {
+h1, h2, h3, .display-font {
-    color: #fff;
+    font-family: var(--font-heading);
-    background-color: #1b6ec2;
+    font-weight: 400;
    border-color: #1861ac;
 }
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+/* Custom Navigation Pill Styling */
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+.nav-pill-wrapper {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
 }
-.content {
+.nav-pill-link {
-    padding-top: 1.1rem;
+    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mb-text-muted);
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
 }
-h1:focus {
+    .nav-pill-link i {
-    outline: none;
+        width: 16px;
-}
+        height: 16px;
-
+        stroke-width: 1.5;
 .valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
 }
 .invalid {
    outline: 1px solid #e50000;
 }
 .validation-message {
    color: #e50000;
 }
 .blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
 }
    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
-.darker-border-checkbox.form-check-input {
+    /* Navigation Pill States */
-    border-color: #929292;
+    .nav-pill-link:hover {
        color: var(--mb-text-dark);
        background-color: #F1F1F1;
    }
    .nav-pill-link.active {
        color: #FFFFFF !important;
        background-color: var(--mb-text-dark);
    }
        .nav-pill-link.active svg {
            stroke: #FFFFFF;
        }
 /* Utilities & Component Support Layouts */
 .cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--mb-text-dark);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mb-bg);
 }
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+.transition-smooth {
-    color: var(--bs-secondary-color);
+    transition: color 0.2s ease;
    text-align: end;
 }
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+    .transition-smooth:hover {
-    text-align: start;
+        color: var(--mb-text-dark) !important;
    }
 .py-1-5 {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
 }
 /* Global Focus Ring Corrections */
 h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
    outline: none !important;
    box-shadow: none !important;
 }
 [tabindex="-1"]:focus {
    outline: none !important;
 }
@@ -1,4 +1,3 @@
 ---
 apiVersion: v1
 kind: Namespace
 metadata:
@@ -11,20 +10,25 @@ metadata:
  namespace: midrandbooks-uat
 data:
  ASPNETCORE_ENVIRONMENT: "Development"  
-  ASPNETCORE_URLS: "http://0.0.0.0:8080"
+  ASPNETCORE_URLS: "http://0.0.0.0:8443"
  Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
  Monitoring__ServiceName: "MidrandBooks.Uat"
---
+  HasherSettings__MinHashLength: "11"
-apiVersion: v1
+  BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
-kind: Secret
+  BookshopS3Settings__Region: "garage"
-metadata:
+  BookshopS3Settings__BucketName: "bookshop"
-  name: midrandbooks-secrets
+  BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
-  namespace: midrandbooks-uat
+  PayfastSettings__CheckoutUrl: "https://sandbox.payfast.co.za/eng/process"
-type: Opaque
+  PayfastSettings__ValidHosts__0: "www.payfast.co.za"
-data:  
+  PayfastSettings__ValidHosts__1: "sandbox.payfast.co.za"
-  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
+  PayfastSettings__ValidHosts__2: "ips.payfast.co.za"
-  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
+  PayfastSettings__ValidHosts__3: "api.payfast.co.za"
-  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+  PayfastSettings__ValidHosts__4: "payment.payfast.io"
  LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
  LiteCharmsSettings__Audience: "midrandbooks-api"
  LiteCharmsClientSettings__Authority: "https://sts.security.khongisa.co.za"
  LiteCharmsClientSettings__GrantType: "client_credentials"
  LiteCharmsClientSettings__Scope: "midrandbooks-api"
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -72,56 +76,60 @@ spec:
              memory: "256Mi"
              cpu: "100m"
          ports:
-            - containerPort: 8080
+            - containerPort: 8443
          envFrom:
            - configMapRef:
                name: midrandbooks-config
            - secretRef:
                name: midrandbooks-secrets          
          env:
-            - name: ConnectionStrings__PostgresScheduler
+            - name: DataProtection__Certificate
              valueFrom:
                secretKeyRef:
-                  name: midrandbooks-secrets
+                  name: litecharms-certs
-                  key: connection-string-quartz
+                  key: litecharms.pfx
-            - name: ConnectionStrings__PostgresMidrandShop
+            - name: DataProtection__Password
              valueFrom:
                secretKeyRef:
-                  name: midrandbooks-secrets
+                  name: litecharms-certs
-                  key: connection-string            
+                  key: passphrase
            - name: Monitoring__Address
              valueFrom:
                configMapKeyRef:
                  name: midrandbooks-config
                  key: Monitoring__Address
            - name: Monitoring__ServiceName
              valueFrom:
                configMapKeyRef:
                  name: midrandbooks-config
                  key: Monitoring__ServiceName
            - name: Monitoring__ApiKey
              valueFrom:
                secretKeyRef:
                  name: midrandbooks-secrets
                  key: aspire-apikey
          volumeMounts:
            - name: cluster-certs-volume
              mountPath: /tmp/litecharms-raw-certs
              readOnly: true
            - name: data
-              mountPath: /app/wwwroot/content
+              mountPath: /app/content
-              resources:          
+              subPath: bookshop-content
          lifecycle:
            postStart:
              exec:
                command:
                  - /bin/sh
                  - -c
                  - |
                    cp /tmp/litecharms-raw-certs/litecharms.crt /usr/local/share/ca-certificates/litecharms.crt
                    update-ca-certificates
          livenessProbe:
            httpGet:
              path: /health
-              port: 8080
+              port: 8443
              scheme: HTTP
            initialDelaySeconds: 5
            periodSeconds: 10
          readinessProbe:
            httpGet:
              path: /health
-              port: 8080
+              port: 8443
              scheme: HTTP
            initialDelaySeconds: 3
            periodSeconds: 5
      volumes:
        - name: data
          persistentVolumeClaim:
            claimName: midrandbooks-pvc
        - name: cluster-certs-volume
          secret:
            secretName: litecharms-certs
 ---
 apiVersion: v1
 kind: Service
@@ -129,14 +137,12 @@ metadata:
  name: midrandbooks-service
  namespace: midrandbooks-uat
 spec:
-  type: ClusterIP
+  ports:
    - name: https
      port: 443
      targetPort: 8443
  selector:
    app: midrandbooks
  ports:
    - name: http
      protocol: TCP
      port: 80
      targetPort: 8080
 ---
 apiVersion: traefik.io/v1alpha1
 kind: IngressRoute
@@ -151,10 +157,11 @@ spec:
      kind: Rule
      services:
        - name: midrandbooks-service
-          port: 80
+          port: 443
          sticky:
            cookie:
              name: "lp-sticky-session"
              httpOnly: true
              secure: true
          scheme: http
  tls: {}
Author	SHA1	Message	Date
khwezi	e21fd59b12	Merge pull request 'Removed https failsafe' (#92 ) from cart into main Reviewed-on: #92	2026-06-15 22:54:33 +02:00
Khwezi Mngoma	fcc0b3845e	Removed https failsafe continuous-integration/drone/pr Build is passing Details	2026-06-15 22:53:55 +02:00
khwezi	956c19b9f7	Merge pull request 'Removed secrets from manifest since they are hosted in the cluster' (#91 ) from cart into main Reviewed-on: #91	2026-06-15 22:40:51 +02:00
Khwezi Mngoma	a23292f02a	Removed secrets from manifest since they are hosted in the cluster continuous-integration/drone/pr Build is passing Details	2026-06-15 22:39:41 +02:00
khwezi	f27433a277	Merge pull request 'Added https failsafe' (#90 ) from cart into main Reviewed-on: #90	2026-06-15 17:22:44 +02:00
Khwezi Mngoma	4954ead02d	Added https failsafe continuous-integration/drone/pr Build is passing Details	2026-06-15 17:22:20 +02:00
khwezi	7294e5470f	Merge pull request 'Removed UseHttpsRedirection' (#89 ) from cart into main Reviewed-on: #89	2026-06-15 17:12:12 +02:00
Khwezi Mngoma	79eebea7b1	Removed UseHttpsRedirection continuous-integration/drone/pr Build is passing Details	2026-06-15 17:11:48 +02:00
khwezi	5db926f4c6	Merge pull request 'Implemented cart hydration and refactored paynow flow' (#88 ) from cart into main Reviewed-on: #88	2026-06-15 16:42:52 +02:00
Khwezi Mngoma	7199a6651b	Implemented cart hydration and refactored paynow flow continuous-integration/drone/pr Build is passing Details	2026-06-15 16:42:09 +02:00
khwezi	a4460888af	Merge pull request 'cart' (#87 ) from cart into main Reviewed-on: #87	2026-06-15 00:45:46 +02:00
Khwezi Mngoma	11e0176e40	Enabled sticky sessions continuous-integration/drone/pr Build is passing Details	2026-06-15 00:45:25 +02:00
Khwezi Mngoma	160c23ab8b	Removed failsafe	2026-06-15 00:36:46 +02:00
Khwezi Mngoma	2b1d862d3b	Added proto handling fail safe	2026-06-15 00:31:51 +02:00
khwezi	9de7abc3fb	Merge pull request 'Refactored fowarded header config in app' (#86 ) from cart into main Reviewed-on: #86	2026-06-15 00:26:27 +02:00
Khwezi Mngoma	c6fc228c66	Refactored fowarded header config in app continuous-integration/drone/pr Build is passing Details	2026-06-15 00:26:06 +02:00
khwezi	e9b2e958d2	Merge pull request 'Removed invalid manifest field' (#85 ) from cart into main Reviewed-on: #85	2026-06-15 00:05:49 +02:00
Khwezi Mngoma	dc3dd4a40b	Removed invalid manifest field continuous-integration/drone/pr Build is passing Details	2026-06-15 00:05:22 +02:00
khwezi	44df489406	Merge pull request 'Refactored manifest' (#84 ) from cart into main Reviewed-on: #84	2026-06-14 23:57:35 +02:00
Khwezi Mngoma	1bb1b0d476	Refactored manifest continuous-integration/drone/pr Build is failing Details	2026-06-14 23:57:06 +02:00
khwezi	0ea31a33ae	Merge pull request 'Updates app pipelining and cleaned up service registration' (#83 ) from cart into main Reviewed-on: #83	2026-06-14 23:41:44 +02:00
Khwezi Mngoma	0bb5da3513	Updates app pipelining and cleaned up service registration continuous-integration/drone/pr Build is passing Details	2026-06-14 23:40:47 +02:00
khwezi	4f44d0c597	Merge pull request 'Updated multi pod handling of sticky sessions' (#82 ) from cart into main Reviewed-on: #82	2026-06-14 23:15:57 +02:00
Khwezi Mngoma	c3e6f9801b	Updated multi pod handling of sticky sessions continuous-integration/drone/pr Build is passing Details	2026-06-14 23:14:41 +02:00
khwezi	fbde2ea1a9	Merge pull request 'Updated handling of fowarded header and fixed base64 encoding of certificate' (#81 ) from cart into main Reviewed-on: #81	2026-06-14 22:56:51 +02:00
Khwezi Mngoma	d323bd866c	Updated handling of fowarded header and fixed base64 encoding of certificate continuous-integration/drone/pr Build is passing Details	2026-06-14 22:56:23 +02:00
khwezi	651682156c	Merge pull request 'Moved kerstel definition to the service defitniton section' (#80 ) from cart into main Reviewed-on: #80	2026-06-14 18:02:28 +02:00
Khwezi Mngoma	a6a41eaeac	Moved kerstel definition to the service defitniton section continuous-integration/drone/pr Build is failing Details	2026-06-14 18:01:42 +02:00
khwezi	e81789f8c6	Merge pull request 'Refactore the entire k8s manifest for pure https routing' (#79 ) from cart into main Reviewed-on: #79	2026-06-14 17:49:17 +02:00
Khwezi Mngoma	17a74ca750	Refactore the entire k8s manifest for pure https routing continuous-integration/drone/pr Build is failing Details	2026-06-14 17:48:39 +02:00
khwezi	b9f3274633	Merge pull request 'Update cookie policies' (#78 ) from cart into main Reviewed-on: #78	2026-06-14 13:16:05 +02:00
Khwezi Mngoma	53b3018d9e	Update cookie policies continuous-integration/drone/pr Build is passing Details	2026-06-14 13:15:30 +02:00
khwezi	552e9ff1b4	Merge pull request 'Updated cookie policies' (#77 ) from cart into main Reviewed-on: #77	2026-06-14 12:56:36 +02:00
Khwezi Mngoma	8002920a07	Updated cookie policies continuous-integration/drone/pr Build is passing Details	2026-06-14 12:56:09 +02:00
khwezi	629dbe7cfe	Merge pull request 'Reordered service registration' (#76 ) from cart into main Reviewed-on: #76	2026-06-14 12:45:01 +02:00
Khwezi Mngoma	285cb29867	Reordered service registration continuous-integration/drone/pr Build is passing Details	2026-06-14 12:42:22 +02:00
khwezi	25acd67485	Merge pull request 'Refactored starup pipeline' (#75 ) from cart into main Reviewed-on: #75	2026-06-14 12:23:55 +02:00
Khwezi Mngoma	596ab396a4	Refactored starup pipeline continuous-integration/drone/pr Build is passing Details	2026-06-14 12:23:23 +02:00
khwezi	d3672a6db9	Merge pull request 'Encapsulated the cert string in a base 64 string' (#74 ) from cart into main Reviewed-on: #74	2026-06-14 12:05:50 +02:00
Khwezi Mngoma	9cbde6e622	Encapsulated the cert string in a base 64 string continuous-integration/drone/pr Build is passing Details	2026-06-14 12:05:21 +02:00
khwezi	a8056e7a9a	Merge pull request 'Refactored manifest' (#73 ) from cart into main Reviewed-on: #73	2026-06-14 11:49:38 +02:00
Khwezi Mngoma	8ddf769fab	Refactored manifest continuous-integration/drone/pr Build is passing Details	2026-06-14 11:49:08 +02:00
khwezi	4458a1e189	Merge pull request 'Added data protection keys and cert encryption to them' (#72 ) from cart into main Reviewed-on: #72	2026-06-14 11:33:32 +02:00
Khwezi Mngoma	44741d2162	Added data protection keys and cert encryption to them continuous-integration/drone/pr Build is passing Details	2026-06-14 11:33:04 +02:00
khwezi	2aeeb7a240	Merge pull request 'Added data protection key persistance' (#71 ) from cart into main Reviewed-on: #71	2026-06-13 23:51:54 +02:00
Khwezi Mngoma	5204816370	Added data protection key persistance continuous-integration/drone/pr Build is passing Details	2026-06-13 23:51:21 +02:00
khwezi	378044d011	Merge pull request 'cart' (#70 ) from cart into main Reviewed-on: #70	2026-06-13 23:20:54 +02:00
Khwezi Mngoma	ec4c9d9689	Fixed login and logout redirect issue continuous-integration/drone/pr Build is passing Details	2026-06-13 23:20:02 +02:00
Khwezi Mngoma	ff826f0b73	Moved RedirectToLogin code to code behind	2026-06-13 22:14:21 +02:00
Khwezi Mngoma	6d76442dcf	Reordered solution	2026-06-13 21:54:15 +02:00
Khwezi Mngoma	5ffe9793e8	Stable payfast interaction	2026-06-13 21:50:29 +02:00
khwezi	4e42d9f21a	Merge pull request 'Using shared service for Cart management' (#56 ) from cart into main Reviewed-on: #56	2026-06-12 08:55:26 +02:00
Khwezi Mngoma	0765e63d8a	Using shared service for Cart management continuous-integration/drone/pr Build is passing Details	2026-06-12 08:54:53 +02:00
khwezi	0b7476d31c	Merge pull request 'Stable checkout page' (#55 ) from cart into main Reviewed-on: #55	2026-06-11 14:25:23 +02:00
Khwezi Mngoma	234fb0f2f3	Stable checkout page continuous-integration/drone/pr Build is passing Details	2026-06-11 14:24:42 +02:00
khwezi	925c1f5988	Merge pull request 'Completed Cart page design' (#54 ) from cart into main Reviewed-on: #54	2026-06-11 00:24:41 +02:00
Khwezi Mngoma	e7acb05027	Completed Cart page design continuous-integration/drone/pr Build is passing Details	2026-06-11 00:23:57 +02:00
khwezi	9629d9ddf9	Merge pull request 'Wired up CartDrawel and ProductView to cart service and local storage' (#53 ) from cart into main Reviewed-on: #53	2026-06-10 23:02:07 +02:00
Khwezi Mngoma	64e0fcba27	Wired up CartDrawel and ProductView to cart service and local storage continuous-integration/drone/pr Build is passing Details	2026-06-10 23:01:21 +02:00
khwezi	7a11572294	Merge pull request 'cart' (#52 ) from cart into main Reviewed-on: #52	2026-06-09 23:41:28 +02:00
Khwezi Mngoma	3bce80c963	Implemented cart service with state tracker and linked to main layout continuous-integration/drone/pr Build is passing Details	2026-06-09 23:39:49 +02:00
Khwezi Mngoma	d3e9b30be5	Updated nuget packaged to includ the CartService	2026-06-09 20:51:56 +02:00
khwezi	a75bf5951d	Merge pull request 'Fixed manifest secret name' (#51 ) from mock-data into main Reviewed-on: #51	2026-06-07 16:51:40 +02:00
Khwezi Mngoma	a3bc2bc3f9	Fixed manifest secret name continuous-integration/drone/pr Build is passing Details	2026-06-07 16:51:07 +02:00
khwezi	bbcf64aa65	Merge pull request 'Stable user session management' (#50 ) from mock-data into main Reviewed-on: #50	2026-06-07 16:39:15 +02:00
Khwezi Mngoma	a66a84af75	Stable user session management continuous-integration/drone/pr Build is passing Details	2026-06-07 15:41:54 +02:00
khwezi	a688bc816a	Merge pull request 'Updated packages' (#49 ) from mock-data into main Reviewed-on: #49	2026-06-05 09:26:44 +02:00
Khwezi Mngoma	895d99a2e5	Updated packages continuous-integration/drone/pr Build is passing Details	2026-06-05 09:24:45 +02:00
khwezi	4fe801583e	Merge pull request 'Build trigger' (#48 ) from mock-data into main Reviewed-on: #48	2026-06-05 09:08:18 +02:00
Khwezi Mngoma	de714d2271	Build trigger continuous-integration/drone/pr Build is passing Details	2026-06-05 09:07:50 +02:00
khwezi	af3d40531b	Merge pull request 'Removd proto handling from login process' (#47 ) from mock-data into main Reviewed-on: #47	2026-06-05 09:00:10 +02:00
Khwezi Mngoma	64b46865cf	Removd proto handling from login process	2026-06-05 08:59:00 +02:00
khwezi	bc2b9f81e0	Merge pull request 'Simplified logn and logout process' (#46 ) from mock-data into main Reviewed-on: #46	2026-06-05 08:22:30 +02:00
Khwezi Mngoma	db74ffbebe	Simplified logn and logout process continuous-integration/drone/pr Build is passing Details	2026-06-05 08:21:50 +02:00
khwezi	49279c0cec	Merge pull request 'Added port stripping' (#45 ) from mock-data into main Reviewed-on: #45	2026-06-05 07:40:24 +02:00
Khwezi Mngoma	8f68d8c60e	Added port stripping continuous-integration/drone/pr Build is passing Details	2026-06-05 07:39:58 +02:00
khwezi	edabe266e5	Merge pull request 'Refactored https logni proto handling' (#44 ) from mock-data into main Reviewed-on: #44	2026-06-05 06:44:12 +02:00
Khwezi Mngoma	58dc67e680	Refactored https logni proto handling continuous-integration/drone/pr Build is passing Details	2026-06-05 06:43:36 +02:00
khwezi	248dd32b1b	Merge pull request 'Added support for forwarded headers' (#43 ) from mock-data into main Reviewed-on: #43	2026-06-05 06:30:37 +02:00
Khwezi Mngoma	5123a4d3ac	Added support for forwarded headers continuous-integration/drone/pr Build is passing Details	2026-06-05 06:29:55 +02:00
khwezi	1645b6bbae	Merge pull request 'Fixed secrets mappings' (#42 ) from mock-data into main Reviewed-on: #42	2026-06-05 06:17:30 +02:00
Khwezi Mngoma	ae51a3a864	Fixed secrets mappings continuous-integration/drone/pr Build is passing Details	2026-06-05 06:16:42 +02:00
khwezi	72725a302a	Merge pull request 'mock-data' (#41 ) from mock-data into main Reviewed-on: #41	2026-06-05 05:58:44 +02:00
Khwezi Mngoma	31a640d672	Stable security continuous-integration/drone/pr Build is passing Details	2026-06-05 05:58:05 +02:00
Khwezi Mngoma	097ecd6421	Configured security	2026-06-04 14:45:33 +02:00
khwezi	f3d79174be	Merge pull request 'Upgraded quartz' (#40 ) from mock-data into main Reviewed-on: #40	2026-06-03 11:54:17 +02:00
Khwezi Mngoma	9b3e889d89	Upgraded quartz continuous-integration/drone/pr Build is passing Details	2026-06-03 11:53:31 +02:00
khwezi	c086aa60e4	Merge pull request 'Updated backend' (#39 ) from mock-data into main Reviewed-on: #39	2026-06-02 00:31:16 +02:00
Khwezi Mngoma	e35a68f7e8	Updated backend continuous-integration/drone/pr Build is passing Details	2026-06-02 00:30:47 +02:00
khwezi	66b377bf69	Merge pull request 'Fixed event service discovery issue' (#38 ) from mock-data into main Reviewed-on: #38	2026-06-01 23:39:37 +02:00
Khwezi Mngoma	b70ecab9ea	Fixed event service discovery issue continuous-integration/drone/pr Build is passing Details	2026-06-01 23:39:05 +02:00
khwezi	82389a9304	Merge pull request 'Updated backend' (#37 ) from mock-data into main Reviewed-on: #37	2026-06-01 22:58:55 +02:00
Khwezi Mngoma	209947d70f	Updated backend continuous-integration/drone/pr Build is passing Details	2026-06-01 22:58:10 +02:00
khwezi	4bf1d2e77a	Merge pull request 'Ensured appsettings aligns with k8s config' (#36 ) from mock-data into main Reviewed-on: #36	2026-06-01 16:37:57 +02:00
Khwezi Mngoma	edb9c281ef	Ensured appsettings aligns with k8s config continuous-integration/drone/pr Build is passing Details	2026-06-01 11:57:44 +02:00
khwezi	2b6576de85	Merge pull request 'Refactored app k8s manifest' (#35 ) from mock-data into main Reviewed-on: #35	2026-06-01 11:16:54 +02:00
Khwezi Mngoma	b189b26b62	Refactored app k8s manifest continuous-integration/drone/pr Build is passing Details	2026-06-01 11:15:54 +02:00
khwezi	7de957ed6f	Merge pull request 'Refactored manifest to include s3 bucket and HasherService configs and secrets' (#34 ) from mock-data into main Reviewed-on: #34	2026-06-01 09:50:59 +02:00
Khwezi Mngoma	52e3ab16bf	Refactored manifest to include s3 bucket and HasherService configs and secrets continuous-integration/drone/pr Build is failing Details Upgraded nuget packages to bring in new Payment and Product service functionality	2026-06-01 09:50:14 +02:00
khwezi	16fdcc8005	Merge pull request 'Authors now showing on the listing' (#31 ) from mock-data into main Reviewed-on: #31	2026-05-30 22:23:09 +02:00
Khwezi Mngoma	26cd12532c	Authors now showing on the listing continuous-integration/drone/pr Build is passing Details Back to the top works	2026-05-30 22:19:35 +02:00
khwezi	a614d14da5	Merge pull request 'mock-data' (#30 ) from mock-data into main Reviewed-on: #30	2026-05-30 21:01:05 +02:00
Khwezi Mngoma	01a0264452	Working search continuous-integration/drone/pr Build is passing Details	2026-05-30 21:00:13 +02:00
Khwezi Mngoma	af02cbc649	Working filter	2026-05-30 19:48:06 +02:00
khwezi	b722ea2cd0	Merge pull request 'mock-data' (#29 ) from mock-data into main Reviewed-on: #29	2026-05-30 19:06:49 +02:00
Khwezi Mngoma	7a1a7566d6	Stable running home page with product view continuous-integration/drone/pr Build is passing Details	2026-05-30 19:06:14 +02:00
Khwezi Mngoma	f2ff7e3647	Added category support in backend	2026-05-30 16:12:47 +02:00
Khwezi Mngoma	e5358160dd	Updated nuget packages	2026-05-30 15:42:16 +02:00
Khwezi Mngoma	07749bd68c	Moved Home page code to code-behind	2026-05-30 10:17:47 +02:00
khwezi	73145fd360	Merge pull request 'Upgraded backend services' (#28 ) from ui-design into main Reviewed-on: #28	2026-05-30 00:32:23 +02:00
Khwezi Mngoma	0a3dd61ce0	Upgraded backend services continuous-integration/drone/pr Build is passing Details	2026-05-30 00:31:54 +02:00
khwezi	7f29680993	Merge pull request 'ui-design' (#18 ) from ui-design into main Reviewed-on: #18	2026-05-24 11:30:13 +02:00
Khwezi Mngoma	2f8afc380e	Light refactor continuous-integration/drone/pr Build is passing Details	2026-05-24 11:29:49 +02:00
Khwezi Mngoma	cda1d225bc	Final design touches	2026-05-24 11:27:59 +02:00
khwezi	56626d2693	Merge pull request 'ui-design' (#17 ) from ui-design into main Reviewed-on: #17	2026-05-24 10:48:55 +02:00
Khwezi Mngoma	051992accf	Completed UX/UI design continuous-integration/drone/pr Build is passing Details	2026-05-24 10:46:43 +02:00
Khwezi Mngoma	e6880959d9	Added the payment confirmation page	2026-05-23 17:12:14 +02:00
Khwezi Mngoma	384daa0e54	Added cart page	2026-05-23 17:05:59 +02:00
Khwezi Mngoma	0cb77f87af	Styled not found page	2026-05-23 16:52:27 +02:00
Khwezi Mngoma	5e839dca03	Implemented main home design and cart viewer	2026-05-23 15:37:44 +02:00