add: authorized pages, firebase

Backend/Features/Notification/NotificationService.cs

@@ -32,16 +32,16 @@ public class NotificationService : INotificationService
             Data = data
         };
 
-        try
-        {
-            string response = await FirebaseMessaging.DefaultInstance.SendAsync(message);
-            return !string.IsNullOrEmpty(response);
+       try
+
+      {string response = await FirebaseMessaging.DefaultInstance.SendAsync(message);
+        return !string.IsNullOrEmpty(response);
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error sending FCM message: {ex.Message}");
-            return false;
-        }
+           Console.WriteLine($"Error sending FCM message: {ex.Message}");
+           return false;
+       }
     }
 
     public async Task<bool> SendAndSaveNotificationAsync(Guid userId, string? token, string title, string body, string type = "Info", string? actionLink = null, string? actionText = null)

Backend/Program.cs

@@ -20,10 +20,10 @@ using Google.Apis.Auth.OAuth2;
 var builder = WebApplication.CreateBuilder(args);
 
 // Firebase Admin SDK Initialization
-//FirebaseApp.Create(new AppOptions()
-//{
-//    Credential = GoogleCredential.FromFile("LibraryFirebase.json")
-//});
+FirebaseApp.Create(new AppOptions()
+{
+    Credential = GoogleCredential.FromFile("LibraryFirebase.json")
+});
 
 builder.Services.AddCors(options =>
 {

BlazorWebAssembly/Layout/MainLayout.razor

@@ -3,6 +3,8 @@
 @using Microsoft.AspNetCore.Components.Authorization
 @inject ThemeService ThemeService
 @inject AuthenticationStateProvider AuthStateProvider
+@inject IJSRuntime JS
+@inject LibraryApiClient ApiClient
 
 <AuthorizeView>
     <Authorized>
@@ -54,7 +56,7 @@
                     </div>
                 </header>
                 <main class="flex-1 overflow-y-auto p-8 scrollbar-hide">
-                    <div class="max-w-6xl mx-auto">
+                    <div class="max-w-7xl mx-auto w-full">
                         @Body
                     </div>
                 </main>
@@ -74,7 +76,8 @@
                     </a>
                     <div class="hidden md:flex items-center gap-8">
                         <NavLink href="/" Match="NavLinkMatch.All" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Home</NavLink>
-                        <NavLink href="/books" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Books</NavLink>
+                        <NavLink href="/membership" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Membership</NavLink>
+                        <NavLink href="/features" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Features</NavLink>
                         <NavLink href="/about" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">About Us</NavLink>
                         <NavLink href="/contact" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Contact</NavLink>
                     </div>
@@ -91,21 +94,57 @@
             <main class="flex-grow">
                 @Body
             </main>
-            <footer class="py-12 border-t border-border bg-card">
-                <div class="max-w-6xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-8">
-                    <div class="flex items-center gap-3 opacity-50 grayscale">
-                        <div class="bg-main rounded-lg p-1.5 text-bg-body">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+            <footer class="py-20 border-t border-border bg-card">
+                <div class="max-w-7xl mx-auto px-8">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+                        <div class="col-span-1 md:col-span-2">
+                            <div class="flex items-center gap-3 mb-6">
+                                <div class="bg-primary rounded-xl p-2 text-white">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                                </div>
+                                <span class="text-xl font-black tracking-tighter uppercase">LibraryLuxe</span>
+                            </div>
+                            <p class="text-muted text-sm max-w-sm leading-relaxed mb-8">
+                                Redefining the modern library experience with digital-first solutions and community-driven rewards.
+                            </p>
+                            <div class="flex gap-4">
+                                <!-- Social Icons Placeholder -->
+                                <div class="w-10 h-10 rounded-xl bg-body border border-border flex items-center justify-center text-muted hover:text-primary transition-colors cursor-pointer">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
+                                </div>
+                                <div class="w-10 h-10 rounded-xl bg-body border border-border flex items-center justify-center text-muted hover:text-primary transition-colors cursor-pointer">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-xs font-black uppercase tracking-[0.2em] text-main mb-6">Navigation</h4>
+                            <ul class="space-y-4">
+                                <li><a href="/" class="text-sm text-muted hover:text-primary transition-colors">Home</a></li>
+                                <li><a href="/membership" class="text-sm text-muted hover:text-primary transition-colors">Membership</a></li>
+                                <li><a href="/features" class="text-sm text-muted hover:text-primary transition-colors">Features</a></li>
+                                <li><a href="/faq" class="text-sm text-muted hover:text-primary transition-colors">FAQ</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-xs font-black uppercase tracking-[0.2em] text-main mb-6">Legal</h4>
+                            <ul class="space-y-4">
+                                <li><a href="/privacy" class="text-sm text-muted hover:text-primary transition-colors">Privacy Policy</a></li>
+                                <li><a href="/terms" class="text-sm text-muted hover:text-primary transition-colors">Terms of Service</a></li>
+                                <li><a href="/contact" class="text-sm text-muted hover:text-primary transition-colors">Contact Support</a></li>
+                            </ul>
                         </div>
-                        <span class="text-sm font-black tracking-tighter uppercase">LibraryLuxe</span>
                     </div>
-                    <p class="text-[10px] font-bold text-muted uppercase tracking-[0.2em]">&copy; 2026 LibraryLuxe Ecosystem. All rights reserved.</p>
-                    <div class="flex gap-6">
-                        <a href="#" class="text-[10px] font-black uppercase tracking-widest text-muted hover:text-primary">Privacy</a>
-                        <a href="#" class="text-[10px] font-black uppercase tracking-widest text-muted hover:text-primary">Terms</a>
+                    <div class="pt-8 border-t border-border flex flex-col md:row justify-between items-center gap-4">
+                        <p class="text-[10px] font-bold text-muted uppercase tracking-[0.2em]">&copy; 2026 LibraryLuxe Ecosystem. Built with passion for readers.</p>
+                        <div class="flex items-center gap-2">
+                            <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                            <span class="text-[10px] font-black uppercase tracking-widest text-muted">System Operational</span>
+                        </div>
                     </div>
                 </div>
             </footer>
+
         </div>
     </NotAuthorized>
 </AuthorizeView>
@@ -115,4 +154,29 @@
     {
         await ThemeService.InitializeAsync();
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            var user = authState.User;
+
+            if (user.Identity?.IsAuthenticated == true)
+            {
+                try
+                {
+                    var token = await JS.InvokeAsync<string>("getFcmToken");
+                    if (!string.IsNullOrEmpty(token))
+                    {
+                        await ApiClient.UpdateFcmTokenAsync(token);
+                    }
+                }
+                catch (Exception ex)
+                {
+                    Console.WriteLine($"FCM Token Error: {ex.Message}");
+                }
+            }
+        }
+    }
 }

BlazorWebAssembly/Layout/NavMenu.razor

@@ -37,6 +37,14 @@
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
             Members
         </NavLink>
+        <NavLink class="nav-link-v" href="/borrowings/manage">
+            <svg class="w-5 h-5 mr-3" 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>
+            Manage Borrowings
+        </NavLink>
+        <NavLink class="nav-link-v" href="/rewards/manage">
+            <svg class="w-5 h-5 mr-3" 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>
+            Manage Rewards
+        </NavLink>
     </AuthorizeView>
 </nav>
 

BlazorWebAssembly/Models/MemberDetailsViewModel.cs

@@ -0,0 +1,12 @@
+using LibraryManagement.Shared.Models;
+using System.Collections.Generic;
+
+namespace BlazorWebAssembly.Models
+{
+    public class MemberDetailsViewModel
+    {
+        public UserDto User { get; set; } = new();
+        public SubscriptionDto? CurrentSubscription { get; set; }
+        public List<MembershipDto> AvailableMemberships { get; set; } = new();
+    }
+}

BlazorWebAssembly/Models/PagedResult.cs

@@ -0,0 +1,13 @@
+namespace BlazorWebAssembly.Models
+{
+    public class PagedResult<T>
+    {
+        public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();
+        public int TotalCount { get; set; }
+        public int PageSize { get; set; }
+        public int CurrentPage { get; set; }
+        public int TotalPages { get; set; }
+        public bool HasPreviousPage => CurrentPage > 1;
+        public bool HasNextPage => CurrentPage < TotalPages;
+    }
+}

BlazorWebAssembly/Pages/About.razor

@@ -1,24 +1,101 @@
 @page "/about"
 
-<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
-    <div class="text-center mb-16">
-        <h1 class="text-6xl font-black tracking-tighter text-main mb-6 uppercase">Our Story</h1>
-        <p class="text-xl text-muted leading-relaxed">Redefining the relationship between readers and literature through technology and community.</p>
+<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
+    <!-- Hero / Story -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
+        <div>
+            <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Our Origin</h2>
+            <h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">A Library <br /> <span class="text-primary italic">Without Borders.</span></h1>
+            <p class="text-xl text-muted leading-relaxed mb-10">
+                Founded in 2024, LibraryLuxe was born from a simple idea: that books should be accessible, organized, and rewarding. We've built a system that doesn't just manage inventory, but fosters a culture of reading.
+            </p>
+            <div class="bg-card p-8 rounded-3xl border border-border border-l-4 border-l-primary shadow-sm">
+                <p class="italic text-main font-medium text-lg leading-relaxed">
+                    "Reading is the ultimate superpower. We just provide the cape. Our mission is to bridge the gap between classic literature and modern convenience."
+                </p>
+                <div class="mt-4 flex items-center gap-3">
+                    <div class="w-8 h-8 rounded-full bg-primary/20"></div>
+                    <span class="text-xs font-bold uppercase tracking-widest text-muted">Founding Vision</span>
+                </div>
+            </div>
+        </div>
+        <div class="relative">
+            <div class="bg-card aspect-square rounded-[4rem] border border-border shadow-2xl flex items-center justify-center p-12 relative z-10 overflow-hidden">
+                 <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-emerald-500/10"></div>
+                 <svg class="w-48 h-48 text-primary opacity-20 relative z-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
+        </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
-        <div class="space-y-8">
-            <h2 class="text-3xl font-black text-main tracking-tight">A Library without Borders.</h2>
-            <p class="text-muted leading-relaxed">Founded in 2024, LibraryLuxe was born from a simple idea: that books should be accessible, organized, and rewarding. We've built a system that doesn't just manage inventory, but fosters a culture of reading.</p>
-            <div class="flex gap-4">
-                <div class="w-px h-12 bg-primary"></div>
-                <p class="italic text-main font-medium">"Reading is the ultimate superpower. We just provide the cape."</p>
+    <!-- How it Works -->
+    <section>
+        <div class="text-center mb-20">
+            <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">The Process</h2>
+            <h3 class="text-5xl font-black text-main tracking-tight">How LibraryLuxe Works</h3>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
+            <div class="hidden md:block absolute top-1/2 left-0 w-full h-px bg-border -z-10"></div>
+            <!-- Step 1 -->
+            <div class="bg-body p-8 relative">
+                <div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">1</div>
+                <h4 class="text-xl font-bold text-main mb-4 uppercase">Create Account</h4>
+                <p class="text-muted text-sm leading-relaxed">Sign up in seconds and choose a membership plan that fits your reading habits.</p>
+            </div>
+            <!-- Step 2 -->
+            <div class="bg-body p-8 relative">
+                <div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">2</div>
+                <h4 class="text-xl font-bold text-main mb-4 uppercase">Borrow & Read</h4>
+                <p class="text-muted text-sm leading-relaxed">Browse thousands of titles and borrow them instantly. Physical books or digital access, your choice.</p>
+            </div>
+            <!-- Step 3 -->
+            <div class="bg-body p-8 relative">
+                <div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">3</div>
+                <h4 class="text-xl font-bold text-main mb-4 uppercase">Earn Rewards</h4>
+                <p class="text-muted text-sm leading-relaxed">Return books on time to earn loyalty points. Use points to upgrade your membership or unlock perks.</p>
             </div>
         </div>
-        <div class="bg-card aspect-square rounded-[3rem] border border-border shadow-2xl flex items-center justify-center p-12">
-            <div class="w-full h-full rounded-2xl bg-primary/5 border border-primary/20 flex items-center justify-center">
-                <svg class="w-24 h-24 text-primary opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
+    </section>
+
+    <!-- Why Choose Us -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div class="bg-card p-12 rounded-[3rem] border border-border">
+            <h4 class="text-2xl font-black text-main mb-8 uppercase tracking-tight">Why Choose Us?</h4>
+            <div class="space-y-6">
+                <div class="flex gap-4">
+                    <div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
+                        <svg class="w-4 h-4" 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>
+                    </div>
+                    <div>
+                        <h5 class="font-bold text-main">Eco-Friendly Reading</h5>
+                        <p class="text-sm text-muted">Our digital-first approach reduces paper waste and logistics footprint.</p>
+                    </div>
+                </div>
+                <div class="flex gap-4">
+                    <div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
+                        <svg class="w-4 h-4" 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>
+                    </div>
+                    <div>
+                        <h5 class="font-bold text-main">Community Driven</h5>
+                        <p class="text-sm text-muted">Join reading clubs and community events hosted right in our ecosystem.</p>
+                    </div>
+                </div>
+                <div class="flex gap-4">
+                    <div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
+                        <svg class="w-4 h-4" 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>
+                    </div>
+                    <div>
+                        <h5 class="font-bold text-main">Smart Notifications</h5>
+                        <p class="text-sm text-muted">Advanced Firebase integration keeps you informed about your library activity.</p>
+                    </div>
+                </div>
             </div>
         </div>
+        <div class="bg-primary p-12 rounded-[3rem] text-white flex flex-col justify-center">
+            <h4 class="text-4xl font-black tracking-tighter mb-6 uppercase">Join the <br/> Revolution.</h4>
+            <p class="text-white/80 mb-8 leading-relaxed font-medium">We're not just a library; we're a community of life-long learners. Be part of our growing family today.</p>
+            <a href="/register" class="bg-white text-primary px-8 py-4 rounded-2xl font-black text-center hover:bg-white/90 transition-all uppercase tracking-widest text-sm">Join LibraryLuxe</a>
+        </div>
     </div>
 </div>
+

BlazorWebAssembly/Pages/Books.razor

@@ -1,143 +1,698 @@
 @page "/books"
 @using LibraryManagement.Shared.Models
 @using BlazorWebAssembly.Services
+@using Microsoft.AspNetCore.Authorization
 @inject LibraryApiClient ApiClient
+@inject WishlistService WishlistService
+@inject IJSRuntime JS
 @inject NavigationManager Navigation
 
