Merge pull request 'Refactored starup pipeline' (#75 ) from cart into main

Reviewed-on: #75
Refactored starup pipeline
2026-06-14 12:23:55 +02:00 · 2026-06-14 12:23:23 +02:00 · 2026-06-14 12:05:50 +02:00 · 2026-06-14 12:05:21 +02:00 · 2026-06-14 11:49:38 +02:00 · 2026-06-14 11:49:08 +02:00
35 changed files with 2025 additions and 1159 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" />
@@ -1,26 +1,52 @@
-<div class="col-12 col-md-6 col-lg-4 mb-4">
-    <div class="card border-0 h-100 p-4 position-relative" style="background-color: #F1F1F1; border-radius: var(--mb-radius);">
+<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
+    <div class="d-flex flex-column h-100 justify-content-between">
+
+        <div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
+             style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
+             @onclick="OnCardClick">
+
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                @if (IsNew)
+                {
+                    <span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
+                }
+                else
+                {
+                    <div></div>
+                }
+                <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
+                        <line x1="7" y1="17" x2="17" y2="7" />
+                        <polyline points="7,7 17,7 17,17" />
+                    </svg>
+                </button>
+            </div>
+
+            <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
+                @if (!string.IsNullOrWhiteSpace(BookImageUrl))
+                {
+                    <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+                }
+                else
+                {
+                    <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
+                         style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
+                        <div style="max-width: 100%; overflow: hidden; word-break: break-word;">
+                            @Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
+                        </div>
+                    </div>
+                }
+            </div>

-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <span class="badge rounded-pill px-3 py-2" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
-            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
-                <i data-lucide="arrow-up-right" style="width: 16px; height: 16px; color: var(--mb-text-dark);"></i>
-            </button>
        </div>

-        <div class="d-flex justify-content-center align-items-center flex-grow-1 my-3" style="min-height: 260px;">
-            <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+        <div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
+            <div style="max-width: 72%;">
+                <span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
+                <span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
+            </div>
+            <span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
        </div>

    </div>
-    <div class="d-flex justify-content-between align-items-center mt-3 px-2">
-        <span class="fw-medium text-dark" style="font-size: 0.9rem;">@Title</span>
-        <span class="text-muted fw-semibold" style="font-size: 0.9rem;">$@Price</span>
-    </div>
 </div>
-
-@code {
-    [Parameter] public string Title { get; set; } = "";
-    [Parameter] public decimal Price { get; set; }
-    [Parameter] public string BookImageUrl { get; set; } = "";
-}
@@ -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; }
+}
@@ -2,13 +2,11 @@
@inject NavigationManager Navigation

 <div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
-
-    @* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
    <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
    <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
        <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 (@CartItems.Sum(i => i.Quantity))
+                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">
@@ -19,7 +17,7 @@
        </div>

        <div class="cart-body flex-grow-1 overflow-y-auto p-4">
-            @if (!CartItems.Any())
+            @if (!ShoppingCart.Items.Any())
            {
                <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">
@@ -31,22 +29,29 @@
            else
            {
                <div class="d-flex flex-column gap-4">
-                    @foreach (var item in CartItems)
+                    @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;">
-                                [ COVER ]
+                                @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.Title</h6>
-                                <p class="text-muted xx-small mb-2">by @item.Author</p>
+                                <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;">@item.Quantity</span>
+                                        <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 * item.Quantity)</span>
+                                    <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">
@@ -58,7 +63,7 @@
            }
        </div>

-        @if (CartItems.Any())
+        @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">
@@ -77,9 +82,7 @@
        }
    </div>

-    @* --- TOP FIXED LAYOUT AREA --- *@
    <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
-        @* Decorative Background SVG Watermark Line Graphic *@
        <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" />
@@ -138,15 +141,16 @@
                        <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..."
-                               value="@GlobalSearchQuery"
-                               @oninput="OnSearchInput" />
+                               @bind="SearchInputBuffer"
+                               @bind:event="oninput"
+                               @onkeydown="HandleSearchKeyDown" />
                    </div>

-                    <button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
-                            style="width: 32px; height: 32px;"
+                    <button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
                            @onclick="ToggleGlobalSearch"
-                            type="button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            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>
@@ -159,34 +163,78 @@
                        <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 (CartItems.Any())
+                        @if (ShoppingCart.Items.Any())
                        {
-                            <span class="cart-badge">@CartItems.Sum(i => i.Quantity)</span>
+                            <span class="cart-badge">@ShoppingCart.Items.Count</span>
                        }
                    </button>

-                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                            <circle cx="12" cy="7" r="4" />
-                        </svg>
-                        LogIn
-                    </a>
+                    <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>

-                    <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
-                       style="width: 32px; height: 32px;"
-                       aria-label="Log In">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                            <circle cx="12" cy="7" r="4" />
-                        </svg>
-                    </a>
+                        <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>

-    @* --- MAIN INDEPENDENT SCROLL LAYER --- *@
    <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">
@@ -247,56 +295,3 @@
    </div>
 </div>

-@code {
-    private string GlobalSearchQuery { get; set; } = string.Empty;
-    private bool IsSearchActive { get; set; } = false;
-    private bool IsCartOpen { get; set; } = false;
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
-    private void ToggleCart() => IsCartOpen = !IsCartOpen;
-
-    private void OnSearchInput(ChangeEventArgs e)
-    {
-        GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
-    }
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0)
-        {
-            CartItems.Remove(item);
-        }
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
-
-    private void RedirectToCart()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/cart");
-    }
-
-    private void RedirectToCheckout()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/checkout");
-    }
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-}
@@ -0,0 +1,146 @@
+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;
+
+        SyncSearchQueryFromUrl();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender) 
+            await cartService.LoadCartFromStorageAsync();
+    }
+
+    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 void 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 void 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);
+    }
+}
@@ -20,10 +20,10 @@
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }

