add: some features

Backend/Features/Borrowing/BorrowingController.cs

@@ -34,6 +34,21 @@ namespace Backend.Features.Borrowings
             }
         }
 
+        [HttpPost("return-request/{id}")]
+        [Authorize]
+        public async Task<ActionResult<BorrowingDto>> RequestReturn(int id)
+        {
+            try
+            {
+                var borrowing = await _borrowingService.RequestReturnAsync(id);
+                return Ok(borrowing);
+            }
+            catch (Exception ex)
+            {
+                return BadRequest(new { message = ex.Message });
+            }
+        }
+
         [HttpPost("return/{id}")]
         [Authorize(Roles = "Librarian")]
         public async Task<ActionResult<BorrowingDto>> ReturnBook(int id)

Backend/Features/Borrowing/BorrowingService.cs

@@ -7,6 +7,7 @@ namespace Backend.Features.Borrowings
     public interface IBorrowingService
     {
         Task<BorrowingDto> BorrowBookAsync(int userId, int bookId);
+        Task<BorrowingDto> RequestReturnAsync(int borrowingId);
         Task<BorrowingDto> ReturnBookAsync(int borrowingId);
         Task<IEnumerable<BorrowingDto>> GetUserBorrowingsAsync(int userId);
         Task<IEnumerable<BorrowingDto>> GetAllBorrowingsAsync();
@@ -107,6 +108,21 @@ namespace Backend.Features.Borrowings
             return MapToDto(borrowing);
         }
 
+        public async Task<BorrowingDto> RequestReturnAsync(int borrowingId)
+        {
+            var borrowing = await _context.Borrowings
+                .Include(b => b.Book)
+                .Include(b => b.User)
+                .FirstOrDefaultAsync(b => b.Id == borrowingId);
+
+            if (borrowing == null) throw new Exception("Borrowing record not found.");
+            if (borrowing.Status != "Borrowed") throw new Exception("Only borrowed books can be requested for return.");
+
+            borrowing.Status = "PendingReturn";
+            await _context.SaveChangesAsync();
+            return MapToDto(borrowing);
+        }
+
         public async Task<BorrowingDto> ReturnBookAsync(int borrowingId)
         {
             var borrowing = await _context.Borrowings

Frontend/Controllers/BorrowingsController.cs

@@ -20,6 +20,28 @@ namespace Frontend.Controllers
             return View(borrowings);
         }
 
+        [HttpPost]
+        public async Task<IActionResult> RequestReturn(int id)
+        {
+            var success = await _apiClient.RequestReturnAsync(id);
+            if (success)
+            {
+                TempData["Success"] = "Return request sent! Awaiting librarian approval.";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to request return.";
+            }
+            return RedirectToAction(nameof(Index));
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> Rewards()
+        {
+            var rewards = await _apiClient.GetActiveRewardsAsync();
+            return View(rewards);
+        }
+
         [Authorize(Roles = "Librarian")]
         public async Task<IActionResult> Manage()
         {

Frontend/Models/Dtos/LibraryDtos.cs

@@ -145,6 +145,27 @@ namespace Frontend.Models.Dtos
         public double LifetimePoints { get; set; }
     }
 
+    public class LoyaltyRewardDto
+    {
+        [JsonPropertyName("id")]
+        public string Id { get; set; } = string.Empty;
+
+        [JsonPropertyName("name")]
+        public string Name { get; set; } = string.Empty;
+
+        [JsonPropertyName("description")]
+        public string Description { get; set; } = string.Empty;
+
+        [JsonPropertyName("pointCost")]
+        public double PointCost { get; set; }
+
+        [JsonPropertyName("stockQuantity")]
+        public int StockQuantity { get; set; }
+
+        [JsonPropertyName("isActive")]
+        public bool IsActive { get; set; }
+    }
+
     // User DTOs
     public class UserDto
     {

Frontend/Services/LibraryApiClient.cs

@@ -183,6 +183,27 @@ namespace Frontend.Services
             }
         }
 