-<div class="max-w-7xl mx-auto py-10 px-6">
-    <!-- Header -->
-    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
-        <div>
-            <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Book Collection</h1>
-            <p class="text-muted text-lg">Discover your next favorite story among our curated selection.</p>
-        </div>
-        <div class="relative w-full md:w-96">
-            <input type="text" @bind="_searchQuery" @bind:event="oninput" 
-                   placeholder="Search by title, author..." 
-                   class="w-full bg-card border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm" />
+<div class="max-w-7xl mx-auto py-10 px-6 animate-fade">
+    @if (_viewMode == ViewMode.List)
+    {
+        <!-- Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+            <div>
+                <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Book Collection</h1>
+                <p class="text-muted text-lg">Discover your next favorite story among our curated selection. <span class="text-xs">(@FilteredBooks.Count() total)</span></p>
+            </div>
+            <div class="flex items-center gap-4 w-full md:w-auto">
+                <div class="relative w-full md:w-96">
+                    <input type="text" @bind="_searchQuery" @bind:event="oninput" 
+                           placeholder="Search by title, author, or ISBN..." 
+                           class="w-full bg-card border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm text-main" />
+                </div>
+                <AuthorizeView Roles="Librarian">
+                    <button @onclick="ShowCreate" class="bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-primary-hover whitespace-nowrap">
+                        Add Book
+                    </button>
+                </AuthorizeView>
+            </div>
         </div>
-    </div>
-
-    <!-- Category Filter -->
-    <div class="flex flex-wrap gap-2 mb-10">
-        <button @onclick="() => FilterByCategory(null)" 
-                class='px-4 py-2 rounded-full text-sm font-semibold transition-all @(_selectedCategoryId == null ? "bg-primary text-white" : "bg-card text-muted border border-border hover:border-primary hover:text-primary")'>
-            All Genres
-        </button>
-        @foreach (var cat in _categories)
-        {
-            <button @onclick="() => FilterByCategory(cat.Id)" 
-                    class='px-4 py-2 rounded-full text-sm font-semibold transition-all @(_selectedCategoryId == cat.Id ? "bg-primary text-white" : "bg-card text-muted border border-border hover:border-primary hover:text-primary")'>
-                @cat.Name
+
+        <!-- Quick Filters -->
+        <div class="flex flex-wrap items-center gap-3 mb-6">
+            <button @onclick='() => SetQuickFilter("All")'
+               class='px-5 py-2.5 rounded-full text-sm font-bold border transition-all @(_activeQuickFilter == "All" ? "bg-main text-body border-main shadow-md" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                All Books
+            </button>
+            <button @onclick='() => SetQuickFilter("New Arrivals")'
+               class='px-5 py-2.5 rounded-full text-sm font-bold border transition-all @(_activeQuickFilter == "New Arrivals" ? "bg-main text-body border-main shadow-md" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                 New Arrivals
+            </button>
+            <button @onclick='() => SetQuickFilter("Trending")'
+               class='px-5 py-2.5 rounded-full text-sm font-bold border transition-all @(_activeQuickFilter == "Trending" ? "bg-main text-body border-main shadow-md" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                 Trending
             </button>
+            <button @onclick='() => SetQuickFilter("Recommended")'
+               class='px-5 py-2.5 rounded-full text-sm font-bold border transition-all @(_activeQuickFilter == "Recommended" ? "bg-main text-body border-main shadow-md" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                 Recommended for You
+            </button>
+        </div>
+
+        <!-- Category Filter Dropdown equivalent -->
+        @if (_categories.Any())
+        {
+            <div class="flex flex-wrap gap-2 mb-10">
+                <button @onclick="() => FilterByCategory(null)" 
+                        class='px-4 py-1.5 rounded-full text-[11px] font-bold border transition-all @(_selectedCategoryId == null ? "bg-primary text-white border-primary shadow-sm" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                    All Categories
+                </button>
+                @foreach (var cat in _categories)
+                {
+                    <button @onclick="() => FilterByCategory(cat.Id)" 
+                            class='px-4 py-1.5 rounded-full text-[11px] font-bold border transition-all @(_selectedCategoryId == cat.Id ? "bg-primary text-white border-primary shadow-sm" : "bg-card text-muted border-border hover:border-primary hover:text-primary")'>
+                        @cat.Name
+                    </button>
+                }
+            </div>
         }
-    </div>
 
-    <!-- Loading State -->
-    @if (_isLoading)
-    {
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-            @for (int i = 0; i < 8; i++)
+        <!-- Loading State -->
+        @if (_isLoading)
+        {
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                @for (int i = 0; i < 8; i++)
+                {
+                    <div class="animate-pulse bg-card rounded-xl border border-border h-96"></div>
+                }
+            </div>
+        }
+        else if (!FilteredBooks.Any())
+        {
+            <div class="text-center py-20 bg-card rounded-2xl border border-dashed border-border">
+                <h3 class="text-xl font-bold text-main mb-2">No results found</h3>
+                <p class="text-muted">Try adjusting your search or filters.</p>
+            </div>
+        }
+        else
+        {
+            <!-- Books Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                @foreach (var book in PaginatedBooks)
+                {
+                    <div class="group bg-card rounded-xl border border-border overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full">
+                        <!-- Cover -->
+                        <div class="aspect-[2/3] bg-body relative overflow-hidden cursor-pointer" @onclick="() => ShowDetails(book.Id)">
+                            @if (!string.IsNullOrEmpty(book.CoverUrl))
+                            {
+                                <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                            }
+                            else
+                            {
+                                <div class="w-full h-full flex items-center justify-center text-muted opacity-20">
+                                    <span class="font-bold uppercase tracking-widest text-xs">No Cover</span>
+                                </div>
+                            }
+                            
+                            @if (book.AvailableCopies <= 0)
+                            {
+                                <div class="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center">
+                                    <span class="bg-white text-black px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Out of Stock</span>
+                                </div>
+                            }
+                        </div>
+
+                        <!-- Content -->
+                        <div class="p-5 flex-grow flex flex-col">
+                            <h3 class="font-bold text-main line-clamp-1 mb-1 group-hover:text-primary transition-colors cursor-pointer" @onclick="() => ShowDetails(book.Id)">@book.Title</h3>
+                            <p class="text-xs text-muted mb-3 font-medium">@book.Author</p>
+                            
+                            <div class="flex items-center gap-2 mb-4 flex-wrap">
+                                @foreach (var cat in book.Categories.Take(2))
+                                {
+                                    <span class="text-[9px] font-bold uppercase tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full">@cat.Name</span>
+                                }
+                            </div>
+                            
+                            <div class="mt-auto flex flex-col gap-4">
+                                <div class="flex items-center justify-between">
+                                    <span class="text-[10px] font-bold text-muted bg-body px-2 py-1 rounded border border-border">@book.Status</span>
+                                    <span class="text-xs font-bold @(book.AvailableCopies > 0 ? "text-green-500" : "text-red-400")">
+                                        @book.AvailableCopies / @book.TotalCopies
+                                    </span>
+                                </div>
+
+                                <div class="flex items-center gap-2">
+                                    <button @onclick="() => ShowDetails(book.Id)" class="flex-1 bg-body text-main border border-border py-1.5 rounded-lg text-[11px] font-bold hover:bg-card">Details</button>
+                                    
+                                    <AuthorizeView Roles="Member">
+                                        <div class="flex gap-1">
+                                            <button @onclick="() => ToggleFavourite(book)" 
+                                                    class='p-1.5 rounded-lg border transition-all @(IsFavourite(book.Id) ? "border-red-200 bg-red-500/10 text-red-500" : "border-border text-muted hover:bg-red-500/10 hover:text-red-500")' 
+                                                    title='@(IsFavourite(book.Id) ? "Remove from Favourites" : "Add to Favourites")'>
+                                                <svg class="w-4 h-4" fill='@(IsFavourite(book.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                                    <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001z"></path>
+                                                </svg>
+                                            </button>
+                                            @if (book.AvailableCopies == 0)
+                                            {
+                                                <button @onclick="() => ToggleWishlist(book)" 
+                                                        class='p-1.5 rounded-lg border transition-all @(IsInWishlist(book.Id) ? "border-amber-200 bg-amber-500/10 text-amber-500" : "border-border text-muted hover:bg-amber-500/10 hover:text-amber-500")' 
+                                                        title='@(IsInWishlist(book.Id) ? "Remove from Wishlist" : "Add to Wishlist")'>
+                                                    <svg class="w-4 h-4" fill='@(IsInWishlist(book.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
+                                                    </svg>
+                                                </button>
+                                            }
+                                        </div>
+                                    </AuthorizeView>
+                                    <AuthorizeView Roles="Librarian">
+                                        <button @onclick="() => ShowEdit(book.Id)" class="p-1.5 rounded-lg border border-border hover:bg-body text-muted">
+                                            <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="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>
+                }
+            </div>
+
+            <!-- Pagination -->
+            @if (TotalPages > 1)
             {
-                <div class="animate-pulse bg-card rounded-xl border border-border h-96"></div>
+                <div class="mt-12 flex items-center justify-center gap-2">
+                    <button disabled="@(_currentPage == 1)" @onclick="() => _currentPage--" 
+                            class="p-2 rounded-lg border border-border text-muted hover:bg-body disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                        <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="M15 19l-7-7 7-7"></path></svg>
+                    </button>
+                    
+                    @for (int i = 1; i <= TotalPages; i++)
+                    {
+                        var pageNumber = i;
+                        <button @onclick="() => _currentPage = pageNumber" 
+                                class='w-10 h-10 rounded-lg border text-sm font-bold transition-all @(_currentPage == pageNumber ? "bg-main border-main text-body shadow-md" : "bg-card border-border text-muted hover:border-primary hover:text-primary")'>
+                            @pageNumber
+                        </button>
+                    }
+
+                    <button disabled="@(_currentPage == TotalPages)" @onclick="() => _currentPage++" 
+                            class="p-2 rounded-lg border border-border text-muted hover:bg-body disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                        <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>
+                    </button>
+                </div>
             }
-        </div>
-    }
-    else if (!FilteredBooks.Any())
-    {
-        <div class="text-center py-20 bg-card rounded-2xl border border-dashed border-border">
-            <h3 class="text-xl font-bold text-main mb-2">No results found</h3>
-            <p class="text-muted">Try adjusting your search or filters.</p>
-        </div>
+        }
     }
-    else
+    else if (_viewMode == ViewMode.Details && _selectedBook != null)
     {
-        <!-- Books Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-            @foreach (var book in FilteredBooks)
-            {
-                <div class="group bg-card rounded-xl border border-border overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer" 
-                     @onclick="() => ShowDetails(book.Id)">
-                    <!-- Cover -->
-                    <div class="aspect-[2/3] bg-body relative overflow-hidden">
-                        @if (!string.IsNullOrEmpty(book.CoverUrl))
+        <div class="mb-8 animate-fade">
+            <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-muted hover:text-main 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-3xl bg-body border border-border shadow-sm flex items-center justify-center text-muted overflow-hidden">
+                        @if (!string.IsNullOrWhiteSpace(_selectedBook.CoverUrl))
                         {
-                            <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                            <img src="@_selectedBook.CoverUrl" alt="@_selectedBook.Title" class="w-full h-full object-cover" />
                         }
                         else
                         {
-                            <div class="w-full h-full flex items-center justify-center text-muted opacity-20">
-                                <span class="font-bold uppercase tracking-widest text-xs">No Cover</span>
-                            </div>
-                        }
-                        
-                        @if (book.AvailableCopies <= 0)
-                        {
-                            <div class="absolute inset-0 bg-black/40 backdrop-blur-[2px] flex items-center justify-center">
-                                <span class="bg-white text-black px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Unavailable</span>
-                            </div>
+                            <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>
 
-                    <!-- Content -->
-                    <div class="p-5 flex-grow">
-                        <div class="flex items-center gap-2 mb-2">
-                            @foreach (var cat in book.Categories.Take(2))
-                            {
-                                <span class="text-[10px] font-bold uppercase tracking-wider text-primary opacity-80">@cat.Name</span>
-                            }
+                <div class="lg:col-span-2 space-y-8">
+                    <div>
+                        <span class="inline-flex items-center rounded-full bg-body border border-border px-3 py-1 text-xs font-semibold text-muted mb-4 tracking-wide uppercase">@_selectedBook.Status</span>
+                        <h1 class="text-4xl font-extrabold text-main tracking-tight">@_selectedBook.Title</h1>
+                        <p class="text-xl text-muted mt-2 font-medium">by @_selectedBook.Author</p>
+                    </div>
+
+                    <div class="prose max-w-none">
+                        <h3 class="text-lg font-bold text-main border-b border-border pb-2 mb-4 uppercase tracking-wider text-sm">Description</h3>
+                        <p class="text-muted 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-border py-6">
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-1">ISBN</h4>
+                            <p class="text-sm font-semibold text-main">@_selectedBook.Isbn</p>
                         </div>
-                        <h3 class="font-bold text-main line-clamp-1 mb-1 group-hover:text-primary transition-colors">@book.Title</h3>
-                        <p class="text-xs text-muted mb-4 font-medium">@book.Author</p>
-                        
-                        <div class="mt-auto flex items-center justify-between">
-                            <span class="text-[10px] font-bold text-muted bg-body px-2 py-1 rounded border border-border">@book.Status</span>
-                            <span class="text-xs font-bold @(book.AvailableCopies > 0 ? "text-green-500" : "text-red-400")">
-                                @book.AvailableCopies / @book.TotalCopies
-                            </span>
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-1">Availability</h4>
+                            <p class="text-sm font-semibold @(_selectedBook.AvailableCopies > 0 ? "text-green-500" : "text-red-500")">
+                                @(_selectedBook.AvailableCopies > 0 ? $"{_selectedBook.AvailableCopies} / {_selectedBook.TotalCopies} units in stock" : "Currently occupied")
+                            </p>
                         </div>
                     </div>
+
+                    <div class="flex flex-wrap items-center gap-4 pt-4">
+                        <AuthorizeView Roles="Member">
+                            <div class="flex items-center gap-3">
+                                @if (_selectedBook.AvailableCopies > 0)
+                                {
+                                    <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="bg-primary text-white py-3 px-8 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Borrow This Book</button>
+                                }
+                                else
+                                {
+                                    <div class="flex flex-col gap-2">
+                                        <button disabled class="bg-body border border-border text-muted py-3 px-8 rounded-xl font-bold opacity-50 cursor-not-allowed">Out of Stock</button>
+                                        <button @onclick="() => ToggleWishlist(_selectedBook)" 
+                                                class='text-xs font-bold flex items-center gap-1.5 transition-colors @(IsInWishlist(_selectedBook.Id) ? "text-amber-500 underline" : "text-muted hover:text-amber-500 hover:underline")'>
+                                            <svg class="w-4 h-4" fill='@(IsInWishlist(_selectedBook.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
+                                            </svg>
+                                            @(IsInWishlist(_selectedBook.Id) ? "In Wishlist (Notifying)" : "Add to Wishlist for Notification")
+                                        </button>
+                                    </div>
+                                }
+                                <button @onclick="() => ToggleFavourite(_selectedBook)" 
+                                        class='p-3 rounded-xl border transition-all shadow-sm active:scale-95 @(IsFavourite(_selectedBook.Id) ? "border-red-200 bg-red-500/10 text-red-500" : "border-border text-muted hover:bg-red-500/10 hover:text-red-500")' 
+                                        title='@(IsFavourite(_selectedBook.Id) ? "Remove from Favourites" : "Add to Favourites")'>
+                                    <svg class="w-6 h-6" fill='@(IsFavourite(_selectedBook.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                        <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </AuthorizeView>
+                        
+                        <AuthorizeView Roles="Librarian">
+                            <button @onclick="() => ShowEdit(_selectedBook.Id)" class="bg-body border border-border text-main py-3 px-8 rounded-xl font-bold hover:bg-card">Edit Details</button>
+                            <button @onclick="() => DeleteAsync(_selectedBook.Id)" class="p-3 text-red-500 hover:text-red-600 hover:bg-red-500/10 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>
+                            <NotAuthorized>
+                                <a href="/login" class="bg-primary text-white py-3 px-8 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20">Sign In to Borrow</a>
+                            </NotAuthorized>
+                        </AuthorizeView>
+                    </div>
                 </div>
-            }
+            </div>
+        </div>
+    }
+    else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
+    {
+        <div class="mb-8 animate-fade">
+            <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-muted hover:text-main 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-main">@(_viewMode == ViewMode.Create ? "Add New Book" : "Edit Book")</h1>
+                    <p class="mt-2 text-muted">Fill in the details below to @(_viewMode == ViewMode.Create ? "add a new book to" : "update the") library catalog.</p>
+                </div>
+
+                <div class="bg-card border border-border p-6 sm:p-8 rounded-3xl shadow-sm">
+                    <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-main mb-1">Book Title <span class="text-red-500">*</span></label>
+                                <InputText @bind-Value="_formModel.Title" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" placeholder="e.g. The Great Gatsby" required />
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-main mb-1">Author <span class="text-red-500">*</span></label>
+                                <InputText @bind-Value="_formModel.Author" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" placeholder="e.g. F. Scott Fitzgerald" required />
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-main mb-1">ISBN <span class="text-red-500">*</span></label>
+                                <InputText @bind-Value="_formModel.Isbn" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" placeholder="e.g. 978-0743273565" required />
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-main mb-1">Total Copies <span class="text-red-500">*</span></label>
+                                <InputNumber @bind-Value="_formModel.TotalCopies" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" placeholder="1" required />
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-main mb-1">Cover Image URL</label>
+                                <InputText @bind-Value="_formModel.CoverUrl" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" 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-main mb-1">Description</label>
+                                <InputTextArea @bind-Value="_formModel.Description" rows="4" class="w-full bg-body border border-border rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main" placeholder="Brief summary of the book..."></InputTextArea>
+                            </div>
+
+                            <div class="sm:col-span-2">
+                                <label class="block text-sm font-medium text-main 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-xl border border-border bg-body hover:bg-card cursor-pointer text-sm text-main 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-border text-primary focus:ring-primary" />
+                                            @cat.Name
+                                        </label>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="pt-6 border-t border-border flex justify-end gap-3 mt-8">
+                            <button type="button" @onclick="ShowList" class="bg-body border border-border text-main px-6 py-2.5 rounded-xl font-bold hover:bg-card">Cancel</button>
+                            <button type="submit" class="bg-primary text-white px-6 py-2.5 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20" disabled="@_isSubmitting">
+                                @(_isSubmitting ? "Saving..." : (_viewMode == ViewMode.Create ? "Add Book" : "Update Book"))
+                            </button>
+                        </div>
+                    </EditForm>
+                </div>
+            </div>
         </div>
     }
 </div>
 
 @code {
+    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 List<BookDto> _books = new();
-    private List<CategoryDto> _categories = new();
+    private string _activeQuickFilter = "All";
+    
+    // Pagination
+    private int _currentPage = 1;
+    private int _pageSize = 12;
+
+    private IEnumerable<BookDto> _books = Enumerable.Empty<BookDto>();
+    private IEnumerable<CategoryDto> _categories = Enumerable.Empty<CategoryDto>();
+    private IEnumerable<BorrowingDto> _myBorrowings = Enumerable.Empty<BorrowingDto>();
+    private IEnumerable<BorrowingDto> _allBorrowings = Enumerable.Empty<BorrowingDto>();
+    private BookDto? _selectedBook;
+
+    // Form Model
+    private BookFormModel _formModel = new();
 
     protected override async Task OnInitializedAsync()
     {
-        await LoadData();
+        await LoadDataAsync();
     }
 
-    private async Task LoadData()
+    private async Task LoadDataAsync()
     {
         _isLoading = true;
         try
         {
-            _books = (await ApiClient.GetBooksAsync()).ToList();
-            _categories = (await ApiClient.GetCategoriesAsync()).ToList();
+            _books = await ApiClient.GetBooksAsync();
+            _categories = await ApiClient.GetCategoriesAsync();
+            
+            // Fetch borrowings for Trending and Recommended
+            _myBorrowings = await ApiClient.GetMyBorrowingsAsync();
+            try {
+                _allBorrowings = await ApiClient.GetAllBorrowingsAsync();
+            } catch { }
+            
+            _currentPage = 1;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private IEnumerable<BookDto> FilteredBooks
+    {
+        get
+        {
+            var books = _books;
+
+            // Apply Search
+            if (!string.IsNullOrWhiteSpace(_searchQuery))
+            {
+                books = books.Where(b => b.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
+                                         b.Author.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
+                                         b.Isbn.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase));
+            }
+
+            // Apply Category Filter
+            if (_selectedCategoryId != null)
+            {
+                books = books.Where(b => b.Categories.Any(c => c.Id == _selectedCategoryId));
+            }
+
+            // Apply Quick Filter
+            switch (_activeQuickFilter)
+            {
+                case "New Arrivals":
+                    books = books.Where(b => b.CreatedAt >= DateTime.UtcNow.AddDays(-7));
+                    break;
+                case "Trending":
+                    var trendingIds = _allBorrowings
+                        .Where(br => br.BorrowDate >= DateTime.UtcNow.AddDays(-7))
+                        .GroupBy(br => br.BookId)
+                        .OrderByDescending(g => g.Count())
+                        .Select(g => g.Key)
+                        .Take(12)
+                        .ToList();
+                    
+                    if (trendingIds.Any())
+                        books = books.Where(b => trendingIds.Contains(b.Id));
+                    else
+                        books = Enumerable.Empty<BookDto>(); // Or show nothing if no data
+                    break;
+                case "Recommended":
+                    var myCategoryIds = _myBorrowings.SelectMany(br => _books.FirstOrDefault(b => b.Id == br.BookId)?.Categories.Select(c => c.Id) ?? Enumerable.Empty<int>())
+                        .Concat(_favourites.SelectMany(b => b.Categories.Select(c => c.Id)))
+                        .Concat(_wishlist.SelectMany(b => b.Categories.Select(c => c.Id)))
+                        .Distinct()
+                        .ToList();
+                    
+                    if (myCategoryIds.Any())
+                        books = books.Where(b => b.Categories.Any(c => myCategoryIds.Contains(c.Id))).Take(8);
+                    break;
+            }
+
+            return books;
         }
-        catch { }
-        finally { _isLoading = false; }
     }
 
-    private IEnumerable<BookDto> FilteredBooks => _books
-        .Where(b => (string.IsNullOrEmpty(_searchQuery) || b.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || b.Author.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase))
-                 && (!_selectedCategoryId.HasValue || b.Categories.Any(c => c.Id == _selectedCategoryId)));
+    private IEnumerable<BookDto> PaginatedBooks => FilteredBooks
+        .Skip((_currentPage - 1) * _pageSize)
+        .Take(_pageSize);
+
+    private int TotalPages => (int)Math.Ceiling(FilteredBooks.Count() / (double)_pageSize);
+
+    private void SetQuickFilter(string filter)
+    {
+        _activeQuickFilter = filter;
+        _selectedCategoryId = null; // Clear category when switching quick filters
+        _currentPage = 1;
+    }
 
     private void FilterByCategory(int? id)
     {
         _selectedCategoryId = id;
+        _currentPage = 1;
+    }
+
+    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 List<BookDto> _wishlist = new();
+    private List<BookDto> _favourites = new();
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await LoadCollectionsAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task LoadCollectionsAsync()
+    {
+        _wishlist = await WishlistService.GetWishlistAsync();
+        _favourites = await WishlistService.GetFavouritesAsync();
+    }
+
+    private bool IsFavourite(int id) => _favourites.Any(b => b.Id == id);
+    private bool IsInWishlist(int id) => _wishlist.Any(b => b.Id == id);
+
+    private async Task ToggleFavourite(BookDto book)
+    {
+        if (IsFavourite(book.Id))
+        {
+            await WishlistService.RemoveFromFavouriteAsync(book.Id);
+            await JS.InvokeVoidAsync("alert", $"Removed \"{book.Title}\" from favourites");
+        }
+        else
+        {
+            await WishlistService.AddToFavouritesAsync(book);
+            await JS.InvokeVoidAsync("alert", $"Added \"{book.Title}\" to favourites!");
+        }
+        await LoadCollectionsAsync();
+    }
+
+    private async Task ToggleWishlist(BookDto book)
+    {
+        if (IsInWishlist(book.Id))
+        {
+            await WishlistService.RemoveFromWishlistAsync(book.Id);
+            await JS.InvokeVoidAsync("alert", $"Removed \"{book.Title}\" from wishlist");
+        }
+        else
+        {
+            await WishlistService.AddToWishlistAsync(book);
+            await JS.InvokeVoidAsync("alert", $"Added \"{book.Title}\" to wishlist!");
+        }
+        await LoadCollectionsAsync();
+    }
+
+    private async Task HandleSubmit()
+    {
+        _isSubmitting = true;
+        try
+        {
+            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("alert", "Book added successfully!");
+                    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("alert", "Book updated successfully!");
+                    await LoadDataAsync();
+                    ShowList();
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", $"Error: {ex.Message}");
+        }
+        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("alert", "Book deleted successfully");
+            await LoadDataAsync();
+            ShowList();
+        }
+    }
+
+    private async Task BorrowAsync(int id)
+    {
+        var result = await ApiClient.BorrowBookAsync(new BorrowRequest { BookId = id });
+        if (result != null)
+        {
+            await JS.InvokeVoidAsync("alert", "Book borrowed successfully! Check 'My Loans' for details.");
+            await LoadDataAsync();
+            await ShowDetails(id);
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", "Failed to borrow book. Check your loan limit.");
+        }
     }
 
-    private void ShowDetails(int id)
+    private class BookFormModel
     {
-        // Navigation.NavigateTo($"books/{id}");
+        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();
     }
 }

BlazorWebAssembly/Pages/Borrowings.razor

@@ -3,6 +3,7 @@
 @using BlazorWebAssembly.Services
 @inject LibraryApiClient ApiClient
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
 <div class="max-w-6xl mx-auto py-12 px-6">
     <!-- Header -->
@@ -54,28 +55,51 @@
                         <p class="text-sm text-muted font-medium mb-4 md:mb-0">ID: @loan.BookId</p>
                     </div>
 
-                    <!-- Dates -->
-                    <div class="grid grid-cols-2 gap-8 px-8 border-x border-border hidden lg:grid">
+                    <!-- Dates & Fines -->
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-8 px-8 border-x border-border hidden lg:grid flex-grow">
                         <div>
                             <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Borrowed</p>
                             <p class="text-sm font-bold text-main">@loan.BorrowDate.ToString("MMM dd, yyyy")</p>
                         </div>
                         <div>
                             <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Due Date</p>
-                            <p class="text-sm font-bold @(loan.DueDate < DateTime.UtcNow ? "text-red-500" : "text-main")">
+                            <p class="text-sm font-bold @(loan.DueDate < DateTime.UtcNow && loan.Status == "Borrowed" ? "text-red-500" : "text-main")">
                                 @loan.DueDate.ToString("MMM dd, yyyy")
                             </p>
                         </div>
+                        <div class="hidden md:block">
+                            @if (loan.ReturnDate.HasValue)
+                            {
+                                <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Returned</p>
+                                <p class="text-sm font-bold text-green-500">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</p>
+                            }
+                            else if (loan.FineAmount > 0)
+                            {
+                                <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Fine</p>
+                                <p class="text-sm font-bold @(loan.IsFinePaid ? "text-muted line-through" : "text-red-500")">
+                                    MMK @loan.FineAmount.ToString("N0")
+                                </p>
+                                @if (loan.IsFinePaid)
+                                {
+                                    <span class="text-[10px] text-green-500 font-black uppercase">Paid</span>
+                                }
+                            }
+                            else
+                            {
+                                <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Fine</p>
+                                <p class="text-sm font-bold text-muted">No Fines</p>
+                            }
+                        </div>
                     </div>
 
                     <!-- Status & Action -->
                     <div class="flex flex-col md:items-end gap-3 min-w-[150px]">
                         <span class='px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest text-center @GetStatusColor(loan.Status)'>
-                            @loan.Status
+                            @(loan.Status == "PendingReturn" ? "Pending" : loan.Status)
                         </span>
                         @if (loan.Status == "Borrowed")
                         {
-                            <button @onclick="() => ReturnRequestAsync(loan.Id)" class="text-xs font-bold text-primary hover:underline">
+                            <button @onclick="() => ReturnRequestAsync(loan)" class="text-xs font-bold text-primary hover:underline">
                                 Request Return
                             </button>
                         }
@@ -106,10 +130,21 @@
         finally { _isLoading = false; }
     }
 
-    private async Task ReturnRequestAsync(Guid id)
+    private async Task ReturnRequestAsync(BorrowingDto loan)
     {
-        var success = await ApiClient.RequestReturnAsync(id);
-        if (success) await LoadData();
+        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("alert", "Return request submitted successfully!");
+            await LoadData();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", "Failed to submit return request.");
+        }
     }
 
     private string GetStatusColor(string status) => status switch

