add: membership view

Backend/Features/Loyalty/LoyaltyController.cs

@@ -1,7 +1,9 @@
+using Backend.Features.Subscriptions;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using System.Security.Claims;
 using System.Threading.Tasks;
+using System.Linq;
 
 namespace Backend.Features.Loyalty
 {
@@ -11,10 +13,12 @@ namespace Backend.Features.Loyalty
     public class LoyaltyController : ControllerBase
     {
         private readonly ILoyaltyService _loyaltyService;
+        private readonly ISubscriptionService _subscriptionService;
 
-        public LoyaltyController(ILoyaltyService loyaltyService)
+        public LoyaltyController(ILoyaltyService loyaltyService, ISubscriptionService subscriptionService)
         {
             _loyaltyService = loyaltyService;
+            _subscriptionService = subscriptionService;
         }
 
         [HttpGet("my-account")]
@@ -32,11 +36,86 @@ namespace Backend.Features.Loyalty
                 return NotFound("Loyalty account not found.");
             }
 
-            return Ok(new 
-            { 
-                currentBalance = account.CurrentBalance, 
-                tier = account.Tier 
+            return Ok(new
+            {
+                currentBalance = account.CurrentBalance,
+                tier = account.Tier
             });
         }
+
+        [HttpGet("my-redemptions")]
+        public async Task<IActionResult> GetMyRedemptions()
+        {
+            var userIdStr = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+            if (string.IsNullOrEmpty(userIdStr))
+            {
+                return Unauthorized();
+            }
+
+            var redemptions = await _loyaltyService.GetUserRedemptionsAsync(userIdStr);
+            return Ok(redemptions);
+        }
+
+        [HttpPost("claim")]
+        public async Task<IActionResult> ClaimReward([FromBody] ClaimRewardRequestDto request)
+        {
+            var userIdStr = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+            if (string.IsNullOrEmpty(userIdStr))
+            {
+                return Unauthorized();
+            }
+
+            var (success, message) = await _loyaltyService.ClaimRewardAsync(userIdStr, request.RewardId, request.Notes ?? "Redeemed via Library Web Application");
+
+            if (success)
+            {
+                return Ok(new { message });
+            }
+
+            return BadRequest(new { message });
+        }
+
+        [HttpGet("admin/redemptions/pending")]
+        [Authorize(Roles = "Librarian")]
+        public async Task<IActionResult> GetPendingRedemptions()
+        {
+            var redemptions = await _loyaltyService.GetPendingRedemptionsAsync();
+            return Ok(redemptions);
+        }
+
+        [HttpPost("admin/redemptions/{id}/fulfill")]
+        [Authorize(Roles = "Librarian")]
+        public async Task<IActionResult> FulfillRedemption(string id)
+        {
+            // 1. Get all pending redemptions to find the details of the one we want
+            var pending = await _loyaltyService.GetPendingRedemptionsAsync();
+            var redemption = pending.FirstOrDefault(r => r.Id == id);
+
+            if (redemption == null)
+            {
+                return NotFound("Redemption record not found or already processed.");
+            }
+
+            // 2. Call the external loyalty system to mark as fulfilled
+            var success = await _loyaltyService.UpdateRedemptionStatusAsync(id, "Fulfilled");
+            if (!success)
+            {
+                return BadRequest("Failed to update status in the loyalty system.");
+            }
+
+            // 3. side effect: Grant membership in the library system
+            bool membershipGranted = false;
+            if (int.TryParse(redemption.ExternalUserId?.Trim(), out int userId))
+            {
+                membershipGranted = await _subscriptionService.HandleLoyaltyRedemptionAsync(userId, redemption.RewardId, redemption.Id);
+            }
+
+            if (!membershipGranted)
+            {
+                return BadRequest(new { message = $"Redemption fulfilled in loyalty system, but failed to grant library membership. The Reward ID '{redemption.RewardId}' may not be correctly mapped in the library system, or the user already has this membership." });
+            }
+
+            return Ok(new { message = $"Redemption fulfilled and {redemption.RewardName} membership granted successfully." });
+        }
     }
 }

Backend/Features/Loyalty/LoyaltyModels.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Text.Json.Serialization;
+
+namespace Backend.Features.Loyalty
+{
+    public class LoyaltyRedemptionDto
+    {
+        [JsonPropertyName("id")]
+        public string Id { get; set; } = string.Empty;
+
+        [JsonPropertyName("rewardId")]
+        public string RewardId { get; set; } = string.Empty;
+
+        [JsonPropertyName("rewardName")]
+        public string RewardName { get; set; } = string.Empty;
+
+        [JsonPropertyName("pointsSpent")]
+        public double PointsSpent { get; set; }
+
+        [JsonPropertyName("status")]
+        public string Status { get; set; } = string.Empty;
+
+        [JsonPropertyName("externalUserId")]
+        public string ExternalUserId { get; set; } = string.Empty;
+
+        [JsonPropertyName("createdAt")]
+        public DateTime CreatedAt { get; set; }
+    }
+
+    public class ClaimRewardRequestDto
+    {
+        public string RewardId { get; set; } = string.Empty;
+        public string? Notes { get; set; }
+    }
+}