-.cart-overlay.is-visible {
-    opacity: 1;
-    pointer-events: auto;
-}
+    .cart-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+    }

 .cart-drawer {
    position: fixed;
@@ -37,10 +37,10 @@
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

-.cart-drawer.is-open {
-    transform: translateX(-420px);
-    pointer-events: auto;
-}
+    .cart-drawer.is-open {
+        transform: translateX(-420px);
+        pointer-events: auto;
+    }

 .cart-badge {
    position: absolute;
@@ -71,16 +71,16 @@
    padding: 2px 4px;
 }

-.quantity-picker button {
-    font-size: 0.85rem;
-    font-weight: 600;
-    line-height: 1;
-}
+    .quantity-picker button {
+        font-size: 0.85rem;
+        font-weight: 600;
+        line-height: 1;
+    }

-.quantity-picker button:hover {
-    background-color: rgba(0,0,0,0.05);
-    border-radius: 50%;
-}
+        .quantity-picker button:hover {
+            background-color: rgba(0,0,0,0.05);
+            border-radius: 50%;
+        }

 .custom-site-footer {
    width: 100%;
@@ -120,9 +120,9 @@
    transition: color 0.2s ease;
 }

-.footer-contact-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-contact-link:hover {
+        color: #FFFFFF !important;
+    }

 .footer-section-heading {
    font-size: 0.65rem;
@@ -138,9 +138,9 @@
    transition: color 0.2s ease;
 }

-.footer-nav-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-nav-link:hover {
+        color: #FFFFFF !important;
+    }

 .footer-meta-item {
    font-size: 0.8rem;
@@ -179,15 +179,47 @@
    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:hover {
+        background-color: #333333;
+        transform: translateY(-2px);
+    }

-.btn-back-to-top:active {
-    transform: translateY(0);
-}
+    .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;
 }
@@ -1,4 +1,8 @@
-@page "/profile"
+@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>
@@ -9,16 +13,36 @@
                <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">Logout</button>
+                <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
            </div>
        </div>

        <div class="col-md-9">
-            <div class="tab-content">
+            <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">Order History</h5>
+                        <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">
@@ -28,7 +52,6 @@
                            {
                                <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">
@@ -38,14 +61,14 @@
                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
                                                </div>
                                                <div class="meta-item-status">
-                                                    <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
+                                                    <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" title="@order.ProductTitle">
+                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" title="@order.ProductTitle">
                                                    @order.ProductTitle
                                                </a>
                                            </h6>
@@ -54,23 +77,22 @@
                                                <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">Shipped to:</span>&nbsp;@order.ShippingAddressName
+                                                <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">Total Paid</span>
+                                                <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" class="svg-icon">
+                                                <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>
                            }
@@ -86,7 +108,7 @@

                <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">Saved Addresses</h5>
+                        <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>
@@ -149,11 +171,11 @@
                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
                                        @if (addr.IsBilling)
                                        {
-                                            <span class="badge badge-tag">[Billing]</span>
+                                            <span class="badge bg-light text-dark border">[Billing]</span>
                                        }
                                        @if (addr.IsShipping)
                                        {
-                                            <span class="badge badge-tag">[Shipping]</span>
+                                            <span class="badge bg-light text-dark border">[Shipping]</span>
                                        }
                                    </div>
                                </div>
@@ -164,13 +186,13 @@
                                    </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" class="svg-icon">
+                                        <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" class="svg-icon">
+                                        <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>
@@ -182,183 +204,25 @@

                <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">Profile Settings</h5>
+                        <h5 class="fw-bold m-0 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
                    </div>
-                    <div class="card p-4 shadow-sm">
-                        <p class="text-muted mb-0">Manage your password and profile data here.</p>
+                    <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>
-
-@code {
-    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 DownloadInvoice(string orderId)
-    {
-        // Handle invoice downloading logic 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;
-            var newItem = new AddressItem
-            {
-                Id = nextId,
-                Name = newAddressName,
-                Street = newStreetAddress,
-                City = newCity,
-                PostalCode = newPostalCode,
-                IsBilling = isBilling,
-                IsShipping = isShipping,
-                IsPrimary = !savedAddresses.Any()
-            };
-            savedAddresses.Add(newItem);
-            ResetAddForm();
-        }
-    }
-
-    private void ResetAddForm()
-    {
-        newAddressName = "";
-        newStreetAddress = "";
-        newCity = "";
-        newPostalCode = "";
-        isBilling = false;
-        isShipping = false;
-        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 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 CancelEditing()
-    {
-        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; }
-
-        public string DisplayTitle
-        {
-            get
-            {
-                if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
-                const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
-                return ProductTitle.Length <= maxLength
-                    ? ProductTitle
-                    : $"{ProductTitle.Substring(0, maxLength)}...";
-            }
-        }
-    }
-}
+</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;
+}
@@ -1,106 +0,0 @@
-@page "/cart"
-
-<div class="container py-5" style="max-width: 900px;">
-    <div class="d-flex align-items-center justify-content-between mb-5">
-        <h2 class="fw-bold m-0">Your Cart</h2>
-        <a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
-    </div>
-
-    @if (!CartItems.Any())
-    {
-        <div class="text-center py-5 border rounded-3 bg-white">
-            <p class="text-muted mb-4">Your collection is currently empty.</p>
-            <a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
-        </div>
-    }
-    else
-    {
-        <div class="card border-0 shadow-sm p-4 mb-4">
-            @foreach (var item in CartItems)
-            {
-                <div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
-                    <!-- Item Detail -->
-                    <div class="col-12 col-md-6 d-flex align-items-center gap-4">
-                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
-                            <span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
-                        </div>
-                        <div>
-                            <h5 class="fw-bold mb-1">@item.Title</h5>
-                            <p class="text-muted small mb-0">by @item.Author</p>
-                        </div>
-                    </div>
-
-                    <!-- Quantity -->
-                    <div class="col-6 col-md-3 d-flex justify-content-center">
-                        <div class="d-flex align-items-center border rounded-pill bg-light px-2">
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
-                            <span class="px-3 fw-bold">@item.Quantity</span>
-                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
-                        </div>
-                    </div>
-
-                    <!-- Price & Remove -->
-                    <div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
-                        <span class="fw-bold">R @(item.Price * item.Quantity)</span>
-                        <button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
-                            <svg width="16" height="16" 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>
-
-        <!-- Cart Totals Section -->
-        <div class="row justify-content-end">
-            <div class="col-md-5">
-                <div class="bg-white p-4 rounded-3 border">
-                    <div class="d-flex justify-content-between mb-3">
-                        <span class="text-muted">Subtotal</span>
-                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
-                    </div>
-                    <div class="d-flex justify-content-between mb-4">
-                        <span class="text-muted">VAT (15%)</span>
-                        <span class="fw-bold">R @VatAmount.ToString("F2")</span>
-                    </div>
-                    <hr />
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <span class="fw-bold h5 mb-0">Total</span>
-                        <span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
-                    </div>
-                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
-                </div>
-            </div>
-        </div>
-    }
-</div>
-
-@code {
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    // Computed Properties for Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-    private decimal Total => Subtotal + VatAmount;
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0) CartItems.Remove(item);
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-}
@@ -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 {
+}
@@ -1,19 +1,18 @@
@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">
-
-        <!-- LEFT COLUMN: SHIPPING & CART -->
        <div class="col-lg-8">
-            <!-- 1. Cart Items -->
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Your Items</h5>
-                @foreach (var item in CartItems)
+                @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.Title</h6><small class="text-muted">@item.Author</small></div>
+                        <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>
@@ -26,7 +25,6 @@
                }
            </div>

-            <!-- 2. Shipping Options -->
            <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">
@@ -41,70 +39,38 @@
                </div>
            </div>

-            <!-- 3. Address Fields -->
            <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>
-                <!-- Add text inputs for address here, show/hide based on IsSameAddress -->
            </div>
        </div>

-        <!-- RIGHT COLUMN: STICKY SUMMARY -->
        <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 @Subtotal.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