+        public async Task<bool> RequestReturnAsync(int borrowingId)
+        {
+            var response = await _httpClient.PostAsync($"api/borrowings/return-request/{borrowingId}", null);
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
+        {
+            try {
+                // Fetch from the external loyalty API directly or via our backend proxy
+                // The user specified the URL: http://150.95.88.91:4100/api/v1/rewards/active/THS-LMS
+                // We'll use a new HttpClient or just the existing one if configured correctly.
+                // However, our backend doesn't have a proxy for this yet.
+                // For simplicity, let's assume we call it directly or via a backend endpoint we'll add.
+                // Better: Let's add a backend proxy in LoyaltyController to avoid CORS issues if this was a browser app.
+                // In ASP.NET Core MVC, the server-side HttpClient can call it directly.
+                var client = new HttpClient();
+                return await client.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("http://150.95.88.91:4100/api/v1/rewards/active/THS-LMS") ?? Enumerable.Empty<LoyaltyRewardDto>();
+            } catch { return Enumerable.Empty<LoyaltyRewardDto>(); }
+        }
+
         #region Users
         public async Task<IEnumerable<UserDto>> GetUsersAsync()
         {

Frontend/Views/Books/Details.cshtml

@@ -46,25 +46,31 @@
             </div>
 
             <div class="flex items-center gap-4 pt-4">
-                @if (Model.AvailableCopies > 0)
+                @if (User.IsInRole("Member") || !User.Identity.IsAuthenticated)
                 {
-                    <form asp-controller="Borrowings" asp-action="Borrow" method="POST">
-                        <input type="hidden" name="BookId" value="@Model.Id" />
-                        <button type="submit" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Borrow This Book</button>
-                    </form>
+                    @if (Model.AvailableCopies > 0)
+                    {
+                        <form asp-controller="Borrowings" asp-action="Borrow" method="POST">
+                            <input type="hidden" name="BookId" value="@Model.Id" />
+                            <button type="submit" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Borrow This Book</button>
+                        </form>
+                    }
+                    else
+                    {
+                        <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
+                    }
                 }
-                else
+                
+                @if (User.IsInRole("Librarian"))
                 {
-                    <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
+                    <a asp-action="Edit" asp-route-id="@Model.Id" class="btn-secondary py-3 px-8 text-base">Edit Details</a>
+                    
+                    <form asp-action="Delete" asp-route-id="@Model.Id" method="POST" onsubmit="return confirm('Are you sure you want to remove this book from the catalog?');">
+                        <button type="submit" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                        </button>
+                    </form>
                 }
-                
-                <a asp-action="Edit" asp-route-id="@Model.Id" class="btn-secondary py-3 px-8 text-base">Edit Details</a>
-                
-                <form asp-action="Delete" asp-route-id="@Model.Id" method="POST" onsubmit="return confirm('Are you sure you want to remove this book from the catalog?');">
-                    <button type="submit" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
-                    </button>
-                </form>
             </div>
         </div>
     </div>

Frontend/Views/Books/Index.cshtml

@@ -8,12 +8,15 @@
         <h1 class="text-3xl font-bold tracking-tight text-slate-900">Books Catalog</h1>
         <p class="mt-2 text-slate-500">Explore and discover your next great read.</p>
     </div>
-    <div class="flex items-center gap-3">
-        <a asp-action="Create" class="btn-primary">
-            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
-            Add New Book
-        </a>
-    </div>
+    @if (User.IsInRole("Librarian"))
+    {
+        <div class="flex items-center gap-3">
+            <a asp-action="Create" class="btn-primary">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                Add New Book
+            </a>
+        </div>
+    }
 </div>
 
 <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
@@ -64,9 +67,12 @@
                 </div>
                 <div class="mt-4 pt-4 border-t border-slate-50 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                     <a asp-action="Details" asp-route-id="@book.Id" class="flex-1 btn-secondary py-1 text-[11px]">Details</a>
-                    <a asp-action="Edit" asp-route-id="@book.Id" class="p-1.5 rounded-md border border-slate-200 hover:bg-slate-50 text-slate-600">
-                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
-                    </a>
+                    @if (User.IsInRole("Librarian"))
+                    {
+                        <a asp-action="Edit" asp-route-id="@book.Id" class="p-1.5 rounded-md border border-slate-200 hover:bg-slate-50 text-slate-600">
+                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                        </a>
+                    }
                 </div>
             </div>
         </div>

Frontend/Views/Borrowings/Index.cshtml

@@ -14,7 +14,7 @@
             <thead>
                 <tr class="bg-slate-50/50 border-b border-slate-100">
                     <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book Information</th>
-                    @if (User.IsInRole("Admin"))
+                    @if (User.IsInRole("Librarian"))
                     {
                         <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Member</th>
                     }
@@ -28,7 +28,7 @@
                 @if (!Model.Any())
                 {
                     <tr>
-                        <td colspan="@(User.IsInRole("Admin") ? 6 : 5)" class="px-6 py-12 text-center text-slate-400 italic">
+                        <td colspan="@(User.IsInRole("Librarian") ? 6 : 5)" class="px-6 py-12 text-center text-slate-400 italic">
                             You don't have any borrowing history yet.
                         </td>
                     </tr>
@@ -47,7 +47,7 @@
                                 </div>
                             </div>
                         </td>
-                        @if (User.IsInRole("Admin"))
+                        @if (User.IsInRole("Librarian"))
                         {
                             <td class="px-6 py-4">
                                 <div class="text-sm font-medium text-slate-900 truncate">@loan.UserEmail</div>
@@ -66,8 +66,10 @@
                         </td>
                         <td class="px-6 py-4">
                             <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
-                                @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : "bg-emerald-100 text-emerald-700")">
-                                @loan.Status
+                                @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : 
+                                  loan.Status == "PendingReturn" ? "bg-blue-100 text-blue-700" :
+                                  "bg-emerald-100 text-emerald-700")">
+                                @(loan.Status == "PendingReturn" ? "Pending Approval" : loan.Status)
                             </span>
                         </td>
                         <td class="px-6 py-4">
@@ -91,11 +93,15 @@
                         <td class="px-6 py-4 text-right">
                             @if (loan.Status == "Borrowed")
                             {
-                                <form asp-action="Return" method="POST" onsubmit="return confirm('Ready to return this book?');">
+                                <form asp-action="RequestReturn" method="POST" onsubmit="return confirm('Request return for this book? It will be marked as pending until approved.');">
                                     <input type="hidden" name="id" value="@loan.Id" />
-                                    <button type="submit" class="btn-secondary py-1.5 px-4 text-xs font-bold">@(User.IsInRole("Admin") ? "Process Return" : "Return Book")</button>
+                                    <button type="submit" class="btn-secondary py-1.5 px-4 text-xs font-bold">Return Book</button>
                                 </form>
                             }
+                            else if (loan.Status == "PendingReturn")
+                            {
+                                <span class="text-xs font-medium text-slate-400">Awaiting Approval</span>
+                            }
                         </td>
                     </tr>
                 }

Frontend/Views/Borrowings/Manage.cshtml

@@ -84,8 +84,10 @@
                         </td>
                         <td class="px-6 py-5 text-center">
                             <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider
-                                @(loan.Status == "Borrowed" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700")">
-                                @loan.Status
+                                @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : 
+                                  loan.Status == "PendingReturn" ? "bg-blue-600 text-white shadow-sm" :
+                                  "bg-emerald-100 text-emerald-700")">
+                                @(loan.Status == "PendingReturn" ? "Pending Approval" : loan.Status)
                             </span>
                         </td>
                         <td class="px-6 py-5">
@@ -111,24 +113,31 @@
                             }
                         </td>
                         <td class="px-6 py-5 text-right">
