add: books crud, borrowing workflow, member crud, rewards page

Backend/Features/Books/BookService.cs

@@ -61,6 +61,7 @@ namespace Backend.Features.Books
                 Description = request.Description,
                 TotalCopies = request.TotalCopies,
                 AvailableCopies = request.TotalCopies,
+                CoverUrl = request.CoverUrl,
                 Status = request.TotalCopies > 0 ? "Available" : "Out Of Stock",
                 IsActive = true,
                 CreatedAt = DateTime.UtcNow
@@ -92,6 +93,7 @@ namespace Backend.Features.Books
             book.Title = request.Title;
             book.Author = request.Author;
             book.Description = request.Description;
+            book.CoverUrl = request.CoverUrl;
             
             // Basic logic to sync availability when total copies change
             int difference = request.TotalCopies - book.TotalCopies;
@@ -145,6 +147,7 @@ namespace Backend.Features.Books
                 AvailableCopies = book.AvailableCopies,
                 CreatedAt = book.CreatedAt,
                 UpdatedAt = book.UpdatedAt,
+                CoverUrl = book.CoverUrl,
                 Categories = book.Categories.Select(c => new BookCategoryDto { Id = c.Id, Name = c.Name }).ToList()
             };
         }
@@ -163,6 +166,7 @@ namespace Backend.Features.Books
         public int AvailableCopies { get; set; }
         public DateTime CreatedAt { get; set; }
         public DateTime? UpdatedAt { get; set; }
+        public string? CoverUrl { get; set; }
         public List<BookCategoryDto> Categories { get; set; } = new();
     }
 
@@ -179,6 +183,7 @@ namespace Backend.Features.Books
         public string Author { get; set; } = string.Empty;
         public string? Description { get; set; }
         public int TotalCopies { get; set; }
+        public string? CoverUrl { get; set; }
         public List<int>? CategoryIds { get; set; }
     }
 
@@ -188,6 +193,7 @@ namespace Backend.Features.Books
         public string Author { get; set; } = string.Empty;
         public string? Description { get; set; }
         public int TotalCopies { get; set; }
+        public string? CoverUrl { get; set; }
         public List<int>? CategoryIds { get; set; }
     }
 }

BlazorFrontend/Components/Layout/MainLayout.razor

@@ -80,7 +80,7 @@
                             </div>
                             <div class="flex flex-col">
                                 <span class="text-sm font-medium">@authContext.User.Identity?.Name</span>
-                                <span class="text-xs text-slate-500">@authContext.User.Claims.FirstOrDefault(c => c.Type == System.Security.Claims.ClaimTypes.Role)?.Value</span>
+                                <span class="text-xs text-slate-500">@authContext.User.Claims.FirstOrDefault(c => c.Type == System.Security.Claims.ClaimTypes.Role || c.Type == "role")?.Value</span>
                             </div>
                         </div>
                     </Authorized>

BlazorFrontend/Components/Pages/Books.razor

@@ -1,88 +1,492 @@
 @page "/Books"
 @using BlazorFrontend.Services
 @using BlazorFrontend.Models.Dtos
-@inject HttpClient Http
-
+@using Microsoft.AspNetCore.Authorization
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
 
 <PageTitle>Books Catalog</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Books Catalog</h1>
-    <p class="text-sm text-slate-500 mt-1">Browse and search our collection of books.</p>
-</div>
-
-@if (_books == null)
+@if (_viewMode == ViewMode.List)
 {
-    <div class="card p-6 text-center">
-        <p class="text-slate-600">Loading books...</p>
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
+        <div>
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Books Catalog</h1>
+            <p class="mt-2 text-slate-500">
+                Explore and discover your next great read.
+                <span class="ml-2 text-xs text-slate-400">(@FilteredBooks.Count() total)</span>
+            </p>
+        </div>
+        <AuthorizeView Roles="Librarian">
+            <div class="flex items-center gap-3">
+                <button @onclick="ShowCreate" class="btn-primary">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                    Add New Book
+                </button>
+            </div>
+        </AuthorizeView>
     </div>
-}
-else if (!_books.Any())
-{
-    <div class="card p-6 text-center">
-        <p class="text-slate-600">No books found in the catalog.</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 animate-in fade-in duration-700">
+        <div class="md:col-span-3">
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg class="h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <input type="text" @bind="_searchQuery" @bind:event="oninput"
+                       class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent sm:text-sm shadow-sm" 
+                       placeholder="Search by title, author or ISBN...">
+            </div>
+        </div>
     </div>
-}
-else
-{
-    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
-        @foreach (var book in _books)
-        {
-            <div class="card flex flex-col h-full hover:shadow-md transition-shadow">
-                <div class="p-5 flex-grow">
-                    <h3 class="font-semibold text-lg text-slate-900 line-clamp-2">@book.Title</h3>
-                    <p class="text-sm text-slate-500 mt-1">By @book.Author</p>
-                    <div class="mt-4 flex flex-wrap gap-2">
-                        @if (book.Categories != null && book.Categories.Any())
+
+    @if (_categories.Any())
+    {
+        <div class="flex flex-wrap items-center gap-2 mb-8 animate-in fade-in duration-700">
+            <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider mr-1">Filter:</span>
+            <button @onclick="() => FilterByCategory(null)"
+               class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == null ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-600 border-slate-200 hover:border-slate-400 hover:text-slate-900")'>
+                All
+            </button>
+            @foreach (var cat in _categories)
+            {
+                <button @onclick="() => FilterByCategory(cat.Id)"
+                   class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == cat.Id ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-600 border-slate-200 hover:border-slate-400 hover:text-slate-900")'>
+                    @cat.Name
+                </button>
+            }
+        </div>
+    }
+
+    @if (_isLoading)
+    {
+        <div class="py-20 flex justify-center">
+            <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+        </div>
+    }
+    else if (!FilteredBooks.Any())
+    {
+        <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 animate-in fade-in duration-500">
+            <svg class="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            <p class="text-slate-500 font-medium">No books found matching your criteria.</p>
+        </div>
+    }
+    else
+    {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            @foreach (var book in FilteredBooks)
+            {
+                <div class="group card hover:shadow-lg transition-all duration-300 flex flex-col h-full">
+                    <div @onclick="() => ShowDetails(book.Id)" class="relative aspect-[2/3] w-full bg-slate-100 flex items-center justify-center text-slate-300 overflow-hidden text-center cursor-pointer group-hover:scale-105 transition-transform duration-500">
+                        @if (!string.IsNullOrWhiteSpace(book.CoverUrl))
                         {
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">
-                                @string.Join(", ", book.Categories.Select(c => c.Name))
-                            </span>
+                            <img src="@book.CoverUrl" alt="@book.Title" class="absolute inset-0 w-full h-full object-cover" />
                         }
-                        @if (book.AvailableCopies > 0)
+                        else
                         {
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                                Available (@book.AvailableCopies)
-                            </span>
+                            <div class="flex flex-col items-center gap-4 p-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                                <span class="text-[10px] font-bold text-slate-400">@book.Isbn</span>
+                            </div>
                         }
-                        else
+                        
+                        @if (book.AvailableCopies <= 0)
                         {
-                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-                                Checked Out
-                            </span>
+                            <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] flex items-center justify-center">
+                                <span class="bg-white text-slate-900 text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Out of Stock</span>
+                            </div>
                         }
                     </div>
+                    <div class="p-4 flex-grow flex flex-col">
+                        <div class="flex items-start justify-between gap-2">
+                            <div class="min-w-0">
+                                <h3 @onclick="() => ShowDetails(book.Id)" class="text-sm font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors cursor-pointer">
+                                    @book.Title
+                                </h3>
+                                <p class="text-xs text-slate-500 mt-0.5 truncate">@book.Author</p>
+                            </div>
+                        </div>
+                        @if (book.Categories.Any())
+                        {
+                            <div class="mt-2 flex flex-wrap gap-1">
+                                @foreach (var cat in book.Categories)
+                                {
+                                    <span class="inline-flex items-center rounded-full bg-amber-50 border border-amber-200 px-2 py-0.5 text-[9px] font-semibold text-amber-700">
+                                        @cat.Name
+                                    </span>
+                                }
+                            </div>
+                        }
+                        <div class="mt-3 flex items-center justify-between">
+                            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">@book.Status</span>
+                            <span class="text-[10px] font-medium @(book.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
+                                @book.AvailableCopies / @book.TotalCopies
+                            </span>
+                        </div>
+                        <div class="mt-auto pt-4 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button @onclick="() => ShowDetails(book.Id)" class="flex-1 btn-secondary py-1 text-[11px]">Details</button>
+                            <AuthorizeView Roles="Librarian">
+                                <button @onclick="() => ShowEdit(book.Id)" class="p-1.5 rounded-md border border-slate-200 hover:bg-slate-50 text-slate-600">
+                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                </button>
+                            </AuthorizeView>
+                        </div>
+                    </div>
                 </div>
-                <div class="px-5 py-4 border-t border-slate-100 mt-auto">
+            }
+        </div>
+    }
+}
+else if (_viewMode == ViewMode.Details && _selectedBook != null)
+{
+    <div class="mb-8 animate-in fade-in slide-in-from-left-4 duration-500">
+        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+            <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+            Back to Catalog
+        </button>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            <div class="lg:col-span-1">
+                <div class="aspect-[2/3] w-full rounded-2xl bg-slate-100 border border-slate-200 shadow-sm flex items-center justify-center text-slate-300 overflow-hidden">
+                    @if (!string.IsNullOrWhiteSpace(_selectedBook.CoverUrl))
+                    {
+                        <img src="@_selectedBook.CoverUrl" alt="@_selectedBook.Title" class="w-full h-full object-cover" />
+                    }
+                    else
+                    {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                    }
+                </div>
+            </div>
+
+            <div class="lg:col-span-2 space-y-8">
+                <div>
+                    <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 mb-4 tracking-wide uppercase">@_selectedBook.Status</span>
+                    <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">@_selectedBook.Title</h1>
+                    <p class="text-xl text-slate-500 mt-2 font-medium">by @_selectedBook.Author</p>
+                </div>
+
+                <div class="prose prose-slate max-w-none">
+                    <h3 class="text-lg font-bold text-slate-900 border-b border-slate-100 pb-2 mb-4 uppercase tracking-wider text-sm">Description</h3>
+                    <p class="text-slate-600 leading-relaxed">
+                        @(string.IsNullOrEmpty(_selectedBook.Description) ? "No description available for this book." : _selectedBook.Description)
+                    </p>
+                </div>
+
+                <div class="grid grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">ISBN</h4>
+                        <p class="text-sm font-semibold text-slate-900">@_selectedBook.Isbn</p>
+                    </div>
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Availability</h4>
+                        <p class="text-sm font-semibold @(_selectedBook.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
+                            @(_selectedBook.AvailableCopies > 0 ? $"{_selectedBook.AvailableCopies} / {_selectedBook.TotalCopies} units in stock" : "Currently occupied")
+                        </p>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-4 pt-4">
+                    <AuthorizeView Roles="Member">
+                        @if (_selectedBook.AvailableCopies > 0)
+                        {
+                            <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Borrow This Book</button>
+                        }
+                        else
+                        {
+                            <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
+                        }
+                    </AuthorizeView>
+                    
+                    <AuthorizeView Roles="Librarian">
+                        <button @onclick="() => ShowEdit(_selectedBook.Id)" class="btn-secondary py-3 px-8 text-base">Edit Details</button>
+                        <button @onclick="() => DeleteAsync(_selectedBook.Id)" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                        </button>
+                    </AuthorizeView>
+
                     <AuthorizeView>
-                        <Authorized>
-                            <button class="w-full btn-primary py-2" disabled="@(book.AvailableCopies <= 0)">
-                                Borrow Book
-                            </button>
-                        </Authorized>
                         <NotAuthorized>
-                            <a href="/login" class="w-full btn-secondary py-2 block text-center">Sign In to Borrow</a>
+                            <a href="/login" class="btn-primary py-3 px-8 text-base">Sign In to Borrow</a>
                         </NotAuthorized>
                     </AuthorizeView>
                 </div>
             </div>
-        }
+        </div>
+    </div>
+}
+else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
+{
+    <div class="mb-8 animate-in fade-in slide-in-from-right-4 duration-500">
+        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+            <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+            Back to Catalog
+        </button>
+
+        <div class="max-w-3xl mx-auto">
+            <div class="mb-8">
+                <h1 class="text-3xl font-bold tracking-tight text-slate-900">@(_viewMode == ViewMode.Create ? "Add New Book" : "Edit Book")</h1>
+                <p class="mt-2 text-slate-500">Fill in the details below to @(_viewMode == ViewMode.Create ? "add a new book to" : "update the") library catalog.</p>
+            </div>
+
+            <div class="card p-6 sm:p-8">
+                <EditForm Model="@_formModel" OnValidSubmit="HandleSubmit" class="space-y-6">
+                    <DataAnnotationsValidator />
+                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                        <div class="sm:col-span-2">
+                            <label class="block text-sm font-medium text-slate-700">Book Title <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Title" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. The Great Gatsby" required />
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700">Author <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Author" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. F. Scott Fitzgerald" required />
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700">ISBN <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Isbn" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. 978-0743273565" required />
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700">Total Copies <span class="text-rose-500">*</span></label>
+                            <InputNumber @bind-Value="_formModel.TotalCopies" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="1" required />
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700">Cover Image URL</label>
+                            <InputText @bind-Value="_formModel.CoverUrl" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="https://example.com/cover.jpg" />
+                        </div>
+                        
+                        <div class="hidden sm:block"></div>
+
+                        <div class="sm:col-span-2">
+                            <label class="block text-sm font-medium text-slate-700">Description</label>
+                            <InputTextArea @bind-Value="_formModel.Description" rows="4" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Brief summary of the book..."></InputTextArea>
+                        </div>
+
+                        <div class="sm:col-span-2">
+                            <label class="block text-sm font-medium text-slate-700 mb-2">Categories</label>
+                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                                @foreach (var cat in _categories)
+                                {
+                                    <label class="flex items-center gap-2 px-3 py-2 rounded-md border border-slate-200 bg-slate-50 hover:bg-slate-100 cursor-pointer text-sm text-slate-700 transition-colors">
+                                        <input type="checkbox" checked="@(_formModel.CategoryIds.Contains(cat.Id))"
+                                               @onchange='(e) => ToggleCategory(cat.Id, (bool)e.Value!)'
+                                               class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900" />
+                                        @cat.Name
+                                    </label>
+                                }
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                        <button type="button" @onclick="ShowList" class="btn-secondary">Cancel</button>
+                        <button type="submit" class="btn-primary" disabled="@_isSubmitting">
+                            @(_isSubmitting ? "Saving..." : (_viewMode == ViewMode.Create ? "Add Book" : "Update Book"))
+                        </button>
+                    </div>
+                </EditForm>
+            </div>
+        </div>
     </div>
 }
 
 @code {
-    private IEnumerable<BookDto>? _books;
+    private enum ViewMode { List, Details, Create, Edit }
+    private ViewMode _viewMode = ViewMode.List;
+    private bool _isLoading = true;
+    private bool _isSubmitting = false;
+    private string _searchQuery = "";
+    private int? _selectedCategoryId;
+
+    private IEnumerable<BookDto> _books = Enumerable.Empty<BookDto>();
+    private IEnumerable<CategoryDto> _categories = Enumerable.Empty<CategoryDto>();
+    private BookDto? _selectedBook;
+
+    // Form Model
+    private BookFormModel _formModel = new();
 
     protected override async Task OnInitializedAsync()
     {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _books = await ApiClient.GetBooksAsync();
+            _categories = await ApiClient.GetCategoriesAsync();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private IEnumerable<BookDto> FilteredBooks => _books
+        .Where(b => (string.IsNullOrWhiteSpace(_searchQuery) || 
+                    b.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
+                    b.Author.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
+                    b.Isbn.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase)) &&
+                    (_selectedCategoryId == null || b.Categories.Any(c => c.Id == _selectedCategoryId)));
+
+    private void FilterByCategory(int? id) => _selectedCategoryId = id;
+
+    private void ShowList()
+    {
+        _viewMode = ViewMode.List;
+        _selectedBook = null;
+    }
+
+    private async Task ShowDetails(int id)
+    {
+        _isLoading = true;
+        _selectedBook = await ApiClient.GetBookAsync(id);
+        _viewMode = ViewMode.Details;
+        _isLoading = false;
+    }
+
+    private void ShowCreate()
+    {
+        _formModel = new BookFormModel();
+        _viewMode = ViewMode.Create;
+    }
+
+    private async Task ShowEdit(int id)
+    {
+        _isLoading = true;
+        var book = await ApiClient.GetBookAsync(id);
+        if (book != null)
+        {
+            _selectedBook = book;
+            _formModel = new BookFormModel
+            {
+                Id = book.Id,
+                Title = book.Title,
+                Author = book.Author,
+                Isbn = book.Isbn,
+                Description = book.Description,
+                TotalCopies = book.TotalCopies,
+                CoverUrl = book.CoverUrl,
+                CategoryIds = book.Categories.Select(c => c.Id).ToList()
+            };
+            _viewMode = ViewMode.Edit;
+        }
+        _isLoading = false;
+    }
+
+    private void ToggleCategory(int id, bool isChecked)
+    {
+        if (isChecked && !_formModel.CategoryIds.Contains(id))
+            _formModel.CategoryIds.Add(id);
+        else if (!isChecked)
+            _formModel.CategoryIds.Remove(id);
+    }
+
+    private async Task HandleSubmit()
+    {
+        _isSubmitting = true;
         try
         {
-            _books = await Http.GetFromJsonAsync<IEnumerable<BookDto>>("api/books");
+            if (_viewMode == ViewMode.Create)
+            {
+                var request = new BookCreateRequest
+                {
+                    Title = _formModel.Title,
+                    Author = _formModel.Author,
+                    Isbn = _formModel.Isbn,
+                    Description = _formModel.Description,
+                    TotalCopies = _formModel.TotalCopies,
+                    CoverUrl = _formModel.CoverUrl,
+                    CategoryIds = _formModel.CategoryIds
+                };
+                var result = await ApiClient.CreateBookAsync(request);
+                if (result != null)
+                {
+                    await JS.InvokeVoidAsync("showToast", "Book added successfully!", "success");
+                    await LoadDataAsync();
+                    ShowList();
+                }
+            }
+            else
+            {
+                var request = new BookUpdateRequest
+                {
+                    Title = _formModel.Title,
+                    Author = _formModel.Author,
+                    Description = _formModel.Description,
+                    TotalCopies = _formModel.TotalCopies,
+                    CoverUrl = _formModel.CoverUrl,
+                    CategoryIds = _formModel.CategoryIds
+                };
+                var result = await ApiClient.UpdateBookAsync(_formModel.Id, request);
+                if (result != null)
+                {
+                    await JS.InvokeVoidAsync("showToast", "Book updated successfully!", "success");
+                    await LoadDataAsync();
+                    ShowList();
+                }
+            }
         }
         catch (Exception ex)
         {
-            Console.WriteLine("Error fetching books: " + ex.Message);
-            _books = new List<BookDto>();
+            await JS.InvokeVoidAsync("showToast", $"Error: {ex.Message}", "error");
+        }
+        finally
+        {
+            _isSubmitting = false;
+        }
+    }
+
+    private async Task DeleteAsync(int id)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to remove this book from the catalog?");
+        if (!confirmed) return;
+
+        var success = await ApiClient.DeleteBookAsync(id);
+        if (success)
+        {
+            await JS.InvokeVoidAsync("showToast", "Book deleted successfully", "success");
+            await LoadDataAsync();
+            ShowList();
         }
     }