BlazorWebAssembly/Pages/BorrowingsManage.razor

@@ -0,0 +1,255 @@
+@page "/borrowings/manage"
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models
+@using Microsoft.AspNetCore.Authorization
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@attribute [Authorize(Roles = "Librarian")]
+
+<div class="max-w-7xl mx-auto py-10 px-6 animate-fade">
+    <div class="flex flex-col md:flex-row md:items-center justify-between mb-10 gap-6">
+        <div>
+            <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Manage Borrowings</h1>
+            <p class="text-muted text-lg font-medium">Monitor and process library loans across all members.</p>
+        </div>
+        <div class="flex gap-3">
+            <div class="bg-card px-6 py-3 flex items-center gap-3 border border-border rounded-xl shadow-sm">
+                <span class="text-xs font-black text-muted uppercase tracking-widest">Total Active:</span>
+                <span class="text-2xl font-black text-primary">@_borrowings.Count(m => m.Status == "Borrowed")</span>
+            </div>
+        </div>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="space-y-4">
+            @for (int i = 0; i < 5; i++)
+            {
+                <div class="animate-pulse bg-card rounded-xl border border-border h-24 w-full"></div>
+            }
+        </div>
+    }
+    else
+    {
+        <div class="bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-collapse min-w-max whitespace-nowrap">
+                    <thead class="bg-body border-b border-border">
+                        <tr>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Book & Loan Info</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Member Details</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Loan Dates</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest text-center">Status</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Fines</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest text-right">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border">
+                        @if (!_borrowings.Any())
+                        {
+                            <tr>
+                                <td colspan="6" class="px-6 py-16 text-center text-muted italic bg-body">
+                                    No borrowing records found in the system.
+                                </td>
+                            </tr>
+                        }
+                        @foreach (var loan in PaginatedBorrowings)
+                        {
+                            <tr class="hover:bg-body transition-colors group">
+                                <td class="px-6 py-5">
+                                    <div class="flex items-center gap-4">
+                                        <div class="w-10 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary border border-primary/20">
+                                            <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-main truncate mb-0.5">@loan.BookTitle</p>
+                                            <p class="text-[10px] font-bold text-muted 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-main">@loan.UserEmail</p>
+                                        <p class="text-[10px] text-muted font-bold tracking-widest uppercase">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-muted font-bold uppercase tracking-widest w-12">Out:</span>
+                                            <span class="font-bold text-main">@loan.BorrowDate.ToString("MMM dd, yyyy")</span>
+                                        </div>
+                                        <div class="flex items-center gap-2 text-[11px]">
+                                            <span class="text-muted font-bold uppercase tracking-widest w-12">Due:</span>
+                                            @{
+                                                var isOverdue = loan.DueDate < DateTime.Now && loan.Status == "Borrowed";
+                                            }
+                                            <span class="font-bold @(isOverdue ? "text-red-500 animate-pulse" : "text-amber-500")">@loan.DueDate.ToString("MMM dd, yyyy")</span>
+                                        </div>
+                                        @if (loan.ReturnDate.HasValue)
+                                        {
+                                            <div class="flex items-center gap-2 text-[11px]">
+                                                <span class="text-muted font-bold uppercase tracking-widest w-12">Back:</span>
+                                                <span class="font-bold text-green-500">@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-black uppercase tracking-widest
+                                        @(loan.Status == "Borrowed" ? "bg-amber-500/10 text-amber-500" : 
+                                          loan.Status == "PendingReturn" ? "bg-blue-500/10 text-blue-500 shadow-sm" :
+                                          "bg-green-500/10 text-green-500")">
+                                        @(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-muted line-through" : "text-red-500")">
+                                                MMK @loan.FineAmount.ToString("N0")
+                                            </span>
+                                            @if (loan.IsFinePaid)
+                                            {
+                                                <span class="text-[9px] text-green-500 font-black uppercase mt-0.5 tracking-tighter">Settled</span>
+                                            }
+                                            else
+                                            {
+                                                <span class="text-[9px] text-red-400 font-black uppercase mt-0.5 tracking-tighter">Pending</span>
+                                            }
+                                        </div>
+                                    }
+                                    else
+                                    {
+                                        <span class="text-[10px] text-muted 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-green-500/10 text-green-500 border border-green-500/20 px-4 py-2 rounded-lg text-xs font-bold hover:bg-green-500 hover:text-white transition-all shadow-sm 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-primary text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-primary-hover transition-all shadow-sm active:scale-95">
+                                            Process Return
+                                        </button>
+                                    }
+                                    else
+                                    {
+                                        <div class="text-green-500 flex justify-end">
+                                            <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.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>
+
+            @if (TotalPages > 1)
+            {
+                <div class="px-6 py-4 border-t border-border flex items-center justify-between bg-body">
+                    <p class="text-xs text-muted">
+                        Showing <span class="font-bold text-main">@((_currentPage - 1) * _pageSize + 1)</span> to 
+                        <span class="font-bold text-main">@(Math.Min(_currentPage * _pageSize, _borrowings.Count()))</span> of 
+                        <span class="font-bold text-main">@_borrowings.Count()</span> records
+                    </p>
+                    <div class="flex items-center gap-2">
+                        <button disabled="@(_currentPage == 1)" @onclick="() => _currentPage--" 
+                                class="p-2 rounded-lg border border-border text-muted hover:bg-card disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                            <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="M15 19l-7-7 7-7"></path></svg>
+                        </button>
+                        
+                        <span class="text-xs font-bold text-main px-2 tracking-tight">Page @_currentPage of @TotalPages</span>
+
+                        <button disabled="@(_currentPage == TotalPages)" @onclick="() => _currentPage++" 
+                                class="p-2 rounded-lg border border-border text-muted hover:bg-card disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                            <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 5l7 7-7 7"></path></svg>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = true;
+    private IEnumerable<BorrowingDto> _borrowings = Enumerable.Empty<BorrowingDto>();
+
+    // Pagination
+    private int _currentPage = 1;
+    private int _pageSize = 10;
+
+    private IEnumerable<BorrowingDto> PaginatedBorrowings => _borrowings
+        .OrderByDescending(l => l.BorrowDate)
+        .Skip((_currentPage - 1) * _pageSize)
+        .Take(_pageSize);
+
+    private int TotalPages => (int)Math.Ceiling(_borrowings.Count() / (double)_pageSize);
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            _borrowings = await ApiClient.GetAllBorrowingsAsync();
+            _currentPage = 1;
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", $"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("alert", "Return approved successfully!");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", "Failed to approve return.");
+        }
+    }
+
+    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("alert", "Book marked as returned!");
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", "Failed to process return.");
+        }
+    }
+}

BlazorWebAssembly/Pages/Contact.razor

@@ -1,49 +1,101 @@
 @page "/contact"
 
-<div class="max-w-6xl mx-auto py-24 px-8 animate-fade">
+<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-24">
         <div>
-            <h1 class="text-6xl font-black tracking-tighter text-main mb-8 uppercase">Get in <br /><span class="text-primary italic">Touch.</span></h1>
-            <p class="text-xl text-muted leading-relaxed mb-12">Have questions about our membership plans or need help with your account? Our librarians are here to help.</p>
+            <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Get in Touch</h2>
+            <h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">Let's <br /><span class="text-primary italic">Connect.</span></h1>
+            <p class="text-xl text-muted leading-relaxed mb-12">Have questions about our membership plans or need help with your account? Our librarians are here to help you 24/7.</p>
             
-            <div class="space-y-8">
-                <div class="flex items-center gap-6">
-                    <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-12">
+                <div class="p-8 bg-card rounded-3xl border border-border hover:border-primary/30 transition-colors">
+                    <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6">
                         <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                     </div>
-                    <div>
-                        <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Email Us</p>
-                        <p class="text-lg font-bold text-main">hello@libraryluxe.com</p>
-                    </div>
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Email Us</p>
+                    <p class="text-sm font-bold text-main">hello@libraryluxe.com</p>
                 </div>
-                <div class="flex items-center gap-6">
-                    <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary">
+                <div class="p-8 bg-card rounded-3xl border border-border hover:border-primary/30 transition-colors">
+                    <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6">
                         <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                     </div>
-                    <div>
-                        <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Visit Us</p>
-                        <p class="text-lg font-bold text-main">123 Literature Lane, Booktown</p>
-                    </div>
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Visit Us</p>
+                    <p class="text-sm font-bold text-main">123 Literature Lane, NY</p>
                 </div>
             </div>
+
+            <div class="bg-primary/5 p-8 rounded-3xl border border-primary/10">
+                <h4 class="text-xs font-black uppercase tracking-widest text-primary mb-4">Response Time</h4>
+                <p class="text-sm text-main font-medium leading-relaxed">We typically respond to all inquiries within 2 business hours. For urgent account issues, please use our internal support ticket system after signing in.</p>
+            </div>
         </div>
 
-        <div class="bg-card p-10 rounded-[3rem] border border-border shadow-2xl">
+        <div class="bg-card p-12 rounded-[3.5rem] border border-border shadow-2xl relative">
+            <div class="absolute top-0 right-0 p-8">
+                <svg class="w-12 h-12 text-primary opacity-10" fill="currentColor" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>
+            </div>
+            <h3 class="text-2xl font-black text-main mb-10 uppercase tracking-tight">Send a Message</h3>
             <form class="space-y-6">
-                <div>
-                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Your Name</label>
-                    <input type="text" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="John Doe" />
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">First Name</label>
+                        <input type="text" class="w-full bg-body border border-border rounded-2xl px-6 py-5 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="John" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Email Address</label>
+                        <input type="email" class="w-full bg-body border border-border rounded-2xl px-6 py-5 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="john@example.com" />
+                    </div>
                 </div>
                 <div>
-                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Email Address</label>
-                    <input type="email" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="name@example.com" />
+                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Subject</label>
+                    <select class="w-full bg-body border border-border rounded-2xl px-6 py-5 focus:ring-2 focus:ring-primary outline-none transition-all appearance-none">
+                        <option>General Inquiry</option>
+                        <option>Membership Issues</option>
+                        <option>Technical Support</option>
+                        <option>Partnership</option>
+                    </select>
                 </div>
                 <div>
-                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Message</label>
-                    <textarea rows="4" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="How can we help?"></textarea>
+                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Your Message</label>
+                    <textarea rows="5" class="w-full bg-body border border-border rounded-2xl px-6 py-5 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="Tell us more about your inquiry..."></textarea>
                 </div>
-                <button type="button" class="w-full py-5 bg-primary text-white rounded-xl font-black uppercase tracking-widest hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Send Message</button>
+                <button type="button" class="w-full py-6 bg-primary text-white rounded-2xl font-black uppercase tracking-widest hover:bg-primary-hover shadow-2xl shadow-primary/30 transition-all transform hover:scale-[1.02] active:scale-95">Dispatch Message</button>
             </form>
         </div>
     </div>
+
+    <!-- FAQ Snippet -->
+    <section>
+        <div class="text-center mb-16">
+            <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Quick Answers</h2>
+            <h3 class="text-5xl font-black text-main tracking-tight">Frequently Asked Questions</h3>
+        </div>
+        <div class="max-w-3xl mx-auto space-y-4">
+            <div class="bg-card border border-border rounded-2xl p-6 hover:border-primary/30 transition-colors cursor-pointer group">
+                <div class="flex items-center justify-between">
+                    <h4 class="font-bold text-main">How do I upgrade my membership?</h4>
+                    <svg class="w-5 h-5 text-muted group-hover:text-primary transition-colors" 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>
+                <p class="mt-4 text-sm text-muted hidden group-hover:block animate-fade">You can upgrade your membership at any time from your account dashboard. The price will be prorated based on your current cycle.</p>
+            </div>
+            <div class="bg-card border border-border rounded-2xl p-6 hover:border-primary/30 transition-colors cursor-pointer group">
+                <div class="flex items-center justify-between">
+                    <h4 class="font-bold text-main">What happens if I return a book late?</h4>
+                    <svg class="w-5 h-5 text-muted group-hover:text-primary transition-colors" 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>
+                <p class="mt-4 text-sm text-muted hidden group-hover:block animate-fade">Late returns may incur a small fee and deduction of loyalty points. We recommend using our renewal feature to avoid penalties.</p>
+            </div>
+            <div class="bg-card border border-border rounded-2xl p-6 hover:border-primary/30 transition-colors cursor-pointer group">
+                <div class="flex items-center justify-between">
+                    <h4 class="font-bold text-main">Can I access digital books offline?</h4>
+                    <svg class="w-5 h-5 text-muted group-hover:text-primary transition-colors" 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>
+                <p class="mt-4 text-sm text-muted hidden group-hover:block animate-fade">Yes, our mobile app supports offline reading for all digital titles borrowed under your plan.</p>
+            </div>
+        </div>
+        <div class="text-center mt-12">
+            <a href="/faq" class="text-xs font-black text-primary uppercase tracking-widest hover:underline">View All FAQs</a>
+        </div>
+    </section>
 </div>
+

BlazorWebAssembly/Pages/FAQ.razor

@@ -0,0 +1,78 @@
+@page "/faq"
+
+<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
+    <div class="text-center mb-20">
+        <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Support Center</h2>
+        <h1 class="text-6xl font-black tracking-tighter text-main mb-8 uppercase">Common Questions</h1>
+        <p class="text-xl text-muted max-w-2xl mx-auto">
+            Everything you need to know about LibraryLuxe, our membership plans, and our community.
+        </p>
+    </div>
+
+    <div class="space-y-6">
+        <!-- Category: General -->
+        <div class="mb-12">
+            <h3 class="text-xs font-black text-muted uppercase tracking-[0.2em] mb-8 border-b border-border pb-4">General Information</h3>
+            <div class="space-y-4">
+                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
+                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
+                        <span class="text-lg font-bold text-main">What is LibraryLuxe?</span>
+                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
+                            <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="M19 9l-7 7-7-7"></path></svg>
+                        </div>
+                    </summary>
+                    <div class="px-8 pb-8 text-muted leading-relaxed">
+                        LibraryLuxe is a next-generation library management ecosystem designed to bridge the gap between physical books and digital convenience. We offer a reward-based reading system, smart notifications, and a global community for book lovers.
+                    </div>
+                </details>
+                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
+                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
+                        <span class="text-lg font-bold text-main">Is there a mobile app?</span>
+                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
+                            <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="M19 9l-7 7-7-7"></path></svg>
+                        </div>
+                    </summary>
+                    <div class="px-8 pb-8 text-muted leading-relaxed">
+                        Yes! Our mobile app is available for both iOS and Android. It features offline reading, instant barcode scanning for borrowing, and real-time alerts.
+                    </div>
+                </details>
+            </div>
+        </div>
+
+        <!-- Category: Membership -->
+        <div class="mb-12">
+            <h3 class="text-xs font-black text-muted uppercase tracking-[0.2em] mb-8 border-b border-border pb-4">Membership & Billing</h3>
+            <div class="space-y-4">
+                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
+                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
+                        <span class="text-lg font-bold text-main">Can I cancel my membership anytime?</span>
+                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
+                            <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="M19 9l-7 7-7-7"></path></svg>
+                        </div>
+                    </summary>
+                    <div class="px-8 pb-8 text-muted leading-relaxed">
+                        Absolutely. We don't believe in locking you down. You can cancel your subscription from your account settings at any time. You'll retain access until the end of your current billing period.
+                    </div>
+                </details>
+                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
+                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
+                        <span class="text-lg font-bold text-main">How do loyalty points work?</span>
+                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
+                            <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="M19 9l-7 7-7-7"></path></svg>
+                        </div>
+                    </summary>
+                    <div class="px-8 pb-8 text-muted leading-relaxed">
+                        You earn points for every book you return on time, every review you write, and every milestone you hit. These points can be used to pay for your membership, enter exclusive giveaways, or buy digital gift cards.
+                    </div>
+                </details>
+            </div>
+        </div>
+    </div>
+
+    <!-- Contact CTA -->
+    <div class="mt-20 p-12 bg-primary/5 rounded-[3rem] border border-primary/10 text-center">
+        <h4 class="text-2xl font-black text-main mb-4 uppercase tracking-tight">Still have questions?</h4>
+        <p class="text-muted mb-8">If you couldn't find what you were looking for, our team is ready to help.</p>
+        <a href="/contact" class="inline-block bg-primary text-white px-10 py-4 rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Contact Support</a>
+    </div>
+</div>

BlazorWebAssembly/Pages/Features.razor