-                            @if (loan.Status == "Borrowed")
+                            @if (loan.Status == "PendingReturn")
                             {
-                                <form asp-action="Return" method="POST" onsubmit="return confirm('Process return for this book?');">
+                                <form asp-action="Return" method="POST" onsubmit="return confirm('Approve this return?');">
+                                    <input type="hidden" name="id" value="@loan.Id" />
+                                    <input type="hidden" name="fromManage" value="true" />
+                                    <button type="submit" class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-emerald-700 transition-all shadow-md">
+                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                                        Approve Return
+                                    </button>
+                                </form>
+                            }
+                            else if (loan.Status == "Borrowed")
+                            {
+                                <form asp-action="Return" method="POST" onsubmit="return confirm('Force process return for this book?');">
                                     <input type="hidden" name="id" value="@loan.Id" />
                                     <input type="hidden" name="fromManage" value="true" />
                                     <button type="submit" class="inline-flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-slate-800 transition-all shadow-sm">
-                                        <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="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
                                         Process Return
                                     </button>
                                 </form>
                             }
                             else
                             {
-                                <div class="group relative inline-block">
-                                    <div class="p-2 bg-slate-100 rounded-full text-slate-400 cursor-help">
-                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                                    </div>
-                                    <span class="absolute hidden group-hover:block bg-slate-800 text-white text-[9px] px-2 py-1 rounded right-0 top-full mt-1 whitespace-nowrap z-10">Completed</span>
+                                <div class="group relative inline-block text-emerald-600">
+                                    <svg class="w-6 h-6 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                 </div>
                             }
                         </td>

