add: small fixes, UI designing

Backend/Features/Loyalty/LoyaltyController.cs

@@ -119,7 +119,34 @@ namespace Backend.Features.Loyalty
         [Authorize(Roles = "Librarian")]
         public async Task<IActionResult> GetPendingRedemptions()
         {
-            var redemptions = await _loyaltyService.GetPendingRedemptionsAsync();
+            var redemptions = (await _loyaltyService.GetPendingRedemptionsAsync()).ToList();
+            
+            // Map names
+            var guidList = redemptions
+                .Where(r => !string.IsNullOrEmpty(r.ExternalUserId) && Guid.TryParse(r.ExternalUserId, out _))
+                .Select(r => Guid.Parse(r.ExternalUserId))
+                .Distinct()
+                .ToList();
+
+            var users = await _context.Users
+                .Where(u => guidList.Contains(u.Id))
+                .Select(u => new { u.Id, u.FullName })
+                .ToListAsync();
+
+            var userMap = users.ToDictionary(u => u.Id.ToString(), u => u.FullName);
+
+            foreach (var r in redemptions)
+            {
+                if (!string.IsNullOrEmpty(r.ExternalUserId) && userMap.TryGetValue(r.ExternalUserId, out var name))
+                {
+                    r.UserName = name;
+                }
+                else
+                {
+                    r.UserName = "Unknown Member";
+                }
+            }
+
             return Ok(redemptions);
         }
 

Backend/Features/Loyalty/LoyaltyService.cs

@@ -35,19 +35,20 @@ namespace Backend.Features.Loyalty
         {
             _httpClient = httpClient;
             _logger = logger;
-            if (!_httpClient.DefaultRequestHeaders.Contains("x-system-id"))
-            {
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-            }
+            _httpClient.DefaultRequestHeaders.Remove("x-system-id");
+            _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+        }
+
+        private class LoyaltyResponseWrapper<T>
+        {
+            [JsonPropertyName("items")]
+            public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();
         }
 
         public async Task<bool> RegisterUserAsync(string externalUserId, string email, string mobile)
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var payload = new
                 {
                     externalUserId = externalUserId,
@@ -70,9 +71,6 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var payload = new
                 {
                     systemId = SystemId,
@@ -99,9 +97,6 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.GetAsync($"/api/v1/accounts/lookup/{externalUserId}?systemId={SystemId}");
                 
                 if (response.IsSuccessStatusCode)
@@ -137,7 +132,7 @@ namespace Backend.Features.Loyalty
                     notes = notes
                 };
 
-                var response = await _httpClient.PostAsJsonAsync($"/api/v1/redemption/claim?systemId={SystemId}", payload);
+                var response = await _httpClient.PostAsJsonAsync($"/api/v1/redemptions/claim?systemId={SystemId}", payload);
                 if (response.IsSuccessStatusCode) return (true, "Reward claimed successfully!");
 
                 var error = await response.Content.ReadAsStringAsync();
@@ -154,50 +149,62 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
-                var response = await _httpClient.GetAsync($"/api/v1/redemption/history/{externalUserId}?systemId={SystemId}");
+                var response = await _httpClient.GetAsync($"/api/v1/redemptions/history/{externalUserId}?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
                     var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
-                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                    var wrapper = await response.Content.ReadFromJsonAsync<LoyaltyResponseWrapper<LoyaltyRedemptionDto>>(options);
+                    return wrapper?.Items ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
-            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, $"Error fetching user redemptions for {externalUserId}.");
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
         }
 
         public async Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync()
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.GetAsync($"/api/v1/admin/redemptions/pending?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
                     var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
-                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                    var wrapper = await response.Content.ReadFromJsonAsync<LoyaltyResponseWrapper<LoyaltyRedemptionDto>>(options);
+                    return wrapper?.Items ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                }
+                else
+                {
+                    var content = await response.Content.ReadAsStringAsync();
+                    _logger.LogWarning($"Failed to fetch pending redemptions. Status: {response.StatusCode}, Content: {content}");
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
-            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error fetching pending redemptions.");
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
         }
 
         public async Task<IEnumerable<LoyaltyRedemptionDto>> GetRedemptionsHistoryAsync()
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.GetAsync($"/api/v1/admin/redemptions/history?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
                     var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
-                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                    var wrapper = await response.Content.ReadFromJsonAsync<LoyaltyResponseWrapper<LoyaltyRedemptionDto>>(options);
+                    return wrapper?.Items ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                }
+                else
+                {
+                    var content = await response.Content.ReadAsStringAsync();
+                    _logger.LogWarning($"Failed to fetch redemption history. Status: {response.StatusCode}, Content: {content}");
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
@@ -212,22 +219,25 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.PutAsJsonAsync($"/api/v1/admin/redemptions/{redemptionId}/status?systemId={SystemId}", new { systemId = SystemId, status });
+                if (!response.IsSuccessStatusCode)
+                {
+                    var content = await response.Content.ReadAsStringAsync();
+                    _logger.LogWarning($"Failed to update redemption status. Status: {response.StatusCode}, Content: {content}");
+                }
                 return response.IsSuccessStatusCode;
             }