@@ -0,0 +1,87 @@
+@page "/features"
+
+<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
+    <div class="text-center">
+        <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Deep Dive</h2>
+        <h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">Advanced <br /> <span class="text-primary italic">Capabilities.</span></h1>
+        <p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
+            LibraryLuxe is built on a foundation of modern technology to provide you with a seamless and rewarding experience.
+        </p>
+    </div>
+
+    <!-- Feature Block 1: Loyalty -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
+        <div class="order-2 lg:order-1">
+            <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
+                <div class="absolute inset-0 bg-primary opacity-5"></div>
+                <div class="relative z-10 flex flex-col items-center gap-6">
+                    <div class="w-24 h-24 bg-primary rounded-3xl shadow-2xl shadow-primary/30 flex items-center justify-center text-white text-4xl font-black">L</div>
+                    <span class="text-[10px] font-black text-muted uppercase tracking-[0.4em]">Loyalty Dashboard</span>
+                </div>
+            </div>
+        </div>
+        <div class="order-1 lg:order-2">
+            <h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Smart Rewards <br/> Ecosystem</h3>
+            <p class="text-lg text-muted leading-relaxed mb-8">
+                Our proprietary loyalty system rewards positive reading habits. By gamifying the library experience, we've increased on-time returns by 40% and overall community engagement by 60%.
+            </p>
+            <ul class="space-y-4">
+                <li class="flex items-center gap-4">
+                    <div class="w-2 h-2 rounded-full bg-primary"></div>
+                    <span class="font-bold text-main">Point Multipliers for Gold Members</span>
+                </li>
+                <li class="flex items-center gap-4">
+                    <div class="w-2 h-2 rounded-full bg-primary"></div>
+                    <span class="font-bold text-main">Milestone Badges & Achievements</span>
+                </li>
+                <li class="flex items-center gap-4">
+                    <div class="w-2 h-2 rounded-full bg-primary"></div>
+                    <span class="font-bold text-main">Internal Rewards Marketplace</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Feature Block 2: Notifications -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
+        <div>
+            <h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Instant Alerts <br/> via Firebase</h3>
+            <p class="text-lg text-muted leading-relaxed mb-8">
+                Stay connected with real-time push notifications. Whether it's a book you've wishlisted becoming available or a reminder about a due date, we ensure you never miss a beat.
+            </p>
+            <div class="grid grid-cols-2 gap-6">
+                <div class="p-6 bg-card rounded-2xl border border-border">
+                    <h5 class="font-black text-primary text-xs uppercase mb-2">Back in Stock</h5>
+                    <p class="text-xs text-muted">Get alerted when high-demand titles return.</p>
+                </div>
+                <div class="p-6 bg-card rounded-2xl border border-border">
+                    <h5 class="font-black text-primary text-xs uppercase mb-2">Due Soon</h5>
+                    <p class="text-xs text-muted">Gentle reminders 48h before expiry.</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
+            <div class="absolute inset-0 bg-emerald-500 opacity-5"></div>
+            <div class="relative z-10 flex flex-col items-center gap-6">
+                <div class="w-16 h-16 bg-emerald-500 rounded-2xl shadow-xl shadow-emerald-500/20 flex items-center justify-center text-white">
+                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                </div>
+                <span class="text-[10px] font-black text-muted uppercase tracking-[0.4em]">Real-time Infrastructure</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recommendation System -->
+    <section class="bg-card p-20 rounded-[4rem] border border-border text-center">
+        <h3 class="text-4xl font-black text-main mb-8 uppercase tracking-tight italic">Personalized Recommendations</h3>
+        <p class="text-xl text-muted max-w-3xl mx-auto mb-12">
+            Our intelligent algorithms analyze your reading history and preferences to suggest your next favorite book. The more you read, the smarter it gets.
+        </p>
+        <div class="flex flex-wrap justify-center gap-8 opacity-40 grayscale">
+            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
+            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
+            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
+            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
+        </div>
+    </section>
+</div>

BlazorWebAssembly/Pages/Home.razor

@@ -17,133 +17,330 @@
                 <p class="text-lg text-muted">Here is what's happening with your library account today.</p>
             </section>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Loyalty Points -->
-                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
-                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Loyalty Balance</p>
-                    <div class="flex items-baseline gap-2 mb-4">
-                        <h3 class="text-5xl font-black text-main">@(_loyaltyAccount?.CurrentBalance ?? 0)</h3>
-                        <span class="text-xs font-bold text-primary">POINTS</span>
-                    </div>
-                    <div class="w-full bg-body h-1.5 rounded-full overflow-hidden">
-                        <div class="bg-primary h-full" style="width: 45%"></div>
+            <AuthorizeView Roles="Librarian" Context="LibrarianContext">
+                <Authorized>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+                        <div class="bg-card p-6 flex flex-col gap-3 group border border-border rounded-3xl transition-all shadow-sm">
+                            <div class="flex items-center justify-between">
+                                <span class="text-[10px] font-black text-muted uppercase tracking-widest">Total Books</span>
+                            </div>
+                            <div class="text-3xl font-black text-main">@_totalBooks</div>
+                        </div>
+                        <div class="bg-card p-6 flex flex-col gap-3 group border border-border rounded-3xl transition-all shadow-sm">
+                            <div class="flex items-center justify-between">
+                                <span class="text-[10px] font-black text-muted uppercase tracking-widest">Active Loans</span>
+                            </div>
+                            <div class="text-3xl font-black text-main">@_activeLoans</div>
+                        </div>
+                        <div class="bg-card p-6 flex flex-col gap-3 group border border-border rounded-3xl transition-all shadow-sm border-l-4 border-l-red-500">
+                            <div class="flex items-center justify-between">
+                                <span class="text-[10px] font-black text-red-500 uppercase tracking-widest">Overdue</span>
+                            </div>
+                            <div class="text-3xl font-black text-red-600">@_overdueLoans</div>
+                        </div>
+                        <div class="bg-card p-6 flex flex-col gap-3 group border border-border rounded-3xl transition-all shadow-sm">
+                            <div class="flex items-center justify-between">
+                                <span class="text-[10px] font-black text-muted uppercase tracking-widest">Active Members</span>
+                            </div>
+                            <div class="text-3xl font-black text-main">@_totalMembers</div>
+                        </div>
                     </div>
-                </div>
+                </Authorized>
+            </AuthorizeView>
 
-                <!-- Active Loans -->
-                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
-                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Current Loans</p>
-                    <h3 class="text-5xl font-black text-main mb-4">2</h3>
-                    <div class="flex gap-2">
-                        <span class="px-3 py-1 bg-green-500/10 text-green-600 text-[10px] font-black uppercase rounded-lg">Healthy</span>
-                    </div>
-                </div>
+            <AuthorizeView Roles="Member" Context="MemberContext">
+                <Authorized>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <!-- Loyalty Points -->
+                        <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                            <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Loyalty Balance</p>
+                            <div class="flex items-baseline gap-2 mb-4">
+                                <h3 class="text-5xl font-black text-main">@(_loyaltyAccount?.CurrentBalance.ToString("N0") ?? "0")</h3>
+                                <span class="text-xs font-bold text-primary">POINTS</span>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs font-bold text-muted uppercase">Tier: @(_loyaltyAccount?.Tier ?? "Member")</span>
+                            </div>
+                        </div>
 
-                <!-- Subscription -->
-                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
-                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Membership</p>
-                    <h3 class="text-2xl font-black text-main mb-1 uppercase">Premium Gold</h3>
-                    <p class="text-xs text-muted mb-6">Active Status</p>
-                    <a href="/membership" class="text-xs font-black text-primary uppercase tracking-widest hover:underline">Manage Plan</a>
-                </div>
-            </div>
+                        <!-- Active Loans -->
+                        <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                            <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Current Loans</p>
+                            <h3 class="text-5xl font-black text-main mb-4">@_activeLoans</h3>
+                            <div class="flex gap-2">
+                                @if (_overdueLoans > 0)
+                                {
+                                    <span class="px-3 py-1 bg-red-500/10 text-red-600 text-[10px] font-black uppercase rounded-lg">@_overdueLoans Overdue</span>
+                                }
+                                else
+                                {
+                                    <span class="px-3 py-1 bg-green-500/10 text-green-600 text-[10px] font-black uppercase rounded-lg">Healthy</span>
+                                }
+                            </div>
+                        </div>
+
+                        <!-- Subscription -->
+                        <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                            <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Membership</p>
+                            <h3 class="text-2xl font-black text-main mb-1 uppercase">@(_currentSub?.MembershipType ?? "Free")</h3>
+                            <p class="text-xs text-muted mb-6">@( _currentSub != null ? "Active Status" : "No Active Plan" )</p>
+                            <a href="/membership" class="text-xs font-black text-primary uppercase tracking-widest hover:underline">Manage Plan</a>
+                        </div>
+                    </div>
+                </Authorized>
+            </AuthorizeView>
 
             <section>
-                <h2 class="text-xl font-bold mb-6 text-main">Recommended for You</h2>
-                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
-                    @for (int i = 0; i < 5; i++)
-                    {
-                        <div class="bg-card aspect-[2/3] rounded-2xl border border-border overflow-hidden animate-pulse"></div>
-                    }
-                </div>
+                <h2 class="text-xl font-bold mb-6 text-main">Recent Arrivals</h2>
+                @if (_recentBooks.Any())
+                {
+                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+                        @foreach (var book in _recentBooks)
+                        {
+                            <a href="/books" class="group cursor-pointer">
+                                <div class="bg-card aspect-[2/3] rounded-2xl border border-border overflow-hidden relative mb-2 group-hover:border-primary/50 transition-colors">
+                                     <div class="absolute inset-0 flex items-center justify-center text-primary/20 group-hover:text-primary/40 transition-colors">
+                                         <svg class="w-12 h-12" 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>
+                                     </div>
+                                </div>
+                                <h3 class="text-xs font-bold text-main truncate">@book.Title</h3>
+                                <p class="text-[10px] text-muted truncate">@book.Author</p>
+                            </a>
+                        }
+                    </div>
+                }
+                else
+                {
+                    <div class="text-muted text-sm italic">Loading recent arrivals...</div>
+                }
             </section>
         </div>
     </Authorized>
     <NotAuthorized>
         <!-- Guest Landing Page -->
-        <div class="space-y-24 animate-fade py-12">
+        <div class="space-y-32 animate-fade pb-24">
             <!-- Hero Section -->
-            <section class="text-center">
-                <h1 class="text-7xl font-black tracking-tighter text-main mb-8 leading-tight">
-                    Where Every Page <br /> <span class="text-primary italic">Finds a Purpose.</span>
-                </h1>
-                <p class="text-xl text-muted max-w-3xl mx-auto leading-relaxed mb-12">
-                    Join over 5,000 readers in a digital-first library experience. Access a global collection of literature, earn rewards for reading, and connect with fellow book lovers.
-                </p>
-                <div class="flex items-center justify-center gap-6">
-                    <a href="/register" class="bg-primary text-white px-10 py-5 rounded-2xl font-black text-lg hover:bg-primary-hover shadow-xl shadow-primary/20 transition-all transform hover:scale-105 inline-block text-center">
-                        Start Reading Now
-                    </a>
-                    <a href="/books" class="bg-card border border-border text-main px-10 py-5 rounded-2xl font-black text-lg hover:bg-body transition-all inline-block text-center">
-                        Explore Catalog
-                    </a>
+            <section class="relative pt-20 overflow-hidden">
+                <div class="max-w-7xl mx-auto px-8 relative z-10">
+                    <div class="text-center">
+                        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-[10px] font-black uppercase tracking-widest mb-8 animate-bounce">
+                            <span class="relative flex h-2 w-2">
+                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                                <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                            </span>
+                            New: Audiobooks Collection Now Live
+                        </div>
+                        <h1 class="text-8xl font-black tracking-tighter text-main mb-8 leading-[0.9]">
+                            Where Every Page <br /> 
+                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-500 italic">Finds a Purpose.</span>
+                        </h1>
+                        <p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed mb-12">
+                            Join the next generation of readers in a digital-first library experience. Access thousands of titles, earn loyalty rewards, and track your progress seamlessly.
+                        </p>
+                        <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
+                            <a href="/register" class="w-full sm:w-auto bg-primary text-white px-10 py-5 rounded-2xl font-black text-lg hover:bg-primary-hover shadow-2xl shadow-primary/30 transition-all transform hover:scale-105 active:scale-95 inline-block text-center">
+                                Start Reading Now
+                            </a>
+                            <a href="/membership" class="w-full sm:w-auto bg-card border border-border text-main px-10 py-5 rounded-2xl font-black text-lg hover:bg-body transition-all inline-block text-center">
+                                View Memberships
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Background Decorative Elements -->
+                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 pointer-events-none opacity-20">
+                    <div class="absolute top-20 left-1/4 w-96 h-96 bg-primary/30 rounded-full blur-[120px]"></div>
+                    <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/20 rounded-full blur-[120px]"></div>
                 </div>
             </section>
 
-            <!-- Stats Bar -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 border-y border-border py-16">
-                <div class="text-center">
-                    <h3 class="text-5xl font-black text-main mb-2">12,000+</h3>
-                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Verified Books</p>
+            <!-- Stats Grid -->
+            <div class="max-w-7xl mx-auto px-8">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 bg-card border border-border p-12 rounded-[3rem] shadow-xl">
+                    <div class="text-center">
+                        <h3 class="text-5xl font-black text-main mb-2 tracking-tighter">12k+</h3>
+                        <p class="text-muted font-bold uppercase tracking-widest text-[10px]">Verified Books</p>
+                    </div>
+                    <div class="text-center border-l border-border">
+                        <h3 class="text-5xl font-black text-main mb-2 tracking-tighter">5.2k</h3>
+                        <p class="text-muted font-bold uppercase tracking-widest text-[10px]">Active Readers</p>
+                    </div>
+                    <div class="text-center border-l border-border">
+                        <h3 class="text-5xl font-black text-main mb-2 tracking-tighter">98%</h3>
+                        <p class="text-muted font-bold uppercase tracking-widest text-[10px]">Satisfaction</p>
+                    </div>
+                    <div class="text-center border-l border-border">
+                        <h3 class="text-5xl font-black text-main mb-2 tracking-tighter">24/7</h3>
+                        <p class="text-muted font-bold uppercase tracking-widest text-[10px]">Digital Access</p>
+                    </div>
                 </div>
-                <div class="text-center border-x border-border">
-                    <h3 class="text-5xl font-black text-main mb-2">5.2k</h3>
-                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Active Readers</p>
+            </div>
+
+            <!-- Features Section -->
+            <section class="max-w-7xl mx-auto px-8">
+                <div class="text-center mb-20">
+                    <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Core Ecosystem</h2>
+                    <h3 class="text-5xl font-black text-main tracking-tight">Everything you need to <br/> master your reading journey.</h3>
                 </div>
-                <div class="text-center">
-                    <h3 class="text-5xl font-black text-main mb-2">150+</h3>
-                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Daily Borrowings</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                    <!-- Feature 1 -->
+                    <div class="group bg-card p-10 rounded-[2.5rem] border border-border hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5">
+                        <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-8 group-hover:scale-110 transition-transform">
+                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.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>
+                        </div>
+                        <h4 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Borrow Thousands</h4>
+                        <p class="text-muted text-sm leading-relaxed">Access our vast physical and digital catalog with a single click. No more waiting in lines.</p>
+                    </div>
+                    <!-- Feature 2 -->
+                    <div class="group bg-card p-10 rounded-[2.5rem] border border-border hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5">
+                        <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-8 group-hover:scale-110 transition-transform">
+                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+                        </div>
+                        <h4 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Track Reading</h4>
+                        <p class="text-muted text-sm leading-relaxed">Visualize your reading habits with detailed analytics and personal dashboards.</p>
+                    </div>
+                    <!-- Feature 3 -->
+                    <div class="group bg-card p-10 rounded-[2.5rem] border border-border hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5">
+                        <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-8 group-hover:scale-110 transition-transform">
+                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
+                        </div>
+                        <h4 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Stay Notified</h4>
+                        <p class="text-muted text-sm leading-relaxed">Never miss a due date with Firebase-powered instant renewal notifications.</p>
+                    </div>
+                    <!-- Feature 4 -->
+                    <div class="group bg-card p-10 rounded-[2.5rem] border border-border hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5">
+                        <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-8 group-hover:scale-110 transition-transform">
+                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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>
+                        <h4 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Earn Loyalty</h4>
+                        <p class="text-muted text-sm leading-relaxed">Collect points for every interaction and redeem them for premium membership tiers.</p>
+                    </div>
                 </div>
-            </div>
+            </section>
 
-            <!-- Features -->
-            <section class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-                <div class="space-y-8">
-                    <h2 class="text-4xl font-black text-main tracking-tight">Experience Library <br /> Management redefined.</h2>
-                    <div class="space-y-6">
-                        <div class="flex gap-4">
-                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary flex-shrink-0">
-                                <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.5" 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>
-                                <h4 class="font-bold text-main">Loyalty Reward System</h4>
-                                <p class="text-sm text-muted">Earn points for every book you return on time and exchange them for membership perks.</p>
+            <!-- Testimonials -->
+            <section class="bg-body border-y border-border py-32 relative overflow-hidden">
+                <div class="max-w-7xl mx-auto px-8 relative z-10">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
+                        <div>
+                            <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Wall of Praise</h2>
+                            <h3 class="text-6xl font-black text-main tracking-tighter mb-8 leading-tight">Loved by <br/> modern readers.</h3>
+                            <p class="text-lg text-muted leading-relaxed mb-12">
+                                Don't just take our word for it. Join thousands of satisfied members who have transformed their reading habits.
+                            </p>
+                            <div class="flex gap-4">
+                                <div class="flex -space-x-4">
+                                    @for(int i=1; i<=4; i++) {
+                                        <div class="w-12 h-12 rounded-full border-4 border-card bg-primary/20 flex items-center justify-center text-xs font-bold">U@i</div>
+                                    }
+                                </div>
+                                <div class="flex flex-col justify-center">
+                                    <span class="text-sm font-black text-main uppercase">5,000+ Active Members</span>
+                                    <span class="text-[10px] text-muted font-bold uppercase tracking-widest">Global Community</span>
+                                </div>
                             </div>
                         </div>
-                        <div class="flex gap-4">
-                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary flex-shrink-0">
-                                <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.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                        <div class="space-y-6">
+                            <div class="bg-card p-10 rounded-[2.5rem] border border-border shadow-xl transform hover:-rotate-1 transition-transform">
+                                <div class="flex gap-1 text-primary mb-6">
+                                    @for(int i=0; i<5; i++) { <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg> }
+                                </div>
+                                <p class="text-main font-medium italic mb-6 leading-relaxed">"The loyalty system is a game changer. I've earned three months of free premium just by returning my books on time!"</p>
+                                <div class="flex items-center gap-4">
+                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center font-black text-xs text-primary">SC</div>
+                                    <div>
+                                        <h5 class="text-sm font-bold text-main">Sarah Chen</h5>
+                                        <p class="text-[10px] text-muted font-bold uppercase">Gold Member</p>
+                                    </div>
+                                </div>
                             </div>
-                            <div>
-                                <h4 class="font-bold text-main">Instant Notifications</h4>
-                                <p class="text-sm text-muted">Get real-time updates when your favorite books are back in stock or when your loan is due.</p>
+                            <div class="bg-card p-10 rounded-[2.5rem] border border-border shadow-xl transform translate-x-8 hover:rotate-1 transition-transform">
+                                <p class="text-main font-medium italic mb-6 leading-relaxed">"Finally a library system that feels like it belongs in 2026. The interface is stunning and the notifications are so helpful."</p>
+                                <div class="flex items-center gap-4">
+                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center font-black text-xs text-primary">JM</div>
+                                    <div>
+                                        <h5 class="text-sm font-bold text-main">James Miller</h5>
+                                        <p class="text-[10px] text-muted font-bold uppercase">Active Reader</p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
-                    <div class="absolute inset-0 bg-primary opacity-5"></div>
-                    <span class="text-muted font-black uppercase tracking-[0.3em] text-xs">Preview of Interface</span>
+            </section>
+
+            <!-- Final CTA -->
+            <section class="max-w-7xl mx-auto px-8">
+                <div class="bg-primary p-16 md:p-24 rounded-[4rem] text-center text-white relative overflow-hidden shadow-2xl shadow-primary/40">
+                    <div class="relative z-10">
+                        <h2 class="text-5xl md:text-7xl font-black tracking-tighter mb-8 leading-tight">Ready to start your <br/> next chapter?</h2>
+                        <p class="text-xl text-white/80 max-w-2xl mx-auto mb-12 font-medium">Join thousands of readers today and get your first month of Premium for free.</p>
+                        <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
+                            <a href="/register" class="w-full sm:w-auto bg-white text-primary px-12 py-6 rounded-2xl font-black text-xl hover:bg-white/90 transition-all transform hover:scale-105 shadow-xl">Create Free Account</a>
+                            <a href="/contact" class="w-full sm:w-auto border-2 border-white/30 text-white px-12 py-6 rounded-2xl font-black text-xl hover:bg-white/10 transition-all">Talk to Librarian</a>
+                        </div>
+                    </div>
+                    <!-- CTA Decoration -->
+                    <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[600px] h-[600px] bg-white/10 rounded-full blur-[100px]"></div>
                 </div>
             </section>
         </div>
     </NotAuthorized>