-                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
+                <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 @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
+                    <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="CompletePurchase">Complete Purchase</button>
+                <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>
-
-@code {
-    private decimal ShippingCost = 0;
-    private bool IsSameAddress = true;
-
-    // Calculations
-    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
-    private decimal VatAmount => Subtotal * 0.15m;
-
-    // Assuming your CartItems list is managed via a Service or cascading parameter
-    // Here it is locally mocked for this example
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 }
-    };
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0) CartItems.Remove(item);
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-    private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = "";
-        public string Author { get; set; } = "";
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-    private void CompletePurchase(MouseEventArgs args)
-    {
-        Navigation.NavigateTo("/payment-confirmation");
-    }
-}
+</div>
@@ -0,0 +1,159 @@
+using LiteCharms.Features.Api.Configuration;
+using LiteCharms.Features.Hasher;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Customers;
+using LiteCharms.Features.MidrandBooks.Customers.Models;
+using LiteCharms.Features.MidrandBooks.Orders;
+using LiteCharms.Features.MidrandBooks.Orders.Models;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.MidrandBooks.Payments.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+
+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 CustomerService CustomerService { get; set; } = default!;
+    [Inject] public ProductService ProductService { 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!;
+
+    private Cart ShoppingCart => CartService.ShoppingCart;
+    private AuthenticationState? AuthState { get; set; }
+    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()
+    {
+        AuthState = await AuthStateProvider.GetAuthenticationStateAsync();
+        User = AuthState!.User;
+
+        Navigation.LocationChanged += OnLocationChanged;
+        CartService.OnCartChanged += CartService_OnCartChanged;
+    }
+
+    private async void CartService_OnCartChanged() => await InvokeAsync(StateHasChanged);
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) => StateHasChanged();
+
+    private async void 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 void RemoveFromCart(CartItem item)
+    {
+        CartService.RemoveOneItem(item.Price!.Id);
+
+        await CartService.SaveCartToStorageAsync();
+    }
+
+    private async Task PayNow(MouseEventArgs args)
+    {
+        if (IsProcessing) return;
+
+        try
+        {
+            // 1. Instantly disable the button to prevent duplicate click submissions
+            IsProcessing = true;
+            StateHasChanged(); // Force Blazor Server to push the disabled state over SignalR immediately
+
+            var customerEmail = User?.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)!.Value!;
+
+            // 2. Create customer if ShoppingCart.CustomerId is null
+            if (ShoppingCart.CustomerId == null)
+            {
+                var existingCustomer = await CustomerService.GetCustomerAsync(customerEmail);
+
+                if (existingCustomer.IsSuccess)
+                    ShoppingCart.CustomerId = existingCustomer.Value.Id;
+
+                if (existingCustomer.IsFailed)
+                {
+                    var customerCreate = await CustomerService.CreateCustomerAsync(new CreateCustomer { Email = customerEmail });
+
+                    if (customerCreate.IsSuccess)
+                        ShoppingCart.CustomerId = customerCreate.Value;
+                }
+            }
+
+            // 3. Create order using shopping cart and assign the ShoppingCart.OrderId
+
+            var order = await OrderService.CreateOrderAsync(ShoppingCart.CustomerId!.Value, new CreateOrder(ShoppingCart.TotalAmount, null));
+            List<CreateOrderItem> orderItems = [];
+
+            foreach (var item in ShoppingCart.Items)
+            {
+                var bookRequest = await BooksService.GetBookByProductIdAsync(item.Price!.Id);
+
+                if (bookRequest.IsSuccess)
+                {
+                    var orderItem = new CreateOrderItem(bookRequest.Value.Id, item.Price.Id, item.Quantity);
+                    orderItems.Add(orderItem);
+                }
+            }
+
+            var paymentGen = await PaymentService.CreatePaymentAsync(ShoppingCart.TotalAmount, order.Value, HashService.HashEncodeLongId(order.Value).Value);
+            var merchantPaymentId = HashService.HashEncodeLongId(order.Value).Value;
+
+            await PaymentService.WriteLedgerEntryAsync(new CreateLedgerEntry
+            {
+                OrderId = order.Value,
+                CustomerId = ShoppingCart.CustomerId.Value,
+                PaymentGatewayId = 1,
+                PaymentGatewayReference = merchantPaymentId,
+                PaymentId = paymentGen.Value,
+                Status = LiteCharms.Features.LedgerStatuses.Sent,
+            });
+
+            var addItemsResult = await OrderService.AddItemsToOrderAsync(order.Value, [.. orderItems]);
+
+            // 4. Generate the signed Payfast form payload using your backend service            
+            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", customerEmail },
+                { "m_payment_id", merchantPaymentId },
+                { "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();
+
+            // 6. Execute programmatic submit directly into the sandbox
+            await JSRuntime.InvokeVoidAsync("eval", "document.getElementById('payfastForm').submit();");
+        }
+        catch
+        {
+            IsProcessing = false;
+            StateHasChanged();
+        }
+    }
+}
@@ -1,8 +1,9 @@
@page "/"
@rendermode InteractiveServer
-@inject NavigationManager Navigation

-<div id="top-target" class="container text-center text-hero-wrapper">
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
+
+<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>
@@ -12,123 +13,133 @@
 </div>

 <div class="container mb-5 px-md-5">
-    <div class="row align-items-center justify-content-between pb-3 g-3">

+    @if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
+    {
+        <div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
+            <div class="d-flex align-items-center gap-2">
+                <span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
+                <span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
+            </div>
+            <button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
+        </div>
+    }
+
+    <div class="row align-items-center justify-content-between pb-3 g-3">
        <div class="col-12 col-md-8">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
-                @foreach (var category in MainCategories)
+                @if (!AuthorId.HasValue)
                {
-                    var catName = category;
-                    <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                        @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                            @onclick="() => SelectCategory(catName)">
-                        @catName
+                    @foreach (var category in MainCategories)
+                    {
+                        var catName = category;
+                        <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
+                            @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
+                                @onclick="() => SelectCategory(catName)">
+                            @catName
+                        </button>
+                    }
+
+                    @if (DynamicExtendedCategories.Count > 0)
+                    {
+                        <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
+                                @onclick="ToggleExtraCategories">
+                            <span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
+                            <svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
+                        </button>
+                    }
+                }
+                else
+                {
+                    <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
+                        &larr; Return to Catalog Index
                    </button>
                }
-
-                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
-                        @onclick="ToggleExtraCategories">
-                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
            </div>
        </div>

        <div class="col-12 col-md-4">
-            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">
-
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
-                        style="height: 32px; font-size: 0.8rem;"
+            <div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
+                <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
                        @onclick="ToggleFilterMenu">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-                    </svg>
-                    <span>Filter & Sort</span>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
+                    <span>Refine Curation</span>
                </button>

-                <div class="d-flex align-items-center bg-light p-1 rounded-pill border border-light-subtle" style="height: 32px;">
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.Grid ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px;"
-                            @onclick="() => SetViewMode(ViewMode.Grid)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
+                <div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
                    </button>