+
+    private async Task BorrowAsync(int id)
+    {
+        var result = await ApiClient.BorrowBookAsync(new BorrowRequest { BookId = id });
+        if (result != null)
+        {
+            await JS.InvokeVoidAsync("showToast", "Book borrowed successfully! Check 'My Loans' for details.", "success");
+            await LoadDataAsync();
+            await ShowDetails(id);
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", "Failed to borrow book. Check your loan limit.", "error");
+        }
+    }
+
+    private class BookFormModel
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = "";
+        public string Author { get; set; } = "";
+        public string Isbn { get; set; } = "";
+        public string? Description { get; set; }
+        public int TotalCopies { get; set; } = 1;
+        public string? CoverUrl { get; set; }
+        public List<int> CategoryIds { get; set; } = new();
+    }
 }

BlazorFrontend/Components/Pages/Borrowings.razor

@@ -1,12 +1,161 @@
 @page "/Borrowings"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
 
-<PageTitle>Active Loans</PageTitle>
+<PageTitle>My Loans</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Active Loans</h1>
-    <p class="text-sm text-slate-500 mt-1">View your current borrowed books and due dates.</p>
+<div class="mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
+    <h1 class="text-3xl font-bold tracking-tight text-slate-900">My Loans</h1>
+    <p class="mt-2 text-slate-500">Track your current borrowings and return upcoming books.</p>
 </div>
 
-<div class="card p-6">
-    <p class="text-slate-600">Borrowings list will be displayed here.</p>
-</div>
+@if (_isLoading)
+{
+    <div class="py-20 flex justify-center">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+    </div>
+}
+else
+{
+    <div class="card overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-700">
+        <div class="overflow-x-auto">
+            <table class="w-full text-left border-collapse">
+                <thead>
+                    <tr class="bg-slate-50/50 border-b border-slate-100">
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book Information</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Dates</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Status</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fines</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    @if (!_borrowings.Any())
+                    {
+                        <tr>
+                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 italic">
+                                You don't have any borrowing history yet.
+                            </td>
+                        </tr>
+                    }
+                    @foreach (var loan in _borrowings)
+                    {
+                        <tr class="hover:bg-slate-50 transition-colors group">
+                            <td class="px-6 py-4">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-10 h-14 bg-slate-100 rounded flex items-center justify-center text-slate-300 group-hover:bg-slate-200 transition-colors">
+                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                                    </div>
+                                    <div class="min-w-0">
+                                        <p class="text-sm font-bold text-slate-900 truncate">@loan.BookTitle</p>
+                                        <p class="text-[11px] text-slate-500 mt-0.5">Loan ID: #@loan.Id</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                <div class="space-y-1">
+                                    <p class="text-[11px]"><span class="text-slate-400">Borrowed:</span> <span class="font-medium text-slate-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span></p>
+                                    <p class="text-[11px]"><span class="text-slate-400">Due:</span> <span class="font-medium @(loan.DueDate < DateTime.Now && loan.Status == "Borrowed" ? "text-rose-600" : "text-slate-700")">@loan.DueDate.ToString("MMM dd, yyyy")</span></p>
+                                    @if (loan.ReturnDate.HasValue)
+                                    {
+                                        <p class="text-[11px]"><span class="text-slate-400">Returned:</span> <span class="font-medium text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span></p>
+                                    }
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
+                                    @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : 
+                                      loan.Status == "PendingReturn" ? "bg-blue-100 text-blue-700" :
+                                      "bg-emerald-100 text-emerald-700")">
+                                    @(loan.Status == "PendingReturn" ? "Pending Approval" : loan.Status)
+                                </span>
+                            </td>
+                            <td class="px-6 py-4">
+                                @if (loan.FineAmount > 0)
+                                {
+                                    <div class="flex flex-col">
+                                        <span class="text-xs font-bold @(loan.IsFinePaid ? "text-slate-500 line-through" : "text-rose-600")">
+                                            MMK @loan.FineAmount.ToString("N0")
+                                        </span>
+                                        @if (loan.IsFinePaid)
+                                        {
+                                            <span class="text-[10px] text-emerald-600 font-medium">Paid</span>
+                                        }
+                                    </div>
+                                }
+                                else
+                                {
+                                    <span class="text-[11px] text-slate-400">No Fines</span>
+                                }
+                            </td>
+                            <td class="px-6 py-4 text-right">
+                                @if (loan.Status == "Borrowed")
+                                {
+                                    <button @onclick="() => RequestReturnAsync(loan)" 
+                                            class="bg-slate-900 text-white py-1.5 px-4 rounded-xl text-xs font-bold hover:bg-slate-800 transition-all active:scale-95 shadow-sm">
+                                        Return Book
+                                    </button>
+                                }
+                                else if (loan.Status == "PendingReturn")
+                                {
+                                    <span class="text-xs font-medium text-slate-400 italic">Awaiting Approval</span>
+                                }
+                                else
+                                {
+                                    <svg class="w-5 h-5 ml-auto text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+}
+
+@code {
+    private bool _isLoading = true;
+    private IEnumerable<BorrowingDto> _borrowings = Enumerable.Empty<BorrowingDto>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _borrowings = await ApiClient.GetMyBorrowingsAsync();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading borrowings: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private async Task RequestReturnAsync(BorrowingDto loan)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Request return for \"{loan.BookTitle}\"? It will be marked as pending until approved by a librarian.");
+        if (!confirmed) return;
+
+        var success = await ApiClient.RequestReturnAsync(loan.Id);
+        if (success)
+        {
+            await JS.InvokeVoidAsync("showToast", "Return request submitted successfully!", "success");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", "Failed to submit return request.", "error");
+        }
+    }
+}
+