+
 </AuthorizeView>
 
 
 @code {
+    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 SubscriptionDto? _currentSub;
+    private bool _isLoading = true;
 
     protected override async Task OnInitializedAsync()
     {
         try
         {
             var authState = await AuthStateProvider.GetAuthenticationStateAsync();
-            if (authState.User.Identity?.IsAuthenticated == true)
+            var user = authState.User;
+
+            if (user.Identity?.IsAuthenticated == true)
             {
-                _loyaltyAccount = await ApiClient.GetMyLoyaltyAccountAsync();
+                var books = await ApiClient.GetBooksAsync();
+                _totalBooks = books.Count();
+                _recentBooks = books.Take(6);
+
+                if (user.IsInRole("Member"))
+                {
+                    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));
+                        _loyaltyAccount = await ApiClient.GetMyLoyaltyAccountAsync();
+                        _currentSub = await ApiClient.GetMySubscriptionAsync();
+                    } catch {}
+                }
+
+                if (user.IsInRole("Librarian"))
+                {
+                    try {
+                        var allBorrowings = await ApiClient.GetAllBorrowingsAsync();
+                        _activeLoans = allBorrowings.Count(b => b.Status == "Borrowed");
+                        _overdueLoans = allBorrowings.Count(b => b.Status == "Overdue" || (b.Status == "Borrowed" && b.DueDate < DateTime.UtcNow));
+                        
+                        var members = await ApiClient.GetUsersAsync();
+                        _totalMembers = members.Count();
+                    } catch {}
+                }
             }
         }
         catch { }
+        finally
+        {
+            _isLoading = false;
+        }
     }
 }

BlazorWebAssembly/Pages/Members.razor

@@ -0,0 +1,609 @@
+@page "/members"
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Models
+@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Librarian")]
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
+
+<div class="max-w-7xl mx-auto py-10 px-6 animate-fade">
+    @if (_currentView == ViewMode.List)
+    {
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+            <div>
+                <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Members Directory</h1>
+                <p class="text-muted text-lg">
+                    Manage library members and administrator accounts.
+                    <span class="ml-2 text-xs text-muted font-bold">(@(_allUsers?.Count() ?? 0) total)</span>
+                </p>
+            </div>
+            <div class="flex items-center gap-3">
+                <button @onclick="ShowCreate" class="bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all whitespace-nowrap flex items-center">
+                    <svg class="w-5 h-5 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 Member
+                </button>
+            </div>
+        </div>
+
+        @if (_isLoading)
+        {
+            <div class="space-y-4">
+                @for (int i = 0; i < 5; i++)
+                {
+                    <div class="animate-pulse bg-card rounded-xl border border-border h-24 w-full"></div>
+                }
+            </div>
+        }
+        else if (_pagedResult != null)
+        {
+            <div class="bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse min-w-max whitespace-nowrap">
+                        <thead class="bg-body border-b border-border">
+                            <tr>
+                                <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Member</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Contact</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Role</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Status</th>
+                                <th class="px-6 py-4 text-right text-[10px] font-bold text-muted uppercase tracking-widest">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-border">
+                            @foreach (var user in _pagedResult.Items)
+                            {
+                                <tr class="hover:bg-body transition-colors group">
+                                    <td class="px-6 py-4">
+                                        <div class="flex items-center gap-4">
+                                            <div class="h-10 w-10 flex-shrink-0 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
+                                                @(user.FullName?.Substring(0, Math.Min(2, user.FullName.Length)).ToUpper() ?? "U")
+                                            </div>
+                                            <div>
+                                                <button @onclick="() => ShowDetails(user.Id)" class="text-sm font-bold text-main hover:text-primary transition-colors text-left">@user.FullName</button>
+                                                @if (!string.IsNullOrEmpty(user.StudentId))
+                                                {
+                                                    <div class="text-xs text-muted font-medium mt-0.5">ID: @user.StudentId</div>
+                                                }
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <div class="text-sm text-main font-medium">@user.Email</div>
+                                        <div class="text-xs text-muted">@(string.IsNullOrEmpty(user.PhoneNumber) ? "No phone" : user.PhoneNumber)</div>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <span class="inline-flex rounded-full px-3 py-1 text-[10px] font-black tracking-widest uppercase @(user.Role == "Admin" ? "bg-amber-500/10 text-amber-500" : "bg-blue-500/10 text-blue-500")">
+                                            @user.Role
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        @if (user.BanStatus == true)
+                                        {
+                                            <span class="inline-flex rounded-full px-3 py-1 text-[10px] font-black tracking-widest uppercase bg-red-500/10 text-red-500">
+                                                Suspended
+                                            </span>
+                                        }
+                                        else if (user.IsActive)
+                                        {
+                                            <span class="inline-flex rounded-full px-3 py-1 text-[10px] font-black tracking-widest uppercase bg-green-500/10 text-green-500">
+                                                Active
+                                            </span>
+                                        }
+                                        else
+                                        {
+                                            <span class="inline-flex rounded-full px-3 py-1 text-[10px] font-black tracking-widest uppercase bg-body text-muted border border-border">
+                                                Inactive
+                                            </span>
+                                        }
+                                    </td>
+                                    <td class="px-6 py-4 text-right">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <button @onclick="() => ShowDetails(user.Id)" class="p-2 rounded-lg border border-border text-muted hover:bg-primary hover:text-white hover:border-primary transition-all">
+                                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                                            </button>
+                                            <button @onclick="() => ShowEdit(user.Id)" class="p-2 rounded-lg border border-border text-muted hover:bg-primary hover:text-white hover:border-primary transition-all">
+                                                <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="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>
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </div>
+
+                @if (_pagedResult.TotalPages > 1)
+                {
+                    <div class="px-6 py-4 border-t border-border flex items-center justify-between bg-body">
+                        <p class="text-xs text-muted">
+                            Showing <span class="font-bold text-main">@((_pagedResult.CurrentPage - 1) * _pagedResult.PageSize + 1)</span>
+                            to
+                            <span class="font-bold text-main">@(Math.Min(_pagedResult.CurrentPage * _pagedResult.PageSize, _pagedResult.TotalCount))</span>
+                            of <span class="font-bold text-main">@_pagedResult.TotalCount</span> members
+                        </p>
+                        <div class="flex items-center gap-2">
+                            <button @onclick="() => ChangePage(_pagedResult.CurrentPage - 1)" disabled="@(!_pagedResult.HasPreviousPage)"
+                                    class="p-2 rounded-lg border border-border text-muted hover:bg-card disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                                <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="M15 19l-7-7 7-7" /></svg>
+                            </button>
+
+                            @for (int p = 1; p <= _pagedResult.TotalPages; p++)
+                            {
+                                var pageNumber = p;
+                                if (p == _pagedResult.CurrentPage)
+                                {
+                                    <span class="w-8 h-8 flex items-center justify-center rounded-lg bg-main text-body text-xs font-bold">@p</span>
+                                }
+                                else if (p == 1 || p == _pagedResult.TotalPages || (p >= _pagedResult.CurrentPage - 1 && p <= _pagedResult.CurrentPage + 1))
+                                {
+                                    <button @onclick="() => ChangePage(pageNumber)"
+                                            class="w-8 h-8 flex items-center justify-center rounded-lg border border-border text-xs font-bold text-muted hover:text-primary hover:border-primary transition-colors">@p</button>
+                                }
+                                else if (p == _pagedResult.CurrentPage - 2 || p == _pagedResult.CurrentPage + 2)
+                                {
+                                    <span class="w-8 h-8 flex items-center justify-center text-xs text-muted">...</span>
+                                }
+                            }
+
+                            <button @onclick="() => ChangePage(_pagedResult.CurrentPage + 1)" disabled="@(!_pagedResult.HasNextPage)"
+                                    class="p-2 rounded-lg border border-border text-muted hover:bg-card disabled:opacity-30 disabled:cursor-not-allowed transition-all">
+                                <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 5l7 7-7 7" /></svg>
+                            </button>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    }
+    else if (_currentView == ViewMode.Details && _selectedUser != null)
+    {
+        <div class="animate-fade">
+            <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-muted hover:text-main 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-3xl bg-card border border-border flex flex-col items-center justify-center text-main p-6 shadow-sm relative overflow-hidden">
+                        <div class="absolute inset-0 bg-primary/5"></div>
+                        <div class="relative z-10 flex flex-col items-center">
+                            <div class="w-32 h-32 rounded-full bg-main text-body flex items-center justify-center text-5xl font-black mb-6 shadow-xl">
+                                @(_selectedUser.User.FullName?.Substring(0, Math.Min(2, _selectedUser.User.FullName.Length)).ToUpper() ?? "U")
+                            </div>
+                            <h2 class="text-2xl font-bold text-center mb-2">@_selectedUser.User.FullName</h2>
+                            <div class="inline-flex rounded-full px-4 py-1.5 text-[10px] font-black uppercase tracking-widest @(_selectedUser.User.Role == "Admin" ? "bg-amber-500/10 text-amber-500 border border-amber-500/20" : "bg-blue-500/10 text-blue-500 border border-blue-500/20")">
+                                @_selectedUser.User.Role
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="lg:col-span-2 space-y-8">
+                    <div>
+                        <h1 class="text-4xl font-extrabold text-main tracking-tight mb-4">Member Profile</h1>
+                        <div class="flex items-center gap-3">
+                            @if (_selectedUser.User.BanStatus == true)
+                            {
+                                <span class="inline-flex items-center rounded-full bg-red-500/10 border border-red-500/20 px-4 py-1.5 text-[10px] font-black text-red-500 tracking-widest uppercase">Suspended</span>
+                            }
+                            else if (_selectedUser.User.IsActive)
+                            {
+                                <span class="inline-flex items-center rounded-full bg-green-500/10 border border-green-500/20 px-4 py-1.5 text-[10px] font-black text-green-500 tracking-widest uppercase">Active</span>
+                            }
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-border py-8">
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-2">Email Address</h4>
+                            <p class="text-sm font-semibold text-main">@_selectedUser.User.Email</p>
+                        </div>
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-2">Phone Number</h4>
+                            <p class="text-sm font-semibold text-main">@(string.IsNullOrEmpty(_selectedUser.User.PhoneNumber) ? "-" : _selectedUser.User.PhoneNumber)</p>
+                        </div>
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-2">Student ID</h4>
+                            <p class="text-sm font-semibold text-main">@(string.IsNullOrEmpty(_selectedUser.User.StudentId) ? "-" : _selectedUser.User.StudentId)</p>
+                        </div>
+                        <div>
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-2">Joined Date</h4>
+                            <p class="text-sm font-semibold text-main">@_selectedUser.User.CreatedAt.ToString("MMMM dd, yyyy")</p>
+                        </div>
+                        <div class="sm:col-span-2">
+                            <h4 class="text-[10px] font-bold text-muted uppercase tracking-widest mb-2">Physical Address</h4>
+                            <p class="text-sm font-semibold text-main">@(string.IsNullOrEmpty(_selectedUser.User.Address) ? "-" : _selectedUser.User.Address)</p>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap items-center gap-4 pt-2">
+                        <button @onclick="() => ShowEdit(_selectedUser.User.Id)" class="bg-primary text-white py-3 px-8 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Edit Details</button>
+                        
+                        <button @onclick="UpdateRole" class="bg-body border border-border text-main py-3 px-8 rounded-xl font-bold hover:bg-card transition-colors">
+                            Make @(_selectedUser.User.Role == "Admin" ? "Member" : "Admin")
+                        </button>
+
+                        <button @onclick="DeleteUser" class="p-3 text-red-500 hover:text-red-600 hover:bg-red-500/10 rounded-xl transition-colors ml-auto border border-transparent hover:border-red-500/20">
+                            <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-12 pt-12 border-t border-border">
+                        <h3 class="text-2xl font-bold text-main mb-8">Manage Subscription</h3>
+                        
+                        @if (_selectedUser.CurrentSubscription != null && _selectedUser.CurrentSubscription.IsActive)
+                        {
+                            <div class="bg-green-500/5 border border-green-500/20 rounded-2xl p-6 mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                                <div>
+                                    <span class="text-[10px] text-green-600 font-black uppercase tracking-widest mb-1 block">Active Plan</span>
+                                    <h4 class="text-2xl font-black text-green-700">@_selectedUser.CurrentSubscription.MembershipType</h4>
+                                </div>
+                                <div class="sm:text-right">
+                                    <div class="text-[10px] text-green-600/70 font-black uppercase tracking-widest mb-1">Expires On</div>
+                                    <div class="font-bold text-green-700">@_selectedUser.CurrentSubscription.ExpiryDate.ToString("MMMM dd, yyyy")</div>
+                                </div>
+                            </div>
+                        }
+                        else
+                        {
+                            <div class="bg-card border border-dashed border-border rounded-2xl p-6 mb-8 text-center">
+                                <p class="text-muted font-medium">No active subscription for this member.</p>
+                            </div>
+                        }
+
+                        <h4 class="text-xs font-black text-muted uppercase tracking-[0.2em] mb-6">Assign New Plan</h4>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            @foreach (var plan in _selectedUser.AvailableMemberships)
+                            {
+                                var isCurrent = _selectedUser.CurrentSubscription?.IsActive == true && _selectedUser.CurrentSubscription.MembershipId == plan.Id;
+                                <div class="bg-card rounded-2xl border p-6 flex flex-col transition-all relative @(isCurrent ? "border-primary shadow-lg shadow-primary/10" : "border-border hover:border-primary/50")">
+                                    @if (isCurrent)
+                                    {
+                                        <div class="absolute -top-3 right-6 bg-primary text-white text-[9px] font-black uppercase tracking-widest px-3 py-1 rounded-full shadow-sm">Current</div>
+                                    }
+                                    <h5 class="font-bold text-main text-xl mb-1">@plan.Type</h5>
+                                    <p class="text-muted font-medium text-sm mb-6 flex-grow">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
+                                    
+                                    @if (!isCurrent)
+                                    {
+                                        <button @onclick="() => AssignSubscription(plan.Id, plan.Type)" class="w-full bg-body border border-border text-main py-2.5 rounded-xl text-sm font-bold hover:bg-primary hover:text-white hover:border-primary transition-colors">Assign Plan</button>
+                                    }
+                                    else
+                                    {
+                                        <button disabled class="w-full bg-body border border-border text-muted py-2.5 rounded-xl text-sm font-bold 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-fade">
+            <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-muted hover:text-main 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-10 text-center">
+                    <h1 class="text-4xl font-extrabold tracking-tight text-main mb-3">@(_currentView == ViewMode.Create ? "Register New Member" : "Edit Member Details")</h1>
+                    <p class="text-lg text-muted">@(_currentView == ViewMode.Create ? "Add a new reader to the library system." : $"Update profile details for {_editUser?.FullName}.")</p>
+                </div>
+
+                <div class="bg-card border border-border p-8 sm:p-10 rounded-3xl shadow-sm">
+                    @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-bold text-main mb-2">Full Name <span class="text-red-500">*</span></label>
+                                    <InputText @bind-Value="_createRequest.FullName" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="John Doe" />
+                                    <ValidationMessage For="@(() => _createRequest.FullName)" class="mt-1 text-xs text-red-500 font-medium" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Email Address <span class="text-red-500">*</span></label>
+                                    <InputText @bind-Value="_createRequest.Email" type="email" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="you@domain.com" />
+                                    <ValidationMessage For="@(() => _createRequest.Email)" class="mt-1 text-xs text-red-500 font-medium" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Password <span class="text-red-500">*</span></label>
+                                    <InputText @bind-Value="_createRequest.Password" type="password" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="••••••••" />
+                                    <ValidationMessage For="@(() => _createRequest.Password)" class="mt-1 text-xs text-red-500 font-medium" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Phone Number</label>
+                                    <InputText @bind-Value="_createRequest.PhoneNumber" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="+123456789" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Student ID</label>
+                                    <InputText @bind-Value="_createRequest.StudentId" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="Optional" />
+                                </div>
+                                <div class="sm:col-span-2">
+                                    <label class="block text-sm font-bold text-main mb-2">Address</label>
+                                    <InputTextArea @bind-Value="_createRequest.Address" rows="3" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" placeholder="Full physical address" />
+                                </div>
+                            </div>
+                            <div class="pt-8 border-t border-border flex justify-end gap-4 mt-8">
+                                <button type="button" @onclick="BackToList" class="bg-body border border-border text-main px-8 py-3 rounded-xl font-bold hover:bg-card transition-colors">Cancel</button>
+                                <button type="submit" class="bg-primary text-white px-8 py-3 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">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-bold text-main mb-2">Full Name <span class="text-red-500">*</span></label>
+                                    <InputText @bind-Value="_updateRequest.FullName" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" />
+                                    <ValidationMessage For="@(() => _updateRequest.FullName)" class="mt-1 text-xs text-red-500 font-medium" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Phone Number</label>
+                                    <InputText @bind-Value="_updateRequest.PhoneNumber" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-bold text-main mb-2">Student ID</label>
+                                    <InputText @bind-Value="_updateRequest.StudentId" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" />
+                                </div>
+                                <div class="sm:col-span-2">
+                                    <label class="block text-sm font-bold text-main mb-2">Address</label>
+                                    <InputTextArea @bind-Value="_updateRequest.Address" rows="3" class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main transition-all" />
+                                </div>
+                            </div>
+                            <div class="pt-8 border-t border-border flex justify-end gap-4 mt-8">
+                                <button type="button" @onclick="BackToList" class="bg-body border border-border text-main px-8 py-3 rounded-xl font-bold hover:bg-card transition-colors">Cancel</button>
+                                <button type="submit" class="bg-primary text-white px-8 py-3 rounded-xl font-bold hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Update Member</button>
+                            </div>
+                        </EditForm>
+                    }
+                </div>
+            </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 JS.InvokeVoidAsync("alert", "Error loading users: " + ex.Message);
+        }
+        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 JS.InvokeVoidAsync("alert", "Error loading member details: " + ex.Message);
+        }
+        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 JS.InvokeVoidAsync("alert", "Member created successfully!");
+                await LoadUsers();
+                BackToList();
+            }
+            else
+            {
+                await JS.InvokeVoidAsync("alert", "Failed to create member.");
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", "Error: " + ex.Message);
+        }
+    }
+
+    private async Task HandleUpdate()
+    {
+        if (_editUser == null) return;
+        try
+        {
+            var result = await ApiClient.UpdateUserAsync(_editUser.Id, _updateRequest);
+            if (result != null)
+            {
+                await JS.InvokeVoidAsync("alert", "Member updated successfully!");
+                await LoadUsers();
+                BackToList();
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", "Error: " + ex.Message);
+        }
+    }
+
+    private async Task DeleteUser()
+    {
+        if (_selectedUser == null) return;
+        bool confirmed = await JS.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 JS.InvokeVoidAsync("alert", "Member removed.");
+                await LoadUsers();
+                BackToList();
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", "Error: " + ex.Message);
+        }
+    }
+
+    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 JS.InvokeVoidAsync("alert", $"Role updated to {newRole}.");
+                await ShowDetails(_selectedUser.User.Id); // Refresh details
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", "Error: " + ex.Message);
+        }
+    }
+
+    private async Task AssignSubscription(int membershipId, string planName)
+    {
+        if (_selectedUser == null) return;
+        bool confirmed = await JS.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 JS.InvokeVoidAsync("alert", "Subscription assigned successfully.");
+                await ShowDetails(_selectedUser.User.Id); // Refresh details
+            }
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", "Error: " + ex.Message);
+        }
+    }
+}