Frontend/Views/Borrowings/Rewards.cshtml

@@ -0,0 +1,85 @@
+@model IEnumerable<Frontend.Models.Dtos.LoyaltyRewardDto>
+@{
+    ViewData["Title"] = "Loyalty Rewards";
+}
+
+<div class="mb-10">
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+        <div>
+            <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Loyalty Rewards</h1>
+            <p class="text-slate-500 font-medium">Redeem your hard-earned points for exclusive library benefits.</p>
+        </div>
+        <div class="flex items-center gap-4 bg-amber-50 border border-amber-100 px-6 py-4 rounded-2xl shadow-sm">
+            <div class="p-2 bg-amber-100 rounded-lg text-amber-600">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
+            </div>
+            <div>
+                <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest mb-0.5">Your Balance</p>
+                @* This would ideally be fetched from a global layout or specific viewbag *@
+                <p class="text-2xl font-black text-slate-900">Points</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    @if (!Model.Any())
+    {
+        <div class="col-span-full py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
+            <div class="text-slate-400 mb-4">
+                <svg class="w-16 h-16 mx-auto opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+            </div>
+            <p class="text-slate-500 font-medium italic">No active rewards available at the moment. Check back soon!</p>
+        </div>
+    }
+
+    @foreach (var reward in Model)
+    {
+        <div class="group relative card p-6 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 border-t-4 border-amber-400">
+            <div class="flex justify-between items-start mb-6">
+                <div class="p-3 bg-amber-50 rounded-xl text-amber-600 group-hover:bg-amber-400 group-hover:text-white transition-colors">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
+                </div>
+                <div class="text-right">
+                    <span class="text-3xl font-black text-slate-900">@reward.PointCost</span>
+                    <span class="text-[10px] block font-bold text-slate-400 uppercase tracking-tighter">Points Required</span>
+                </div>
+            </div>
+
+            <h3 class="text-lg font-bold text-slate-900 mb-2 truncate">@reward.Name</h3>
+            <p class="text-sm text-slate-500 leading-relaxed mb-6 h-12 overflow-hidden line-clamp-2">@reward.Description</p>
+
+            <div class="flex items-center justify-between pt-6 border-t border-slate-50">
+                <div class="flex flex-col">
+                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Stock</span>
+                    <span class="text-sm font-bold text-slate-700">@reward.StockQuantity available</span>
+                </div>
+                <button class="bg-slate-900 text-white px-5 py-2.5 rounded-xl text-xs font-bold hover:bg-slate-800 hover:shadow-lg transition-all active:scale-95">
+                    Redeem Reward
+                </button>
+            </div>
+
+            @if (reward.StockQuantity < 10)
+            {
+                <div class="absolute top-2 right-2 flex">
+                    <span class="animate-pulse bg-rose-500 text-white text-[8px] font-black px-1.5 py-0.5 rounded uppercase">Limited</span>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+<div class="mt-12 p-8 bg-slate-900 rounded-3xl text-white relative overflow-hidden">
+    <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
+        <div class="text-center md:text-left">
+            <h2 class="text-2xl font-bold mb-2">How to earn more points?</h2>
+            <p class="text-slate-400 max-w-md">Borrow books, subscribe to memberships, and return books on time to stack up your points and unlock even bigger rewards!</p>
+        </div>
+        <a asp-controller="Books" asp-action="Index" class="bg-amber-400 text-slate-900 px-8 py-4 rounded-2xl font-black hover:bg-amber-300 transition-all shadow-xl shadow-amber-400/20 whitespace-nowrap">
+            Browse Books Now
+        </a>
+    </div>
+    <!-- Decorative background element -->
+    <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-amber-400/10 rounded-full blur-3xl"></div>
+    <div class="absolute -left-10 -top-10 w-48 h-48 bg-blue-400/5 rounded-full blur-3xl"></div>
+</div>

Frontend/Views/Home/Index.cshtml

@@ -10,26 +10,31 @@
 @if (User.Identity?.IsAuthenticated == true)
 {
     <!-- Loyalty Banner -->
-    <div class="bg-gradient-to-r from-amber-500 to-amber-700 rounded-2xl p-6 mb-10 text-white shadow-lg relative overflow-hidden group">
-        <div class="relative z-10 flex items-center justify-between">
-            <div>
-                <p class="text-amber-100 text-sm font-bold uppercase tracking-widest mb-1">Your Loyalty Status</p>
-                <div class="flex items-baseline gap-3">
-                    <h2 class="text-4xl font-extrabold">@ViewBag.LoyaltyPoints</h2>
-                    <span class="text-amber-200 font-medium tracking-wide">Points</span>
+    <a asp-controller="Borrowings" asp-action="Rewards" class="block group">
+        <div class="bg-gradient-to-r from-amber-500 to-amber-700 rounded-2xl p-6 mb-10 text-white shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:translate-y-[-2px] border border-white/10">
+            <div class="relative z-10 flex items-center justify-between">
+                <div>
+                    <p class="text-amber-100 text-sm font-bold uppercase tracking-widest mb-1">Your Loyalty Status</p>
+                    <div class="flex items-baseline gap-3">
+                        <h2 class="text-4xl font-extrabold">@ViewBag.LoyaltyPoints</h2>
+                        <span class="text-amber-200 font-medium tracking-wide">Points</span>
+                    </div>
+                    <p class="text-[10px] text-amber-300/60 mt-1 uppercase tracking-tighter">Connection: @ViewBag.LoyaltyStatus</p>
                 </div>
-                <p class="text-[10px] text-amber-300/60 mt-1 uppercase tracking-tighter">Connection: @ViewBag.LoyaltyStatus</p>
-            </div>
-            <div class="text-right">
-                <div class="inline-flex items-center gap-2 bg-black/20 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 shadow-inner">
-                    <svg class="w-5 h-5 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
-                    <span class="font-bold text-lg">@ViewBag.LoyaltyTier</span>
+                <div class="text-right flex items-center gap-4">
+                    <div class="inline-flex items-center gap-2 bg-black/20 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 shadow-inner">
+                        <svg class="w-5 h-5 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
+                        <span class="font-bold text-lg">@ViewBag.LoyaltyTier</span>
+                    </div>
+                    <div class="p-2 bg-white/20 rounded-full group-hover:bg-white/30 transition-colors">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+                    </div>
                 </div>
             </div>
+            <!-- Decorative Background -->
+            <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/10 rounded-full blur-2xl transform group-hover:scale-110 transition-transform duration-700"></div>
         </div>
-        <!-- Decorative Background -->
-        <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/10 rounded-full blur-2xl transform group-hover:scale-110 transition-transform duration-700"></div>
-    </div>
+    </a>
 }
 
 <!-- Stats Grid -->