-                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
-                        @(CurrentViewMode == ViewMode.List ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
-                            style="width: 24px; height: 24px; margin-left: 2px;"
-                            @onclick="() => SetViewMode(ViewMode.List)">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
                    </button>
                </div>
-
            </div>
        </div>
    </div>

-    @if (ShowExpandedCategories)
+    @if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
    {
-        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
-            @foreach (var category in DynamicExtendedCategories)
-            {
-                var catName = category;
-                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
-                    @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
-                        @onclick="() => SelectCategory(catName)">
-                    @catName
-                </button>
-            }
+        <div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
+            <h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
+            <div class="d-flex flex-wrap gap-2">
+                @foreach (var subCategory in DynamicExtendedCategories)
+                {
+                    var subName = subCategory;
+                    <button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
+                        @(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
+                            style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
+                        #@subName
+                    </button>
+                }
+            </div>
        </div>
    }

    @if (ShowFilterMenu)
    {
-        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
-            <div class="row g-4">
+        <div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
+            <div class="row g-4 text-start">
                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
-                    </div>
+                    <label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
+                    <select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
+                        <option value="default">Release Timeline</option>
+                        <option value="price-low">Value: Low to High</option>
+                        <option value="price-high">Value: High to Low</option>
+                        <option value="title-asc">Alphabetical Order</option>
+                    </select>
                </div>
                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
-                    <div class="d-flex flex-column gap-1">
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
-                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
+                    <label class="form-label small fw-semibold text-dark">Price Thresholds</label>
+                    <div class="d-flex flex-wrap gap-2">
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
                    </div>
                </div>
-                <div class="col-12 col-sm-4">
-                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
-                    <div class="form-check form-switch pt-1 ms-1">
-                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
-                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
+                <div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
+                    <div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
+                        <input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
+                        <label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
                    </div>
-                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
                </div>
            </div>
+            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
+                <button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
+                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
+            </div>
        </div>
    }

-    <div class="position-relative w-100 custom-milled-line">
-        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
-        <div class="position-absolute w-100 core-horizontal-rule"></div>
-    </div>
-</div>
-
-<div class="container px-md-5 pb-5">
-
    @if (!PaginatedBooks.Any())
    {
-        <div class="text-center text-muted py-5">
-            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
+        <div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
+            <svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
+            <p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
+            <span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
        </div>
    }
    else if (CurrentViewMode == ViewMode.Grid)
@@ -136,59 +147,36 @@
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
-                <div class="col-12 col-md-6 col-lg-4">
-                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
-                         style="cursor: pointer;"
-                         @onclick="() => NavigateToProduct(book.Id)">
-                        <div class="d-flex justify-content-between align-items-center">
-                            @if (book.IsNew)
-                            {
-                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
-                            }
-                            else
-                            {
-                                <div></div>
-                            }
-                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
-                            </button>
-                        </div>
-                        <div class="d-flex justify-content-center align-items-center my-auto py-3">
-                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
-                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
-                        <div>
-                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
-                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
-                        </div>
-                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
-                    </div>
-                </div>
+                <BookCard Id="@book.Id"
+                          Title="@book.Name"
+                          Author="@(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
+    else if (CurrentViewMode == ViewMode.List)
    {
-        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
+        <div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
            @foreach (var book in PaginatedBooks)
            {
                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
                     style="cursor: pointer;"
                     @onclick="() => NavigateToProduct(book.Id)">
                    <div class="d-flex align-items-center gap-4 structural-list-left">
-                        <span class="text-dark fw-medium list-item-title">@book.Title</span>
-                        <span class="text-muted small list-item-author">by @book.Author</span>
-                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
+                        <span class="text-dark fw-medium list-item-title">@book.Name</span>
+                        <span class="text-muted small list-item-author">by @(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.IsNew)
+                        @if (book.Enabled)
                        {
                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
                        }
-                        <span class="text-dark font-monospace fw-medium list-item-price">R @book.Price.ToString("N0")</span>
+                        <span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
                        <button class="btn btn-link text-dark p-1">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                        </button>
@@ -210,140 +198,6 @@

 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
   aria-label="Back to top"
-   href="#top-target"
-   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="12" y1="19" x2="12" y2="5"></line>
-        <polyline points="5 12 12 5 19 12"></polyline>
-    </svg>
-</a>
-
-@code {
-    public enum ViewMode { Grid, List }
-    private ViewMode CurrentViewMode = ViewMode.Grid;
-
-    [CascadingParameter]
-    public string SharedSearchQuery { get; set; } = string.Empty;
-
-    private string ActiveCategory = "All";
-    private bool ShowExpandedCategories = false;
-    private bool ShowFilterMenu = false;
-
-    private string SelectedSortOption = "default";
-    private string ActivePriceFilter = "all";
-    private bool OnlyShowNew = false;
-
-    private List<string> MainCategories = new() { "All", "Graphic Design", "Product Design", "Architecture" };
-    private List<string> DynamicExtendedCategories = new();
-
-    private int ItemsPerPage = 12;
-    private int VisibleCount = 12;
-
-    public class BookItem
-    {
-        public long Id { get; set; } // Refactored to hold unique record indices of type long
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public decimal Price { get; set; }
-        public string Category { get; set; } = string.Empty;
-        public bool IsNew { get; set; }
-        public string Isbn { get; set; } = string.Empty;
-    }
-
-    private List<BookItem> BooksCollection = new();
-
-    private IEnumerable<BookItem> FilteredData
-    {
-        get
-        {
-            var data = BooksCollection.AsEnumerable();
-
-            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
-            {
-                var q = SharedSearchQuery.Trim();
-                data = data.Where(b =>
-                    b.Title.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Author.Contains(q, StringComparison.OrdinalIgnoreCase) ||
-                    b.Isbn.Contains(q, StringComparison.OrdinalIgnoreCase)
-                );
-            }
-
-            if (ActiveCategory != "All")
-            {
-                data = data.Where(b => b.Category.Equals(ActiveCategory, StringComparison.OrdinalIgnoreCase));
-            }
-
-            if (OnlyShowNew) { data = data.Where(b => b.IsNew); }
-
-            data = ActivePriceFilter switch
-            {
-                "under-500" => data.Where(b => b.Price < 500),
-                "500-1000" => data.Where(b => b.Price >= 500 && b.Price <= 1000),
-                "over-1000" => data.Where(b => b.Price > 1000),
-                _ => data
-            };
-
-            return data;
-        }
-    }
-
-    private IEnumerable<BookItem> SortedAndFilteredBooks => SelectedSortOption switch
-    {
-        "price-low" => FilteredData.OrderBy(b => b.Price),
-        "price-high" => FilteredData.OrderByDescending(b => b.Price),
-        "title-asc" => FilteredData.OrderBy(b => b.Title),
-        _ => FilteredData
-    };
-
-    private IEnumerable<BookItem> PaginatedBooks => SortedAndFilteredBooks.Take(VisibleCount);
-    private int TotalFilteredCount => FilteredData.Count();
-    private bool HasMoreItems => VisibleCount < TotalFilteredCount;
-
-    protected override void OnInitialized()
-    {
-        var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
-        DynamicExtendedCategories.AddRange(extraSourceCategories);
-
-        // Updated mock items to supply long IDs matching your screenshot items
-        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
-        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
-        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
-
-        var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
-        var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
-        var designers = new[] { "J. Morrison", "K. Fujita", "Studio Bouroullec", "Es Devlin", "Kenya Hara" };
-
-        var entireCategoryPool = MainCategories.Concat(DynamicExtendedCategories).Where(c => c != "All").ToArray();
-        var random = new Random(42);
-
-        for (int i = 4; i <= 60; i++)
-        {
-            BooksCollection.Add(new BookItem
-            {
-                Id = (long)i,
-                Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
-                Author = designers[random.Next(designers.Length)],
-                Price = random.Next(25, 135) * 10,
-                Category = entireCategoryPool[random.Next(entireCategoryPool.Length)],
-                IsNew = random.NextDouble() > 0.7,
-                Isbn = $"978000000{i}"
-            });
-        }
-    }
-
-    // Handles the explicit page transition routing
-    private void NavigateToProduct(long id)
-    {
-        Navigation.NavigateTo($"/product/{id}");
-    }
-
-    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
-    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
-    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
-    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
-    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
-    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
-    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
-    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
-    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
-}
+   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,224 @@
+using LiteCharms.Features;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Categories;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+using LiteCharms.Features.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Home : ComponentBase
+{
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private CategoryService CategoryService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+
+    [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 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; }
+}
@@ -169,4 +169,9 @@ html {
        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;
+}
@@ -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>
@@ -1,10 +1,10 @@
-@page "/payment-confirmation"
+@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">
-
-            <!-- Success Icon & Message -->
            <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">
@@ -20,12 +20,11 @@
                </div>
            </div>

-            <!-- Calls to Action -->
            <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="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
+                        <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>
@@ -33,7 +32,6 @@
                </div>
            </div>

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

-/* Breadcrumbs */
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+/* ==========================================================================
+   Breadcrumb Navigation Links
+   ========================================================================== */
 .breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 2.5rem;
    color: #8c8c8c;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
 }

 .crumb-link {
    cursor: pointer;
-    transition: color 0.2s;
+    transition: color 0.2s ease;
 }

    .crumb-link:hover {
@@ -30,52 +44,50 @@
    font-weight: 500;
 }

-/* Two-Column Grid Layout Structure */
-.product-layout {
-    display: grid;
-    grid-template-columns: 1.1fr 0.9fr;
-    gap: 4rem;
-}
-
-@media (max-width: 992px) {
-    .product-layout {
-        grid-template-columns: 1fr;
-        gap: 2.5rem;
-    }
-}
-
-/* Left Section: Visual Images/Thumbnails Layout */
+/* ==========================================================================
+   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;
+    padding: 3rem 3rem 4.5rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
+    width: 100%;
 }

 .main-image {
    max-height: 450px;
+    max-width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
 }

-/* Format Badges Overlay Styles */
+/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
 .format-badges {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    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 {
@@ -86,6 +98,8 @@
    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 {
@@ -105,9 +119,10 @@
    border-color: #bbf7d0;
 }

-/* Thumbnails container */
+/* Interactive Gallery Thumbnails Grid */
 .thumbnail-grid {
    display: flex;
+    flex-wrap: wrap;
    gap: 1rem;
 }

@@ -122,7 +137,8 @@
    transition: all 0.2s ease;
 }

-    .thumbnail-wrapper:hover, .thumbnail-wrapper.active {
+    .thumbnail-wrapper:hover,
+    .thumbnail-wrapper.active {
        border-color: #111;
    }

@@ -133,7 +149,9 @@
        mix-blend-mode: multiply;
    }

-/* Right Section: Core Text Typography Controls */
+/* ==========================================================================
+   Right Section: Product Details & Typography Controls
+   ========================================================================== */
 .details-section {
    display: flex;
    flex-direction: column;
@@ -144,6 +162,8 @@
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }

 .author-name {
@@ -151,7 +171,7 @@
    color: #666;
 }

-/* Dynamic Stars C# rendering mapping */
+/* Review Star Components */
 .rating-stars {
    display: flex;
    align-items: center;
@@ -164,7 +184,7 @@
 }

    .star.filled {
-        color: #111; /* Solid black stars fits your clean aesthetic perfectly */
+        color: #ffc107;
    }

 .rating-text {
@@ -175,7 +195,7 @@

 .product-title {
    font-size: 2.5rem;
-    font-family: 'Playfair Display', serif, Georgia; /* Fits the luxury typography tone */
+    font-family: 'Playfair Display', serif, Georgia;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1rem;
@@ -189,7 +209,9 @@
    color: #111;
 }

-/* Standard E-commerce Action Bar Block */
+/* ==========================================================================
+   Interactive E-Commerce Selection Bars
+   ========================================================================== */
 .purchase-actions {
    display: flex;
    gap: 1rem;
@@ -215,7 +237,7 @@
    align-items: center;
    justify-content: center;
    border-radius: 50%;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
 }

    .qty-btn:hover {
@@ -237,7 +259,8 @@
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s ease;
+    padding: 0.5rem 1.5rem;
 }

    .btn-add-to-cart:hover {
@@ -250,7 +273,9 @@
    margin-bottom: 2rem;
 }

-/* General Layout Text and Cross-Selling */
+/* ==========================================================================
+   Informational Text Elements & Links
+   ========================================================================== */
 .info-block {
    margin-bottom: 2rem;
 }
@@ -263,7 +288,8 @@
        margin-bottom: 0.75rem;
    }

-.description-text, .author-bio {
+.description-text,
+.author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
@@ -292,3 +318,62 @@
    .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;
+    }
+}
@@ -1,204 +0,0 @@
-::deep .container {
-    max-width: 1100px;
-}
-
-/* Navigation Layout overrides */
-.nav-pills .nav-link {
-    color: #6c757d;
-    border-radius: 0;
-    padding: 0.75rem 0;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-    .nav-pills .nav-link.active {
-        background-color: transparent !important;
-        color: #1A1A1A;
-        border-bottom: 2px solid #1A1A1A;
-    }
-
-    .nav-pills .nav-link:hover:not(.active) {
-        color: #1A1A1A;
-    }
-
-/* 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);
-    }
-
-/* Container Wrapper to Suppress the Scrollbar completely */
-.table-container-fixed {
-    width: 100%;
-    overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
-}
-
-/* Global Table Typography - Reduced uniformly to keep items on a single line */
-.profile-table {
-    font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
-    width: 100%;
-    table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
-}
-
-    .profile-table tbody td {
-        padding-top: 0.85rem;
-        padding-bottom: 0.85rem;
-    }
-
-    .profile-table thead th {
-        background-color: #F9F9F9;
-        font-size: 0.7rem;
-        letter-spacing: 0.04rem;
-    }
-
-/* Compact Column Proportions */
-.col-order-id {
-    width: 115px;
-}
-
-.col-date {
-    width: 100px;
-}
-
-.col-total {
-    width: 85px;
-}
-
-.col-status {
-    width: 105px;
-}
-
-.col-invoice {
-    width: 65px;
-}
-
-.col-title {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-.col-address {
-    width: auto; /* Takes shared residual space smoothly */
-}
-
-/* Product link handling */
-.product-link {
-    color: #1A1A1A;
-    text-decoration: none;
-    border-bottom: 1px dashed transparent;
-    transition: border-color 0.2s ease;
-    display: inline-block;
-}
-
-    .product-link:hover {
-        border-color: #1A1A1A;
-    }
-
-/* Base Badge Settings */
-.badge {
-    font-size: 0.62rem;
-    letter-spacing: 0.5px;
-    padding: 0.4em 0.8em;
-    border-radius: 4px;
-    font-weight: 600;
-}
-
-/* Status Badge Palette Colors */
-.status-shipped {
-    background-color: #e3f2fd !important;
-    color: #0d6efd !important;
-    border: 1px solid rgba(13, 110, 253, 0.15);
-}
-
-.status-delivered {
-    background-color: #e8f5e9 !important;
-    color: #198754 !important;
-    border: 1px solid rgba(25, 135, 84, 0.15);
-}
-
-.badge-tag {
-    background-color: #f0f0f0 !important;
-    color: #4a4a4a !important;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-/* Form Buttons */
-.btn-outline-dark {
-    border-radius: 50px;
-    border-width: 1px;
-}
-
-.btn-dark {
-    border-radius: 50px;
-}
-
-/* Action button configurations */
-.action-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    text-decoration: none;
-    transition: background-color 0.15s ease, transform 0.1s ease;
-}
-
-    .action-btn:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .action-btn.text-danger:hover {
-        background-color: rgba(220, 53, 69, 0.1);
-    }
-
-    .action-btn:active {
-        transform: scale(0.95);
-    }
-
-/* Compact SVG Icons sizing */
-.svg-icon {
-    width: 15px;
-    height: 15px;
-    fill: currentColor;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.pointer-label {
-    cursor: pointer;
-    user-select: none;
-}
-
-/* Shared Card Styling Unification Rules */
-.order-history-card {
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-    border-radius: 0; /* Matches your address card configuration */
-}
-
-    .order-history-card:hover {
-        border-color: rgba(0, 0, 0, 0.16);
-    }
-
-/* Micro Typography Alignment */
-.xx-small {
-    font-size: 0.65rem;
-}
-
-.tracking-wider {
-    letter-spacing: 0.05rem;
-}
-
-/* Responsive adjustments across layout break-points */
-@media (max-width: 575.98px) {
-    .border-sm-top-0 {
-        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
-    }
-}
@@ -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,12 +1,20 @@
-@using MidrandBookshop.Components.Pages
-<Router AppAssembly="@typeof(Program).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <NotFound />
-        </LayoutView>
-    </NotFound>
-</Router>
+@using Microsoft.AspNetCore.Components.Authorization
+@using MidrandBookshop.Components.Pages
+
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <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
@@ -18,13 +18,13 @@
  </ItemGroup>

  <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.51.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.130.0" />
  </ItemGroup>

  <!-- UI -->
  <ItemGroup>
    <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.51.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.130.0" />
    
    <!-- Global Usings -->
    <Using Include="Blazored.Toast.Services" />
@@ -51,6 +51,17 @@
  <!-- 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" />
  </ItemGroup>

 </Project>
@@ -1,36 +1,65 @@
 using LiteCharms.Features.Extensions;
 using LiteCharms.Features.Mediator;
 using LiteCharms.Features.MidrandBooks.Extensions;
+using LiteCharms.Features.MidrandBooks.Payments;
+using LiteCharms.Features.Postgres;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;

 var builder = WebApplication.CreateBuilder(args);

+builder.Services.AddAntiforgery();
+
 builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

 builder.AddMonitoring();
 builder.Services.AddEndpointsApiExplorer();

-builder.Services.AddMediator();
-
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));

 builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);

+builder.Services.AddMediator();
 builder.Services.AddEmailServices(builder.Configuration);
 builder.Services.AddEmailServiceBus();

-builder.Services.AddShopServices();
+builder.Services.AddHttpClient();
+builder.Services.AddScoped<CartService>();
+builder.Services.AddShopServices(includeLocalStorage: true);
+builder.Services.AddHashServices(builder.Configuration);
+builder.Services.AddPayfastServices(builder.Configuration);
+
+builder.Services.AddSecurityApiSdk(builder.Configuration);
+builder.Services.AddLiteCharmsWebSecurity(builder.Configuration);
+
+builder.Services.AddDataProtectionDatabase(builder.Configuration);
 builder.Services.AddMidrandShopDatabase(builder.Configuration);

 builder.Services.AddMidrandShopPostgresHealthCheck();
 builder.Services.AddMidrandShopQuartzHealthCheck();
 builder.Services.AddHealthChecksSupport(builder.Configuration);

+builder.Services.Configure<ForwardedHeadersOptions>(options =>
+{
+    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+    options.KnownProxies.Clear();
+});
+
 var app = builder.Build();

+app.UseForwardedHeaders();
+
+using var security = app.Services.CreateScope();
+{
+    var dataProtectionContext = security.ServiceProvider.GetRequiredService<DataProtectionDbContext>();
+
+    await dataProtectionContext.Database.MigrateAsync();
+}
+
+app.AddSecurityEndpoints();
+
 var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
 var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);

@@ -13,7 +13,7 @@
      "https": {
        "commandName": "Project",
        "dotnetRunMessages": true,
-        "launchBrowser": true,
+        "launchBrowser": false,
        "applicationUrl": "https://localhost:7021;http://localhost:5053",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
@@ -1,4 +1,25 @@
 {
+  "PayfastSettings": {
+    "CheckoutUrl": "https://sandbox.payfast.co.za/eng/process",
+    "ValidHosts": [
+      "www.payfast.co.za",
+      "sandbox.payfast.co.za",
+      "ips.payfast.co.za",
+      "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",
@@ -14,6 +14,23 @@ data:
  ASPNETCORE_URLS: "http://0.0.0.0:8080"
  Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
  Monitoring__ServiceName: "MidrandBooks.Uat"
+  HasherSettings__MinHashLength: "11"
+  BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
+  BookshopS3Settings__Region: "garage"
+  BookshopS3Settings__BucketName: "bookshop"
+  BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
+  PayfastSettings__CheckoutUrl: "https://sandbox.payfast.co.za/eng/process"
+  PayfastSettings__ValidHosts__0: "www.payfast.co.za"
+  PayfastSettings__ValidHosts__1: "sandbox.payfast.co.za"
+  PayfastSettings__ValidHosts__2: "ips.payfast.co.za"
+  PayfastSettings__ValidHosts__3: "api.payfast.co.za"
+  PayfastSettings__ValidHosts__4: "payment.payfast.io"
+  LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
+  LiteCharmsSettings__Audience: "midrandbooks-api"
+  ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
+  LiteCharmsClientSettings__Authority: "https://sts.security.khongisa.co.za"
+  LiteCharmsClientSettings__GrantType: "client_credentials"
+  LiteCharmsClientSettings__Scope: "midrandbooks-api"
 ---
 apiVersion: v1
 kind: Secret
@@ -23,8 +40,21 @@ metadata:
 type: Opaque
 data:  
  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
+  dataprotection-connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=  
+  bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
+  bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
+  litecharms-clientid: bWlkcmFuZGJvb2tzLXVhdA==
+  litecharms-clientsecret: c2VjcmV0Xzc3OGJkODM3NWFjNGE3Mzg2N2QxZDdhNjcwODJlZTJjNGU4NmUwODYwYmI0Y2ZlZWI5NDExOTQ5OTk2ZThhOGU=
+  payfast-passphrase: OUdBSVIwdFdwaFgwcU8=
+  payfast-merchantid: MTAwNDkzMDc=
+  payfast-merchantkey: anU2bmF2bjBqY2JmMA==
+  litecharms-client-clientid: bWlkcmFuZGJvb2tzLWFwaS1zY2FsZXItdWF0
+  litecharms-client-clientsecret: c2VjcmV0XzBhOGRjMWY5OTA2MTU5MGE1MmIxMjcyZGIzYTE4NzFkMjc2MWM3OWZiZDA1OGIyYTk2ODkxMTAyOWU0YjIwOGE=
+  dataprotection-cert: TUlJS2dBSUJBekNDQ2pZR0NTcUdTSWIzRFFFSEFhQ0NDaWNFZ2dvak1JSUtIekNDQkZJR0NTcUdTSWIzRFFFSEJxQ0NCRU13Z2dRL0FnRUFNSUlFT0FZSktvWklodmNOQVFjQk1GY0dDU3FHU0liM0RRRUZEVEJLTUNrR0NTcUdTSWIzRFFFRkREQWNCQWg5cWthVmdHbXovZ0lDQ0FBd0RBWUlLb1pJaHZjTkFna0ZBREFkQmdsZ2hrZ0JaUU1FQVNvRUVLYjJDeXJVTDZCVFpqVUY1cHk4QkxXQWdnUFE3YzBNNnBMejhwSDVCM3hmY0MxMURldGVZOWl4VDlocHl4WVRnY0JDZnh4djBodW5HTXhvaTBPWmMrWUdwN1lFcDhYU0FmR2QzNGc5eERzMlRtQW53alFxVmliR0xHUjNmcElTWkgyMFQ1REhhU3dnV3BweGVGVkU3VXZlZGl4Q25rd0g2VzlFTjhjVUhWZDJJU1ZOK0VocnJPSlJWSTZYKzYydUpRd3EzQm1ZOUlvdXVhSDhkcE1xbXRWMXhTa1ZkM1c1NGdvWTMweVp0QmxQOHMxN2xSd0hYbllKUlBhMlF5djBxY2x5VEs0Nmt0bW01ZU5qV2hOWndZbXJGZ1g3eXhacVB3L3prMlExZjB0bUU3eUpwR0M2eG5wYlBoUVh4SFIyWDg5T0NCNlM5aE1tM3VpRWljMDFmVHNhVEVCSVZvU3dUNzFJWlZVQ2E0d1phZXIweFMwN29XUUszWWwwbnUvSWZtYkpDaytJSFJIckJNWit1T2s3RVcxMzNuK0NyNDhtcGdyMmd2Q2UvVjNLZWlEY0FRWVZmaHQ3aWhnTUUyN0dWNlZEN1ozMEptakY3RGhPTjkyMXpoLzdOaG9JaUxLb0lNbFIxa0lEMzlNNzh5RzRuNVhmNllkUWJkV0UyUFR0UHRCTkpkazBDMXZMTU9jS1ZmbTRNVm5WL0I0dWlZWlh6dGQwbktNRDR2L2tnQXB4RE9wdy9IWU41cHNWYkFlQzNZMWNscFAwVXNiTUovL1ZXUE1Ba3BibS9HeklNSGxlaWQ1ckxQN1VJZ3h4b3BVWU93SVA2aGw4d25zb3NPbExvMDlYTklBUm9QcUFOb3JoNngrOVFsaE4rNThKU1lJTGpuRm5rcjQ3RVl4WkhxQ0l6Q0x2MVZaZG1mcGJROGZLSjAyTGpHdTlTR1hzUUQzcXZRa3ZMR3llZ0JjcDMrOGdYa2ExVGlhS1RPS0h3eTg1UmhIM3VxMXFXNWZWNG54UXB2VjMrTWxFVlBSc2g3RmNNaFNlSys2NkNIT0NaN0pFRzRKUUE3b2NkMFVrYXRYa3NGK2RzOHlYMDJ1Z0xYNDB0bUZ2bmxEZzRYWHpKMXlFcEhjMHUrNzNxcUMrOXM1NnFHc204NFZaMGhuN1pkYzk4RHJYWitVN0hrbFp5Y1BudnRwUHd4enZsSXBmRHJiWWJVK3lqLytpcmlZRGhGdDk0R3phakVLc21scTlIdFc4d1NXZzYwbUpvVUlsejVBVi9aU3dUN1M4eTJXcGxFK1RNRkZ5ZzFUak9iNEpxL1RIcEluVUluZnorb1FqcjZ3NTZmUGRVa0RXN2Y1K1NpM1lZV3ZWZlREZ0FxVDcveFZ2bGlNYzhwUTdnWmViemVCQmpaQ21WNXFUTGVlT3BoalJMOXlNTndIa3JWaDFxVzVlR3ZIVUVTZ05WZFU1Qi9tMVZyY3RXMk5QY1ZmWE1xRGczaHZmd2FwTWxFbTlMWHcvYlh0TmZLOExKWjBmSTdTOFVTVFA4YVgvQlZrTi93YWQ3VjBHakxHSmdxNWtaVEtSRnFaRGZJeTdsSDhGY1VNWjIyRXgwSUkydXYwb2hBbmltWnRVWWtCTFBYUmlZZzRBZE9WMFlzUDZLd1UvNjJ1VUZpWHgvR0JtS1k0QUkyK3FUMkRjSjB1bWVkOXFXL1UyNUg5MXo5aWFzck52RStoWE52NHRFekpldyt0SVlwVXZLMGpScUxlVDFXamJrOGVwclRDQ0JjVUdDU3FHU0liM0RRRUhBYUNDQmJZRWdnV3lNSUlGcmpDQ0Jhb0dDeXFHU0liM0RRRU1DZ0VDb0lJRk1UQ0NCUzB3VndZSktvWklodmNOQVFVTk1Fb3dLUVlKS29aSWh2Y05BUVVNTUJ3RUNOVjB6VkRNUjIxL0FnSUlBREFNQmdncWhraUc5dzBDQ1FVQU1CMEdDV0NHU0FGbEF3UUJLZ1FRbUZRdjhNNFBKTk96c25rVEFqK0tXQVNDQk5EMDZNQi8vTTBWQWxBT2YyazhIWWlUZy9UM1NhRnhvaFpXaWEwcmt5b0svYktZSWdoZWhVelN5aVEwanNzQ3JBUC93TnorQ3BBM1dUTFhyT2lEaDhXWC8yRWpSMi9qc3Z0VEtDZGJqYjA3SktXRVFwNFE1SG81dWYxY2F0VDU5ZEFzZStJdWVWTjk0bGlFVkV0SVNXTmFJWGgrZVhwQm0yb3paOERJUjRDbjNKdTRPZC9vRjQ1cEhZZ09HaUIva21Nb0FDMDJ3TU9kc1Z2dEtvWFBNWXNGZncwWmpwOWZMNXVybzZyV1hEaDlhNnY4TEtocmtIdll0c3lZVmlFMmg4bzltbGlUZ3Rram92NGU2TGo2blViRW4zSXlEZTdtcmxaNU1lMjdLVzVmV1lyanNYTTloUUx2TGt1VUh3bTZnS2tVcXZaeWdlejc3QklrTzBrSCs4V3czb08wWExYWU9IaGdBbCsrd0NMR0wvQlhWMytDOUdiNWR2UVFHa0t5UDdlWkRLRi9URjZqU3pLN2tHdlkxSWs2MUFLSHcxcWc3TkRIZTZHYTNUWFEwRDZVdXVtL3UwdFptRGNsak9UalZXWlIvSkRRa25GNlVOUGVCOVE4RjN3b1RpeFR6eXVpaFI5dnhnNXJ5NldwZnAzK2RTdXQ1d3duNm1TV0lkanZKckphNThGcE1EbnBadGxFRXdkM2g0RnZhNllzd3NKRDI0VGZaVFhRVUlpVlhSWlRjaUI5U29tTHAwbjJva2p6UlpvcDY3Mnl4WGVSQ0tmb3d4REpIU1NBbThQWUFGMGUyeDZRcmV3TVp4UUV2dWVDOHVrNis3Y2p1enE4VmJQRng4T0FPSzdsaUlBZUdzaE9oTXJOOEJsNXYwUjAweWJpSDhTM1NTcDhvcC93RWNBV0ZyaFhNMWVwUzhBeUlqTlJYU2hCM0taaE5QVWg4WHBKSDRBVFhnbXlJbkk5TVZ0NUZZaGVwamo4UHNCRWJEVFN2UU4yY3p4aTBZYWJjM3ZxTWUrcSt1Tm9LOWtYbm9JOGNWSzBSanNXbS9DZjVRQU5nUEVVWDhrY0ZCdVpiZ1E2OHhMMS9KZVg5YlJYL1FJUzRZb2pRWTdGNG1adWxIUkpRaHNlT3VNUndlMnlhZk1na3VzakJQU2dEME5tdzU1L2t6V3NzWUxxb29jTFowOERGVjdlQ1FnYW11MFNXZGplSVZHbW8yN1BuYlF1TFVuSk1jNm5jQkxJcmJwNzExTmZHaWxDYjRqNzcvb2wxU2ZmM0tOaXBoa29JYzUxbGZIUTNRcUJMWmJib3NSQmFQeElsSDhzb1pQOFpyMVIvc0dqVHl0aDRlcEtJQlpMNi9SMGlvcHpKY1RNYnJVY3FyTW1ISVBDdVlkY1graEhGaFNFb2NoU0g5d0plZTRCZDgvVDh0WG1NVW1CVXZLVFJSZkhrYzdzL2V4Q2ZMTGY4cU9YMjNSVXBrZEk1dWZvTFFFT2VwUk9qN2VrUFVHeU15T3hyd2tDUHRhYVJqT3B2OU1LYmRMNnA1RUJHekowVGxyK3p0Q2xlcmhnTkZ1OWVnLzV0OVdhTFhybCtLQlRoc2F5anpTN3FacHBQa3h2RWlTQmdDRmVSSzg2M2wrdVcydVFubU44bTUzaUdMUDg0SzJOQ0JQUG1KM3V6cDFQYkgvTUJ3WHpGbm1sK29qTEw0Qm9vclRtZ1NQVGhoSHZMbk1QMTF0T1lrTjJXQUh2elAySksxQTJadjZWTVZuQU9HYkcrd0RtcXNBbVFaN0J1eVFyeGZBU3FwZytITFR4cWFkNzc2L3p2cDR6dVkzSlZicmxtNmNUNnBEbit1Skc1SEtGdHAvcEE1WDlvQVluU2JJRFdNalJoYVRMSXdlQ2JsTUVFTVRzUzk1aUVjb2JodlU2czNuVFNBU0ZJWjk1UmhhQkhjbHVRMXlkTlllYVpNUkZXeDlTUHJLRVVPSml6OUx3aVRMMWpLdEF0bndockJkTzZpMFM3SmJiK1VXNGJnR3I1WFJyVFRHSkRXSUw3enJ3LzUzYXhDejZUS2dyV0sxTmJjQ3VHS2t0WDV3QitWcTFlUVlQNFYyYWJvYWJyeUppQWlvOGdGQ3RnQTdiRTBwMU9XczJWY0N5MnpXditVTTdrWnlYRXllOHZYajVDMUN5cG5FK241cjM2TzJaU3pGbU1DTUdDU3FHU0liM0RRRUpGVEVXQkJRMWxRK3RvdHJrWmtRYjd1RTZsT3ovZ1B6cUtUQS9CZ2txaGtpRzl3MEJDUlF4TWg0d0FFd0FhUUIwQUdVQVF3Qm9BR0VBY2dCdEFITUFSQUJoQUhRQVlRQlFBSElBYndCMEFHVUFZd0IwQUdrQWJ3QnVNRUV3TVRBTkJnbGdoa2dCWlFNRUFnRUZBQVFnQVc3T3QrNmo5WHU0blQ3cEw5ckY0M2lPblNkNXFMZCt5Sk01QTVxMndEQUVDSDFwTy9oVUV6bE5BZ0lJQUE9PQ==
+  dataprotection-password: OWlIUSMmcl41eWZYRXc=
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -77,6 +107,66 @@ spec:
            - configMapRef:
                name: midrandbooks-config
          env:
+            - name: DataProtection__Certificate
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: dataprotection-cert
+            - name: DataProtection__Password
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: dataprotection-password
+            - name: LiteCharmsSettings__ClientId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-clientid
+            - name: LiteCharmsSettings__ClientSecret
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-clientsecret
+            - name: BookshopS3Settings__AccessKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-accesskey
+            - name: BookshopS3Settings__SecretKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-secretkey
+            - name: HasherSettings__Salt
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: hasher-salt
+            - name: PayfastSettings__Passphrase
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: payfast-passphrase
+            - name: PayfastSettings__MerchantId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: payfast-merchantid
+            - name: PayfastSettings__MerchantKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: payfast-merchantkey
+            - name: LiteCharmsClientSettings__ClientId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-client-clientid
+            - name: LiteCharmsClientSettings__ClientSecret
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: litecharms-client-clientsecret
            - name: ConnectionStrings__PostgresScheduler
              valueFrom:
                secretKeyRef:
@@ -86,17 +176,12 @@ spec:
              valueFrom:
                secretKeyRef:
                  name: midrandbooks-secrets
-                  key: connection-string            
-            - name: Monitoring__Address
+                  key: connection-string
+            - name: ConnectionStrings__PostgresDataProtection
              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__Address
-            - name: Monitoring__ServiceName
-              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__ServiceName
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: dataprotection-connection-string
            - name: Monitoring__ApiKey
              valueFrom:
                secretKeyRef:
@@ -105,7 +190,7 @@ spec:
          volumeMounts:
            - name: data
              mountPath: /app/wwwroot/content
-              resources:          
+              subPath: bookshop-content
          livenessProbe:
            httpGet:
              path: /health
@@ -121,7 +206,7 @@ spec:
      volumes:
        - name: data
          persistentVolumeClaim:
-            claimName: midrandbooks-pvc
+            claimName: midrandbooks-pvc        
 ---
 apiVersion: v1
 kind: Service
Author	SHA1	Message	Date
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