BlazorWebAssembly/Pages/Membership.razor

@@ -3,11 +3,13 @@
 @using BlazorWebAssembly.Services
 @inject LibraryApiClient ApiClient
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
-<div class="max-w-6xl mx-auto py-16 px-6">
+<div class="max-w-7xl mx-auto py-24 px-8 animate-fade">
     <!-- Header -->
-    <div class="text-center mb-20">
-        <h1 class="text-5xl font-black tracking-tight text-main mb-6">Choose Your Journey</h1>
+    <div class="text-center mb-24">
+        <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Pricing Plans</h2>
+        <h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">Choose Your <br /> <span class="text-primary italic">Journey.</span></h1>
         <p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
             From casual readers to devoted bookworms, we have a plan that perfectly matches your literary appetite.
         </p>
@@ -18,83 +20,116 @@
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             @for (int i = 0; i < 3; i++)
             {
-                <div class="animate-pulse bg-card rounded-3xl border border-border h-[500px]"></div>
+                <div class="animate-pulse bg-card rounded-[3rem] border border-border h-[600px]"></div>
             }
         </div>
     }
     else
     {
-        <!-- Current Subscription Banner -->
-        @if (_currentSub != null)
-        {
-            <div class="bg-primary/5 border border-primary/20 rounded-3xl p-8 mb-16 flex flex-col md:flex-row items-center justify-between gap-6">
-                <div class="flex items-center gap-6">
-                    <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-white text-3xl font-bold">
-                        P
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-bold text-main">@_currentSub.MembershipType Plan</h3>
-                        <p class="text-muted">Active until @_currentSub.ExpiryDate.ToString("MMMM dd, yyyy")</p>
+        <!-- Current Subscription Banner (Only for Auth) -->
+        <AuthorizeView>
+            <Authorized>
+                @if (_currentSub != null)
+                {
+                    <div class="bg-primary/5 border border-primary/20 rounded-[2.5rem] p-10 mb-20 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm">
+                        <div class="flex items-center gap-8">
+                            <div class="w-20 h-20 bg-primary rounded-3xl flex items-center justify-center text-white text-4xl font-black shadow-lg shadow-primary/20">
+                                @(_currentSub.MembershipType?[..1].ToUpper())
+                            </div>
+                            <div>
+                                <h3 class="text-3xl font-black text-main uppercase tracking-tight">@_currentSub.MembershipType Plan</h3>
+                                <p class="text-muted font-medium">Active until <span class="text-main font-bold">@_currentSub.ExpiryDate.ToString("MMMM dd, yyyy")</span></p>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-6">
+                            <div class="flex flex-col items-end">
+                                <span class="px-4 py-1.5 bg-green-500/10 text-green-600 rounded-full text-[10px] font-black uppercase tracking-widest mb-2">Active Status</span>
+                                <span class="text-xs text-muted font-bold uppercase tracking-widest">Auto-renews monthly</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="flex items-center gap-4">
-                    <span class="px-4 py-1.5 bg-green-500/10 text-green-600 rounded-full text-xs font-bold uppercase tracking-widest">Active</span>
-                </div>
-            </div>
-        }
+                }
+            </Authorized>
+        </AuthorizeView>
 
         <!-- Membership Plans -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
             @foreach (var plan in _memberships)
             {
-                <div class='relative bg-card rounded-[2rem] border p-10 flex flex-col transition-all duration-500 hover:-translate-y-2 @(IsCurrentPlan(plan.Id) ? "border-primary shadow-xl shadow-primary/5 scale-105 z-10" : "border-border shadow-sm")'>
+                <div class='relative bg-card rounded-[3.5rem] border p-12 flex flex-col transition-all duration-700 hover:-translate-y-4 @(IsCurrentPlan(plan.Id) ? "border-primary shadow-2xl shadow-primary/10 scale-105 z-10" : "border-border shadow-xl hover:shadow-2xl")'>
+                    @if (plan.Price > 20 && !IsCurrentPlan(plan.Id))
+                    {
+                        <div class="absolute -top-5 left-1/2 -translate-x-1/2 bg-emerald-500 text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-emerald-500/30">
+                            Most Popular
+                        </div>
+                    }
                     @if (IsCurrentPlan(plan.Id))
                     {
-                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white px-6 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-primary/30">
-                            Current Plan
+                        <div class="absolute -top-5 left-1/2 -translate-x-1/2 bg-primary text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-primary/30">
+                            Your Current Plan
                         </div>
                     }
 
                     <div class="mb-10">
-                        <h3 class="text-sm font-black text-muted uppercase tracking-[0.2em] mb-4">@plan.Type</h3>
-                        <div class="flex items-baseline gap-1">
-                            <span class="text-4xl font-black text-main">$@plan.Price</span>
-                            <span class="text-muted font-medium">/@plan.DurationMonths mo</span>
+                        <h3 class="text-sm font-black text-muted uppercase tracking-[0.3em] mb-6">@plan.Type</h3>
+                        <div class="flex flex-col gap-1">
+                            <div class="flex items-baseline gap-2 flex-wrap">
+                                <span class="text-5xl font-black text-main tracking-tighter">@plan.Price.ToString("N0")</span>
+                                <span class="text-2xl font-bold text-muted">mmk</span>
+                            </div>
+                            <span class="text-muted font-bold uppercase text-sm tracking-widest mt-1">/ @plan.DurationMonths mo</span>
                         </div>
                     </div>
 
-                    <div class="space-y-6 mb-12 flex-grow">
-                        <div class="flex items-center gap-4">
-                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
-                                <svg class="w-3 h-3 text-primary" 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>
+                    <div class="space-y-6 mb-16 flex-grow">
+                        <div class="flex items-center gap-5 group/item">
+                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover/item:scale-110 transition-transform flex-shrink-0">
+                                <svg class="w-4 h-4" 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>
                             </div>
-                            <span class="text-main font-medium">Borrow up to <span class="font-bold">@plan.MaxBooks</span> books</span>
+                            <span class="text-main font-bold text-lg">Borrow <span class="text-primary">@plan.MaxBooks</span> books</span>
                         </div>
-                        <div class="flex items-center gap-4">
-                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
-                                <svg class="w-3 h-3 text-primary" 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>
+                        <div class="flex items-center gap-5 group/item">
+                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover/item:scale-110 transition-transform flex-shrink-0">
+                                <svg class="w-4 h-4" 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>
                             </div>
-                            <span class="text-main font-medium">Keep for <span class="font-bold">@plan.BorrowingDays</span> days</span>
+                            <span class="text-main font-bold text-lg">@plan.BorrowingDays Day period</span>
                         </div>
-                        <div class="flex items-center gap-4">
-                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
-                                <svg class="w-3 h-3 text-primary" 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>
+                        <div class="flex items-center gap-5 group/item">
+                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover/item:scale-110 transition-transform flex-shrink-0">
+                                <svg class="w-4 h-4" 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>
                             </div>
-                            <span class="text-main font-medium">Digital access included</span>
+                            <span class="text-main font-bold text-lg">Digital access included</span>
+                        </div>
+                        <div class="flex items-center gap-5 group/item">
+                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover/item:scale-110 transition-transform flex-shrink-0">
+                                <svg class="w-4 h-4" 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>
+                            </div>
+                            <span class="text-main font-bold text-lg">Loyalty point multiplier</span>
                         </div>
                     </div>
 
                     <button @onclick="() => SubscribeAsync(plan)" 
                             disabled="@IsCurrentPlan(plan.Id)"
-                            class='w-full py-5 rounded-2xl font-black transition-all @(IsCurrentPlan(plan.Id) ? "bg-body text-muted border border-border" : "bg-primary text-white hover:bg-primary-hover hover:shadow-xl shadow-primary/20")'>
-                        @(IsCurrentPlan(plan.Id) ? "Your Plan" : "Upgrade Now")
+                            class='w-full py-6 rounded-[2rem] font-black uppercase tracking-widest text-sm transition-all @(IsCurrentPlan(plan.Id) ? "bg-body text-muted border border-border cursor-not-allowed" : "bg-primary text-white hover:bg-primary-hover hover:shadow-2xl hover:shadow-primary/30 transform hover:scale-[1.02] active:scale-95")'>
+                        @(IsCurrentPlan(plan.Id) ? "Current Plan" : "Select Plan")
                     </button>
                 </div>
             }
         </div>
+
+        <div class="mt-24 text-center">
+            <p class="text-muted font-medium mb-8">All plans include 24/7 support and access to our community events.</p>
+            <div class="flex items-center justify-center gap-12 opacity-50 grayscale hover:grayscale-0 transition-all">
+                <!-- Trust Badges Placeholder -->
+                <span class="font-black text-xl uppercase tracking-tighter">Secure Payment</span>
+                <span class="font-black text-xl uppercase tracking-tighter">Cancel Anytime</span>
+                <span class="font-black text-xl uppercase tracking-tighter">No Hidden Fees</span>
+            </div>
+        </div>
     }
 </div>
 
+
 @code {
     private bool _isLoading = true;
     private List<MembershipDto> _memberships = new();
@@ -121,10 +156,18 @@
 
     private async Task SubscribeAsync(MembershipDto plan)
     {
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Are you sure you want to subscribe to {plan.Type} for {plan.Price} mmk?");
+        if (!confirmed) return;
+
         var result = await ApiClient.SubscribeAsync(new SubscribeRequest { MembershipId = plan.Id });
         if (result != null)
         {
+            await JS.InvokeVoidAsync("alert", "Subscription successful!");
             await LoadData();
         }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", "Subscription failed. Please check your account balance or try again.");
+        }
     }
 }

BlazorWebAssembly/Pages/Privacy.razor

@@ -0,0 +1,42 @@
+@page "/privacy"
+
+<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
+    <h1 class="text-5xl font-black tracking-tighter text-main mb-8 uppercase">Privacy Policy</h1>
+    <p class="text-sm text-muted mb-12 font-bold uppercase tracking-widest">Last Updated: May 2026</p>
+
+    <div class="space-y-12 text-muted leading-relaxed">
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">1. Information We Collect</h2>
+            <p>
+                We collect information you provide directly to us when you create an account, subscribe to a membership, or interact with our library services. This includes your name, email address, payment information, and reading history.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">2. How We Use Your Information</h2>
+            <p>
+                We use the information we collect to maintain your account, process transactions, provide personalized recommendations, and send you important notifications regarding your loans and memberships.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">3. Data Security</h2>
+            <p>
+                We implement a variety of security measures to maintain the safety of your personal information. Your sensitive data is encrypted via SSL technology and stored behind secured networks.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">4. Cookies</h2>
+            <p>
+                We use cookies to understand and save your preferences for future visits and compile aggregate data about site traffic and site interaction.
+            </p>
+        </section>
+
+        <section class="p-8 bg-card rounded-3xl border border-border">
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Contact Privacy Officer</h2>
+            <p class="mb-4">If you have any questions regarding this privacy policy, you may contact our privacy officer at:</p>
+            <p class="font-bold text-primary">privacy@libraryluxe.com</p>
+        </section>
+    </div>
+</div>

BlazorWebAssembly/Pages/Rewards.razor

@@ -3,6 +3,7 @@
 @using BlazorWebAssembly.Services
 @inject LibraryApiClient ApiClient
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
 <div class="max-w-6xl mx-auto py-12 px-6">
     <!-- Header -->
@@ -94,7 +95,11 @@
         if (success)
         {
             await LoadData();
-            // Show success message
+            await JS.InvokeVoidAsync("alert", msg);
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", msg);
         }
     }
 }

BlazorWebAssembly/Pages/RewardsManage.razor

@@ -0,0 +1,308 @@
+@page "/rewards/manage"
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models
+@using Microsoft.AspNetCore.Authorization
+@inject LibraryApiClient ApiClient
+@inject IJSRuntime JS
+@attribute [Authorize(Roles = "Librarian")]
+
+<div class="max-w-7xl mx-auto py-10 px-6 animate-fade">
+    <div class="flex flex-col md:flex-row md:items-center justify-between mb-10 gap-6">
+        <div>
+            <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Rewards Management</h1>
+            <p class="text-muted text-lg font-medium">Fulfill pending redemptions and review all members' loyalty activity.</p>
+        </div>
+        <div class="flex items-center gap-4">
+            <div class="bg-card px-6 py-3 flex items-center gap-4 border border-border rounded-xl shadow-sm">
+                <div class="text-center">
+                    <p class="text-[10px] font-black text-amber-500 uppercase tracking-widest">Pending</p>
+                    <p class="text-2xl font-black text-main">@_pendingRedemptions.Count()</p>
+                </div>
+                <div class="w-px h-8 bg-border"></div>
+                <div class="text-center">
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest">Members</p>
+                    <p class="text-2xl font-black text-main">@_allMembersHistory.Count()</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="mb-8 border-b border-border flex gap-8">
+        <button @onclick='() => _activeTab = "pending"'
+                class='pb-4 text-sm font-bold border-b-2 transition-all relative @(_activeTab == "pending" ? "border-primary text-main" : "border-transparent text-muted hover:text-main")'>
+            <span class="flex items-center gap-2">
+                Pending Redemptions
+                @if (_pendingRedemptions.Any())
+                {
+                    <span class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[10px] font-black rounded-full bg-red-500 text-white">@_pendingRedemptions.Count()</span>
+                }
+            </span>
+        </button>
+        <button @onclick='() => _activeTab = "history"'
+                class='pb-4 text-sm font-bold border-b-2 transition-all @(_activeTab == "history" ? "border-primary text-main" : "border-transparent text-muted hover:text-main")'>
+            Members Points History
+        </button>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="space-y-4">
+            @for (int i = 0; i < 5; i++)
+            {
+                <div class="animate-pulse bg-card rounded-xl border border-border h-20 w-full"></div>
+            }
+        </div>
+    }
+    else
+    {
+        @if (_activeTab == "pending")
+        {
+            <div class="animate-fade">
+                @if (!_pendingRedemptions.Any())
+                {
+                    <div class="py-24 text-center bg-card rounded-3xl border border-dashed border-border shadow-sm">
+                        <p class="text-muted font-bold text-lg mb-2">No pending redemptions</p>
+                        <p class="text-muted/70 text-sm">All member requests have been fulfilled.</p>
+                    </div>
+                }
+                else
+                {
+                    <div class="bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
+                        <table class="w-full text-left border-collapse min-w-max whitespace-nowrap">
+                            <thead class="bg-body border-b border-border">
+                                <tr>
+                                    <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Member</th>
+                                    <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Reward</th>
+                                    <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Points</th>
+                                    <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Claimed Date</th>
+                                    <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Status</th>
+                                    <th class="px-6 py-4 text-right text-[10px] font-bold text-muted uppercase tracking-widest">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-border">
+                                @foreach (var r in _pendingRedemptions.OrderBy(x => x.RedeemedAt))
+                                {
+                                    <tr class="hover:bg-body transition-colors">
+                                        <td class="px-6 py-4">
+                                            <div class="flex items-center gap-3">
+                                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-bold shadow-sm">
+                                                    @(r.ExternalUserId.Length >= 2 ? r.ExternalUserId.Substring(0, 2).ToUpper() : "U")
+                                                </div>
+                                                <span class="text-sm font-bold text-main">@r.ExternalUserId</span>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4">
+                                            <p class="text-sm font-bold text-main">@r.RewardName</p>
+                                            <p class="text-[10px] text-muted font-bold tracking-widest uppercase">ID: @(r.Id.Length > 8 ? r.Id[..8] : r.Id)</p>
+                                        </td>
+                                        <td class="px-6 py-4 text-sm font-black text-primary">@r.PointCost.ToString("N0") pts</td>
+                                        <td class="px-6 py-4 text-sm font-medium text-muted">@r.RedeemedAt.ToString("MMM dd, yyyy")</td>
+                                        <td class="px-6 py-4">
+                                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-500/10 text-amber-500">
+                                                <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-green-500/10 text-green-500 border border-green-500/20 px-4 py-2 rounded-lg text-xs font-bold hover:bg-green-500 hover:text-white transition-all shadow-sm 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-fade">
+                @if (!_allMembersHistory.Any())
+                {
+                    <div class="py-24 text-center bg-card rounded-3xl border border-dashed border-border shadow-sm">
+                        <p class="text-muted font-bold text-lg">No loyalty history found.</p>
+                    </div>
+                }
+                else
+                {
+                    <div class="mb-6">
+                        <input type="text" placeholder="Filter by member name or email..."
+                               class="w-full max-w-md bg-card border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-main shadow-sm transition-all"
+                               @bind="_searchQuery" @bind:event="oninput" />
+                    </div>
+
+                    <div class="space-y-4">
+                        @foreach (var member in FilteredMembers)
+                        {
+                            <div class="bg-card border border-border rounded-2xl overflow-hidden shadow-sm hover:border-primary/50 transition-colors">
+                                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between px-6 py-5 cursor-pointer hover:bg-body transition-colors"
+                                     @onclick="() => ToggleMember(member.AccountId)">
+                                    <div class="flex items-center gap-4 mb-4 sm:mb-0">
+                                        <div class="w-12 h-12 rounded-full bg-primary/10 text-primary border border-primary/20 flex items-center justify-center font-bold shadow-inner flex-shrink-0">
+                                            @(member.UserName.Length >= 2 ? member.UserName.Substring(0, 2).ToUpper() : "?")
+                                        </div>
+                                        <div>
+                                            <p class="font-bold text-main text-lg">@member.UserName</p>
+                                            <p class="text-xs font-medium text-muted">@member.UserEmail</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end">
+                                        <div class="text-right">
+                                            <p class="text-[10px] font-black text-muted uppercase tracking-widest">Balance</p>
+                                            <p class="font-black text-main text-lg">@member.CurrentBalance.ToString("N0") pts</p>
+                                        </div>
+                                        <div class="text-right hidden md:block">
+                                            <p class="text-[10px] font-black text-muted uppercase tracking-widest">Tier</p>
+                                            <span class="text-xs font-bold text-primary">@member.Tier</span>
+                                        </div>
+                                        <div class="text-right hidden sm:block">
+                                            <p class="text-[10px] font-black text-muted uppercase tracking-widest">History</p>
+                                            <p class="font-bold text-main text-sm">@member.History.Count() items</p>
+                                        </div>
+                                        <svg class="w-5 h-5 text-muted 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>
+                                
+                                @if (_expandedMembers.Contains(member.AccountId))
+                                {
+                                    <div class="border-t border-border bg-body animate-fade-in-down">
+                                        @if (!member.History.Any())
+                                        {
+                                            <p class="px-6 py-6 text-sm text-muted font-medium text-center">No transactions found for this member.</p>
+                                        }
+                                        else
+                                        {
+                                            <div class="overflow-x-auto">
+                                                <table class="min-w-full text-left min-w-max whitespace-nowrap">
+                                                    <thead>
+                                                        <tr class="bg-card">
+                                                            <th class="px-6 py-3 text-[10px] font-bold text-muted uppercase tracking-widest">Date</th>
+                                                            <th class="px-6 py-3 text-[10px] font-bold text-muted uppercase tracking-widest">Type</th>
+                                                            <th class="px-6 py-3 text-[10px] font-bold text-muted uppercase tracking-widest">Details</th>
+                                                            <th class="px-6 py-3 text-[10px] font-bold text-muted uppercase tracking-widest">Subject</th>
+                                                            <th class="px-6 py-3 text-right text-[10px] font-bold text-muted uppercase tracking-widest">Points</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody class="divide-y divide-border">
+                                                        @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-card transition-colors">
+                                                                <td class="px-6 py-3 text-xs font-medium text-muted whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                                                <td class="px-6 py-3">
+                                                                    <span class="px-2 py-0.5 rounded-sm text-[9px] font-black uppercase tracking-widest border @(isPos ? "bg-green-500/10 text-green-500 border-green-500/20" : "bg-red-500/10 text-red-500 border-red-500/20")">@label</span>
+                                                                </td>
+                                                                <td class="px-6 py-3 text-xs font-medium text-main max-w-xs truncate">@h.Description</td>
+                                                                <td class="px-6 py-3 text-xs font-bold text-muted max-w-xs truncate">
+                                                                    @if (!string.IsNullOrWhiteSpace(spentOn))
+                                                                    {
+                                                                        <span class="text-main">@spentOn</span>
+                                                                    }
+                                                                    else
+                                                                    {
+                                                                        <span>—</span>
+                                                                    }
+                                                                </td>
+                                                                <td class="px-6 py-3 text-right font-black text-sm @(isPos ? "text-green-500" : "text-red-500")">
+                                                                    @(isPos ? "+" : "")@h.PointDelta.ToString("N0")
+                                                                </td>
+                                                            </tr>
+                                                        }
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                        }
+                                    </div>
+                                }
+                            </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)
+        {
+            await JS.InvokeVoidAsync("alert", $"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("alert", result.Message);
+            await LoadDataAsync();
+        }
+        else
+        {
+            await JS.InvokeVoidAsync("alert", result.Message);
+        }
+    }
+
+    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)
+        };
+    }
+}