-            catch { return false; }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, $"Error updating redemption status for {redemptionId}.");
+                return false;
+            }
         }
 
         public async Task<IEnumerable<PointHistoryEntryDto>> GetPointsHistoryAsync(string accountId)
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.GetAsync($"/api/v1/accounts/{accountId}/history?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
@@ -247,9 +257,6 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                _httpClient.DefaultRequestHeaders.Clear();
-                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
-
                 var response = await _httpClient.GetAsync($"/api/v1/rewards/active?systemId={SystemId}");
                 
                 if (response.IsSuccessStatusCode)

Backend/Features/Subscriptions/SubscriptionService.cs

@@ -12,7 +12,7 @@ namespace Backend.Features.Subscriptions
         Task<SubscriptionDto?> GetUserSubscriptionAsync(Guid userId);
         Task<IEnumerable<SubscriptionDto>> GetUserAllSubscriptionsAsync(Guid userId);
         Task<bool> HandleLoyaltyRedemptionAsync(Guid userId, string rewardId, string rewardName, string redemptionId);
-        Task<SubscriptionDto> SubscribeUserAsync(Guid userId, int membershipId);
+        Task<SubscriptionDto> SubscribeUserAsync(Guid userId, int membershipId, string? redemptionId = null);
         Task<IEnumerable<SubscriptionDto>> GetAllSubscriptionsAsync();
     }
 
@@ -71,19 +71,14 @@ namespace Backend.Features.Subscriptions
         {
             try
             {
-                // Load all memberships into memory (small collection)
                 var allMemberships = await _context.Memberships.ToListAsync();
-                
                 Membership? membership = null;
 
-                // 1. First try exact match by RewardId (most precise)
                 if (!string.IsNullOrEmpty(rewardId))
                 {
                     membership = allMemberships.FirstOrDefault(m => m.RewardId == rewardId);
                 }
 
-                // 2. Fallback: in-memory string matching on rewardName vs membership Type
-                //    e.g. "Free Monthly Basic Membership" contains words "Basic" and "Monthly"
                 if (membership == null && !string.IsNullOrEmpty(rewardName))
                 {
                     var normalizedRewardName = rewardName.ToLowerInvariant();
@@ -100,11 +95,7 @@ namespace Backend.Features.Subscriptions
                     return false;
                 }
 
-                System.Diagnostics.Debug.WriteLine($"Matched membership '{membership.Type}' (Id={membership.Id}) for rewardName='{rewardName}'");
-                
-                // 3. Grant the membership (will be queued if they already have one)
-                await SubscribeUserAsync(userId, membership.Id);
-
+                await SubscribeUserAsync(userId, membership.Id, redemptionId);
                 return true;
             }
             catch (Exception ex)
@@ -114,21 +105,17 @@ namespace Backend.Features.Subscriptions
             }
         }
 