BlazorFrontend/Components/Pages/BorrowingsManage.razor

@@ -1,12 +1,219 @@
 @page "/Borrowings/Manage"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using Microsoft.AspNetCore.Authorization
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@attribute [Authorize(Roles = "Librarian")]
 
 <PageTitle>Manage Borrowings</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Manage Borrowings</h1>
-    <p class="text-sm text-slate-500 mt-1">Librarian view to manage all borrowings.</p>
+<div class="mb-10 animate-in fade-in slide-in-from-top-4 duration-500">
+    <div class="flex items-center justify-between mb-4">
+        <div>
+            <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Manage All Borrowings</h1>
+            <p class="text-slate-500 font-medium">Monitor and process library loans across all members.</p>
+        </div>
+        <div class="flex gap-3">
+            <div class="card px-4 py-2 flex items-center gap-2 bg-slate-50 border-slate-200">
+                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Total Active:</span>
+                <span class="text-lg font-bold text-slate-900">@_borrowings.Count(m => m.Status == "Borrowed")</span>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div class="card p-6">
-    <p class="text-slate-600">Borrowings management will be displayed here.</p>
-</div>
+@if (_isLoading)
+{
+    <div class="py-20 flex justify-center">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+    </div>
+}
+else
+{
+    <div class="card overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-700">
+        <div class="overflow-x-auto">
+            <table class="w-full text-left border-collapse">
+                <thead>
+                    <tr class="bg-slate-50 border-b border-slate-200">
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book & Loan Info</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Member Details</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Loan Dates</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center">Status</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fines</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    @if (!_borrowings.Any())
+                    {
+                        <tr>
+                            <td colspan="6" class="px-6 py-16 text-center text-slate-400 italic bg-white">
+                                No borrowing records found in the system.
+                            </td>
+                        </tr>
+                    }
+                    @foreach (var loan in _borrowings.OrderByDescending(l => l.BorrowDate))
+                    {
+                        <tr class="hover:bg-slate-50/80 transition-colors">
+                            <td class="px-6 py-5">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-10 h-14 bg-slate-900/5 rounded-lg flex items-center justify-center text-slate-400 border border-slate-100">
+                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                                    </div>
+                                    <div class="min-w-0">
+                                        <p class="text-sm font-bold text-slate-900 truncate mb-0.5">@loan.BookTitle</p>
+                                        <p class="text-[10px] font-mono text-slate-400 uppercase tracking-tight">ID: #@loan.Id</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-5">
+                                <div class="flex flex-col gap-1">
+                                    <p class="text-sm font-semibold text-slate-800">@loan.UserEmail</p>
+                                    <p class="text-[10px] text-slate-500 font-medium tracking-wide">UID: #@loan.UserId</p>
+                                </div>
+                            </td>
+                            <td class="px-6 py-5">
+                                <div class="grid gap-1">
+                                    <div class="flex items-center gap-2 text-[11px]">
+                                        <span class="text-slate-400 w-12">Out:</span>
+                                        <span class="font-bold text-slate-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-[11px]">
+                                        <span class="text-slate-400 w-12">Due:</span>
+                                        @{
+                                            var isOverdue = loan.DueDate < DateTime.Now && loan.Status == "Borrowed";
+                                        }
+                                        <span class="font-bold @(isOverdue ? "text-rose-600 animate-pulse" : "text-amber-700")">@loan.DueDate.ToString("MMM dd, yyyy")</span>
+                                    </div>
+                                    @if (loan.ReturnDate.HasValue)
+                                    {
+                                        <div class="flex items-center gap-2 text-[11px]">
+                                            <span class="text-slate-400 w-12">Back:</span>
+                                            <span class="font-bold text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span>
+                                        </div>
+                                    }
+                                </div>
+                            </td>
+                            <td class="px-6 py-5 text-center">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider
+                                    @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : 
+                                      loan.Status == "PendingReturn" ? "bg-blue-600 text-white shadow-sm" :
+                                      "bg-emerald-100 text-emerald-700")">
+                                    @(loan.Status == "PendingReturn" ? "Pending Approval" : loan.Status)
+                                </span>
+                            </td>
+                            <td class="px-6 py-5">
+                                @if (loan.FineAmount > 0)
+                                {
+                                    <div class="flex flex-col">
+                                        <span class="text-sm font-extrabold @(loan.IsFinePaid ? "text-slate-400 line-through" : "text-rose-600")">
+                                            MMK @loan.FineAmount.ToString("N0")
+                                        </span>
+                                        @if (loan.IsFinePaid)
+                                        {
+                                            <span class="text-[9px] text-emerald-600 font-bold uppercase mt-0.5 tracking-tighter">Settled</span>
+                                        }
+                                        else
+                                        {
+                                            <span class="text-[9px] text-rose-400 font-bold uppercase mt-0.5 tracking-tighter">Pending</span>
+                                        }
+                                    </div>
+                                }
+                                else
+                                {
+                                    <span class="text-[10px] text-slate-300 font-bold italic">No Fines</span>
+                                }
+                            </td>
+                            <td class="px-6 py-5 text-right">
+                                @if (loan.Status == "PendingReturn")
+                                {
+                                    <button @onclick="() => ApproveReturnAsync(loan)" 
+                                            class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-emerald-700 transition-all shadow-md active:scale-95">
+                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                                        Approve Return
+                                    </button>
+                                }
+                                else if (loan.Status == "Borrowed")
+                                {
+                                    <button @onclick="() => ForceReturnAsync(loan)"
+                                            class="inline-flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-slate-800 transition-all shadow-sm active:scale-95">
+                                        Process Return
+                                    </button>
+                                }
+                                else
+                                {
+                                    <div class="text-emerald-600">
+                                        <svg class="w-6 h-6 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                                    </div>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+}
+
+@code {
+    private bool _isLoading = true;
+    private IEnumerable<BorrowingDto> _borrowings = Enumerable.Empty<BorrowingDto>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _borrowings = await ApiClient.GetAllBorrowingsAsync();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading all borrowings: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private async Task ApproveReturnAsync(BorrowingDto loan)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Approve return for \"{loan.BookTitle}\" borrowed by {loan.UserEmail}?");
+        if (!confirmed) return;
+
+        var result = await ApiClient.ReturnBookAsync(loan.Id);
+        if (result != null)
+        {
+            await JS.InvokeVoidAsync("showToast", "Return approved successfully!", "success");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", "Failed to approve return.", "error");
+        }
+    }
+
+    private async Task ForceReturnAsync(BorrowingDto loan)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Force process return for \"{loan.BookTitle}\" (Member: {loan.UserEmail})? Use this if the member returned the book in person.");
+        if (!confirmed) return;
+
+        var result = await ApiClient.ReturnBookAsync(loan.Id);
+        if (result != null)
+        {
+            await JS.InvokeVoidAsync("showToast", "Book marked as returned!", "success");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", "Failed to process return.", "error");
+        }
+    }
+}
+

BlazorFrontend/Components/Pages/Home.razor

@@ -1,74 +1,238 @@
 @page "/"
 @using BlazorFrontend.Services
 @using BlazorFrontend.Models.Dtos
-@inject HttpClient Http
+@using Microsoft.AspNetCore.Components.Authorization
+@inject LibraryApiClient ApiClient
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager Navigation
 
 <PageTitle>Dashboard</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Dashboard</h1>