BlazorWebAssembly/Pages/Terms.razor

@@ -0,0 +1,42 @@
+@page "/terms"
+
+<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
+    <h1 class="text-5xl font-black tracking-tighter text-main mb-8 uppercase">Terms of Service</h1>
+    <p class="text-sm text-muted mb-12 font-bold uppercase tracking-widest">Effective Date: May 2026</p>
+
+    <div class="space-y-12 text-muted leading-relaxed">
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">1. Acceptance of Terms</h2>
+            <p>
+                By accessing and using LibraryLuxe, you agree to be bound by these Terms of Service and all applicable laws and regulations.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">2. Use License</h2>
+            <p>
+                Permission is granted to temporarily download one copy of the materials on LibraryLuxe's website for personal, non-commercial transitory viewing only.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">3. User Conduct</h2>
+            <p>
+                Users are expected to return borrowed materials on time. Repeated late returns may lead to account suspension or loyalty point penalties.
+            </p>
+        </section>
+
+        <section>
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">4. Account Termination</h2>
+            <p>
+                We reserve the right to terminate or suspend access to our service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.
+            </p>
+        </section>
+
+        <section class="p-8 bg-card rounded-3xl border border-border">
+            <h2 class="text-xl font-bold text-main mb-4 uppercase tracking-tight">Questions?</h2>
+            <p class="mb-4">If you have any questions about these Terms, please contact us.</p>
+            <a href="/contact" class="text-primary font-bold hover:underline">Contact Support</a>
+        </section>
+    </div>
+</div>

BlazorWebAssembly/Pages/UserInsights.razor

@@ -6,7 +6,7 @@
 @using Microsoft.AspNetCore.Authorization
 @attribute [Authorize(Roles = "Librarian")]
 
-<div class="max-w-7xl mx-auto py-12 px-6">
+<div class="max-w-7xl mx-auto py-12 px-6 animate-fade">
     <!-- Header -->
     <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 gap-6">
         <div>
@@ -16,85 +16,255 @@
             </p>
         </div>
         <div class="flex gap-4">
-            <div class="bg-card border border-border px-6 py-3 rounded-2xl flex flex-col">
+            <div class="bg-card border border-border px-6 py-3 rounded-2xl flex flex-col shadow-sm">
                 <span class="text-[10px] font-black text-muted uppercase tracking-[0.2em]">Total Members</span>
-                <span class="text-2xl font-black text-main">1,284</span>
+                <span class="text-2xl font-black text-main">@(_totalMembers)</span>
             </div>
-            <div class="bg-card border border-border px-6 py-3 rounded-2xl flex flex-col text-primary border-primary/20">
-                <span class="text-[10px] font-black text-primary uppercase tracking-[0.2em]">Active Now</span>
-                <span class="text-2xl font-black text-primary">42</span>
+            <div class="bg-primary/10 border border-primary/20 px-6 py-3 rounded-2xl flex flex-col text-primary shadow-sm">
+                <span class="text-[10px] font-black text-primary uppercase tracking-[0.2em]">Active Subs</span>
+                <span class="text-2xl font-black text-primary">@(_activeSubscriptions)</span>
             </div>
         </div>
     </div>
 
-    <!-- Metrics Grid -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
-        <!-- Top Readers -->
-        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
-            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Top Readers</h3>
-            <div class="space-y-8">
-                @for (int i = 1; i <= 5; i++)
-                {
-                    <div class="flex items-center gap-4">
-                        <span class="w-8 h-8 rounded-lg bg-body flex items-center justify-center font-black text-muted text-xs">@i</span>
-                        <div class="flex-grow">
-                            <p class="font-bold text-main text-sm">Member User @i</p>
-                            <p class="text-[10px] text-muted font-medium uppercase tracking-widest">@(20 - i) Books Borrowed</p>
-                        </div>
-                        <div class="w-12 bg-body h-1 rounded-full overflow-hidden">
-                            <div class="bg-primary h-full" style="width: @(100 - (i * 15))%"></div>
-                        </div>
+    @if (_isLoading)
+    {
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+            @for (int i = 0; i < 3; i++)
+            {
+                <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm animate-pulse h-96"></div>
+            }
+        </div>
+    }
+    else
+    {
+        <!-- Metrics Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+            
+            <!-- Most Active Readers -->
+            <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm flex flex-col">
+                <div class="flex items-center justify-between mb-8 border-b border-border pb-4">
+                    <h3 class="text-xl font-bold text-main uppercase tracking-widest text-xs">Top Readers</h3>
+                    <div class="w-8 h-8 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center">
+                        <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 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>
+                <div class="space-y-6 flex-grow">
+                    @if (!_activeReaders.Any())
+                    {
+                        <p class="text-muted text-sm italic text-center py-10">No data available yet.</p>
+                    }
+                    @foreach (var (user, index) in _activeReaders.Take(5).Select((u, i) => (u, i)))
+                    {
+                        var maxRaw = _activeReaders.Max(u => u.RawValue);
+                        var pct = maxRaw > 0 ? (user.RawValue / maxRaw) * 100 : 0;
+                        <div class="flex items-center gap-4">
+                            <span class="w-8 h-8 rounded-lg bg-body flex items-center justify-center font-black text-muted text-xs">@(index + 1)</span>
+                            <div class="flex-grow">
+                                <p class="font-bold text-main text-sm truncate max-w-[150px]">@user.Name</p>
+                                <p class="text-[10px] text-muted font-black uppercase tracking-widest">@user.ValueLabel</p>
+                            </div>
+                            <div class="w-16 bg-body h-1.5 rounded-full overflow-hidden">
+                                <div class="bg-blue-500 h-full rounded-full" style="width: @pct%"></div>
+                            </div>
+                        </div>
+                    }
+                </div>
             </div>
-        </div>
 
-        <!-- Loyalty Leaders -->
-        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
-            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Point Leaders</h3>
-            <div class="space-y-8">
-                 @for (int i = 1; i <= 5; i++)
-                {
-                    <div class="flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-black text-xs">
-                            L
-                        </div>
-                        <div class="flex-grow">
-                            <p class="font-bold text-main text-sm">User Alpha @i</p>
-                            <p class="text-[10px] text-muted font-medium uppercase tracking-widest">@(5000 - (i * 500)) Points</p>
-                        </div>
-                        <span class="text-xs font-black text-primary">TIER @(6-i)</span>
+            <!-- Loyalty Leaders -->
+            <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm flex flex-col">
+                <div class="flex items-center justify-between mb-8 border-b border-border pb-4">
+                    <h3 class="text-xl font-bold text-main uppercase tracking-widest text-xs">Point Leaders</h3>
+                    <div class="w-8 h-8 rounded-full bg-amber-500/10 text-amber-500 flex items-center justify-center">
+                        <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 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>
+                <div class="space-y-6 flex-grow">
+                    @if (!_loyalty.Any())
+                    {
+                        <p class="text-muted text-sm italic text-center py-10">No data available yet.</p>
+                    }
+                    @foreach (var (user, index) in _loyalty.Take(5).Select((u, i) => (u, i)))
+                    {
+                        <div class="flex items-center gap-4">
+                            <div class="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500 font-black text-xs">
+                                @(user.Name.Length >= 2 ? user.Name.Substring(0, 2).ToUpper() : "?")
+                            </div>
+                            <div class="flex-grow">
+                                <p class="font-bold text-main text-sm truncate max-w-[150px]">@user.Name</p>
+                                <p class="text-[10px] text-muted font-black uppercase tracking-widest">@user.ValueLabel</p>
+                            </div>
+                            <span class="text-[10px] font-black text-amber-500 bg-amber-500/10 px-2 py-1 rounded-md">#@(index + 1)</span>
+                        </div>
+                    }
+                </div>
             </div>
-        </div>
 
-        <!-- Membership Distribution -->
-        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
-            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Growth Patterns</h3>
-            <div class="space-y-6">
-                <div class="flex justify-between items-end gap-2 h-40">
-                    <div class="bg-primary/20 w-full rounded-t-xl" style="height: 40%"></div>
-                    <div class="bg-primary/40 w-full rounded-t-xl" style="height: 60%"></div>
-                    <div class="bg-primary/60 w-full rounded-t-xl" style="height: 30%"></div>
-                    <div class="bg-primary/80 w-full rounded-t-xl" style="height: 90%"></div>
-                    <div class="bg-primary w-full rounded-t-xl" style="height: 100%"></div>
+            <!-- Top Subscribers -->
+            <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm flex flex-col">
+                <div class="flex items-center justify-between mb-8 border-b border-border pb-4">
+                    <h3 class="text-xl font-bold text-main uppercase tracking-widest text-xs">Top Subscribers</h3>
+                    <div class="w-8 h-8 rounded-full bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
+                        <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
+                    </div>
                 </div>
-                <div class="flex justify-between text-[10px] font-black text-muted uppercase tracking-[0.2em] px-2">
-                    <span>Mon</span>
-                    <span>Tue</span>
-                    <span>Wed</span>
-                    <span>Thu</span>
-                    <span>Fri</span>
+                <div class="space-y-6 flex-grow">
+                    @if (!_subscribers.Any())
+                    {
+                        <p class="text-muted text-sm italic text-center py-10">No data available yet.</p>
+                    }
+                    @foreach (var (user, index) in _subscribers.Take(5).Select((u, i) => (u, i)))
+                    {
+                        <div class="flex items-center gap-4">
+                            <span class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-600 flex items-center justify-center font-black text-xs border border-emerald-500/20">@(index + 1)</span>
+                            <div class="flex-grow">
+                                <p class="font-bold text-main text-sm truncate max-w-[150px]">@user.Name</p>
+                                <p class="text-[10px] text-muted font-black uppercase tracking-widest">@user.ValueLabel</p>
+                            </div>
+                        </div>
+                    }
                 </div>
             </div>
         </div>
-    </div>
+
+        <div class="bg-card border border-border rounded-2xl overflow-hidden shadow-sm">
+            <div class="p-6 border-b border-border bg-body">
+                <h3 class="text-lg font-bold text-main">Full Member Insights (All Users)</h3>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-collapse">
+                    <thead>
+                        <tr class="bg-body border-b border-border">
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Member</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest">Joined Date</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest text-right">Lifetime Points</th>
+                            <th class="px-6 py-4 text-[10px] font-bold text-muted uppercase tracking-widest text-right">Books Read</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-border">
+                        @foreach (var user in _allUsers.OrderByDescending(u => u.CreatedAt))
+                        {
+                            var points = _loyalty.FirstOrDefault(l => l.UserId == user.Id)?.RawValue ?? 0;
+                            var books = _activeReaders.FirstOrDefault(r => r.UserId == user.Id)?.RawValue ?? 0;
+                            
+                            <tr class="hover:bg-body transition-colors">
+                                <td class="px-6 py-5">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs border border-primary/20">
+                                            @(user.FullName?.Substring(0, Math.Min(2, user.FullName.Length)).ToUpper() ?? "U")
+                                        </div>
+                                        <p class="text-sm font-bold text-main">@user.FullName</p>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-5 text-sm font-medium text-muted">@user.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                <td class="px-6 py-5 text-right font-black text-amber-500">@points.ToString("N0")</td>
+                                <td class="px-6 py-5 text-right font-black text-blue-500">@books.ToString("N0")</td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    }
 </div>
 
 @code {
+    private bool _isLoading = true;
+    
+    private List<InsightItem> _subscribers = new();
+    private List<InsightItem> _loyalty = new();
+    private List<InsightItem> _activeReaders = new();
+    
+    private List<UserDto> _allUsers = new();
+    private int _totalMembers = 0;
+    private int _activeSubscriptions = 0;
+
     protected override async Task OnInitializedAsync()
     {
-        // Data loading logic here
+        await LoadInsightsAsync();
+    }
+
+    private async Task LoadInsightsAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            var users = await ApiClient.GetUsersAsync();
+            _allUsers = users.ToList();
+            _totalMembers = _allUsers.Count;
+
+            var borrowings = await ApiClient.GetAllBorrowingsAsync();
+            var subscriptions = await ApiClient.GetAllSubscriptionsAsync();
+            var memberships = await ApiClient.GetMembershipsAsync();
+            var loyaltyHistory = await ApiClient.GetAllMembersPointsHistoryAsync();
+
+            _activeSubscriptions = subscriptions.Count(s => s.IsActive);
+
+            // 1. Top Subscribers (Total Spent)
+            var membershipPriceMap = memberships.ToDictionary(m => m.Id, m => m.Price);
+            _subscribers = subscriptions
+                .GroupBy(s => s.UserId)
+                .Select(g => {
+                    var user = _allUsers.FirstOrDefault(u => u.Id == g.Key);
+                    var totalSpent = g.Sum(s => membershipPriceMap.TryGetValue(s.MembershipId, out var price) ? price : 0);
+                    return new InsightItem {
+                        UserId = g.Key,
+                        Name = user?.FullName ?? "Unknown User",
+                        RawValue = (double)totalSpent,
+                        ValueLabel = $"MMK {totalSpent:N0}"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+
+            // 2. Top Loyalty (Earned Points only)
+            _loyalty = loyaltyHistory
+                .Select(lh => {
+                    var user = _allUsers.FirstOrDefault(u => u.Id == lh.UserId);
+                    var totalEarned = lh.History.Where(h => h.PointDelta > 0).Sum(h => h.PointDelta);
+                    return new InsightItem {
+                        UserId = lh.UserId,
+                        Name = user?.FullName ?? lh.UserName,
+                        RawValue = totalEarned,
+                        ValueLabel = $"{totalEarned:N0} pts"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+
+            // 3. Most Active (Approved Returns only)
+            _activeReaders = borrowings
+                .Where(b => b.Status == "Returned")
+                .GroupBy(b => b.UserId)
+                .Select(g => {
+                    var user = _allUsers.FirstOrDefault(u => u.Id == g.Key);
+                    var count = g.Count();
+                    return new InsightItem {
+                        UserId = g.Key,
+                        Name = user?.FullName ?? "Unknown User",
+                        RawValue = count,
+                        ValueLabel = $"{count} books"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading insights: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private class InsightItem
+    {
+        public Guid UserId { get; set; }
+        public string Name { get; set; } = "";
+        public double RawValue { get; set; }
+        public string ValueLabel { get; set; } = "";
     }
 }

BlazorWebAssembly/Pages/Wishlist.razor

@@ -2,7 +2,9 @@
 @using LibraryManagement.Shared.Models
 @using BlazorWebAssembly.Services
 @inject LibraryApiClient ApiClient
+@inject WishlistService WishlistService
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
 <div class="max-w-6xl mx-auto py-12 px-6">
     <!-- Header -->
@@ -56,7 +58,7 @@
                             <span class='px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest @(book.AvailableCopies > 0 ? "bg-green-500/10 text-green-600" : "bg-orange-500/10 text-orange-600")'>
                                 @(book.AvailableCopies > 0 ? "Available" : "Waiting")
                             </span>
-                            <button class="text-xs font-bold text-red-400 hover:text-red-500">Remove</button>
+                            <button @onclick="() => RemoveFromWishlistAsync(book.Id)" class="text-xs font-bold text-red-400 hover:text-red-500 transition-colors">Remove</button>
                         </div>
                     </div>
                 </div>
@@ -66,14 +68,32 @@
 </div>
 
 @code {
-    private bool _isLoading = false;
+    private bool _isLoading = true;
     private List<BookDto> _wishlistItems = new();
 
     protected override async Task OnInitializedAsync()
     {
-        // Mocking for now, would use a real service
+        await LoadData();
+    }
+
+    private async Task LoadData()
+    {
         _isLoading = true;
-        await Task.Delay(500); 
-        _isLoading = false;
+        try
+        {
+            _wishlistItems = await WishlistService.GetWishlistAsync();
+        }
+        catch { }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private async Task RemoveFromWishlistAsync(int bookId)
+    {
+        await WishlistService.RemoveFromWishlistAsync(bookId);
+        await LoadData();
+        await JS.InvokeVoidAsync("alert", "Removed from wishlist");
     }
 }

BlazorWebAssembly/Program.cs

@@ -32,4 +32,7 @@ builder.Services.AddScoped<ThemeService>();
 // Register LibraryApiClient
 builder.Services.AddScoped<LibraryApiClient>();
 
+// Register WishlistService
+builder.Services.AddScoped<WishlistService>();
+
 await builder.Build().RunAsync();

BlazorWebAssembly/Providers/JwtAuthenticationStateProvider.cs

@@ -26,9 +26,23 @@ namespace BlazorWebAssembly.Providers
             if (string.IsNullOrWhiteSpace(token))
                 return _anonymous;
 
+            var claims = ParseClaimsFromJwt(token);
+            
+            // Check expiration
+            var expClaim = claims.FirstOrDefault(c => c.Type == "exp");
+            if (expClaim != null && long.TryParse(expClaim.Value, out long expTime))
+            {
+                var expDateTime = DateTimeOffset.FromUnixTimeSeconds(expTime).UtcDateTime;
+                if (expDateTime <= DateTime.UtcNow)
+                {
+                    await _localStorage.RemoveItemAsync("authToken");
+                    return _anonymous;
+                }
+            }
+
             _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", token);
 
-            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt")));
+            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt")));
         }
 
         public void NotifyUserAuthentication(string token)
@@ -57,16 +71,20 @@ namespace BlazorWebAssembly.Providers
             {
                 foreach (var kvp in keyValuePairs)
                 {
+                    string claimType = kvp.Key;
+                    if (claimType == "role" || claimType == "Role") claimType = ClaimTypes.Role;
+                    else if (claimType == "unique_name" || claimType == "name") claimType = ClaimTypes.Name;
+
                     if (kvp.Value is JsonElement element && element.ValueKind == JsonValueKind.Array)
                     {
                         foreach (var item in element.EnumerateArray())
                         {
-                            claims.Add(new Claim(kvp.Key, item.ToString()));
+                            claims.Add(new Claim(claimType, item.ToString()));
                         }
                     }
                     else
                     {
-                        claims.Add(new Claim(kvp.Key, kvp.Value.ToString() ?? ""));
+                        claims.Add(new Claim(claimType, kvp.Value.ToString() ?? ""));
                     }
                 }
             }

BlazorWebAssembly/Services/LibraryApiClient.cs

@@ -1,6 +1,6 @@
+using System.Text.Json.Serialization;
 using System.Net.Http.Json;
 using System.Text.Json;
-using System.Text.Json.Serialization;
 using LibraryManagement.Shared.Models;
 
 namespace BlazorWebAssembly.Services
@@ -8,12 +8,30 @@ namespace BlazorWebAssembly.Services
     public class LibraryApiClient
     {
         private readonly HttpClient _httpClient;
-
         public LibraryApiClient(HttpClient httpClient)
         {
             _httpClient = httpClient;
         }
 
+        #region Auth
+        public async Task<AuthResponse?> LoginAsync(LoginRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/login", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<AuthResponse>() : null;
+        }
+
+        public async Task<AuthResponse?> RegisterAsync(RegisterRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/register", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<AuthResponse>() : null;
+        }
+
+        public async Task<object?> GetProfileAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<object>("api/auth/me");
+        }
+        #endregion
+
         #region Books
         public async Task<IEnumerable<BookDto>> GetBooksAsync(int? categoryId = null)
         {
@@ -26,6 +44,13 @@ namespace BlazorWebAssembly.Services
             return await _httpClient.GetFromJsonAsync<BookDto>($"api/books/{id}");
         }
 
+        public async Task<List<BookDto>> GetBooksByIdsAsync(List<int> ids)
+        {
+            if (ids == null || !ids.Any()) return new List<BookDto>();
+            var idsStr = string.Join(",", ids);
+            return await _httpClient.GetFromJsonAsync<List<BookDto>>($"api/books/by-ids?ids={idsStr}") ?? new List<BookDto>();
+        }
+
         public async Task<BookDto?> CreateBookAsync(BookCreateRequest request)
         {
             var response = await _httpClient.PostAsJsonAsync("api/books", request);
@@ -67,12 +92,6 @@ namespace BlazorWebAssembly.Services
         {
             return await _httpClient.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings") ?? Enumerable.Empty<BorrowingDto>();
         }
-
-        public async Task<bool> RequestReturnAsync(Guid borrowingId)
-        {
-            var response = await _httpClient.PostAsync($"api/borrowings/return-request/{borrowingId}", null);
-            return response.IsSuccessStatusCode;
-        }
         #endregion
 
         #region Categories
@@ -80,6 +99,23 @@ namespace BlazorWebAssembly.Services
         {
             return await _httpClient.GetFromJsonAsync<IEnumerable<CategoryDto>>("api/categories") ?? Enumerable.Empty<CategoryDto>();
         }
+
+        public async Task<IEnumerable<CategoryDto>> GetCategoriesWithBooksAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<CategoryDto>>("api/categories/with-books") ?? Enumerable.Empty<CategoryDto>();
+        }
+
+        public async Task<CategoryDto?> CreateCategoryAsync(CategoryCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/categories", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<CategoryDto>() : null;
+        }
+
+        public async Task<bool> DeleteCategoryAsync(int id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/categories/{id}");
+            return response.IsSuccessStatusCode;
+        }
         #endregion
 
         #region Subscriptions
@@ -90,41 +126,273 @@ namespace BlazorWebAssembly.Services
 
         public async Task<SubscriptionDto?> GetMySubscriptionAsync()
         {
-            try { return await _httpClient.GetFromJsonAsync<SubscriptionDto>("api/subscriptions/me"); }
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<SubscriptionDto>("api/subscriptions/me");
+            }
             catch { return null; }
         }
 
+        public async Task<IEnumerable<SubscriptionDto>> GetMyAllSubscriptionsAsync()
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<IEnumerable<SubscriptionDto>>("api/subscriptions/me/all") ?? Enumerable.Empty<SubscriptionDto>();
+            }
+            catch { return Enumerable.Empty<SubscriptionDto>(); }
+        }
+
         public async Task<SubscriptionDto?> SubscribeAsync(SubscribeRequest request)
         {
             var response = await _httpClient.PostAsJsonAsync("api/subscriptions/subscribe", request);
             return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<SubscriptionDto>() : null;
         }
+
+        public async Task<SubscriptionDto?> GetUserSubscriptionAsync(Guid userId)
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<SubscriptionDto>($"api/subscriptions/user/{userId}");
+            }
+            catch { return null; }
+        }
+
+        public async Task<SubscriptionDto?> AdminSubscribeAsync(AdminSubscribeRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/subscriptions/admin-subscribe", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<SubscriptionDto>() : null;
+        }
+
+        public async Task<IEnumerable<SubscriptionDto>> GetAllSubscriptionsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<SubscriptionDto>>("api/subscriptions/all") ?? Enumerable.Empty<SubscriptionDto>();
+        }
         #endregion
 
-        #region Loyalty
         public async Task<LoyaltyAccountDto?> GetMyLoyaltyAccountAsync()
         {
             try
             {
+                var response = await _httpClient.GetAsync("api/Loyalty/my-account");
+                if (response.IsSuccessStatusCode)
+                {
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString }; 
+                    return await response.Content.ReadFromJsonAsync<LoyaltyAccountDto>(options);
+                }
+                return null;
+            }
+            catch
+            {
+                return null;
+            }
+        }
+
+        public async Task<IEnumerable<LoyaltyRedemptionDto>> GetMyRedemptionsAsync()
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>("api/Loyalty/my-redemptions") ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
+        }
+
+        public async Task<IEnumerable<LoyaltyRedemptionDto>> GetMyPendingRedemptionsAsync()
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>("api/Loyalty/my-pending-redemptions") ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
+        }
+
+        public async Task<IEnumerable<PointHistoryEntryDto>> GetPointsHistoryAsync(string accountId)
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<IEnumerable<PointHistoryEntryDto>>("api/Loyalty/my-points-history") ?? Enumerable.Empty<PointHistoryEntryDto>();
+            }
+            catch { return Enumerable.Empty<PointHistoryEntryDto>(); }
+        }
+
+        public async Task<IEnumerable<UserPointsHistoryDto>> GetAllMembersPointsHistoryAsync()
+        {
+            try {
                 var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
-                return await _httpClient.GetFromJsonAsync<LoyaltyAccountDto>("api/Loyalty/my-account", options);
+                var response = await _httpClient.GetAsync("api/Loyalty/admin/all-points-history");
+                var raw = await response.Content.ReadAsStringAsync();
+                if (!response.IsSuccessStatusCode)
+                    return Enumerable.Empty<UserPointsHistoryDto>();
+
+                var data = JsonSerializer.Deserialize<List<UserPointsHistoryDto>>(raw, options) ?? new List<UserPointsHistoryDto>();
+                foreach (var member in data)
+                {
+                    member.History = member.History?.ToList() ?? new List<PointHistoryEntryDto>();
+                    member.Redemptions = member.Redemptions?.ToList() ?? new List<LoyaltyRedemptionDto>();
+                }
+                return data;
+            } catch { return Enumerable.Empty<UserPointsHistoryDto>(); }
+        }
+
+        public async Task<bool> RequestReturnAsync(Guid borrowingId)
+        {
+            var response = await _httpClient.PostAsync($"api/borrowings/return-request/{borrowingId}", null);
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<(bool Success, string Message)> ClaimRewardAsync(string rewardId, string? notes = null)
+        {
+            try
+            {
+                var request = new ClaimRewardRequestDto { RewardId = rewardId, Notes = notes };
+                var response = await _httpClient.PostAsJsonAsync("api/Loyalty/claim", request);
+
+                if (response.IsSuccessStatusCode)
+                {
+                    var result = await response.Content.ReadFromJsonAsync<JsonDocument>();
+                    string msg = "Reward claimed successfully!";
+                    if (result != null && result.RootElement.TryGetProperty("message", out var msgElement))
+                    {
+                        msg = msgElement.GetString() ?? msg;
+                    }
+                    return (true, msg);
+                }
+                else
+                {
+                    var error = await response.Content.ReadFromJsonAsync<JsonDocument>();
+                    string msg = "Failed to claim reward.";
+                    if (error != null && error.RootElement.TryGetProperty("message", out var msgElement))
+                    {
+                        msg = msgElement.GetString() ?? msg;
+                    }
+                    return (false, msg);
+                }
+            }
+            catch (Exception ex)
+            {
+                return (false, $"An error occurred: {ex.Message}");
             }
-            catch { return null; }
         }
 
         public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
         {
-            return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("api/Loyalty/rewards") ?? Enumerable.Empty<LoyaltyRewardDto>();
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("api/Loyalty/rewards") ?? Enumerable.Empty<LoyaltyRewardDto>();
+            }
+            catch { return Enumerable.Empty<LoyaltyRewardDto>(); }
+        }
+
+        #region Users
+        public async Task<IEnumerable<UserDto>> GetUsersAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<UserDto>>("api/users") ?? Enumerable.Empty<UserDto>();
         }
 
