add: fix user insights active ranking, rewards theme changes

BlazorFrontend/Components/Layout/MainLayout.razor

@@ -71,6 +71,10 @@
                                 <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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                 Manage Rewards
                             </NavLink>
+                            <NavLink href="Insights" class="nav-link" ActiveClass="active">
+                                <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 12V7H5a2 2 0 010-4h14v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 000 4h4v-4Z"/></svg>
+                                User Insights
+                            </NavLink>
                         </Authorized>
                     </AuthorizeView>
                 </nav>

BlazorFrontend/Components/Pages/Home.razor

@@ -27,27 +27,32 @@ else
             @if (_loyaltyAccount != null)
             {
                 <a href="Rewards" class="block group mb-10 animate-in fade-in zoom-in-95 duration-700">
-                    <div class="bg-gradient-to-r from-amber-500 to-amber-700 rounded-2xl p-6 text-white shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:translate-y-[-2px] border border-white/10">
-                        <div class="relative z-10 flex items-center justify-between">
+                    <div class="bg-gradient-to-br from-mystic-900 to-[#5a5669] rounded-3xl p-8 text-white shadow-xl relative overflow-hidden transition-all duration-500 hover:shadow-2xl hover:translate-y-[-4px] border border-white/5">
+                        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
                             <div>
-                                <p class="text-amber-100 text-sm font-bold uppercase tracking-widest mb-1">Your Loyalty Status</p>
+                                <p class="text-mystic-200 text-xs font-bold uppercase tracking-[0.2em] mb-2 opacity-80">Your Loyalty Status</p>
                                 <div class="flex items-baseline gap-3">
-                                    <h2 class="text-4xl font-extrabold">@_loyaltyAccount.CurrentBalance.ToString("N0")</h2>
-                                    <span class="text-amber-200 font-medium tracking-wide">Points</span>
+                                    <h2 class="text-5xl font-black tracking-tighter">@_loyaltyAccount.CurrentBalance.ToString("N0")</h2>
+                                    <span class="text-mystic-300 font-bold tracking-wide text-lg">Points Earned</span>
                                 </div>
-                                <p class="text-[10px] text-amber-300/60 mt-1 uppercase tracking-tighter">Connection: Connected</p>
+                                <p class="text-[10px] text-white/40 mt-3 uppercase tracking-widest font-bold">Member Account: Verified</p>
                             </div>
-                            <div class="text-right flex items-center gap-4">
-                                <div class="inline-flex items-center gap-2 bg-black/20 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 shadow-inner">
-                                    <svg class="w-5 h-5 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
-                                    <span class="font-bold text-lg">@_loyaltyAccount.Tier</span>
+                            <div class="flex items-center gap-6">
+                                <div class="flex flex-col items-end">
+                                    <span class="text-[10px] text-mystic-300 font-bold uppercase tracking-widest mb-1 opacity-60">Current Tier</span>
+                                    <div class="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md px-6 py-3 rounded-2xl border border-white/10 shadow-xl">
+                                        <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
+                                        <span class="font-black text-xl tracking-tight">@_loyaltyAccount.Tier</span>
+                                    </div>
                                 </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 class="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center group-hover:bg-white/20 transition-all duration-300">
+                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                                 </div>
                             </div>
                         </div>
-                        <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/10 rounded-full blur-2xl transform group-hover:scale-110 transition-transform duration-700"></div>
+                        <!-- Decorative Elements -->
+                        <div class="absolute -right-20 -bottom-20 w-64 h-64 bg-white/5 rounded-full blur-3xl transform group-hover:scale-125 transition-transform duration-1000"></div>
+                        <div class="absolute -left-20 -top-20 w-48 h-48 bg-mystic-100/5 rounded-full blur-2xl transform group-hover:scale-110 transition-transform duration-1000"></div>
                     </div>
                 </a>
             }

BlazorFrontend/Components/Pages/Rewards.razor