-    <p class="text-sm text-slate-500 mt-1">Welcome back to the Library Management System.</p>
+<div class="mb-10 animate-in fade-in slide-in-from-top-4 duration-500">
+    <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Welcome Back</h1>
+    <p class="text-slate-500 font-medium">Here's what's happening with the library today.</p>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-    <div class="card p-6">
-        <h3 class="text-lg font-medium text-slate-900">Total Books</h3>
-        <p class="text-3xl font-bold text-slate-700 mt-2">@_totalBooks</p>
+@if (_isLoading)
+{
+    <div class="flex items-center justify-center min-h-[400px]">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
     </div>
-    <div class="card p-6">
-        <h3 class="text-lg font-medium text-slate-900">Categories</h3>
-        <p class="text-3xl font-bold text-slate-700 mt-2">@_totalCategories</p>
-    </div>
-    <AuthorizeView Roles="Librarian">
+}
+else
+{
+    <AuthorizeView>
         <Authorized>
-            <div class="card p-6">
-                <h3 class="text-lg font-medium text-slate-900">Total Users</h3>
-                <p class="text-3xl font-bold text-slate-700 mt-2">@_totalUsers</p>
-            </div>
+            <!-- Loyalty Banner -->
+            @if (_loyaltyAccount != null)
+            {
+                <a href="Rewards" class="block group mb-10 animate-in fade-in zoom-in-95 duration-700">
+                    <div class="bg-gradient-to-r from-amber-500 to-amber-700 rounded-2xl p-6 text-white shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:translate-y-[-2px] border border-white/10">
+                        <div class="relative z-10 flex items-center justify-between">
+                            <div>
+                                <p class="text-amber-100 text-sm font-bold uppercase tracking-widest mb-1">Your Loyalty Status</p>
+                                <div class="flex items-baseline gap-3">
+                                    <h2 class="text-4xl font-extrabold">@_loyaltyAccount.CurrentBalance.ToString("N0")</h2>
+                                    <span class="text-amber-200 font-medium tracking-wide">Points</span>
+                                </div>
+                                <p class="text-[10px] text-amber-300/60 mt-1 uppercase tracking-tighter">Connection: Connected</p>
+                            </div>
+                            <div class="text-right flex items-center gap-4">
+                                <div class="inline-flex items-center gap-2 bg-black/20 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 shadow-inner">
+                                    <svg class="w-5 h-5 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
+                                    <span class="font-bold text-lg">@_loyaltyAccount.Tier</span>
+                                </div>
+                                <div class="p-2 bg-white/20 rounded-full group-hover:bg-white/30 transition-colors">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/10 rounded-full blur-2xl transform group-hover:scale-110 transition-transform duration-700"></div>
+                    </div>
+                </a>
+            }
         </Authorized>
-        <NotAuthorized>
-            <div class="card p-6">
-                <h3 class="text-lg font-medium text-slate-900">My Active Loans</h3>
-                <p class="text-3xl font-bold text-slate-700 mt-2">@_myLoans</p>
-            </div>
-        </NotAuthorized>
     </AuthorizeView>
-</div>
+
+    <!-- Stats Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+            <div class="flex items-center justify-between">
+                <div class="p-2 bg-slate-50 rounded-lg group-hover:bg-slate-100 transition-colors">
+                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                </div>
+                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Books</span>
+            </div>
+            <div>
+                <div class="text-3xl font-bold text-slate-900">@_totalBooks</div>
+                <div class="text-xs text-slate-500 mt-1 font-medium italic">Total in catalog</div>
+            </div>
+        </div>
+
+        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+            <div class="flex items-center justify-between">
+                <div class="p-2 bg-emerald-50 rounded-lg group-hover:bg-emerald-100 transition-colors">
+                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
+                </div>
+                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Loans</span>
+            </div>
+            <div>
+                <div class="text-3xl font-bold text-slate-900">@_activeLoans</div>
+                <div class="text-xs text-slate-500 mt-1 font-medium italic">Checking out right now</div>
+            </div>
+        </div>
+
+        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 border-l-4 border-l-rose-500 transition-all duration-300">
+            <div class="flex items-center justify-between">
+                <div class="p-2 bg-rose-50 rounded-lg group-hover:bg-rose-100 transition-colors">
+                    <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                </div>
+                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest text-rose-500">Overdue</span>
+            </div>
+            <div>
+                <div class="text-3xl font-bold text-rose-600">@_overdueLoans</div>
+                <div class="text-xs text-rose-500 mt-1 font-medium italic">Require attention</div>
+            </div>
+        </div>
+
+        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+            <div class="flex items-center justify-between">
+                <div class="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+                </div>
+                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Members</span>
+            </div>
+            <div>
+                <div class="text-3xl font-bold text-slate-900">@_totalMembers</div>
+                <div class="text-xs text-slate-500 mt-1 font-medium italic">In the community</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Arrivals -->
+    @if (_recentBooks.Any())
+    {
+        <div class="mb-12 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-150">
+            <div class="flex items-center justify-between mb-8">
+                <h2 class="text-2xl font-bold text-slate-900 tracking-tight">Recent Arrivals</h2>
+                <a href="Books" class="text-sm font-bold text-slate-500 hover:text-slate-900 flex items-center group">
+                    Browse All 
+                    <svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+                </a>
+            </div>
+            
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+                @foreach (var book in _recentBooks)
+                {
+                    <div class="group cursor-pointer">
+                        <a href="Books">
+                            <div class="aspect-[2/3] w-full bg-slate-100 rounded-xl mb-3 flex items-center justify-center text-slate-300 group-hover:shadow-lg transition-all duration-300 relative overflow-hidden">
+                                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                                @if (book.AvailableCopies <= 0)
+                                {
+                                    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px] flex items-center justify-center">
+                                        <span class="bg-white text-slate-900 text-[8px] font-bold uppercase px-2 py-1 rounded">Out</span>
+                                    </div>
+                                }
+                            </div>
+                            <h3 class="text-xs font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors">@book.Title</h3>
+                            <p class="text-[10px] text-slate-500 truncate mt-0.5 font-medium">@book.Author</p>
+                        </a>
+                    </div>
+                }
+            </div>
+        </div>
+    }
+
+    <!-- Quick Actions -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-300">
+        <div class="bg-slate-900 text-white rounded-3xl p-8 flex flex-col justify-between overflow-hidden relative group">
+            <div class="relative z-10">
+                <h2 class="text-2xl font-bold mb-2">Explore the Library</h2>
+                <p class="text-slate-400 text-sm max-w-[280px]">Access thousands of books across all categories with a premium member account.</p>
+            </div>
+            <div class="mt-8 relative z-10">
+                <a href="Books" class="inline-flex items-center bg-white text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold hover:bg-slate-100 transition-colors">
+                    View Catalog
+                </a>
+            </div>
+            <svg class="absolute bottom-0 right-0 w-48 h-48 text-slate-800 -mb-12 -mr-12 opacity-50 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+        </div>
+
+        <div class="bg-amber-50 rounded-3xl p-8 flex flex-col justify-between group border border-amber-100">
+            <div>
+                <h2 class="text-2xl font-bold text-slate-900 mb-2">My Current Loans</h2>
+                <p class="text-slate-600 text-sm max-w-[280px]">Don't forget to return your books on time to avoid late fees.</p>
+            </div>
+            <div class="mt-8">
+                <a href="Borrowings" class="inline-flex items-center text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold border-2 border-slate-900 hover:bg-slate-900 hover:text-white transition-all">
+                    Manage My Loans
+                </a>
+            </div>
+        </div>
+    </div>
+}
 
 @code {
-    private string _totalBooks = "--";
-    private string _totalCategories = "--";
-    private string _totalUsers = "--";
-    private string _myLoans = "--";
+    private int _totalBooks = 0;
+    private int _activeLoans = 0;
+    private int _overdueLoans = 0;
+    private int _totalMembers = 0;
+    private IEnumerable<BookDto> _recentBooks = Enumerable.Empty<BookDto>();
+    private LoyaltyAccountDto? _loyaltyAccount;
+    private bool _isLoading = true;
 
     protected override async Task OnInitializedAsync()
     {
         try
         {
-            var books = await Http.GetFromJsonAsync<IEnumerable<BookDto>>("api/books");
-            _totalBooks = books?.Count().ToString() ?? "0";
+            // 1. Basic Stats (Public)
+            var books = await ApiClient.GetBooksAsync();
+            _totalBooks = books.Count();
+            _recentBooks = books.Take(6);
 
-            var categories = await Http.GetFromJsonAsync<IEnumerable<CategoryDto>>("api/categories");
-            _totalCategories = categories?.Count().ToString() ?? "0";
+            // 2. Personal/Authenticated Stats
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            var user = authState.User;
 
-            // These endpoints might require auth, we catch exceptions if the user is unauthenticated or unauthorized
-            try 
+            if (user.Identity?.IsAuthenticated == true)
             {
-                var users = await Http.GetFromJsonAsync<IEnumerable<UserDto>>("api/users");
-                _totalUsers = users?.Count().ToString() ?? "0";
-            } 
-            catch { }
+                // Fetch borrowings
+                try
+                {
+                    var borrowings = await ApiClient.GetMyBorrowingsAsync();
+                    _activeLoans = borrowings.Count(b => b.Status == "Borrowed");
+                    _overdueLoans = borrowings.Count(b => b.Status == "Overdue" || (b.Status == "Borrowed" && b.DueDate < DateTime.UtcNow));
+                }
+                catch { }
 
-            try
-            {
-                var loans = await Http.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings/me");
-                _myLoans = loans?.Count().ToString() ?? "0";
+                // Fetch loyalty
+                try
+                {
+                    _loyaltyAccount = await ApiClient.GetMyLoyaltyAccountAsync();
+                }
+                catch { }
+
+                // 3. Librarian Only Stats
+                if (user.IsInRole("Librarian"))
+                {
+                    try
+                    {
+                        var members = await ApiClient.GetUsersAsync();
+                        _totalMembers = members.Count();
+                    }
+                    catch { }
+                }
             }
-            catch { }
         }
         catch (Exception ex)
         {
-            Console.WriteLine("Error fetching dashboard data: " + ex.Message);
+            Console.WriteLine("Error loading dashboard data: " + ex.Message);
+        }
+        finally
+        {
+            _isLoading = false;
         }
     }
 }
+

BlazorFrontend/Components/Pages/Members.razor

@@ -1,12 +1,634 @@
 @page "/Members"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using BlazorFrontend.Models
+@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Librarian")]
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JSRuntime
+@inject NavigationManager Navigation
 
 <PageTitle>Members Directory</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Members</h1>