-        public async Task<(bool Success, string Message)> ClaimRewardAsync(string rewardId, string? notes = null)
+        public async Task<UserDto?> GetUserAsync(Guid id)
         {
-            var request = new ClaimRewardRequestDto { RewardId = rewardId, Notes = notes };
-            var response = await _httpClient.PostAsJsonAsync("api/Loyalty/claim", request);
-            
-            if (response.IsSuccessStatusCode) return (true, "Claimed successfully!");
-            var error = await response.Content.ReadAsStringAsync();
-            return (false, error);
+            return await _httpClient.GetFromJsonAsync<UserDto>($"api/users/{id}");
+        }
+
+        public async Task<UserDto?> CreateUserAsync(UserCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/users", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<UserDto>() : null;
+        }
+
+        public async Task<UserDto?> UpdateUserAsync(Guid id, UserUpdateRequest request)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/users/{id}", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<UserDto>() : null;
+        }
+
+        public async Task<bool> UpdateUserRoleAsync(Guid id, string role)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/users/role/{id}", new UserRoleUpdateRequest { Role = role });
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<bool> DeleteUserAsync(Guid id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/users/{id}");
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+
+        public async Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync()
+        {
+            try
+            {
+                var response = await _httpClient.GetAsync("api/Loyalty/admin/redemptions/pending");
+                if (response.IsSuccessStatusCode)
+                {
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                }
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
+        }
+
+        public async Task<(bool Success, string Message)> FulfillRedemptionAsync(string id)
+        {
+            try
+            {
+                var response = await _httpClient.PostAsync($"api/Loyalty/admin/redemptions/{id}/fulfill", null);
+                if (response.IsSuccessStatusCode)
+                {
+                    var result = await response.Content.ReadFromJsonAsync<JsonDocument>();
+                    string msg = "Redemption fulfilled successfully!";
+                    if (result != null && result.RootElement.TryGetProperty("message", out var msgElement))
+                    {
+                        msg = msgElement.GetString() ?? msg;
+                    }
+                    return (true, msg);
+                }
+                else
+                {
+                    var error = await response.Content.ReadFromJsonAsync<JsonDocument>();
+                    string msg = "Failed to fulfill redemption.";
+                    if (error != null && error.RootElement.TryGetProperty("message", out var msgElement))
+                    {
+                        msg = msgElement.GetString() ?? msg;
+                    }
+                    return (false, msg);
+                }
+            }
+            catch (Exception ex) { return (false, $"Error: {ex.Message}"); }
+        }
+        
+        #region Notifications
+        public async Task<IEnumerable<NotificationDto>> GetNotificationsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<NotificationDto>>("api/notifications") ?? Enumerable.Empty<NotificationDto>();
+        }
+
+        public async Task<int> GetUnreadNotificationCountAsync()
+        {
+            try
+            {
+                return await _httpClient.GetFromJsonAsync<int>("api/notifications/unread-count");
+            }
+            catch { return 0; }
+        }
+
+        public async Task<bool> MarkNotificationsReadAsync()
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/notifications/mark-read", new { });
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<bool> UpdateFcmTokenAsync(string fcmToken)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/users/fcm-token", new { fcmToken });
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<bool> SyncWishlistAsync(List<int> bookIds)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/wishlist/sync", bookIds);
+            return response.IsSuccessStatusCode;
         }
         #endregion
     }

BlazorWebAssembly/Services/WishlistService.cs

@@ -0,0 +1,129 @@
+using LibraryManagement.Shared.Models;
+using Blazored.LocalStorage;
+using System.Text.Json;
+
+namespace BlazorWebAssembly.Services;
+
+public class WishlistService
+{
+    private readonly ILocalStorageService _localStorage;
+    private readonly LibraryApiClient _apiClient;
+    private const string WishlistKey = "user_wishlist";
+    private const string FavouriteKey = "user_favourites";
+
+    public WishlistService(ILocalStorageService localStorage, LibraryApiClient apiClient)
+    {
+        _localStorage = localStorage;
+        _apiClient = apiClient;
+    }
+
+    public async Task SyncCurrentWishlistAsync()
+    {
+        var list = await GetWishlistAsync();
+        await SyncWithServerAsync(list);
+    }
+
+    private async Task SyncWithServerAsync(List<BookDto> list)
+    {
+        try
+        {
+            var bookIds = list.Select(b => b.Id).ToList();
+            await _apiClient.SyncWishlistAsync(bookIds);
+        }
+        catch { }
+    }
+
+    public async Task<List<BookDto>> GetWishlistAsync()
+    {
+        try
+        {
+            var result = await _localStorage.GetItemAsStringAsync(WishlistKey);
+            if (!string.IsNullOrWhiteSpace(result))
+            {
+                var localList = JsonSerializer.Deserialize<List<BookDto>>(result) ?? new List<BookDto>();
+                if (!localList.Any()) return localList;
+
+                // Refresh from server
+                var latestList = await _apiClient.GetBooksByIdsAsync(localList.Select(b => b.Id).ToList());
+                if (latestList.Any())
+                {
+                    // Update local storage with fresh data
+                    await _localStorage.SetItemAsStringAsync(WishlistKey, JsonSerializer.Serialize(latestList));
+                    return latestList;
+                }
+                return localList;
+            }
+        }
+        catch { }
+        return new List<BookDto>();
+    }
+
+    public async Task AddToWishlistAsync(BookDto book)
+    {
+        var list = await GetWishlistAsync();
+        if (!list.Any(b => b.Id == book.Id))
+        {
+            list.Add(book);
+            await _localStorage.SetItemAsStringAsync(WishlistKey, JsonSerializer.Serialize(list));
+            await SyncWithServerAsync(list);
+        }
+    }
+
+    public async Task RemoveFromWishlistAsync(int bookId)
+    {
+        var list = await GetWishlistAsync();
+        var item = list.FirstOrDefault(b => b.Id == bookId);
+        if (item != null)
+        {
+            list.Remove(item);
+            await _localStorage.SetItemAsStringAsync(WishlistKey, JsonSerializer.Serialize(list));
+            await SyncWithServerAsync(list);
+        }
+    }
+
+    public async Task<List<BookDto>> GetFavouritesAsync()
+    {
+        try
+        {
+            var result = await _localStorage.GetItemAsStringAsync(FavouriteKey);
+            if (!string.IsNullOrWhiteSpace(result))
+            {
+                var localList = JsonSerializer.Deserialize<List<BookDto>>(result) ?? new List<BookDto>();
+                if (!localList.Any()) return localList;
+
+                // Refresh from server
+                var latestList = await _apiClient.GetBooksByIdsAsync(localList.Select(b => b.Id).ToList());
+                if (latestList.Any())
+                {
+                    // Update local storage with fresh data
+                    await _localStorage.SetItemAsStringAsync(FavouriteKey, JsonSerializer.Serialize(latestList));
+                    return latestList;
+                }
+                return localList;
+            }
+        }
+        catch { }
+        return new List<BookDto>();
+    }
+
+    public async Task AddToFavouritesAsync(BookDto book)
+    {
+        var list = await GetFavouritesAsync();
+        if (!list.Any(b => b.Id == book.Id))
+        {
+            list.Add(book);
+            await _localStorage.SetItemAsStringAsync(FavouriteKey, JsonSerializer.Serialize(list));
+        }
+    }
+
+    public async Task RemoveFromFavouriteAsync(int bookId)
+    {
+        var list = await GetFavouritesAsync();
+        var item = list.FirstOrDefault(b => b.Id == bookId);
+        if (item != null)
+        {
+            list.Remove(item);
+            await _localStorage.SetItemAsStringAsync(FavouriteKey, JsonSerializer.Serialize(list));
+        }
+    }
+}

BlazorWebAssembly/wwwroot/firebase-init.js

@@ -0,0 +1,50 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-messaging.js";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBodr7GJuCFdJfBYV8XBY77P9A4Wrxz_CA",
+  authDomain: "library-ths.firebaseapp.com",
+  projectId: "library-ths",
+  storageBucket: "library-ths.firebasestorage.app",
+  messagingSenderId: "222408896403",
+  appId: "1:222408896403:web:8533e26175c043e40a0266",
+  measurementId: "G-LVVGH9T1K3"
+};
+
+const app = initializeApp(firebaseConfig);
+const messaging = getMessaging(app);
+
+window.getFcmToken = async () => {
+    try {
+        const permission = await Notification.requestPermission();
+        if (permission === 'granted') {
+            // IMPORTANT: Replace 'YOUR_VAPID_KEY' with your actual key from 
+            // Firebase Console -> Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates
+            console.log('Registering service worker...');
+            const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
+            console.log('Service worker registered successfully:', registration.scope);
+
+            const token = await getToken(messaging, { 
+                vapidKey: 'BNgDM2Eq7TPwap0FhF-xv0CK6cS5EfshHOiC8z4916XnewFWYKdAfhwHctsgte5q8jQicQO8PEDVeymlXToasVQ',
+                serviceWorkerRegistration: registration
+            });
+            return token;
+        } else {
+            throw new Error('Permission not granted for notifications. Current state: ' + permission);
+        }
+    } catch (error) {
+        console.error('Error getting FCM token:', error);
+        throw new Error(error.message || error.toString());
+    }
+};
+
+onMessage(messaging, (payload) => {
+    console.log('Foreground Message received: ', payload);
+    
+    const title = payload.notification.title;
+    const body = payload.notification.body;
+
+    if (window.showToast) {
+        window.showToast(title + ": " + body, 'success');
+    }
+});

BlazorWebAssembly/wwwroot/firebase-messaging-sw.js

@@ -0,0 +1,37 @@
+// Scripts for firebase and messaging
+// Service worker တွေမှာ import အစား importScripts ကို သုံးပါတယ်
+importScripts('https://www.gstatic.com/firebasejs/11.6.1/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/11.6.1/firebase-messaging-compat.js');
+
+// --- Firebase Config ---
+// Step 2 ကနေ ရခဲ့တဲ့ ကျွန်တော်တို့ရဲ့ Firebase Project Configuration ကို ဒီနေရာမှာ ထည့်ပေးပါ
+const firebaseConfig = {
+  apiKey: "AIzaSyBodr7GJuCFdJfBYV8XBY77P9A4Wrxz_CA",
+  authDomain: "library-ths.firebaseapp.com",
+  projectId: "library-ths",
+  storageBucket: "library-ths.firebasestorage.app",
+  messagingSenderId: "222408896403",
+  appId: "1:222408896403:web:8533e26175c043e40a0266",
+  measurementId: "G-LVVGH9T1K3"
+};
+
+// Service worker မှာ Firebase app ကို initialize လုပ်ခြင်း
+firebase.initializeApp(firebaseConfig);
+
+// Background မှာ message တွေ လက်ခံနိုင်ဖို့ Firebase Messaging instance ကို ရယူခြင်း
+const messaging = firebase.messaging();
+
+// Background မှာရောက်လာတဲ့ message တွေကို ကိုင်တွယ်ဖြေရှင်းမယ့် အပိုင်း
+messaging.onBackgroundMessage(function(payload) {
+    console.log('[firebase-messaging-sw.js] Received background message ', payload);
+
+    const title = payload.notification.title;
+    const body = payload.notification.body;
+
+    const notificationOptions = {
+        body: body,
+        icon: '/favicon.png' 
+    };
+
+    self.registration.showNotification(title, notificationOptions);
+});

BlazorWebAssembly/wwwroot/index.html

@@ -63,6 +63,14 @@
     </div>
     
     <script src="_framework/blazor.webassembly.js"></script>
+    
+    <!-- Firebase Push Notifications -->
+    <script type="module" src="firebase-init.js"></script>
+    <script>
+        window.showToast = function (message, type) {
+            alert(message); // simple fallback, can be enhanced with UI toast
+        };
+    </script>
 </body>
 
 <style>