Backend/Features/Loyalty/LoyaltyService.cs

@@ -1,10 +1,12 @@
 using System;
+using System.Collections.Generic;
 using System.Net.Http;
 using System.Net.Http.Json;
 using System.Text.Json;
 using System.Text.Json.Serialization;
 using System.Threading.Tasks;
 using Microsoft.Extensions.Logging;
+using System.Linq;
 
 namespace Backend.Features.Loyalty
 {
@@ -13,6 +15,10 @@ namespace Backend.Features.Loyalty
         Task<bool> RegisterUserAsync(string externalUserId, string email, string mobile);
         Task<bool> ProcessEventAsync(string externalUserId, string eventKey, double eventValue, string referenceId, string description, string email, string mobile);
         Task<AccountLookupResponse?> GetUserAccountAsync(string externalUserId);
+        Task<(bool Success, string Message)> ClaimRewardAsync(string externalUserId, string rewardId, string notes);
+        Task<IEnumerable<LoyaltyRedemptionDto>> GetUserRedemptionsAsync(string externalUserId);
+        Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync();
+        Task<bool> UpdateRedemptionStatusAsync(string redemptionId, string status);
     }
 
     public class LoyaltyService : ILoyaltyService
@@ -106,6 +112,94 @@ namespace Backend.Features.Loyalty
                 return null;
             }
         }
+
+        public async Task<(bool Success, string Message)> ClaimRewardAsync(string externalUserId, string rewardId, string notes)
+        {
+            try
+            {
+                var payload = new
+                {
+                    externalUserId = externalUserId,
+                    rewardId = rewardId,
+                    notes = notes
+                };
+
+                var response = await _httpClient.PostAsJsonAsync("/api/v1/redemption/claim", payload);
+                if (response.IsSuccessStatusCode)
+                {
+                    return (true, "Reward claimed successfully!");
+                }
+                
+                var error = await response.Content.ReadAsStringAsync();
+                _logger.LogWarning($"Failed to claim reward {rewardId} for user {externalUserId}: {error}");
+                
+                try {
+                    var errorDoc = JsonDocument.Parse(error);
+                    if (errorDoc.RootElement.TryGetProperty("message", out var msgElement)) {
+                        return (false, msgElement.GetString() ?? "Failed to claim reward.");
+                    }
+                } catch { }
+
+                return (false, string.IsNullOrEmpty(error) ? "Failed to claim reward." : error);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error while claiming reward.");
+                return (false, "An error occurred while processing your request.");
+            }
+        }
+
+        public async Task<IEnumerable<LoyaltyRedemptionDto>> GetUserRedemptionsAsync(string externalUserId)
+        {
+            try
+            {
+                var response = await _httpClient.GetAsync($"/api/v1/redemption/history/{SystemId}/{externalUserId}");
+                if (response.IsSuccessStatusCode)
+                {
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                }
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, $"Error fetching redemptions for user {externalUserId}.");
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+        }
+
+        public async Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync()
+        {
+            try
+            {
+                var response = await _httpClient.GetAsync("/api/v1/admin/redemptions/pending");
+                if (response.IsSuccessStatusCode)
+                {
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                }
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error fetching pending redemptions.");
+                return Enumerable.Empty<LoyaltyRedemptionDto>();
+            }
+        }
+
+        public async Task<bool> UpdateRedemptionStatusAsync(string redemptionId, string status)
+        {
+            try
+            {
+                var response = await _httpClient.PutAsJsonAsync($"/api/v1/admin/redemptions/{redemptionId}/status", new { status });
+                return response.IsSuccessStatusCode;
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, $"Error updating redemption status to {status} for {redemptionId}.");
+                return false;
+            }
+        }
     }
 
     public class AccountLookupResponse

Backend/Features/Subscriptions/SubscriptionController.cs

@@ -66,6 +66,13 @@ namespace Backend.Features.Subscriptions
             return Ok(subscription);
         }
 
+        [HttpGet("subscriptions/all")]
+        [Authorize(Roles = "Librarian")]
+        public async Task<ActionResult<IEnumerable<SubscriptionDto>>> GetSubscriptions()
+        {
+            return Ok(await _subscriptionService.GetAllSubscriptionsAsync());
+        }
+
         [HttpPost("subscriptions/admin-subscribe")]
         [Authorize(Roles = "Librarian")]
         public async Task<ActionResult<SubscriptionDto>> AdminSubscribe([FromBody] AdminSubscribeRequest request)

Backend/Features/Subscriptions/SubscriptionModels.cs