-        public async Task<SubscriptionDto> SubscribeUserAsync(Guid userId, int membershipId)
+        public async Task<SubscriptionDto> SubscribeUserAsync(Guid userId, int membershipId, string? redemptionId = null)
         {
             var membership = await _context.Memberships.FindAsync(membershipId);
             if (membership == null) throw new Exception("Membership plan not found.");
 
-            // Find the latest expiry date for this user to enable queuing
-            // We look at all active or future subscriptions
             var latestSubscription = await _context.UserSubscriptions
                 .Where(s => s.UserId == userId && s.IsActive)
                 .OrderByDescending(s => s.ExpiryDate)
                 .FirstOrDefaultAsync();
 
             DateTime startDate = DateTime.UtcNow;
-            
-            // If there's an existing subscription that expires in the future, start after it
             if (latestSubscription != null && latestSubscription.ExpiryDate > startDate)
             {
                 startDate = latestSubscription.ExpiryDate;
@@ -140,29 +127,25 @@ namespace Backend.Features.Subscriptions
                 MembershipId = membershipId,
                 StartDate = startDate,
                 ExpiryDate = startDate.AddMonths(membership.DurationMonths),
-                IsActive = true
+                IsActive = true,
+                ExternalRedemptionId = redemptionId,
+                Status = "Active"
             };
 
             _context.UserSubscriptions.Add(subscription);
             await _context.SaveChangesAsync();
 
-            // Explicitly load context for DTO
             await _context.Entry(subscription).Reference(s => s.Membership).LoadAsync();
             await _context.Entry(subscription).Reference(s => s.User).LoadAsync();
 
-            // Loyalty Integration: Send SUBSCRIBE event
-            string externalUserId = userId.ToString();
-            string userMobile = subscription.User?.PhoneNumber ?? "0000000000";
-            string userEmail = subscription.User?.Email ?? "No Email";
-
             await _loyaltyService.ProcessEventAsync(
-                externalUserId: externalUserId,
+                externalUserId: userId.ToString(),
                 eventKey: "SUBSCRIBE",
                 eventValue: (double)membership.Price,
                 referenceId: $"SUB-{subscription.Id}",
                 description: $"Purchased Membership: {membership.Type}",
-                email: userEmail,
-                mobile: userMobile
+                email: subscription.User?.Email ?? "No Email",
+                mobile: subscription.User?.PhoneNumber ?? "0000000000"
             );
 
             return MapToDto(subscription);
@@ -191,9 +174,9 @@ namespace Backend.Features.Subscriptions
                 UserName = subscription.User?.FullName ?? "Unknown",
                 StartDate = subscription.StartDate,
                 ExpiryDate = subscription.ExpiryDate,
-                IsActive = subscription.IsActive
+                IsActive = subscription.IsActive,
+                ExternalRedemptionId = subscription.ExternalRedemptionId
             };
         }
     }
 }
-

BlazorWebAssembly/Layout/MainLayout.razor

@@ -33,7 +33,7 @@
                             </div>
                             <div class="flex flex-col min-w-0">
                                 <span class="text-xs font-bold truncate">@context.User.Identity?.Name</span>
-                                <span class="text-[10px] text-muted font-medium uppercase tracking-wider">Member</span>
+                                <span class="text-[10px] text-muted font-medium uppercase tracking-wider">@(context.User.IsInRole("Librarian") ? "Librarian" : "Member")</span>
                             </div>
                         </div>
                     </div>

BlazorWebAssembly/Pages/About.razor

@@ -19,12 +19,28 @@
                 </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 class="relative w-full max-w-sm mx-auto aspect-[3/4] group perspective-1000">
+            <!-- Book 4 (Furthest Back) -->
+            <div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-lg transform transition-all duration-700 origin-bottom-left -rotate-12 group-hover:-rotate-[25deg] group-hover:-translate-x-16 group-hover:-translate-y-8 overflow-hidden">
+                <img src="https://covers.openlibrary.org/b/isbn/9780062316097-L.jpg" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" />
             </div>
-            <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
+            
+            <!-- Book 3 -->
+            <div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-xl transform transition-all duration-700 origin-bottom-left -rotate-6 group-hover:-rotate-[12deg] group-hover:-translate-x-8 group-hover:-translate-y-4 overflow-hidden">
+                <img src="https://covers.openlibrary.org/b/isbn/9780060850524-L.jpg" class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" />
+            </div>
+
+            <!-- Book 2 -->
+            <div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-2xl transform transition-all duration-700 origin-bottom-right rotate-6 group-hover:rotate-[12deg] group-hover:translate-x-8 group-hover:-translate-y-4 overflow-hidden z-10">
+                <img src="https://covers.openlibrary.org/b/id/14828198-L.jpg" class="w-full h-full object-cover opacity-95 group-hover:opacity-100 transition-opacity" />
+            </div>
+
+            <!-- Book 1 (Front) -->
+            <div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-2xl transform transition-all duration-700 origin-bottom-right rotate-12 group-hover:rotate-[25deg] group-hover:translate-x-16 group-hover:-translate-y-8 overflow-hidden z-20">
+                <img src="https://covers.openlibrary.org/b/isbn/9780743273565-L.jpg" class="w-full h-full object-cover" />
+            </div>
+
+            <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10"></div>
         </div>
     </div>
 