-    <p class="text-sm text-slate-500 mt-1">Manage library members.</p>
-</div>
+@if (_currentView == ViewMode.List)
+{
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
+        <div>
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Members Directory</h1>
+            <p class="mt-2 text-slate-500">
+                Manage library members and administrator accounts.
+                <span class="ml-2 text-xs text-slate-400">(@(_allUsers?.Count() ?? 0) total)</span>
+            </p>
+        </div>
+        <div class="flex items-center gap-3">
+            <button @onclick="ShowCreate" class="btn-primary">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                Add New Member
+            </button>
+        </div>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="flex items-center justify-center min-h-[400px]">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+        </div>
+    }
+    else if (_pagedResult != null)
+    {
+        <div class="card overflow-hidden animate-in fade-in duration-700">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-slate-200">
+                    <thead class="bg-slate-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Contact</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Role</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+                            <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-slate-200">
+                        @foreach (var user in _pagedResult.Items)
+                        {
+                            <tr class="hover:bg-slate-50 transition-colors">
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="flex items-center">
+                                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-sm">
+                                            @(user.FullName?.Substring(0, Math.Min(2, user.FullName.Length)).ToUpper() ?? "U")
+                                        </div>
+                                        <div class="ml-4">
+                                            <div class="text-sm font-medium text-slate-900">
+                                                <button @onclick="() => ShowDetails(user.Id)" class="hover:underline text-left">@user.FullName</button>
+                                            </div>
+                                            @if (!string.IsNullOrEmpty(user.StudentId))
+                                            {
+                                                <div class="text-xs text-slate-500">ID: @user.StudentId</div>
+                                            }
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="text-sm text-slate-900">@user.Email</div>
+                                    <div class="text-xs text-slate-500">@(string.IsNullOrEmpty(user.PhoneNumber) ? "No phone" : user.PhoneNumber)</div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 @(user.Role == "Admin" ? "bg-amber-100 text-amber-800" : "bg-blue-100 text-blue-800")">
+                                        @user.Role
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    @if (user.BanStatus == true)
+                                    {
+                                        <span class="inline-flex rounded-full bg-rose-100 px-2 text-xs font-semibold leading-5 text-rose-800">
+                                            Suspended
+                                        </span>
+                                    }
+                                    else if (user.IsActive)
+                                    {
+                                        <span class="inline-flex rounded-full bg-emerald-100 px-2 text-xs font-semibold leading-5 text-emerald-800">
+                                            Active
+                                        </span>
+                                    }
+                                    else
+                                    {
+                                        <span class="inline-flex rounded-full bg-slate-100 px-2 text-xs font-semibold leading-5 text-slate-800">
+                                            Inactive
+                                        </span>
+                                    }
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                    <div class="flex items-center justify-end gap-3">
+                                        <button @onclick="() => ShowDetails(user.Id)" class="text-slate-600 hover:text-slate-900 transition-colors">Details</button>
+                                        <button @onclick="() => ShowEdit(user.Id)" class="text-indigo-600 hover:text-indigo-900 transition-colors">Edit</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+
+            @* Pagination *@
+            @if (_pagedResult.TotalPages > 1)
+            {
+                <div class="px-6 py-4 border-t border-slate-200 flex items-center justify-between bg-white">
+                    <p class="text-sm text-slate-500">
+                        Showing <span class="font-medium text-slate-700">@((_pagedResult.CurrentPage - 1) * _pagedResult.PageSize + 1)</span>
+                        –
+                        <span class="font-medium text-slate-700">@(Math.Min(_pagedResult.CurrentPage * _pagedResult.PageSize, _pagedResult.TotalCount))</span>
+                        of <span class="font-medium text-slate-700">@_pagedResult.TotalCount</span> members
+                    </p>
+                    <nav class="flex items-center gap-1" aria-label="Pagination">
+                        @* Previous *@
+                        <button @onclick="() => ChangePage(_pagedResult.CurrentPage - 1)" disabled="@(!_pagedResult.HasPreviousPage)"
+                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasPreviousPage ? "border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900" : "border-slate-100 text-slate-300 cursor-not-allowed") text-sm font-medium transition-colors">
+                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                            </svg>
+                            Prev
+                        </button>
+
+                        @* Page numbers *@
+                        @for (int p = 1; p <= _pagedResult.TotalPages; p++)
+                        {
+                            var pageNumber = p;
+                            if (p == _pagedResult.CurrentPage)
+                            {
+                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-slate-900 text-white text-sm font-semibold">@p</span>
+                            }
+                            else if (p == 1 || p == _pagedResult.TotalPages || (p >= _pagedResult.CurrentPage - 2 && p <= _pagedResult.CurrentPage + 2))
+                            {
+                                <button @onclick="() => ChangePage(pageNumber)"
+                                        class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">@p</button>
+                            }
+                            else if (p == _pagedResult.CurrentPage - 3 || p == _pagedResult.CurrentPage + 3)
+                            {
+                                <span class="inline-flex items-center justify-center w-8 h-8 text-sm text-slate-400">…</span>
+                            }
+                        }
+
+                        @* Next *@
+                        <button @onclick="() => ChangePage(_pagedResult.CurrentPage + 1)" disabled="@(!_pagedResult.HasNextPage)"
+                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasNextPage ? "border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900" : "border-slate-100 text-slate-300 cursor-not-allowed") text-sm font-medium transition-colors">
+                            Next
+                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
+                    </nav>
+                </div>
+            }
+        </div>
+    }
+}
+else if (_currentView == ViewMode.Details && _selectedUser != null)
+{
+    <div class="animate-in fade-in slide-in-from-left-4 duration-500">
+        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+            <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+            Back to Directory
+        </button>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            <div class="lg:col-span-1">
+                <div class="aspect-square w-full rounded-2xl bg-slate-900 flex flex-col items-center justify-center text-white p-6 shadow-xl">
+                    <div class="text-6xl font-black mb-4 tracking-tighter">
+                        @(_selectedUser.User.FullName?.Substring(0, Math.Min(2, _selectedUser.User.FullName.Length)).ToUpper() ?? "U")
+                    </div>
+                    <h2 class="text-xl font-bold text-center">@_selectedUser.User.FullName</h2>
+                    <div class="mt-2 inline-flex rounded-full px-3 py-1 text-xs font-semibold leading-5 @(_selectedUser.User.Role == "Admin" ? "bg-amber-500/20 text-amber-200" : "bg-blue-500/20 text-blue-200")">
+                        @_selectedUser.User.Role
+                    </div>
+                </div>
+            </div>
+
+            <div class="lg:col-span-2 space-y-8">
+                <div>
+                    <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight mb-2">Member Profile</h1>
+                    <div class="flex items-center gap-3">
+                        @if (_selectedUser.User.BanStatus == true)
+                        {
+                            <span class="inline-flex items-center rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-800 tracking-wide uppercase">Suspended</span>
+                        }
+                        else if (_selectedUser.User.IsActive)
+                        {
+                            <span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800 tracking-wide uppercase">Active</span>
+                        }
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Email</h4>
+                        <p class="text-sm font-semibold text-slate-900">@_selectedUser.User.Email</p>
+                    </div>
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Phone</h4>
+                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.PhoneNumber) ? "-" : _selectedUser.User.PhoneNumber)</p>
+                    </div>
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Student ID</h4>
+                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.StudentId) ? "-" : _selectedUser.User.StudentId)</p>
+                    </div>
+                    <div>
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Joined</h4>
+                        <p class="text-sm font-semibold text-slate-900">@_selectedUser.User.CreatedAt.ToString("MMM dd, yyyy")</p>
+                    </div>
+                    <div class="sm:col-span-2">
+                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Address</h4>
+                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.Address) ? "-" : _selectedUser.User.Address)</p>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-4 pt-4 flex-wrap">
+                    <button @onclick="() => ShowEdit(_selectedUser.User.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Edit Details</button>
+                    
+                    <button @onclick="UpdateRole" class="btn-secondary py-3 px-8 text-base">
+                        Make @(_selectedUser.User.Role == "Admin" ? "Member" : "Admin")
+                    </button>
+
+                    <button @onclick="DeleteUser" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                    </button>
+                </div>
+                
+                <!-- Subscription Management -->
+                <div class="mt-8 pt-8 border-t border-slate-100">
+                    <h3 class="text-2xl font-bold text-slate-900 mb-6">Manage Subscription</h3>
+                    
+                    @if (_selectedUser.CurrentSubscription != null && _selectedUser.CurrentSubscription.IsActive)
+                    {
+                        <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <span class="text-sm text-green-800 font-semibold uppercase tracking-wider">Active Plan</span>
+                                    <h4 class="text-xl font-bold text-green-900">@_selectedUser.CurrentSubscription.MembershipType</h4>
+                                </div>
+                                <div class="text-right">
+                                    <div class="text-xs text-green-700">Expires On</div>
+                                    <div class="font-bold text-green-900">@_selectedUser.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
+                            <p class="text-slate-600 font-medium">No active subscription for this member.</p>
+                        </div>
+                    }
+
+                    <h4 class="text-lg font-semibold text-slate-900 mb-4">Assign New Plan</h4>
+                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                        @foreach (var plan in _selectedUser.AvailableMemberships)
+                        {
+                            var isCurrent = _selectedUser.CurrentSubscription?.IsActive == true && _selectedUser.CurrentSubscription.MembershipId == plan.Id;
+                            <div class="card p-4 relative @(isCurrent ? "ring-2 ring-slate-900 border-slate-900" : "")">
+                                @if (isCurrent)
+                                {
+                                    <div class="absolute top-0 right-0 -mt-2 -mr-2 bg-slate-900 text-white text-xs font-bold px-2 py-1 rounded-md">Current</div>
+                                }
+                                <h5 class="font-bold text-slate-900 text-lg mb-1">@plan.Type</h5>
+                                <p class="text-slate-500 font-medium text-sm mb-4">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
+                                
+                                @if (!isCurrent)
+                                {
+                                    <button @onclick="() => AssignSubscription(plan.Id, plan.Type)" class="w-full btn-secondary text-sm">Assign Plan</button>
+                                }
+                                else
+                                {
+                                    <button disabled class="w-full btn-secondary text-sm opacity-50 cursor-not-allowed">Current Plan</button>
+                                }
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+else if (_currentView == ViewMode.Create || _currentView == ViewMode.Edit)
+{
+    <div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
+        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+            <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+            Back to Directory
+        </button>
+
+        <div class="max-w-3xl mx-auto">
+            <div class="mb-8">
+                <h1 class="text-3xl font-bold tracking-tight text-slate-900">@(_currentView == ViewMode.Create ? "Add New Member" : "Edit Member Details")</h1>
+                <p class="mt-2 text-slate-500">@(_currentView == ViewMode.Create ? "Register a new member to the library system." : $"Update details for {_editUser?.FullName}.")</p>
+            </div>
+
+            <div class="card p-6 sm:p-8">
+                @if (_currentView == ViewMode.Create)
+                {
+                    <EditForm Model="@_createRequest" OnValidSubmit="HandleCreate" class="space-y-6">
+                        <DataAnnotationsValidator />
+                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                            <div class="sm:col-span-2">
+                                <label class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_createRequest.FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="John Doe" />
+                                    <ValidationMessage For="@(() => _createRequest.FullName)" class="mt-1 text-xs text-rose-500" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Email Address <span class="text-rose-500">*</span></label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_createRequest.Email" type="email" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="you@domain.com" />
+                                    <ValidationMessage For="@(() => _createRequest.Email)" class="mt-1 text-xs text-rose-500" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Password <span class="text-rose-500">*</span></label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_createRequest.Password" type="password" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <ValidationMessage For="@(() => _createRequest.Password)" class="mt-1 text-xs text-rose-500" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Phone Number</label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_createRequest.PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="+123456789" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Student ID</label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_createRequest.StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Optional" />
+                                </div>
+                            </div>
+                            <div class="sm:col-span-2">
+                                <label class="block text-sm font-medium text-slate-700">Address</label>
+                                <div class="mt-1">
+                                    <InputTextArea @bind-Value="_createRequest.Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Full address details" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                            <button type="button" @onclick="BackToList" class="btn-secondary">Cancel</button>
+                            <button type="submit" class="btn-primary">Create Member</button>
+                        </div>
+                    </EditForm>
+                }
+                else if (_currentView == ViewMode.Edit)
+                {
+                    <EditForm Model="@_updateRequest" OnValidSubmit="HandleUpdate" class="space-y-6">
+                        <DataAnnotationsValidator />
+                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                            <div class="sm:col-span-2">
+                                <label class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_updateRequest.FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <ValidationMessage For="@(() => _updateRequest.FullName)" class="mt-1 text-xs text-rose-500" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Phone Number</label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_updateRequest.PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700">Student ID</label>
+                                <div class="mt-1">
+                                    <InputText @bind-Value="_updateRequest.StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                </div>
+                            </div>
+                            <div class="sm:col-span-2">
+                                <label class="block text-sm font-medium text-slate-700">Address</label>
+                                <div class="mt-1">
+                                    <InputTextArea @bind-Value="_updateRequest.Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                            <button type="button" @onclick="BackToList" class="btn-secondary">Cancel</button>
+                            <button type="submit" class="btn-primary">Update Member</button>
+                        </div>
+                    </EditForm>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    private enum ViewMode { List, Details, Create, Edit }
+    private ViewMode _currentView = ViewMode.List;
+    
+    private IEnumerable<UserDto>? _allUsers;
+    private PagedResult<UserDto>? _pagedResult;
+    private bool _isLoading = true;
+    private const int PageSize = 10;
+    
+    private MemberDetailsViewModel? _selectedUser;
+    private UserCreateRequest _createRequest = new();
+    private UserUpdateRequest _updateRequest = new();
+    private UserDto? _editUser;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadUsers();
+    }
+
+    private async Task LoadUsers()
+    {
+        _isLoading = true;
+        try
+        {
+            _allUsers = await ApiClient.GetUsersAsync();
+            ApplyPagination(1);
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error loading users: " + ex.Message, "error");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private void ApplyPagination(int page)
+    {
+        if (_allUsers == null) return;
+        
+        var totalCount = _allUsers.Count();
+        var totalPages = (int)Math.Ceiling(totalCount / (double)PageSize);
+        page = Math.Max(1, Math.Min(page, Math.Max(1, totalPages)));
+
+        _pagedResult = new PagedResult<UserDto>
+        {
+            Items = _allUsers.Skip((page - 1) * PageSize).Take(PageSize),
+            CurrentPage = page,
+            TotalPages = totalPages,
+            TotalCount = totalCount,
+            PageSize = PageSize
+        };
+    }
+
+    private void ChangePage(int page)
+    {
+        ApplyPagination(page);
+    }
+
+    private async Task ShowDetails(Guid userId)
+    {
+        _isLoading = true;
+        try
+        {
+            var user = await ApiClient.GetUserAsync(userId);
+            if (user == null) return;
+
+            var memberships = await ApiClient.GetMembershipsAsync();
+            var subscription = await ApiClient.GetUserSubscriptionAsync(userId);
+
+            _selectedUser = new MemberDetailsViewModel
+            {
+                User = user,
+                AvailableMemberships = memberships.ToList(),
+                CurrentSubscription = subscription
+            };
+            _currentView = ViewMode.Details;
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error loading member details: " + ex.Message, "error");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private void ShowCreate()
+    {
+        _createRequest = new();
+        _currentView = ViewMode.Create;
+    }
+
+    private async Task ShowEdit(Guid userId)
+    {
+        _isLoading = true;
+        try
+        {
+            _editUser = _allUsers?.FirstOrDefault(u => u.Id == userId);
+            if (_editUser == null)
+            {
+                _editUser = await ApiClient.GetUserAsync(userId);
+            }
+            
+            if (_editUser != null)
+            {
+                _updateRequest = new UserUpdateRequest
+                {
+                    FullName = _editUser.FullName,
+                    PhoneNumber = _editUser.PhoneNumber,
+                    StudentId = _editUser.StudentId,
+                    Address = _editUser.Address
+                };
+                _currentView = ViewMode.Edit;
+            }
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private void BackToList()
+    {
+        _currentView = ViewMode.List;
+        _selectedUser = null;
+        _editUser = null;
+    }
+
+    private async Task HandleCreate()
+    {
+        try
+        {
+            var result = await ApiClient.CreateUserAsync(_createRequest);
+            if (result != null)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Member created successfully!", "success");
+                await LoadUsers();
+                BackToList();
+            }
+            else
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Failed to create member.", "error");
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error: " + ex.Message, "error");
+        }
+    }
+
+    private async Task HandleUpdate()
+    {
+        if (_editUser == null) return;
+        try
+        {
+            var result = await ApiClient.UpdateUserAsync(_editUser.Id, _updateRequest);
+            if (result != null)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Member updated successfully!", "success");
+                await LoadUsers();
+                BackToList();
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error: " + ex.Message, "error");
+        }
+    }
+
+    private async Task DeleteUser()
+    {
+        if (_selectedUser == null) return;
+        bool confirmed = await JSRuntime.InvokeAsync<bool>("confirm", "Are you sure you want to completely remove this member? This action cannot be undone.");
+        if (!confirmed) return;
+
+        try
+        {
+            var success = await ApiClient.DeleteUserAsync(_selectedUser.User.Id);
+            if (success)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Member removed.", "success");
+                await LoadUsers();
+                BackToList();
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error: " + ex.Message, "error");
+        }
+    }
+
+    private async Task UpdateRole()
+    {
+        if (_selectedUser == null) return;
+        var newRole = _selectedUser.User.Role == "Admin" ? "Member" : "Admin";
+        try
+        {
+            var success = await ApiClient.UpdateUserRoleAsync(_selectedUser.User.Id, newRole);
+            if (success)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", $"Role updated to {newRole}.", "success");
+                await ShowDetails(_selectedUser.User.Id); // Refresh details
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error: " + ex.Message, "error");
+        }
+    }
+
+    private async Task AssignSubscription(int membershipId, string planName)
+    {
+        if (_selectedUser == null) return;
+        bool confirmed = await JSRuntime.InvokeAsync<bool>("confirm", $"Assign {planName} plan to this member?");
+        if (!confirmed) return;
+
+        try
+        {
+            var request = new AdminSubscribeRequest { UserId = _selectedUser.User.Id, MembershipId = membershipId };
+            var result = await ApiClient.AdminSubscribeAsync(request);
+            if (result != null)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Subscription assigned successfully.", "success");
+                await ShowDetails(_selectedUser.User.Id); // Refresh details
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error: " + ex.Message, "error");
+        }
+    }
+}
 
-<div class="card p-6">
-    <p class="text-slate-600">Members list will be displayed here.</p>
-</div>

BlazorFrontend/Components/Pages/Membership.razor

@@ -1,12 +1,320 @@
 @page "/Membership"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using BlazorFrontend.Models
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JSRuntime
+@inject NavigationManager Navigation
 
 <PageTitle>My Membership</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">My Membership</h1>
-    <p class="text-sm text-slate-500 mt-1">Manage your library membership details.</p>
-</div>
+@if (_isLoading)
+{
+    <div class="flex items-center justify-center min-h-[400px]">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+    </div>
+}
+else if (_viewModel != null)
+{
+    var hasActiveSub = _viewModel.CurrentSubscription != null && _viewModel.CurrentSubscription.IsActive;
+
+    <div class="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
+        <!-- Header with Loyalty Summary -->
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
+            <div>
+                <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">Membership</h1>
+                <p class="text-slate-500 mt-1">Manage your subscription and library benefits</p>
+            </div>
+            
+            @if (_viewModel.LoyaltyAccount != null)
+            {
+                <div class="flex items-center gap-4 bg-slate-50 px-6 py-4 rounded-xl border border-slate-200/60">
+                    <div class="bg-amber-100 p-2.5 rounded-lg text-amber-600">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Available Points</div>
+                        <div class="text-2xl font-black text-slate-900 leading-none">@_viewModel.LoyaltyAccount.CurrentBalance.ToString("N0")</div>
+                    </div>
+                </div>
+            }
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Current Subscription Card -->
+            <div class="lg:col-span-2 space-y-8">
+                <section>
+                    <h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-400"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
+                        Active Plan
+                    </h2>
+                    
+                    @if (hasActiveSub && _viewModel.CurrentSubscription != null)
+                    {
+                        <div class="relative overflow-hidden bg-slate-900 rounded-3xl p-8 text-white group shadow-xl">
+                            <!-- Decorative element -->
+                            <div class="absolute -right-20 -top-20 w-64 h-64 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-500"></div>
+                            
+                            <div class="relative z-10">
+                                <div class="flex justify-between items-start mb-10">
+                                    <div>
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-500/20 text-green-400 border border-green-500/30 mb-3 uppercase tracking-wider">Active Status</span>
+                                        <h3 class="text-4xl font-black tracking-tight">@_viewModel.CurrentSubscription.MembershipType</h3>
+                                    </div>
+                                    <div class="h-14 w-14 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-md">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                                    </div>
+                                </div>
+                                
+                                <div class="grid grid-cols-2 gap-8 py-8 border-t border-white/10">
+                                    <div>
+                                        <div class="text-slate-400 text-sm font-medium mb-1">Start Date</div>
+                                        <div class="text-lg font-bold">@_viewModel.CurrentSubscription.StartDate.ToString("MMM dd, yyyy")</div>
+                                    </div>
+                                    <div>
+                                        <div class="text-slate-400 text-sm font-medium mb-1">Expiry Date</div>
+                                        <div class="text-lg font-bold">@_viewModel.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
+                                    </div>
+                                </div>
+                                
+                                <div class="pt-6 flex items-center gap-2 text-slate-400 text-sm italic">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                                    Pro-tip: Maintain your subscription to earn loyalty points every month!
+                                </div>
+                            </div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
+                            <div class="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                            </div>
+                            <h3 class="text-xl font-bold text-slate-900">No Active Subscription</h3>
+                            <p class="text-slate-500 mt-2 mb-8 max-w-xs mx-auto">Get a membership to borrow books and unlock premium library features.</p>
+                            <a href="Membership#plans" class="btn-primary px-8 py-3 rounded-xl shadow-lg shadow-slate-900/10">Browse Plans</a>
+                        </div>
+                    }
+                </section>
+
+                <!-- Queued Memberships -->
+                @if (_viewModel.QueuedMemberships.Any())
+                {
+                    <section>
+                        <h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500"><path d="M10 10 2.5 2.5"/><path d="M21.5 2.5 14 10"/><path d="m21.5 21.5-7.5-7.5"/><path d="M10 14 2.5 21.5"/><circle cx="12" cy="12" r="3"/></svg>
+                            Queued Memberships (@_viewModel.QueuedMemberships.Count)
+                        </h2>
+                        <div class="space-y-3">
+                            @foreach (var queued in _viewModel.QueuedMemberships)
+                            {
+                                <div class="flex items-center justify-between bg-amber-50 border border-amber-100 p-5 rounded-2xl shadow-sm">
+                                    <div class="flex items-center gap-4">
+                                        <div class="h-12 w-12 bg-white rounded-xl flex items-center justify-center text-amber-600 shadow-sm border border-amber-100">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-bold text-slate-900">@queued.MembershipType Membership</div>
+                                            <div class="text-sm text-slate-500">
+                                                Activates on @queued.StartDate.ToString("MMM dd, yyyy") &bull; Expires @queued.ExpiryDate.ToString("MMM dd, yyyy")
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="text-right">
+                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700 border border-amber-200 uppercase tracking-wider">Queued</span>
+                                        <div class="text-xs text-slate-400 mt-1">Will activate automatically</div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </section>
+                }
+            </div>
+
+            <!-- Right Side Panel: Benefits -->
+            <div class="space-y-8">
+                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
+                    <h3 class="text-lg font-bold text-slate-900 mb-6">Your Benefits</h3>
+                    <ul class="space-y-6">
+                        @{
+                            var currentPlan = _viewModel.AvailableMemberships.FirstOrDefault(m => hasActiveSub && _viewModel.CurrentSubscription != null && m.Type == _viewModel.CurrentSubscription.MembershipType);
+                        }
+                        <li class="flex gap-4">
+                            <div class="shrink-0 h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.MaxBooks ?? 1))</div>
+                            <div>
+                                <div class="font-bold text-slate-900">Max Books</div>
+                                <div class="text-sm text-slate-500">Number of books you can borrow simultaneously.</div>
+                            </div>
+                        </li>
+                        <li class="flex gap-4">
+                            <div class="shrink-0 h-10 w-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.BorrowingDays ?? 14))</div>
+                            <div>
+                                <div class="font-bold text-slate-900">Borrowing Days</div>
+                                <div class="text-sm text-slate-500">Duration you can keep each borrowed book.</div>
+                            </div>
+                        </li>
+                        <li class="flex gap-4">
+                            <div class="shrink-0 h-10 w-10 bg-violet-50 text-violet-600 rounded-xl flex items-center justify-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                            </div>
+                            <div>
+                                <div class="font-bold text-slate-900">Digital Access</div>
+                                <div class="text-sm text-slate-500">Browse and search the full library catalog online.</div>
+                            </div>
+                        </li>
+                    </ul>
+                    
+                    <div class="mt-10 p-5 bg-slate-900 rounded-2xl text-white text-center">
+                        <p class="text-sm font-medium mb-3">Want more books?</p>
+                        <a href="Membership#plans" class="text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors">Upgrade Plan &rarr;</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Explore All Plans Section -->
+        <section id="plans" class="pt-10">
+            <div class="text-center mb-10">
+                <h2 class="text-3xl font-black text-slate-900">Explore Membership Plans</h2>
+                <p class="text-slate-500 mt-2">Find the perfect library experience for your reading habits</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                @foreach (var plan in _viewModel.AvailableMemberships)
+                {
+                    var isCurrent = hasActiveSub && _viewModel.CurrentSubscription != null && plan.Type == _viewModel.CurrentSubscription.MembershipType;
+                    
+                    <div class="group relative bg-white border @(isCurrent ? "border-slate-900 ring-2 ring-slate-900 ring-offset-2" : "border-slate-200") rounded-3xl p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
+                        @if (isCurrent)
+                        {
+                            <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">Current Plan</div>
+                        }
+
+                        <div class="mb-8">
+                            <h3 class="text-sm font-black text-slate-400 uppercase tracking-widest mb-2">@plan.Type</h3>
+                            <div class="flex items-baseline">
+                                <span class="text-3xl font-black text-slate-900">@plan.Price.ToString("N0")</span>
+                                <span class="text-slate-500 font-bold ml-1 text-sm uppercase">MMK</span>
+                            </div>
+                            <div class="text-slate-400 text-xs font-bold mt-1">/ @(plan.DurationMonths == 1 ? "Month" : $"{plan.DurationMonths} Months")</div>
+                        </div>
+
+                        <ul class="space-y-4 mb-10">
+                            <li class="flex items-center gap-3 text-sm">
+                                <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                                </div>
+                                <span class="text-slate-600 font-bold">@plan.MaxBooks Books limit</span>
+                            </li>
+                            <li class="flex items-center gap-3 text-sm">
+                                <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                                </div>
+                                <span class="text-slate-600 font-bold">@plan.BorrowingDays Days keep</span>
+                            </li>
+                            @if (!string.IsNullOrEmpty(plan.RewardId) && _viewModel.RewardPointCosts.TryGetValue(plan.RewardId, out var pointCost))
+                            {
+                                <li class="flex items-center gap-3 text-sm text-amber-600 font-black">
+                                    <div class="h-5 w-5 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/></svg>
+                                    </div>
+                                    <span>@pointCost.ToString("N0") Points</span>
+                                </li>
+                            }
+                        </ul>
+
+                        @if (isCurrent)
+                        {
+                            <button disabled class="w-full py-4 rounded-2xl bg-slate-100 text-slate-400 font-bold text-sm cursor-not-allowed">Active Now</button>
+                        }
+                        else
+                        {
+                            <div class="space-y-3">
+                                <a href="Borrowings" class="block w-full py-4 rounded-2xl bg-white border-2 border-slate-900 text-slate-900 text-center font-bold text-sm transition-all duration-200 hover:bg-slate-900 hover:text-white">Pay Cash</a>
+                                
+                                @if (!string.IsNullOrEmpty(plan.RewardId) && _viewModel.RewardPointCosts.ContainsKey(plan.RewardId))
+                                {
+                                    <button @onclick="() => RedeemMembership(plan.RewardId, plan.Type, _viewModel.RewardPointCosts[plan.RewardId])" 
+                                            class="w-full py-4 rounded-2xl bg-amber-400 text-slate-900 font-black text-sm hover:bg-amber-500 transition-all shadow-lg shadow-amber-400/20">
+                                        Redeem with Points
+                                    </button>
+                                }
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+        </section>
+    </div>
+}
+
+@code {
+    private MembershipViewModel? _viewModel;
+    private bool _isLoading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            var allSubscriptions = await ApiClient.GetMyAllSubscriptionsAsync();
+            var memberships = await ApiClient.GetMembershipsAsync();
+            var loyaltyAccount = await ApiClient.GetMyLoyaltyAccountAsync();
+            var activeRewards = await ApiClient.GetActiveRewardsAsync();
+
+            var now = DateTime.UtcNow;
+
+            var currentSubscription = allSubscriptions
+                .Where(s => s.StartDate <= now && s.ExpiryDate > now)
+                .OrderByDescending(s => s.StartDate)
+                .FirstOrDefault();
+
+            var queuedMemberships = allSubscriptions
+                .Where(s => s.StartDate > now)
+                .OrderBy(s => s.StartDate)
+                .ToList();
+
+            _viewModel = new MembershipViewModel
+            {
+                CurrentSubscription = currentSubscription,
+                AvailableMemberships = memberships.ToList(),
+                QueuedMemberships = queuedMemberships,
+                LoyaltyAccount = loyaltyAccount,
+                RewardPointCosts = activeRewards.ToDictionary(r => r.Id, r => r.PointCost)
+            };
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "Error loading membership data: " + ex.Message, "error");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private async Task RedeemMembership(string rewardId, string planName, double cost)
+    {
+        bool confirmed = await JSRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to redeem {planName} for {cost:N0} points?");
+        if (!confirmed) return;
+
+        try
+        {
+            var (success, message) = await ApiClient.ClaimRewardAsync(rewardId, "Redeemed via Library Membership Page");
+            
+            if (success)
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", message, "success");
+                await OnInitializedAsync(); // Refresh data
+            }
+            else
+            {
+                await JSRuntime.InvokeVoidAsync("showToast", "Error: " + message, "error");
+            }
+        }
+        catch (Exception ex)
+        {
+            await JSRuntime.InvokeVoidAsync("showToast", "An unexpected error occurred: " + ex.Message, "error");
+        }
+    }
+}
 
-<div class="card p-6">
-    <p class="text-slate-600">Membership details will be displayed here.</p>
-</div>

BlazorFrontend/Components/Pages/Rewards.razor

@@ -1,12 +1,295 @@
 @page "/Rewards"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
 
-<PageTitle>Rewards</PageTitle>
+<PageTitle>My Rewards</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Rewards</h1>
-    <p class="text-sm text-slate-500 mt-1">View your earned rewards and points.</p>
+<div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-6 animate-in fade-in slide-in-from-top-4 duration-500">
+    <div>
+        <h1 class="text-3xl font-extrabold tracking-tight text-slate-900">Loyalty Rewards</h1>
+        <p class="text-slate-500 mt-1">Earn points, redeem rewards, and track your loyalty journey.</p>
+    </div>
+    @if (_account != null)
+    {
+        <div class="flex items-center gap-4">
+            <div class="text-center bg-amber-50 border border-amber-200 px-6 py-3 rounded-2xl shadow-sm">
+                <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest">Balance</p>
+                <p class="text-2xl font-black text-slate-900">@_account.CurrentBalance.ToString("N0")</p>
+                <p class="text-xs text-amber-600 font-semibold">Points</p>
+            </div>
+            <div class="text-center bg-slate-50 border border-slate-200 px-6 py-3 rounded-2xl shadow-sm">
+                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Tier</p>
+                <p class="text-lg font-black text-slate-900">@_account.Tier</p>
+            </div>
+        </div>
+    }
 </div>
 
-<div class="card p-6">
-    <p class="text-slate-600">Rewards details will be displayed here.</p>
+<div class="mb-6 border-b border-slate-200">
+    <nav class="-mb-px flex gap-6">
+        <button @onclick='() => _activeTab = "redeem"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "redeem" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7m16 0H4m16 0l-2.586-2.586a2 2 0 00-2.828 0L12 12m0 0L9.414 9.414a2 2 0 00-2.828 0L4 12m8 0V5" />
+                </svg>
+                Available Rewards
+            </span>
+        </button>
+        <button @onclick='() => _activeTab = "pending"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Pending
+            </span>
+            @if (_pendingRedemptions.Any())
+            {
+                <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black rounded-full bg-amber-400 text-slate-900">@_pendingRedemptions.Count()</span>
+            }
+        </button>
+        <button @onclick='() => _activeTab = "history"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6m4 6V7m4 10v-3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                Points History
+            </span>
+        </button>
+    </nav>
 </div>
+
+@if (_isLoading)
+{
+    <div class="py-20 flex justify-center">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+    </div>
+}
+else
+{
+    @if (_activeTab == "redeem")
+    {
+        <div class="animate-in fade-in duration-300">
+            @if (!_availableRewards.Any())
+            {
+                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+                    <p class="text-slate-400 font-medium">No active rewards available. Check back soon!</p>
+                </div>
+            }
+            else
+            {
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    @foreach (var reward in _availableRewards)
+                    {
+                        var canAfford = _account != null && _account.CurrentBalance >= reward.PointCost;
+                        <div class="group relative bg-white border border-slate-200 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
+                            <div class="h-1.5 @(canAfford ? "bg-gradient-to-r from-amber-400 to-orange-400" : "bg-slate-200")"></div>
+                            <div class="p-6">
+                                <div class="flex justify-between items-start mb-4">
+                                    <div class="p-3 @(canAfford ? "bg-amber-50 text-amber-600" : "bg-slate-100 text-slate-400") rounded-xl">
+                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
+                                    </div>
+                                    <div class="text-right">
+                                        <span class="text-2xl font-black text-slate-900">@reward.PointCost.ToString("N0")</span>
+                                        <span class="text-[10px] block font-bold text-slate-400 uppercase">pts required</span>
+                                    </div>
+                                </div>
+                                <h3 class="text-base font-bold text-slate-900 mb-1 truncate">@reward.Name</h3>
+                                <p class="text-sm text-slate-500 mb-5 line-clamp-2 h-10">@reward.Description</p>
+                                <div class="flex items-center justify-between pt-4 border-t border-slate-100">
+                                    <span class="text-xs font-semibold text-slate-500">@reward.StockQuantity in stock</span>
+                                    @if (canAfford)
+                                    {
+                                        <button @onclick="() => RedeemAsync(reward)"
+                                                class="bg-slate-900 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-amber-500 transition-all active:scale-95">
+                                            Redeem
+                                        </button>
+                                    }
+                                    else
+                                    {
+                                        <span class="text-xs font-bold text-slate-400 bg-slate-100 px-3 py-2 rounded-xl">Need more pts</span>
+                                    }
+                                </div>
+                            </div>
+                            @if (reward.StockQuantity < 10)
+                            {
+                                <span class="absolute top-3 right-3 animate-pulse bg-rose-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Limited</span>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+            <div class="mt-8 p-7 bg-slate-900 rounded-3xl text-white flex flex-col md:flex-row items-center justify-between gap-5">
+                <div>
+                    <h2 class="text-lg font-bold mb-1">How to earn more points?</h2>
+                    <p class="text-slate-400 text-sm">Borrow books, subscribe, and return on time to earn points!</p>
+                </div>
+                <a href="Books" class="bg-amber-400 text-slate-900 px-6 py-3 rounded-2xl font-black hover:bg-amber-300 transition-all text-sm whitespace-nowrap">Browse Books →</a>
+            </div>
+        </div>
+    }
+    else if (_activeTab == "pending")
+    {
+        <div class="animate-in fade-in duration-300">
+            @if (!_pendingRedemptions.Any())
+            {
+                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+                    <p class="text-slate-400 font-medium">No pending redemptions — you're all clear!</p>
+                </div>
+            }
+            else
+            {
+                <div class="space-y-3">
+                    @foreach (var r in _pendingRedemptions)
+                    {
+                        <div class="flex items-center justify-between bg-white border border-amber-100 rounded-2xl px-6 py-4 shadow-sm">
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center text-amber-500 flex-shrink-0">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
+                                </div>
+                                <div>
+                                    <p class="font-bold text-slate-900 text-sm">@r.RewardName</p>
+                                    <p class="text-xs text-slate-400">Claimed @r.RedeemedAt.ToString("MMM dd, yyyy") · @r.PointCost.ToString("N0") pts</p>
+                                </div>
+                            </div>
+                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
+                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+                                Awaiting Fulfillment
+                            </span>
+                        </div>
+                    }
+                </div>
+            }
+        </div>
+    }
+    else if (_activeTab == "history")
+    {
+        <div class="animate-in fade-in duration-300">
+            @if (!_pointsHistory.Any())
+            {
+                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+                    <p class="text-slate-400 font-medium">No points history yet. Start borrowing books to earn points!</p>
+                </div>
+            }
+            else
+            {
+                <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+                    <table class="min-w-full divide-y divide-slate-100">
+                        <thead class="bg-slate-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Date</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Type</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Details</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Spent on</th>
+                                <th class="px-6 py-3 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">Points</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-50">
+                            @foreach (var h in _pointsHistory.OrderByDescending(x => x.CreatedAt))
+                            {
+                                var isPos = h.PointDelta >= 0;
+                                var label = PrettyEvent(h.EventKey, h.PointDelta);
+                                string? spentOn = h.RewardName;
+                                
+                                <tr class="hover:bg-slate-50 transition-colors">
+                                    <td class="px-6 py-3 text-sm text-slate-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                    <td class="px-6 py-3">
+                                        <span class="px-2.5 py-0.5 rounded-full text-xs font-bold @(isPos ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700")">@label</span>
+                                    </td>
+                                    <td class="px-6 py-3 text-sm text-slate-600 max-w-xs truncate">@h.Description</td>
+                                    <td class="px-6 py-3 text-sm text-slate-600 max-w-xs truncate">
+                                        @if (!string.IsNullOrWhiteSpace(spentOn))
+                                        {
+                                            <span class="font-semibold text-slate-700">@spentOn</span>
+                                        }
+                                        else
+                                        {
+                                            <span class="text-slate-400">—</span>
+                                        }
+                                    </td>
+                                    <td class="px-6 py-3 text-right font-black text-base @(isPos ? "text-emerald-600" : "text-rose-600")">
+                                        @(isPos ? "+" : "")@h.PointDelta.ToString("N0")
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </div>
+            }
+        </div>
+    }
+}
+
+@code {
+    private string _activeTab = "redeem";
+    private bool _isLoading = true;
+    private LoyaltyAccountDto? _account;
+    private IEnumerable<LoyaltyRewardDto> _availableRewards = Enumerable.Empty<LoyaltyRewardDto>();
+    private IEnumerable<LoyaltyRedemptionDto> _pendingRedemptions = Enumerable.Empty<LoyaltyRedemptionDto>();
+    private IEnumerable<PointHistoryEntryDto> _pointsHistory = Enumerable.Empty<PointHistoryEntryDto>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _account = await ApiClient.GetMyLoyaltyAccountAsync();
+            _availableRewards = await ApiClient.GetActiveRewardsAsync();
+            _pendingRedemptions = await ApiClient.GetMyPendingRedemptionsAsync();
+            
+            if (_account != null)
+            {
+                _pointsHistory = await ApiClient.GetPointsHistoryAsync(_account.AccountId);
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading rewards: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private async Task RedeemAsync(LoyaltyRewardDto reward)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Redeem \"{reward.Name}\" for {reward.PointCost:N0} points?");
+        if (!confirmed) return;
+
+        var result = await ApiClient.ClaimRewardAsync(reward.Id);
+        if (result.Success)
+        {
+            await JS.InvokeVoidAsync("showToast", result.Message, "success");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", result.Message, "error");
+        }
+    }
+
+    private string PrettyEvent(string? eventKey, double points)
+    {
+        var key = (eventKey ?? string.Empty).Trim().ToUpperInvariant();
+
+        return key switch
+        {
+            "RETURN" or "BOOK_RETURN" or "BORROW_RETURN" => "RETURN",
+            "SIGNUP" or "REGISTER" => "SIGNUP",
+            "SUBSCRIBE" or "SUBSCRIPTION" or "MEMBERSHIP" => "SUBSCRIBE",
+            "REDEEM" or "REDEMPTION" or "CLAIM_REWARD" => "REDEEM",
+            _ => points < 0 ? "SPENT" : (string.IsNullOrEmpty(key) ? "EARNED" : key)
+        };
+    }
+}
+

BlazorFrontend/Components/Pages/RewardsManage.razor

@@ -1,12 +1,314 @@
 @page "/Rewards/Manage"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using Microsoft.AspNetCore.Authorization
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@attribute [Authorize(Roles = "Librarian")]
 
-<PageTitle>Manage Rewards</PageTitle>
+<PageTitle>Rewards Management</PageTitle>
 
-<div class="mb-6">
-    <h1 class="text-2xl font-bold text-slate-900">Manage Rewards</h1>
-    <p class="text-sm text-slate-500 mt-1">Librarian view to manage all rewards.</p>
+<div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
+    <div>
+        <h1 class="text-3xl font-extrabold tracking-tight text-slate-900">Rewards Management</h1>
+        <p class="text-slate-500 mt-1">Fulfill pending redemptions and review all members' loyalty activity.</p>
+    </div>
+    <div class="flex items-center gap-4">
+        <div class="bg-amber-50 border border-amber-200 px-5 py-2.5 rounded-xl text-center shadow-sm">
+            <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest">Pending</p>
+            <p class="text-2xl font-black text-slate-900">@_pendingRedemptions.Count()</p>
+        </div>
+        <div class="bg-slate-50 border border-slate-200 px-5 py-2.5 rounded-xl text-center shadow-sm">
+            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Members w/ History</p>
+            <p class="text-2xl font-black text-slate-900">@_allMembersHistory.Count()</p>
+        </div>
+    </div>
 </div>
 
-<div class="card p-6">
-    <p class="text-slate-600">Rewards management will be displayed here.</p>
+<div class="mb-6 border-b border-slate-200">
+    <nav class="-mb-px flex gap-6">
+        <button @onclick='() => _activeTab = "pending"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Pending Redemptions
+            </span>
+            @if (_pendingRedemptions.Any())
+            {
+                <span class="ml-1 inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-black rounded-full bg-rose-500 text-white">@_pendingRedemptions.Count()</span>
+            }
+        </button>
+        <button @onclick='() => _activeTab = "history"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6m4 6V7m4 10v-3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                All Members' Points History
+            </span>
+        </button>
+    </nav>
 </div>
+
+@if (_isLoading)
+{
+    <div class="py-20 flex justify-center">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+    </div>
+}
+else
+{
+    @if (_activeTab == "pending")
+    {
+        <div class="animate-in fade-in duration-300">
+            @if (!_pendingRedemptions.Any())
+            {
+                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+                    <svg class="w-16 h-16 mx-auto opacity-20 text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    <p class="text-slate-500 font-medium">No pending redemptions. All caught up!</p>
+                </div>
+            }
+            else
+            {
+                <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+                    <table class="min-w-full divide-y divide-slate-100">
+                        <thead class="bg-slate-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Member</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Reward</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Points</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Claimed</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Status</th>
+                                <th class="px-6 py-3 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-100">
+                            @foreach (var r in _pendingRedemptions.OrderBy(x => x.RedeemedAt))
+                            {
+                                <tr class="hover:bg-amber-50/40 transition-colors">
+                                    <td class="px-6 py-4">
+                                        <div class="flex items-center gap-3">
+                                            <div class="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+                                                @(r.ExternalUserId.Length >= 2 ? r.ExternalUserId.Substring(0, 2).ToUpper() : "U")
+                                            </div>
+                                            <span class="text-sm font-medium text-slate-700 font-mono text-xs">@r.ExternalUserId</span>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <p class="text-sm font-bold text-slate-900">@r.RewardName</p>
+                                        <p class="text-xs text-slate-400">ID: @(r.Id.Length > 8 ? r.Id[..8] : r.Id)...</p>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm font-bold text-slate-700">@r.PointCost.ToString("N0") pts</td>
+                                    <td class="px-6 py-4 text-sm text-slate-500 whitespace-nowrap">@r.RedeemedAt.ToString("MMM dd, yyyy")</td>
+                                    <td class="px-6 py-4">
+                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
+                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+                                            Pending
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4 text-right">
+                                        <button @onclick="() => FulfillAsync(r)"
+                                                class="inline-flex items-center gap-1.5 bg-emerald-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-emerald-700 transition-all active:scale-95">
+                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
+                                            Fulfill
+                                        </button>
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </div>
+            }
+        </div>
+    }
+    else if (_activeTab == "history")
+    {
+        <div class="animate-in fade-in duration-300">
+            @if (!_allMembersHistory.Any())
+            {
+                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+                    <p class="text-slate-400 font-medium">No loyalty history found for any members yet.</p>
+                </div>
+            }
+            else
+            {
+                <!-- Search bar -->
+                <div class="mb-4">
+                    <input type="text" placeholder="Filter by member name or email..."
+                           class="w-full max-w-sm px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 bg-white"
+                           @bind="_searchQuery" @bind:event="oninput" />
+                </div>
+
+                <div class="space-y-4">
+                    @foreach (var member in FilteredMembers)
+                    {
+                        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+                            <!-- Member header -->
+                            <div class="flex items-center justify-between px-6 py-4 bg-slate-50 border-b border-slate-100 cursor-pointer"
+                                 @onclick="() => ToggleMember(member.AccountId)">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
+                                        @(member.UserName.Length >= 2 ? member.UserName.Substring(0, 2).ToUpper() : "?")
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-slate-900 text-sm">@member.UserName</p>
+                                        <p class="text-xs text-slate-400">@member.UserEmail</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center gap-6">
+                                    <div class="text-right">
+                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Balance</p>
+                                        <p class="font-black text-slate-900">@member.CurrentBalance.ToString("N0") pts</p>
+                                    </div>
+                                    <div class="text-right">
+                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Tier</p>
+                                        <span class="text-xs font-bold px-2 py-0.5 rounded-full bg-slate-200 text-slate-700">@member.Tier</span>
+                                    </div>
+                                    <div class="text-right">
+                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Transactions</p>
+                                        <p class="font-black text-slate-900">@member.History.Count()</p>
+                                    </div>
+                                    <svg class="w-4 h-4 text-slate-400 transition-transform @(_expandedMembers.Contains(member.AccountId) ? "rotate-180" : "")" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                                </div>
+                            </div>
+                            
+                            <!-- Collapsible history table -->
+                            @if (_expandedMembers.Contains(member.AccountId))
+                            {
+                                <div class="overflow-x-auto animate-in slide-in-from-top-2 duration-300">
+                                    @if (!member.History.Any())
+                                    {
+                                        <p class="px-6 py-4 text-sm text-slate-400 italic">No transactions found for this member.</p>
+                                    }
+                                    else
+                                    {
+                                        <table class="min-w-full divide-y divide-slate-50">
+                                            <thead>
+                                                <tr class="bg-slate-50/50">
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Date</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Type</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Details</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Spent on</th>
+                                                    <th class="px-6 py-2 text-right text-[10px] font-bold text-slate-400 uppercase tracking-wider">Points</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="divide-y divide-slate-50">
+                                                @foreach (var h in member.History.OrderByDescending(x => x.CreatedAt))
+                                                {
+                                                    var isPos = h.PointDelta >= 0;
+                                                    var label = PrettyEvent(h.EventKey, h.PointDelta);
+                                                    string? spentOn = h.RewardName;
+                                                    
+                                                    <tr class="hover:bg-slate-50 transition-colors">
+                                                        <td class="px-6 py-2.5 text-xs text-slate-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                                        <td class="px-6 py-2.5">
+                                                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold @(isPos ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700")">@label</span>
+                                                        </td>
+                                                        <td class="px-6 py-2.5 text-xs text-slate-600 max-w-xs truncate">@h.Description</td>
+                                                        <td class="px-6 py-2.5 text-xs text-slate-600 max-w-xs truncate">
+                                                            @if (!string.IsNullOrWhiteSpace(spentOn))
+                                                            {
+                                                                <span class="font-semibold text-slate-700">@spentOn</span>
+                                                            }
+                                                            else
+                                                            {
+                                                                <span class="text-slate-400">—</span>
+                                                            }
+                                                        </td>
+                                                        <td class="px-6 py-2.5 text-right font-black text-sm @(isPos ? "text-emerald-600" : "text-rose-600")">
+                                                            @(isPos ? "+" : "")@h.PointDelta.ToString("N0")
+                                                        </td>
+                                                    </tr>
+                                                }
+                                            </tbody>
+                                        </table>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+        </div>
+    }
+}
+
+@code {
+    private string _activeTab = "pending";
+    private bool _isLoading = true;
+    private string _searchQuery = "";
+    private IEnumerable<LoyaltyRedemptionDto> _pendingRedemptions = Enumerable.Empty<LoyaltyRedemptionDto>();
+    private IEnumerable<UserPointsHistoryDto> _allMembersHistory = Enumerable.Empty<UserPointsHistoryDto>();
+    private HashSet<string> _expandedMembers = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _pendingRedemptions = await ApiClient.GetPendingRedemptionsAsync();
+            _allMembersHistory = await ApiClient.GetAllMembersPointsHistoryAsync();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading management data: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private IEnumerable<UserPointsHistoryDto> FilteredMembers => 
+        string.IsNullOrWhiteSpace(_searchQuery) 
+            ? _allMembersHistory 
+            : _allMembersHistory.Where(m => m.UserName.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
+                                            m.UserEmail.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase));
+
+    private void ToggleMember(string accountId)
+    {
+        if (_expandedMembers.Contains(accountId))
+            _expandedMembers.Remove(accountId);
+        else
+            _expandedMembers.Add(accountId);
+    }
+
+    private async Task FulfillAsync(LoyaltyRedemptionDto redemption)
+    {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", "Fulfill this redemption and grant membership to the member?");
+        if (!confirmed) return;
+
+        var result = await ApiClient.FulfillRedemptionAsync(redemption.Id);
+        if (result.Success)
+        {
+            await JS.InvokeVoidAsync("showToast", result.Message, "success");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("showToast", result.Message, "error");
+        }
+    }
+
+    private string PrettyEvent(string? eventKey, double points)
+    {
+        var key = (eventKey ?? string.Empty).Trim().ToUpperInvariant();
+
+        return key switch
+        {
+            "RETURN" or "BOOK_RETURN" or "BORROW_RETURN" => "RETURN",
+            "SIGNUP" or "REGISTER" => "SIGNUP",
+            "SUBSCRIBE" or "SUBSCRIPTION" or "MEMBERSHIP" => "SUBSCRIBE",
+            "REDEEM" or "REDEMPTION" or "CLAIM_REWARD" => "REDEEM",
+            _ => points < 0 ? "SPENT" : (string.IsNullOrEmpty(key) ? "EARNED" : key)
+        };
+    }
+}
+

BlazorFrontend/Models/Dtos/LibraryDtos.cs

@@ -41,6 +41,7 @@ namespace BlazorFrontend.Models.Dtos
         public int AvailableCopies { get; set; }
         public DateTime CreatedAt { get; set; }
         public DateTime? UpdatedAt { get; set; }
+        public string? CoverUrl { get; set; }
         public List<BookCategoryDto> Categories { get; set; } = new();
     }
 
@@ -57,6 +58,7 @@ namespace BlazorFrontend.Models.Dtos
         public string Author { get; set; } = string.Empty;
         public string? Description { get; set; }
         public int TotalCopies { get; set; }
+        public string? CoverUrl { get; set; }
         public List<int>? CategoryIds { get; set; }
     }
 
@@ -66,6 +68,7 @@ namespace BlazorFrontend.Models.Dtos
         public string Author { get; set; } = string.Empty;
         public string? Description { get; set; }
         public int TotalCopies { get; set; }
+        public string? CoverUrl { get; set; }
         public List<int>? CategoryIds { get; set; }
     }
 

BlazorFrontend/Providers/JwtAuthenticationStateProvider.cs

@@ -27,7 +27,16 @@ public class JwtAuthenticationStateProvider : AuthenticationStateProvider
             var handler = new JwtSecurityTokenHandler();
             var jwt = handler.ReadJwtToken(Token);
 
-            var identity = new ClaimsIdentity(jwt.Claims, "jwt");
+            // JwtSecurityTokenHandler maps standard ClaimTypes to short names (unique_name, role) in the JWT payload.
+            // When reading back raw claims, we need to specify which claim types to use for the Identity properties.
+            var identity = new ClaimsIdentity(jwt.Claims, "jwt", "unique_name", "role");
+            
+            // If unique_name is not present, fallback to "name" or default ClaimTypes.Name
+            if (identity.Name == null)
+            {
+                identity = new ClaimsIdentity(jwt.Claims, "jwt", "name", "role");
+            }
+
             var user = new ClaimsPrincipal(identity);
 
             return Task.FromResult(new AuthenticationState(user));

Frontend/Models/Dtos/LibraryDtos.cs

@@ -41,6 +41,7 @@ namespace Frontend.Models.Dtos
         public int AvailableCopies { get; set; }
         public DateTime CreatedAt { get; set; }
         public DateTime? UpdatedAt { get; set; }
+        public string? CoverUrl { get; set; }
         public List<BookCategoryDto> Categories { get; set; } = new();
     }
 

scratch/check_jwt.cs

@@ -0,0 +1,34 @@
+using System;
+using System.IdentityModel.Tokens.Jwt;
+using System.Security.Claims;
+using System.Collections.Generic;
+using System.Linq;
+
+var handler = new JwtSecurityTokenHandler();
+var claims = new List<Claim>
+{
+    new Claim(ClaimTypes.Name, "John Doe"),
+    new Claim(ClaimTypes.Role, "Admin")
+};
+
+var tokenDescriptor = new Microsoft.IdentityModel.Tokens.SecurityTokenDescriptor
+{
+    Subject = new ClaimsIdentity(claims)
+};
+
+var token = handler.CreateToken(tokenDescriptor);
+var tokenString = handler.WriteToken(token);
+
+Console.WriteLine("Token JSON payload:");
+var jwt = handler.ReadJwtToken(tokenString);
+foreach (var claim in jwt.Claims)
+{
+    Console.WriteLine($"{claim.Type}: {claim.Value}");
+}
+
+var identity = new ClaimsIdentity(jwt.Claims, "jwt");
+Console.WriteLine($"Identity Name: {identity.Name ?? "NULL"}");
+Console.WriteLine($"Identity NameClaimType: {identity.NameClaimType}");
+
+var identity2 = new ClaimsIdentity(jwt.Claims, "jwt", "unique_name", "role");
+Console.WriteLine($"Identity2 Name: {identity2.Name ?? "NULL"}");