@@ -11,6 +11,7 @@ namespace Backend.Features.Subscriptions
         public decimal Price { get; set; }
         public string Currency { get; set; } = "MMK";
         public int DurationMonths { get; set; }
+        public string? LoyaltyRewardId { get; set; }
     }
 
     public class SubscriptionDto
@@ -19,6 +20,8 @@ namespace Backend.Features.Subscriptions
         public int UserId { get; set; }
         public int MembershipId { get; set; }
         public string MembershipType { get; set; } = string.Empty;
+        public string UserEmail { get; set; } = string.Empty;
+        public string UserName { get; set; } = string.Empty;
         public DateTime StartDate { get; set; }
         public DateTime ExpiryDate { get; set; }
         public bool IsActive { get; set; }

Backend/Features/Subscriptions/SubscriptionService.cs

@@ -8,7 +8,9 @@ namespace Backend.Features.Subscriptions
     {
         Task<IEnumerable<MembershipDto>> GetMembershipsAsync();
         Task<SubscriptionDto?> GetUserSubscriptionAsync(int userId);
+        Task<bool> HandleLoyaltyRedemptionAsync(int userId, string rewardId, string id);
         Task<SubscriptionDto> SubscribeUserAsync(int userId, int membershipId);
+        Task<IEnumerable<SubscriptionDto>> GetAllSubscriptionsAsync();
     }
 
     public class SubscriptionService : ISubscriptionService
@@ -32,7 +34,8 @@ namespace Backend.Features.Subscriptions
                     MaxBooks = m.MaxBooks,
                     BorrowingDays = m.BorrowingDays,
                     Price = m.Price,
-                    DurationMonths = m.DurationMonths
+                    DurationMonths = m.DurationMonths,
+                    LoyaltyRewardId = m.LoyaltyRewardId
                 }).ToListAsync();
         }
 
@@ -49,6 +52,33 @@ namespace Backend.Features.Subscriptions
             return MapToDto(subscription);
         }
 
+        public async Task<bool> HandleLoyaltyRedemptionAsync(int userId, string rewardId, string id)
+        {
+            // externalUserId matches how other loyalty calls identify users
+            string externalUserId = userId.ToString();
+
+            try
+            {
+                // Attempt to claim the reward via the loyalty service
+                var (success, message) = await _loyaltyService.ClaimRewardAsync(externalUserId, rewardId, id);
+
+                if (!success)
+                {
+                    return false;
+                }
+
+                // Optionally update the redemption status in the loyalty system
+                await _loyaltyService.UpdateRedemptionStatusAsync(id, "CLAIMED");
+
+                return true;
+            }
+            catch
+            {
+                // Swallow exceptions to maintain interface contract; caller can handle false result
+                return false;
+            }
+        }
+
         public async Task<SubscriptionDto> SubscribeUserAsync(int userId, int membershipId)
         {
             var membership = await _context.Memberships.FindAsync(membershipId);
@@ -98,6 +128,17 @@ namespace Backend.Features.Subscriptions
             return MapToDto(subscription);
         }
 
+        public async Task<IEnumerable<SubscriptionDto>> GetAllSubscriptionsAsync()
+        {
+            var subscriptions = await _context.UserSubscriptions
+                .Include(s => s.Membership)
+                .Include(s => s.User)
+                .OrderByDescending(s => s.StartDate)
+                .ToListAsync();
+
+            return subscriptions.Select(MapToDto);
+        }
+
         private static SubscriptionDto MapToDto(UserSubscription subscription)
         {
             return new SubscriptionDto
@@ -106,6 +147,8 @@ namespace Backend.Features.Subscriptions
                 UserId = subscription.UserId,
                 MembershipId = subscription.MembershipId,
                 MembershipType = subscription.Membership.Type,
+                UserEmail = subscription.User?.Email ?? "Unknown",
+                UserName = subscription.User?.FullName ?? "Unknown",
                 StartDate = subscription.StartDate,
                 ExpiryDate = subscription.ExpiryDate,
                 IsActive = subscription.IsActive

Database/Models/Membership.cs

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 
 namespace Database.Models;
@@ -16,6 +16,7 @@ public partial class Membership
     public decimal Price { get; set; }
 
     public int DurationMonths { get; set; }
+    public string? LoyaltyRewardId { get; set; }
 
     public virtual ICollection<UserSubscription> UserSubscriptions { get; set; } = new List<UserSubscription>();
 }

Database/add_reward_id_to_memberships.sql

@@ -0,0 +1,14 @@
+USE LibraryManagement;
+GO
+
+-- Add RewardId column if it doesn't exist
+IF NOT EXISTS (SELECT * FROM sys.columns WHERE object_id = OBJECT_ID('Memberships') AND name = 'RewardId')
+BEGIN
+    ALTER TABLE Memberships ADD RewardId NVARCHAR(50) NULL;
+END
+GO
+
+-- Populate RewardId for existing memberships
+UPDATE Memberships SET RewardId = '39aff010-693e-450e-85e7-ae6c3f1a2078' WHERE Type = 'Basic Monthly';
+UPDATE Memberships SET RewardId = '94bc0b20-1a87-4e10-a778-dd48552470d0' WHERE Type = 'Basic Yearly';
+GO