@@ -14,10 +14,10 @@
     @if (_account != null)
     {
         <div class="flex items-center gap-4">
-            <div class="text-center bg-amber-50 border border-amber-200 px-6 py-3 rounded-2xl shadow-sm">
-                <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest">Balance</p>
-                <p class="text-2xl font-black text-mystic-900">@_account.CurrentBalance.ToString("N0")</p>
-                <p class="text-xs text-amber-600 font-semibold">Points</p>
+            <div class="text-center bg-mystic-900 text-white px-6 py-3 rounded-2xl shadow-lg border border-white/5">
+                <p class="text-[10px] font-bold text-mystic-200 uppercase tracking-widest">Balance</p>
+                <p class="text-2xl font-black">@_account.CurrentBalance.ToString("N0")</p>
+                <p class="text-xs text-mystic-300 font-semibold">Points</p>
             </div>
             <div class="text-center bg-mystic-50 border border-mystic-200 px-6 py-3 rounded-2xl shadow-sm">
                 <p class="text-[10px] font-bold text-mystic-500 uppercase tracking-widest">Tier</p>
@@ -48,7 +48,7 @@
             </span>
             @if (_pendingRedemptions.Any())
             {
-                <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black rounded-full bg-amber-400 text-mystic-900">@_pendingRedemptions.Count()</span>
+                <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black rounded-full bg-mystic-900 text-white">@_pendingRedemptions.Count()</span>
             }
         </button>
         <button @onclick='() => _activeTab = "history"'
@@ -87,10 +87,10 @@ else
                     {
                         var canAfford = _account != null && _account.CurrentBalance >= reward.PointCost;
                         <div class="group relative bg-white border border-mystic-200 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
-                            <div class="h-1.5 @(canAfford ? "bg-gradient-to-r from-amber-400 to-orange-400" : "bg-mystic-200")"></div>
+                            <div class="h-1.5 @(canAfford ? "bg-gradient-to-r from-mystic-600 to-mystic-900" : "bg-mystic-200")"></div>
                             <div class="p-6">
                                 <div class="flex justify-between items-start mb-4">
-                                    <div class="p-3 @(canAfford ? "bg-amber-50 text-amber-600" : "bg-mystic-100 text-mystic-400") rounded-xl">
+                                    <div class="p-3 @(canAfford ? "bg-mystic-50 text-mystic-600" : "bg-mystic-100 text-mystic-400") rounded-xl">
                                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
                                     </div>
                                     <div class="text-right">
@@ -105,7 +105,7 @@ else
                                     @if (canAfford)
                                     {
                                         <button @onclick="() => RedeemAsync(reward)"
-                                                class="bg-mystic-900 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-amber-500 transition-all active:scale-95">
+                                                class="bg-mystic-900 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-mystic-700 transition-all active:scale-95 shadow-md">
                                             Redeem
                                         </button>
                                     }
@@ -128,7 +128,7 @@ else
                     <h2 class="text-lg font-bold mb-1">How to earn more points?</h2>
                     <p class="text-mystic-400 text-sm">Borrow books, subscribe, and return on time to earn points!</p>
                 </div>
-                <a href="Books" class="bg-amber-400 text-mystic-900 px-6 py-3 rounded-2xl font-black hover:bg-amber-300 transition-all text-sm whitespace-nowrap">Browse Books →</a>
+                <a href="Books" class="bg-white text-mystic-900 px-6 py-3 rounded-2xl font-black hover:bg-mystic-50 transition-all text-sm whitespace-nowrap shadow-sm">Browse Books →</a>
             </div>
         </div>
     }
@@ -146,9 +146,9 @@ else
                 <div class="space-y-3">
                     @foreach (var r in _pendingRedemptions)
                     {
-                        <div class="flex items-center justify-between bg-white border border-amber-100 rounded-2xl px-6 py-4 shadow-sm">
+                        <div class="flex items-center justify-between bg-white border border-mystic-100 rounded-2xl px-6 py-4 shadow-sm">
                             <div class="flex items-center gap-4">
-                                <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center text-amber-500 flex-shrink-0">
+                                <div class="w-10 h-10 rounded-xl bg-mystic-50 flex items-center justify-center text-mystic-600 flex-shrink-0">
                                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                                 </div>
                                 <div>
@@ -156,8 +156,8 @@ else
                                     <p class="text-xs text-mystic-400">Claimed @r.RedeemedAt.ToString("MMM dd, yyyy") · @r.PointCost.ToString("N0") pts</p>
                                 </div>
                             </div>
-                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
-                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-mystic-50 text-mystic-700 border border-mystic-200">
+                                <span class="w-1.5 h-1.5 rounded-full bg-mystic-900 animate-pulse"></span>
                                 Awaiting Fulfillment
                             </span>
                         </div>

BlazorFrontend/Components/Pages/UserInsights.razor

@@ -0,0 +1,273 @@
+@page "/Insights"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Librarian")]
+@inject LibraryApiClient ApiClient
+
+<PageTitle>User Insights</PageTitle>
+
+<div class="mb-10 animate-in fade-in slide-in-from-top-4 duration-500">
+    <h1 class="text-4xl font-extrabold tracking-tight text-mystic-900 border-b border-mystic-100 pb-4 mb-2">User Insights</h1>
+    <p class="text-mystic-500 font-medium">Discover top-performing library members and engagement trends.</p>
+</div>
+
+@if (_isLoading)
+{
+    <div class="py-20 flex flex-col items-center justify-center gap-4">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-mystic-900"></div>
+        <p class="text-mystic-400 font-medium animate-pulse">Calculating insights...</p>
+    </div>
+}
+else
+{
+    <!-- Tabs -->
+    <div class="flex p-1 bg-mystic-100 rounded-2xl mb-12 max-w-2xl mx-auto shadow-inner">
+        <button @onclick='() => _activeTab = "Subscribers"' 
+                class='flex-1 py-3 px-6 rounded-xl text-sm font-bold transition-all @(_activeTab == "Subscribers" ? "bg-white text-mystic-900 shadow-sm" : "text-mystic-500 hover:text-mystic-700")'>
+            Top Subscribers
+        </button>
+        <button @onclick='() => _activeTab = "Loyalty"' 
+                class='flex-1 py-3 px-6 rounded-xl text-sm font-bold transition-all @(_activeTab == "Loyalty" ? "bg-white text-mystic-900 shadow-sm" : "text-mystic-500 hover:text-mystic-700")'>
+            Top Loyalty
+        </button>
+        <button @onclick='() => _activeTab = "Active"' 
+                class='flex-1 py-3 px-6 rounded-xl text-sm font-bold transition-all @(_activeTab == "Active" ? "bg-white text-mystic-900 shadow-sm" : "text-mystic-500 hover:text-mystic-700")'>
+            Most Active
+        </button>
+    </div>
+
+    <!-- Insight Content -->
+    <div class="animate-in fade-in zoom-in-95 duration-700">
+        @if (CurrentInsightData.Any())
+        {
+            <!-- Podium -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-end mb-16 max-w-5xl mx-auto px-4">
+                @* 2nd Place *@
+                @if (CurrentInsightData.Count() > 1)
+                {
+                    var user = CurrentInsightData.ElementAt(1);
+                    <div class="flex flex-col items-center animate-in slide-in-from-bottom-8 duration-700 delay-100">
+                        <div class="relative mb-4">
+                            <div class="w-24 h-24 rounded-2xl bg-mystic-100 border-2 border-mystic-200 flex items-center justify-center text-mystic-400 text-3xl font-black shadow-lg">
+                                @(user.Name.Substring(0, Math.Min(2, user.Name.Length)).ToUpper())
+                            </div>
+                            <div class="absolute -top-3 -right-3 w-10 h-10 rounded-full bg-slate-300 border-4 border-white flex items-center justify-center text-white font-bold shadow-md">2</div>
+                        </div>
+                        <h3 class="text-lg font-bold text-mystic-900 text-center truncate w-full">@user.Name</h3>
+                        <p class="text-mystic-500 font-bold text-sm">@user.ValueLabel</p>
+                        <div class="mt-4 h-32 w-full bg-gradient-to-t from-mystic-100 to-transparent rounded-t-3xl border-x border-t border-mystic-200/50"></div>
+                    </div>
+                }
+
+                @* 1st Place *@
+                @if (CurrentInsightData.Any())
+                {
+                    var user = CurrentInsightData.ElementAt(0);
+                    <div class="flex flex-col items-center relative z-10 animate-in slide-in-from-bottom-12 duration-700">
+                        <div class="relative mb-6">
+                            <div class="w-32 h-32 rounded-3xl bg-mystic-900 flex items-center justify-center text-white text-4xl font-black shadow-2xl ring-4 ring-mystic-900/10 scale-110">
+                                @(user.Name.Substring(0, Math.Min(2, user.Name.Length)).ToUpper())
+                            </div>
+                            <div class="absolute -top-4 -right-4 w-12 h-12 rounded-full bg-mystic-900 border-4 border-white flex items-center justify-center text-white text-xl font-bold shadow-xl">1</div>
+                            <div class="absolute -top-12 left-1/2 -translate-x-1/2 text-mystic-900 font-black tracking-tighter">
+                                <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5Z"></path></svg>
+                            </div>
+                        </div>
+                        <h3 class="text-2xl font-black text-mystic-900 text-center truncate w-full">@user.Name</h3>
+                        <p class="text-mystic-700 font-black text-lg">@user.ValueLabel</p>
+                        <div class="mt-6 h-48 w-full bg-gradient-to-t from-mystic-200 to-transparent rounded-t-[2.5rem] border-x border-t border-mystic-300/30 shadow-2xl shadow-mystic-900/5"></div>
+                    </div>
+                }
+
+                @* 3rd Place *@
+                @if (CurrentInsightData.Count() > 2)
+                {
+                    var user = CurrentInsightData.ElementAt(2);
+                    <div class="flex flex-col items-center animate-in slide-in-from-bottom-6 duration-700 delay-200">
+                        <div class="relative mb-4">
+                            <div class="w-20 h-20 rounded-2xl bg-mystic-50 border-2 border-mystic-100 flex items-center justify-center text-mystic-300 text-2xl font-black shadow-md">
+                                @(user.Name.Substring(0, Math.Min(2, user.Name.Length)).ToUpper())
+                            </div>
+                            <div class="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-mystic-500 border-4 border-white flex items-center justify-center text-white font-bold shadow-md">3</div>
+                        </div>
+                        <h3 class="text-base font-bold text-mystic-900 text-center truncate w-full">@user.Name</h3>
+                        <p class="text-mystic-400 font-bold text-xs">@user.ValueLabel</p>
+                        <div class="mt-4 h-24 w-full bg-gradient-to-t from-mystic-50 to-transparent rounded-t-2xl border-x border-t border-mystic-100/30"></div>
+                    </div>
+                }
+            </div>
+
+            <!-- Full List Table -->
+            <div class="card overflow-hidden">
+                <div class="p-6 border-b border-mystic-100 bg-mystic-50/50">
+                    <h3 class="text-lg font-bold text-mystic-900">Rankings Overview</h3>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr class="bg-white border-b border-mystic-100">
+                                <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Rank</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Member</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Performance</th>
+                                <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest text-right">Progress</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-mystic-100">
+                            @foreach (var (user, index) in CurrentInsightData.Select((u, i) => (u, i)))
+                            {
+                                <tr class="hover:bg-mystic-50/50 transition-colors group">
+                                    <td class="px-6 py-5">
+                                        <div class='w-8 h-8 rounded-lg flex items-center justify-center text-sm font-black @(index == 0 ? "bg-mystic-900 text-white shadow-md" : index == 1 ? "bg-mystic-600 text-white" : index == 2 ? "bg-mystic-300 text-mystic-900" : "text-mystic-400")'>
+                                            #@(index + 1)
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-5">
+                                        <div class="flex items-center gap-3">
+                                            <div class="w-10 h-10 rounded-full bg-mystic-900/5 flex items-center justify-center text-mystic-600 font-bold text-xs border border-mystic-100">
+                                                @(user.Name.Substring(0, Math.Min(2, user.Name.Length)).ToUpper())
+                                            </div>
+                                            <div>
+                                                <p class="text-sm font-bold text-mystic-900 group-hover:text-mystic-600 transition-colors">@user.Name</p>
+                                                <p class="text-[10px] text-mystic-400 font-medium">Member since @user.JoinedDate.ToString("MMM yyyy")</p>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-5">
+                                        <div class="flex flex-col">
+                                            <span class="text-sm font-extrabold text-mystic-900">@user.ValueLabel</span>
+                                            <span class="text-[10px] text-mystic-500 font-medium">Lifetime Achievement</span>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-5">
+                                        <div class="w-full bg-mystic-100 h-1.5 rounded-full overflow-hidden max-w-[120px] ml-auto">
+                                            <div class="bg-mystic-900 h-full transition-all duration-1000" 
+                                                 style="width: @(CalculatePercentage(user.RawValue))%"></div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        }
+        else
+        {
+            <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                <p class="text-mystic-400 font-medium italic">No data available for this insight yet.</p>
+            </div>
+        }
+    </div>
+}
+
+@code {
+    private bool _isLoading = true;
+    private string _activeTab = "Subscribers";
+    
+    private List<InsightItem> _subscribers = new();
+    private List<InsightItem> _loyalty = new();
+    private List<InsightItem> _activeReaders = new();
+
+    private IEnumerable<InsightItem> CurrentInsightData => _activeTab switch
+    {
+        "Subscribers" => _subscribers,
+        "Loyalty" => _loyalty,
+        "Active" => _activeReaders,
+        _ => Enumerable.Empty<InsightItem>()
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadInsightsAsync();
+    }
+
+    private async Task LoadInsightsAsync()
+    {
+        _isLoading = true;
+        try
+        {
+            var users = await ApiClient.GetUsersAsync();
+            var borrowings = await ApiClient.GetAllBorrowingsAsync();
+            var subscriptions = await ApiClient.GetAllSubscriptionsAsync();
+            var memberships = await ApiClient.GetMembershipsAsync();
+            var loyaltyHistory = await ApiClient.GetAllMembersPointsHistoryAsync();
+
+            // 1. Top Subscribers (Total Spent)
+            var membershipPriceMap = memberships.ToDictionary(m => m.Id, m => m.Price);
+            _subscribers = subscriptions
+                .GroupBy(s => s.UserId)
+                .Select(g => {
+                    var user = users.FirstOrDefault(u => u.Id == g.Key);
+                    var totalSpent = g.Sum(s => membershipPriceMap.TryGetValue(s.MembershipId, out var price) ? price : 0);
+                    return new InsightItem {
+                        UserId = g.Key,
+                        Name = user?.FullName ?? "Unknown User",
+                        JoinedDate = user?.CreatedAt ?? DateTime.MinValue,
+                        RawValue = (double)totalSpent,
+                        ValueLabel = $"MMK {totalSpent:N0}"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+
+            // 2. Top Loyalty (Earned Points only)
+            _loyalty = loyaltyHistory
+                .Select(lh => {
+                    var user = users.FirstOrDefault(u => u.Id == lh.UserId);
+                    var totalEarned = lh.History.Where(h => h.PointDelta > 0).Sum(h => h.PointDelta);
+                    return new InsightItem {
+                        UserId = lh.UserId,
+                        Name = user?.FullName ?? lh.UserName,
+                        JoinedDate = user?.CreatedAt ?? DateTime.MinValue,
+                        RawValue = totalEarned,
+                        ValueLabel = $"{totalEarned:N0} Points"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+
+            // 3. Most Active (Approved Returns only)
+            _activeReaders = borrowings
+                .Where(b => b.Status == "Returned")
+                .GroupBy(b => b.UserId)
+                .Select(g => {
+                    var user = users.FirstOrDefault(u => u.Id == g.Key);
+                    var count = g.Count();
+                    return new InsightItem {
+                        UserId = g.Key,
+                        Name = user?.FullName ?? "Unknown User",
+                        JoinedDate = user?.CreatedAt ?? DateTime.MinValue,
+                        RawValue = count,
+                        ValueLabel = $"{count} Completed"
+                    };
+                })
+                .OrderByDescending(i => i.RawValue)
+                .ToList();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error loading insights: {ex.Message}");
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+
+    private double CalculatePercentage(double value)
+    {
+        var max = CurrentInsightData.Any() ? CurrentInsightData.Max(i => i.RawValue) : 1;
+        if (max == 0) return 0;
+        return (value / max) * 100;
+    }
+
+    private class InsightItem
+    {
+        public Guid UserId { get; set; }
+        public string Name { get; set; } = "";
+        public DateTime JoinedDate { get; set; }
+        public double RawValue { get; set; }
+        public string ValueLabel { get; set; } = "";
+    }
+}