BlazorWebAssembly/Pages/Books.razor

@@ -50,24 +50,35 @@
             </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)
+        <div class="mb-10 animate-fade">
+            <button @onclick="ToggleCategoryDropdown" class="group inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em] text-muted hover:text-primary transition-colors">
+                <div class="w-6 h-6 rounded-lg bg-card border border-border flex items-center justify-center group-hover:bg-primary/5 transition-colors">
+                    <svg class="w-3 transition-transform duration-300 @(_isCategoryDropdownOpen ? "rotate-90" : "")" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path></svg>
+                </div>
+                <span>Browse by Category</span>
+                @if (_selectedCategoryId != null)
                 {
-                    <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>
+                    <span class="ml-2 px-2 py-0.5 bg-primary text-white text-[9px] rounded-full">@SelectedCategoryName</span>
                 }
-            </div>
-        }
-
+            </button>
+            
+            @if (_isCategoryDropdownOpen)
+            {
+                <div class="flex flex-wrap items-center gap-2 mt-6 animate-slide-down">
+                    <button @onclick="() => FilterByCategory(null)"
+                       class='inline-flex items-center 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
+                    </button>
+                    @foreach (var cat in _categories)
+                    {
+                        <button @onclick="() => FilterByCategory(cat.Id)"
+                           class='inline-flex items-center 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)
         {
@@ -391,12 +402,17 @@
 
     // Form Model
     private BookFormModel _formModel = new();
+    private bool _isCategoryDropdownOpen = false;
+
+    private string SelectedCategoryName => _categories.FirstOrDefault(c => c.Id == _selectedCategoryId)?.Name ?? "";
 
     protected override async Task OnInitializedAsync()
     {
         await LoadDataAsync();
     }
 
+    private void ToggleCategoryDropdown() => _isCategoryDropdownOpen = !_isCategoryDropdownOpen;
+
     private async Task LoadDataAsync()
     {
         _isLoading = true;

BlazorWebAssembly/Pages/Features.razor

@@ -12,11 +12,35 @@
     <!-- 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 class="relative w-full max-w-sm mx-auto aspect-[4/5] group perspective-1000">
+                <!-- Back Card (Reward 2) -->
+                <div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-xl flex flex-col transform transition-all duration-500 origin-bottom-left -rotate-6 group-hover:-rotate-12 group-hover:-translate-x-8 group-hover:-translate-y-4">
+                    <div class="flex justify-between items-start mb-6">
+                        <div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
+                            <svg class="w-6 h-6 text-primary" 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>
+                        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">1100 pts</span>
+                    </div>
+                    <h3 class="text-xl font-bold text-main mb-2">Free Yearly Basic Membership</h3>
+                    <p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
+                    <button disabled class="w-full py-3 rounded-xl font-bold bg-body text-muted border border-border cursor-not-allowed">
+                        Claim Reward
+                    </button>
+                </div>
+                
+                <!-- Front Card (Reward 1) -->
+                <div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-2xl flex flex-col transform transition-all duration-500 origin-bottom-right rotate-6 group-hover:rotate-12 group-hover:translate-x-8 group-hover:-translate-y-2 z-10">
+                    <div class="flex justify-between items-start mb-6">
+                        <div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
+                            <svg class="w-6 h-6 text-primary" 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>
+                        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">100 pts</span>
+                    </div>
+                    <h3 class="text-xl font-bold text-main mb-2">Free Monthly Basic Membership</h3>
+                    <p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
+                    <button disabled class="w-full py-3 rounded-xl font-bold bg-primary text-white shadow-lg shadow-primary/20 opacity-90 cursor-default">
+                        Claim Reward
+                    </button>
                 </div>
             </div>
         </div>
@@ -60,14 +84,30 @@
                 </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 class="aspect-video rounded-[3rem] shadow-2xl relative overflow-hidden group flex flex-col items-center justify-center cursor-pointer bg-card"
+             @onmouseenter="HandleNotifHover" @onmouseleave="HandleNotifLeave">
+            <div class="absolute inset-0 bg-primary opacity-5"></div>
+            
+            <!-- Bell Icon -->
+            <div class="relative z-10 transition-transform duration-500 group-hover:-translate-y-8">
+                <div class="relative origin-top animate-vibrate group-hover:animate-none group-hover:scale-105 transition-all text-primary">
+                    <svg class="w-20 h-20 drop-shadow-xl" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.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>
+                    <!-- Badge -->
+                    <span class="absolute top-1 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-black shadow-md border-2 border-card">1</span>
                 </div>
-                <span class="text-[10px] font-black text-muted uppercase tracking-[0.4em]">Real-time Infrastructure</span>
             </div>
+
+            <!-- Notification Card (hidden by default, slides up on hover) -->
+            <div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 z-20">
+                <div class="bg-body rounded-2xl p-6 shadow-2xl relative overflow-hidden">
+                    @if (_isNotifHovered)
+                    {
+                        <h4 class="text-primary font-black text-xl mb-2">Book Available!</h4>
+                        <p class="text-sm text-main font-medium leading-relaxed min-h-[40px]">@_notificationText<span class="inline-block w-1.5 h-4 bg-primary ml-1 animate-pulse"></span></p>
+                    }
+                </div>
+            </div>
+            
         </div>
     </div>
 
@@ -77,11 +117,81 @@
         <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 class="flex flex-wrap justify-center gap-8 md:gap-12 mt-8">
+            <div class="flex flex-col items-center group cursor-pointer w-48">
+                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
+                    <img src="https://covers.openlibrary.org/b/isbn/9780743273565-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                </div>
+                <div class="h-12 mt-6 flex items-start justify-center">
+                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Because you liked Productivity books</span>
+                </div>
+            </div>
+            <div class="flex flex-col items-center group cursor-pointer w-48">
+                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
+                    <img src="https://covers.openlibrary.org/b/id/14828198-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                </div>
+                <div class="h-12 mt-6 flex items-start justify-center">
+                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Trending among readers</span>
+                </div>
+            </div>
+            <div class="flex flex-col items-center group cursor-pointer w-48">
+                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
+                    <img src="https://covers.openlibrary.org/b/isbn/9780060850524-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                </div>
+                <div class="h-12 mt-6 flex items-start justify-center">
+                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Popular this week</span>
+                </div>
+            </div>
+            <div class="flex flex-col items-center group cursor-pointer w-48">
+                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
+                    <img src="https://covers.openlibrary.org/b/isbn/9780062316097-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                </div>
+                <div class="h-12 mt-6 flex items-start justify-center">
+                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Based on your recent reads</span>
+                </div>
+            </div>
         </div>
     </section>
 </div>
+
+<style>
+    @@keyframes vibrate {
+        0%, 100% { transform: rotate(0deg); }
+        25% { transform: rotate(6deg); }
+        50% { transform: rotate(0deg); }
+        75% { transform: rotate(-6deg); }
+    }
+    .animate-vibrate {
+        animation: vibrate 0.15s linear infinite;
+        transform-origin: top center;
+    }
+</style>
+
+@code {
+    private bool _isNotifHovered = false;
+    private string _notificationText = "";
+    private string _fullText = "Good news! Your wished book is now available for borrowing. Grab it before someone else does!";
+
+    private async Task HandleNotifHover()
+    {
+        if (_isNotifHovered) return;
+        _isNotifHovered = true;
+        _notificationText = "";
+        
+        await Task.Delay(300); // Wait for the card to slide up
+        
+        for (int i = 0; i < _fullText.Length; i++)
+        {
+            if (!_isNotifHovered) break; // Stop if mouse left
+            _notificationText += _fullText[i];
+            StateHasChanged();
+            await Task.Delay(25); // Typing speed
+        }
+    }
+
+    private void HandleNotifLeave()
+    {
+        _isNotifHovered = false;
+        _notificationText = "";
+    }
+}

BlazorWebAssembly/Pages/Home.razor

@@ -99,9 +99,16 @@
                         {
                             <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>
+                                     @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="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>

BlazorWebAssembly/Pages/Membership.razor

@@ -31,8 +31,11 @@
             <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="bg-primary/5 border border-primary/20 rounded-[2.5rem] p-10 mb-12 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm relative overflow-hidden group">
+                        <div class="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+                            <svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                        </div>
+                        <div class="flex items-center gap-8 relative z-10">
                             <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>
@@ -41,7 +44,7 @@
                                 <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 items-center gap-6 relative z-10">
                             <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>
@@ -49,6 +52,44 @@
                         </div>
                     </div>
                 }
+
+                @if (_queuedRewards.Any())
+                {
+                    <div class="mb-20 animate-fade-in-down">
+                        <div class="flex items-center gap-3 mb-8">
+                            <div class="h-px flex-grow bg-border"></div>
+                            <h3 class="text-xs font-black text-amber-500 uppercase tracking-[0.4em] px-4 whitespace-nowrap">Queued Rewards</h3>
+                            <div class="h-px flex-grow bg-border"></div>
+                        </div>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            @foreach (var sub in _queuedRewards)
+                            {
+                                <div class="bg-card border border-amber-500/20 rounded-3xl p-8 flex items-center justify-between shadow-sm hover:shadow-lg transition-all border-l-4 border-l-amber-500 relative overflow-hidden group">
+                                    <div class="absolute top-0 right-0 p-4 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
+                                        <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+                                    </div>
+                                    <div class="flex items-center gap-6 relative z-10">
+                                        <div class="w-14 h-14 bg-amber-500/10 rounded-2xl flex items-center justify-center text-amber-500">
+                                            <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                                        </div>
+                                        <div>
+                                            <h4 class="text-xl font-black text-main uppercase">@sub.MembershipType</h4>
+                                            <p class="text-sm text-muted font-medium">Starts on @sub.StartDate.ToString("MMM dd, yyyy")</p>
+                                        </div>
+                                    </div>
+                                    <div class="text-right relative z-10">
+                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-green-500/10 text-green-500">
+                                            <svg class="w-3 h-3" 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>
+                                            Approved
+                                        </span>
+                                        <p class="text-[10px] text-muted font-bold uppercase tracking-widest mt-2">Queued in Pipeline</p>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
             </Authorized>
         </AuthorizeView>
 
@@ -134,6 +175,7 @@
     private bool _isLoading = true;
     private List<MembershipDto> _memberships = new();
     private SubscriptionDto? _currentSub;
+    private List<SubscriptionDto> _queuedRewards = new();
 
     protected override async Task OnInitializedAsync()
     {
@@ -147,6 +189,12 @@
         {
             _memberships = (await ApiClient.GetMembershipsAsync()).ToList();
             _currentSub = await ApiClient.GetMySubscriptionAsync();
+            
+            var allSubs = await ApiClient.GetMyAllSubscriptionsAsync();
+            _queuedRewards = allSubs
+                .Where(s => !string.IsNullOrEmpty(s.ExternalRedemptionId) && s.StartDate > DateTime.UtcNow)
+                .OrderBy(s => s.StartDate)
+                .ToList();
         }
         catch { }
         finally { _isLoading = false; }

BlazorWebAssembly/Pages/Rewards.razor

@@ -58,7 +58,7 @@
                     
                     <button @onclick="() => ClaimAsync(reward)" 
                             disabled="@((_account?.CurrentBalance ?? 0) < reward.PointCost)"
-                            class='w-full py-4 rounded-xl font-bold transition-all @((_account?.CurrentBalance ?? 0) >= reward.PointCost ? "bg-main text-bg-body hover:bg-primary" : "bg-body text-muted cursor-not-allowed border border-border")'>
+                            class='w-full py-4 rounded-xl font-bold transition-all @((_account?.CurrentBalance ?? 0) >= reward.PointCost ? "bg-primary text-white hover:bg-hover shadow-lg shadow-primary/20" : "bg-body text-muted cursor-not-allowed border border-border")'>
                         @((_account?.CurrentBalance ?? 0) >= reward.PointCost ? "Claim Reward" : "Insufficient Points")
                     </button>
                 </div>

BlazorWebAssembly/Pages/RewardsManage.razor

@@ -1,56 +1,48 @@
 @page "/rewards/manage"
-@using BlazorWebAssembly.Services
 @using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
 @using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Librarian")]
 @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 class="max-w-7xl mx-auto py-12 px-6">
+    <!-- Header -->
+    <div class="mb-12">
+        <h1 class="text-5xl font-black tracking-tight text-main mb-4">Rewards Management</h1>
+        <p class="text-lg text-muted max-w-2xl">
+            Review and fulfill loyalty reward claims from library members.
+        </p>
     </div>
 
-    <div class="mb-8 border-b border-border flex gap-8">
+    <!-- Tabs -->
+    <div class="flex items-center gap-8 border-b border-border mb-12">
         <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>
+                class='pb-4 text-sm font-bold tracking-widest uppercase transition-all relative @(_activeTab == "pending" ? "text-primary" : "text-muted hover:text-main")'>
+            Pending Redemptions
+            @if (_pendingRedemptions.Any())
+            {
+                <span class="ml-2 bg-primary text-white text-[10px] px-2 py-0.5 rounded-full">@_pendingRedemptions.Count()</span>
+            }
+            @if (_activeTab == "pending")
+            {
+                <div class="absolute bottom-0 left-0 w-full h-0.5 bg-primary animate-scale-x"></div>
+            }
         </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")'>
+                class='pb-4 text-sm font-bold tracking-widest uppercase transition-all relative @(_activeTab == "history" ? "text-primary" : "text-muted hover:text-main")'>
             Members Points History
+            @if (_activeTab == "history")
+            {
+                <div class="absolute bottom-0 left-0 w-full h-0.5 bg-primary animate-scale-x"></div>
+            }
         </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 class="flex justify-center py-20">
+            <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
         </div>
     }
     else
@@ -61,59 +53,60 @@
                 @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>
+                        <p class="text-muted font-bold text-lg">No pending redemptions at the moment.</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>
+                    <div class="max-w-6xl">
+                        <div class="bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
+                            <table class="w-full text-left border-collapse 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-[10px] font-bold text-muted uppercase tracking-widest">Action</th>
                                     </tr>
-                                }
-                            </tbody>
-                        </table>
+                                </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">
+                                                        @(string.IsNullOrEmpty(r.UserName) || r.UserName == "Unknown Member" ? "U" : r.UserName.Substring(0, 1).ToUpper())
+                                                    </div>
+                                                    <span class="text-sm font-bold text-main">@(r.UserName ?? "Unknown Member")</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-4 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-4 py-4">
+                                                <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>
                 }
             </div>
@@ -150,75 +143,70 @@
                                             <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 class="flex items-center gap-12">
+                                        <div class="text-center sm:text-right">
+                                            <p class="text-[10px] text-muted font-bold tracking-widest uppercase mb-1">Current Balance</p>
+                                            <p class="text-2xl font-black text-primary">@member.CurrentBalance.ToString("N0") <span class="text-xs">PTS</span></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 class="text-center sm:text-right">
+                                            <p class="text-[10px] text-muted font-bold tracking-widest uppercase mb-1">Tier</p>
+                                            <span class="inline-flex px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-primary text-white shadow-sm">@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 class="w-8 h-8 rounded-full bg-body flex items-center justify-center transition-transform @(_expandedMemberId == member.AccountId ? "rotate-180" : "")">
+                                            <svg class="w-5 h-5 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
                                         </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))
+
+                                @if (_expandedMemberId == 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 class="border-t border-border bg-body/30 p-6 animate-slide-down">
+                                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                                            <!-- Points History -->
+                                            <div>
+                                                <h4 class="text-xs font-bold text-muted uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                                                    <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.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                                                    Points History
+                                                </h4>
+                                                <div class="space-y-2 max-h-64 overflow-y-auto pr-2 custom-scrollbar">
+                                                    @foreach (var entry in member.History.OrderByDescending(x => x.CreatedAt))
+                                                    {
+                                                        <div class="flex items-center justify-between p-3 bg-card rounded-xl border border-border shadow-sm">
+                                                            <div>
+                                                                <p class="text-sm font-bold text-main">@entry.Description</p>
+                                                                <p class="text-[10px] text-muted">@entry.CreatedAt.ToString("MMM dd, yyyy HH:mm")</p>
+                                                            </div>
+                                                            <div class='text-sm font-black @(entry.PointDelta >= 0 ? "text-green-500" : "text-red-500")'>
+                                                                @(entry.PointDelta >= 0 ? "+" : "")@entry.PointDelta
+                                                            </div>
+                                                        </div>
+                                                    }
+                                                </div>
                                             </div>
-                                        }
+
+                                            <!-- Redemptions -->
+                                            <div>
+                                                <h4 class="text-xs font-bold text-muted uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+                                                    <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.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+                                                    Redemption History
+                                                </h4>
+                                                <div class="space-y-2 max-h-64 overflow-y-auto pr-2 custom-scrollbar">
+                                                    @foreach (var red in member.Redemptions.OrderByDescending(x => x.RedeemedAt))
+                                                    {
+                                                        <div class="flex items-center justify-between p-3 bg-card rounded-xl border border-border shadow-sm">
+                                                            <div>
+                                                                <p class="text-sm font-bold text-main">@red.RewardName</p>
+                                                                <p class="text-[10px] text-muted">@red.RedeemedAt.ToString("MMM dd, yyyy")</p>
+                                                            </div>
+                                                            <div class="text-right">
+                                                                <p class="text-xs font-black text-primary">@red.PointCost pts</p>
+                                                                <span class='text-[9px] font-bold uppercase tracking-widest @(red.Status == "Fulfilled" ? "text-green-500" : "text-amber-500")'>@red.Status</span>
+                                                            </div>
+                                                        </div>
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 }
                             </div>
@@ -233,10 +221,10 @@
 @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();
+    private string _searchQuery = "";
+    private string? _expandedMemberId;
 
     protected override async Task OnInitializedAsync()
     {
@@ -253,7 +241,7 @@
         }
         catch (Exception ex)
         {
-            await JS.InvokeVoidAsync("alert", $"Error loading management data: {ex.Message}");
+            Console.WriteLine($"Error loading rewards manage data: {ex.Message}");
         }
         finally
         {
@@ -265,44 +253,30 @@
         string.IsNullOrWhiteSpace(_searchQuery) 
             ? _allMembersHistory 
             : _allMembersHistory.Where(m => m.UserName.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || 
-                                            m.UserEmail.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase));
+                                           m.UserEmail.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase));
 
     private void ToggleMember(string accountId)
     {
-        if (_expandedMembers.Contains(accountId))
-            _expandedMembers.Remove(accountId);
+        if (_expandedMemberId == accountId)
+            _expandedMemberId = null;
         else
-            _expandedMembers.Add(accountId);
+            _expandedMemberId = accountId;
     }
 
     private async Task FulfillAsync(LoyaltyRedemptionDto redemption)
     {
-        bool confirmed = await JS.InvokeAsync<bool>("confirm", "Fulfill this redemption and grant membership to the member?");
+        bool confirmed = await JS.InvokeAsync<bool>("confirm", $"Fulfill {redemption.RewardName} for {redemption.UserName}?");
         if (!confirmed) return;
 
         var result = await ApiClient.FulfillRedemptionAsync(redemption.Id);
         if (result.Success)
         {
-            await JS.InvokeVoidAsync("alert", result.Message);
             await LoadDataAsync();
+            await JS.InvokeVoidAsync("alert", result.Message);
         }
         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)
-        };
-    }
 }

LibraryManagement.Shared/Models/LibraryDtos.cs

@@ -129,6 +129,7 @@ namespace LibraryManagement.Shared.Models
         public DateTime StartDate { get; set; }
         public DateTime ExpiryDate { get; set; }
         public bool IsActive { get; set; }
+        public string? ExternalRedemptionId { get; set; }
         public bool IsExpired => DateTime.UtcNow > ExpiryDate;
     }
 
@@ -217,6 +218,8 @@ namespace LibraryManagement.Shared.Models
 
         [JsonPropertyName("redeemedAt")]
         public DateTime RedeemedAt { get; set; }
+
+        public string? UserName { get; set; }
     }
 
     // User DTOs