Database/db.sql

@@ -57,6 +57,7 @@ CREATE TABLE Memberships (
     BorrowingDays INT NOT NULL,
     Price DECIMAL(10, 2) NOT NULL,
     DurationMonths INT NOT NULL,
+    LoyaltyRewardId NVARCHAR(50) NULL,
     CONSTRAINT IX_Memberships_Type UNIQUE (Type)
 );
 GO

Database/remove_total_membership.sql

@@ -0,0 +1,72 @@
+-- EXTREMELY AGGRESSIVE script to remove TotalMembership and ALL its dependencies
+USE LibraryManagement;
+GO
+
+PRINT 'Starting aggressive cleanup of TotalMembership column...';
+
+-- 1. Specifically drop the constraint the user mentioned if it exists
+IF EXISTS (SELECT * FROM sys.objects WHERE name = 'DF__UserSubsc__Total__5DCAEF64' AND type = 'D')
+BEGIN
+    PRINT 'Explicitly dropping known constraint DF__UserSubsc__Total__5DCAEF64';
+    ALTER TABLE UserSubscriptions DROP CONSTRAINT DF__UserSubsc__Total__5DCAEF64;
+END
+
+-- 2. Dynamically find and drop ALL other default constraints on this column
+DECLARE @SQL nvarchar(MAX) = '';
+SELECT @SQL += 'ALTER TABLE UserSubscriptions DROP CONSTRAINT ' + d.name + ';' + CHAR(13)
+FROM sys.default_constraints d
+INNER JOIN sys.columns c ON d.parent_column_id = c.column_id AND d.parent_object_id = c.object_id
+WHERE c.object_id = OBJECT_ID('UserSubscriptions')
+AND c.name = 'TotalMembership';
+
+IF @SQL <> ''
+BEGIN
+    PRINT 'Dropping additional dynamic constraints...';
+    EXEC sp_executesql @SQL;
+END
+
+-- 3. Find and drop any Indexes that use this column
+SET @SQL = '';
+SELECT @SQL += 'DROP INDEX ' + i.name + ' ON UserSubscriptions;' + CHAR(13)
+FROM sys.indexes i
+INNER JOIN sys.index_columns ic ON i.object_id = ic.object_id AND i.index_id = ic.index_id
+INNER JOIN sys.columns c ON ic.object_id = c.object_id AND ic.column_id = c.column_id
+WHERE i.object_id = OBJECT_ID('UserSubscriptions')
+AND c.name = 'TotalMembership';
+
+IF @SQL <> ''
+BEGIN
+    PRINT 'Dropping dependent indexes...';
+    EXEC sp_executesql @SQL;
+END
+
+-- 4. Check for and drop foreign keys if they somehow depend on this (rare for this name but possible)
+SET @SQL = '';
+SELECT @SQL += 'ALTER TABLE UserSubscriptions DROP CONSTRAINT ' + fk.name + ';' + CHAR(13)
+FROM sys.foreign_keys fk
+INNER JOIN sys.foreign_key_columns fkc ON fk.object_id = fkc.constraint_object_id
+INNER JOIN sys.columns c ON fkc.parent_object_id = c.object_id AND fkc.parent_column_id = c.column_id
+WHERE fk.parent_object_id = OBJECT_ID('UserSubscriptions')
+AND c.name = 'TotalMembership';
+
+IF @SQL <> ''
+BEGIN
+    PRINT 'Dropping dependent foreign keys...';
+    EXEC sp_executesql @SQL;
+END
+
+-- 5. Finally, drop the column
+IF EXISTS (
+    SELECT * FROM sys.columns 
+    WHERE object_id = OBJECT_ID('UserSubscriptions') 
+    AND name = 'TotalMembership'
+)
+BEGIN
+    ALTER TABLE UserSubscriptions DROP COLUMN TotalMembership;
+    PRINT 'SUCCESS: Dropped column TotalMembership from UserSubscriptions.';
+END
+ELSE
+BEGIN
+    PRINT 'Done: Column TotalMembership does not exist in UserSubscriptions.';
+END
+GO

Frontend/Controllers/MembershipController.cs

@@ -0,0 +1,51 @@
+using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
+using Frontend.Models.Dtos;
+using Frontend.Models;
+using Microsoft.AspNetCore.Authorization;
+using System.Threading.Tasks;
+using System.Linq;
+using System.Collections.Generic;
+
+namespace Frontend.Controllers
+{
+    [Authorize(Roles = "Member")]
+    public class MembershipController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public MembershipController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            var subscription = await _apiClient.GetMySubscriptionAsync();
+            var memberships = await _apiClient.GetMembershipsAsync();
+            var redemptions = await _apiClient.GetMyRedemptionsAsync();
+            var loyaltyAccount = await _apiClient.GetMyLoyaltyAccountAsync();
+
+            // Filter redemptions to only show memberships that are Pending (Queued)
+            // We use LoyaltyRewardId to identify which redemptions are memberships
+            var membershipRewardIds = memberships
+                .Where(m => !string.IsNullOrEmpty(m.LoyaltyRewardId))
+                .Select(m => m.LoyaltyRewardId)
+                .ToList();
+            
+            var queuedMemberships = redemptions
+                .Where(r => (r.Status == "Pending" || r.Status == "PENDING") && membershipRewardIds.Contains(r.LoyaltyRewardId))
+                .ToList();
+
+            var viewModel = new MembershipViewModel
+            {
+                CurrentSubscription = subscription,
+                AvailableMemberships = memberships.ToList(),
+                QueuedMemberships = queuedMemberships,
+                LoyaltyAccount = loyaltyAccount
+            };
+
+            return View(viewModel);
+        }
+    }
+}

Frontend/Controllers/SubscriptionsController.cs

@@ -21,10 +21,12 @@ namespace Frontend.Controllers
         public async Task<IActionResult> Index()
         {
             var memberships = await _apiClient.GetMembershipsAsync();
+            var activeSubscriptions = await _apiClient.GetAllSubscriptionsAsync();
 
             var viewModel = new SubscriptionsViewModel
             {
-                AvailableMemberships = memberships?.ToList() ?? new List<MembershipDto>()
+                AvailableMemberships = memberships?.ToList() ?? new List<MembershipDto>(),
+                ActiveSubscriptions = activeSubscriptions?.ToList() ?? new List<SubscriptionDto>()
             };
 
             return View(viewModel);

Frontend/Models/Dtos/LibraryDtos.cs

@@ -102,6 +102,7 @@ namespace Frontend.Models.Dtos
         public int BorrowingDays { get; set; }
         public decimal Price { get; set; }
         public int DurationMonths { get; set; }
+        public string? LoyaltyRewardId { get; set; }
     }
 
     public class SubscriptionDto
@@ -110,9 +111,12 @@ namespace Frontend.Models.Dtos
         public int UserId { get; set; }
         public int MembershipId { get; set; }
         public string MembershipType { get; set; } = string.Empty;
+        public string UserName { get; set; } = string.Empty;
+        public string UserEmail { get; set; } = string.Empty;
         public DateTime StartDate { get; set; }
         public DateTime ExpiryDate { get; set; }
         public bool IsActive { get; set; }
+        public bool IsExpired => DateTime.UtcNow > ExpiryDate;
     }
 
     public class SubscribeRequest

Frontend/Models/Dtos/LoyaltyRedemptionDto.cs

@@ -0,0 +1,15 @@
+using System;
+
+namespace Frontend.Models.Dtos
+{
+    public class LoyaltyRedemptionDto
+    {
+        public Guid Id { get; set; }
+        public string ExternalUserId { get; set; } = string.Empty;
+        public string RewardName { get; set; } = string.Empty;
+        public string? LoyaltyRewardId { get; set; }
+        public int PointsSpent { get; set; }
+        public string Status { get; set; } = string.Empty;
+        public DateTime CreatedAt { get; set; }
+    }
+}

Frontend/Models/MembershipViewModel.cs

@@ -0,0 +1,13 @@
+using Frontend.Models.Dtos;
+using System.Collections.Generic;
+
+namespace Frontend.Models
+{
+    public class MembershipViewModel
+    {
+        public SubscriptionDto? CurrentSubscription { get; set; }
+        public List<MembershipDto> AvailableMemberships { get; set; } = new List<MembershipDto>();
+        public List<LoyaltyRedemptionDto> QueuedMemberships { get; set; } = new List<LoyaltyRedemptionDto>();
+        public LoyaltyAccountDto? LoyaltyAccount { get; set; }
+    }
+}

Frontend/Models/SubscriptionsViewModel.cs

@@ -5,5 +5,6 @@ namespace Frontend.Models
     public class SubscriptionsViewModel
     {
         public List<MembershipDto> AvailableMemberships { get; set; } = new();
+        public List<SubscriptionDto> ActiveSubscriptions { get; set; } = new();
     }
 }

Frontend/Services/LibraryApiClient.cs

@@ -157,6 +157,11 @@ namespace Frontend.Services
             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
 
         public async Task<LoyaltyAccountDto?> GetMyLoyaltyAccountAsync()
@@ -183,6 +188,13 @@ namespace Frontend.Services
             }
         }
 
+        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<bool> RequestReturnAsync(int borrowingId)
         {
             var response = await _httpClient.PostAsync($"api/borrowings/return-request/{borrowingId}", null);

Frontend/Views/Membership/Index.cshtml

@@ -0,0 +1,220 @@
+@model Frontend.Models.MembershipViewModel
+
+@{
+    ViewData["Title"] = "My Membership";
+    var hasActiveSub = Model.CurrentSubscription != null && Model.CurrentSubscription.IsActive;
+}
+
+<div class="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
+    <!-- Header with Loyalty Summary -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
+        <div>
+            <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">Membership</h1>
+            <p class="text-slate-500 mt-1">Manage your subscription and library benefits</p>
+        </div>
+        
+        @if (Model.LoyaltyAccount != null)
+        {
+            <div class="flex items-center gap-4 bg-slate-50 px-6 py-4 rounded-xl border border-slate-200/60">
+                <div class="bg-amber-100 p-2.5 rounded-lg text-amber-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>
+                </div>
+                <div>
+                    <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Available Points</div>
+                    <div class="text-2xl font-black text-slate-900 leading-none">@Model.LoyaltyAccount.CurrentBalance.ToString("N0")</div>
+                </div>
+            </div>
+        }
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <!-- Current Subscription Card -->
+        <div class="lg:col-span-2 space-y-8">
+            <section>
+                <h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-400"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
+                    Active Plan
+                </h2>
+                
+                @if (hasActiveSub)
+                {
+                    <div class="relative overflow-hidden bg-slate-900 rounded-3xl p-8 text-white group shadow-xl">
+                        <!-- Decorative element -->
+                        <div class="absolute -right-20 -top-20 w-64 h-64 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-500"></div>
+                        
+                        <div class="relative z-10">
+                            <div class="flex justify-between items-start mb-10">
+                                <div>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-500/20 text-green-400 border border-green-500/30 mb-3 uppercase tracking-wider">Active Status</span>
+                                    <h3 class="text-4xl font-black tracking-tight">@Model.CurrentSubscription.MembershipType</h3>
+                                </div>
+                                <div class="h-14 w-14 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-md">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                                </div>
+                            </div>
+                            
+                            <div class="grid grid-cols-2 gap-8 py-8 border-t border-white/10">
+                                <div>
+                                    <div class="text-slate-400 text-sm font-medium mb-1">Start Date</div>
+                                    <div class="text-lg font-bold">@Model.CurrentSubscription.StartDate.ToString("MMM dd, yyyy")</div>
+                                </div>
+                                <div>
+                                    <div class="text-slate-400 text-sm font-medium mb-1">Expiry Date</div>
+                                    <div class="text-lg font-bold">@Model.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
+                                </div>
+                            </div>
+                            
+                            <div class="pt-6 flex items-center gap-2 text-slate-400 text-sm italic">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                                Pro-tip: Maintain your subscription to earn loyalty points every month!
+                            </div>
+                        </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
+                        <div class="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-400">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                        </div>
+                        <h3 class="text-xl font-bold text-slate-900">No Active Subscription</h3>
+                        <p class="text-slate-500 mt-2 mb-8 max-w-xs mx-auto">Get a membership to borrow books and unlock premium library features.</p>
+                        <a href="#plans" class="btn-primary px-8 py-3 rounded-xl shadow-lg shadow-slate-900/10">Browse Plans</a>
+                    </div>
+                }
+            </section>
+
+            <!-- Queued Memberships -->
+            @if (Model.QueuedMemberships.Any())
+            {
+                <section>
+                    <h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500"><path d="M10 10 2.5 2.5"/><path d="M21.5 2.5 14 10"/><path d="m21.5 21.5-7.5-7.5"/><path d="M10 14 2.5 21.5"/><circle cx="12" cy="12" r="3"/></svg>
+                        Queued Membership
+                    </h2>
+                    <div class="space-y-3">
+                        @foreach (var queued in Model.QueuedMemberships)
+                        {
+                            <div class="flex items-center justify-between bg-amber-50 border border-amber-100 p-5 rounded-2xl shadow-sm">
+                                <div class="flex items-center gap-4">
+                                    <div class="h-12 w-12 bg-white rounded-xl flex items-center justify-center text-amber-600 shadow-sm border border-amber-100">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+                                    </div>
+                                    <div>
+                                        <div class="font-bold text-slate-900">@queued.RewardName</div>
+                                        <div class="text-sm text-slate-500">Redeemed on @queued.CreatedAt.ToString("MMM dd, yyyy")</div>
+                                    </div>
+                                </div>
+                                <div class="text-right">
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700 border border-amber-200 uppercase tracking-wider">Pending Approval</span>
+                                    <div class="text-xs text-slate-400 mt-1">Librarian will review soon</div>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </section>
+            }
+        </div>
+
+        <!-- Right Side Panel: Benefits -->
+        <div class="space-y-8">
+            <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
+                <h3 class="text-lg font-bold text-slate-900 mb-6">Your Benefits</h3>
+                <ul class="space-y-6">
+                    @{
+                        var currentPlan = Model.AvailableMemberships.FirstOrDefault(m => hasActiveSub && m.Type == Model.CurrentSubscription.MembershipType);
+                    }
+                    <li class="flex gap-4">
+                        <div class="shrink-0 h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.MaxBooks ?? 1))</div>
+                        <div>
+                            <div class="font-bold text-slate-900">Max Books</div>
+                            <div class="text-sm text-slate-500">Number of books you can borrow simultaneously.</div>
+                        </div>
+                    </li>
+                    <li class="flex gap-4">
+                        <div class="shrink-0 h-10 w-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.BorrowingDays ?? 14))</div>
+                        <div>
+                            <div class="font-bold text-slate-900">Borrowing Days</div>
+                            <div class="text-sm text-slate-500">Duration you can keep each borrowed book.</div>
+                        </div>
+                    </li>
+                    <li class="flex gap-4">
+                        <div class="shrink-0 h-10 w-10 bg-violet-50 text-violet-600 rounded-xl flex items-center justify-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                        </div>
+                        <div>
+                            <div class="font-bold text-slate-900">Digital Access</div>
+                            <div class="text-sm text-slate-500">Browse and search the full library catalog online.</div>
+                        </div>
+                    </li>
+                </ul>
+                
+                <div class="mt-10 p-5 bg-slate-900 rounded-2xl text-white text-center">
+                    <p class="text-sm font-medium mb-3">Want more books?</p>
+                    <a href="#plans" class="text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors">Upgrade Plan &rarr;</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Explore All Plans Section -->
+    <section id="plans" class="pt-10">
+        <div class="text-center mb-10">
+            <h2 class="text-3xl font-black text-slate-900">Explore Membership Plans</h2>
+            <p class="text-slate-500 mt-2">Find the perfect library experience for your reading habits</p>
+        </div>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            @foreach (var plan in Model.AvailableMemberships)
+            {
+                var isCurrent = hasActiveSub && plan.Type == Model.CurrentSubscription.MembershipType;
+                
+                <div class="group relative bg-white border @(isCurrent ? "border-slate-900 ring-2 ring-slate-900 ring-offset-2" : "border-slate-200") rounded-3xl p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
+                    @if (isCurrent)
+                    {
+                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">Current Plan</div>
+                    }
+
+                    <div class="mb-8">
+                        <h3 class="text-sm font-black text-slate-400 uppercase tracking-widest mb-2">@plan.Type</h3>
+                        <div class="flex items-baseline">
+                            <span class="text-3xl font-black text-slate-900">@plan.Price.ToString("N0")</span>
+                            <span class="text-slate-500 font-bold ml-1 text-sm uppercase">MMK</span>
+                        </div>
+                        <div class="text-slate-400 text-xs font-bold mt-1">/ @(plan.DurationMonths == 1 ? "Month" : $"{plan.DurationMonths} Months")</div>
+                    </div>
+
+                    <ul class="space-y-4 mb-10">
+                        <li class="flex items-center gap-3 text-sm">
+                            <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                            </div>
+                            <span class="text-slate-600 font-medium font-bold">@plan.MaxBooks Books limit</span>
+                        </li>
+                        <li class="flex items-center gap-3 text-sm">
+                            <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                            </div>
+                            <span class="text-slate-600 font-medium font-bold">@plan.BorrowingDays Days keep</span>
+                        </li>
+                    </ul>
+
+                    @if (isCurrent)
+                    {
+                        <button disabled class="w-full py-4 rounded-2xl bg-slate-100 text-slate-400 font-bold text-sm cursor-not-allowed">Active Now</button>
+                    }
+                    else
+                    {
+                        <a href="#" class="block w-full py-4 rounded-2xl bg-white border-2 border-slate-900 text-slate-900 text-center font-bold text-sm transition-all duration-200 group-hover:bg-slate-900 group-hover:text-white">Select Plan</a>
+                    }
+                </div>
+            }
+        </div>
+    </section>
+</div>
+
+<style>
+    body {
+        background-color: #f8fafc;
+    }
+</style>

Frontend/Views/Shared/_Layout.cshtml

@@ -79,6 +79,13 @@
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>
                             Active Loans
                         </a>
+                        @if (User.Identity?.IsAuthenticated == true && !User.IsInRole("Librarian"))
+                        {
+                            <a asp-controller="Membership" asp-action="Index" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Membership" ? "nav-link-active" : "nav-link-inactive")">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                                My Membership
+                            </a>
+                        }
                         @if (User.Identity?.IsAuthenticated == true && User.IsInRole("Librarian"))
                         {
                             <a href="/Members" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Members" ? "nav-link-active" : "nav-link-inactive")">

Frontend/Views/Subscriptions/Index.cshtml

@@ -45,3 +45,62 @@
         }
     </div>
 </div>
+
+<!-- Active Subscriptions Section -->
+<div class="mt-12 bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+    <div class="px-6 py-4 border-b border-slate-200 bg-slate-50 flex items-center justify-between">
+        <h2 class="text-sm font-bold text-slate-900 uppercase tracking-wider">Active User Subscriptions</h2>
+        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-900 text-white">@Model.ActiveSubscriptions.Count Total</span>
+    </div>
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-slate-200">
+            <thead class="bg-slate-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-[10px] font-black text-slate-500 uppercase tracking-widest">User</th>
+                    <th class="px-6 py-3 text-left text-[10px] font-black text-slate-500 uppercase tracking-widest">Plan Type</th>
+                    <th class="px-6 py-3 text-left text-[10px] font-black text-slate-500 uppercase tracking-widest">Start Date</th>
+                    <th class="px-6 py-3 text-left text-[10px] font-black text-slate-500 uppercase tracking-widest">Expiry Date</th>
+                    <th class="px-6 py-3 text-left text-[10px] font-black text-slate-500 uppercase tracking-widest">Status</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-slate-200">
+                @if (!Model.ActiveSubscriptions.Any())
+                {
+                    <tr>
+                        <td colspan="5" class="px-6 py-12 text-center text-slate-500 text-sm italic">
+                            No active subscriptions found in the system.
+                        </td>
+                    </tr>
+                }
+                @foreach (var sub in Model.ActiveSubscriptions)
+                {
+                    <tr class="hover:bg-slate-50 transition-colors">
+                        <td class="px-6 py-4">
+                            <div class="text-sm font-bold text-slate-900">@sub.UserName</div>
+                            <div class="text-xs text-slate-400">@sub.UserEmail</div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-900 text-white tracking-tight">@sub.MembershipType</span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600">@sub.StartDate.ToString("MMM dd, yyyy")</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 font-bold">@sub.ExpiryDate.ToString("MMM dd, yyyy")</td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            @if (sub.IsActive && !sub.IsExpired)
+                            {
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
+                            }
+                            else if (sub.IsExpired)
+                            {
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Expired</span>
+                            }
+                            else
+                            {
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">Inactive</span>
+                            }
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>

Frontend/Views/Subscriptions/LoyaltyClaims.cshtml

@@ -0,0 +1,86 @@
+@model List<Frontend.Models.Dtos.LoyaltyRedemptionDto>
+@{
+    ViewData["Title"] = "Loyalty Reward Claims";
+}
+
+<div class="p-8">
+    <div class="flex items-center justify-between mb-8">
+        <div>
+            <h1 class="text-3xl font-bold text-slate-900">Loyalty Reward Claims</h1>
+            <p class="text-slate-500 mt-1">Review and fulfill member reward redemptions.</p>
+        </div>
+        <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg border border-blue-100 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            <span class="text-sm font-semibold">@Model.Count Pending Claims</span>
+        </div>
+    </div>
+
+    @if (TempData["Success"] != null)
+    {
+        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl flex items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            <span class="font-medium">@TempData["Success"]</span>
+        </div>
+    }
+
+    @if (TempData["Error"] != null)
+    {
+        <div class="mb-6 p-4 bg-rose-50 border border-rose-200 text-rose-700 rounded-xl flex items-center gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+            <span class="font-medium">@TempData["Error"]</span>
+        </div>
+    }
+
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+        <table class="w-full text-left border-collapse">
+            <thead>
+                <tr class="bg-slate-50 border-b border-slate-200">
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Member ID</th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Reward</th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Points Spent</th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Date</th>
+                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+                @if (!Model.Any())
+                {
+                    <tr>
+                        <td colspan="5" class="px-6 py-12 text-center text-slate-400 italic">
+                            No pending reward claims found.
+                        </td>
+                    </tr>
+                }
+                @foreach (var claim in Model)
+                {
+                    <tr class="hover:bg-slate-50 transition-colors">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-xs shadow-sm border border-blue-200 uppercase">
+                                    @(claim.ExternalUserId?.Length >= 1 ? claim.ExternalUserId.Substring(0, Math.Min(2, claim.ExternalUserId.Length)) : "??")
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="font-bold text-slate-800 text-sm">Member #@claim.ExternalUserId</span>
+                                    <span class="text-[10px] text-slate-400 font-medium uppercase tracking-tighter">Library Account</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="font-semibold text-slate-900">@claim.RewardName</span>
+                        </td>
+                        <td class="px-6 py-4 text-slate-600">@claim.PointsSpent.ToString("N0") pts</td>
+                        <td class="px-6 py-4 text-slate-500 text-sm">@claim.CreatedAt.ToString("MMM dd, yyyy")</td>
+                        <td class="px-6 py-4 text-right">
+                            <form asp-action="FulfillRedemption" method="post" class="inline">
+                                <input type="hidden" name="id" value="@claim.Id" />
+                                <button type="submit" class="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-bold hover:bg-slate-800 transition-all shadow-sm">
+                                    Fulfill Reward
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>