Frontend/Views/Subscriptions/LoyaltyClaims.cshtml

@model List<LibraryManagement.Shared.Models.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">Point Cost</th>
                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Redeemed At</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.PointCost.ToString("N0") pts</td>
                        <td class="px-6 py-4 text-slate-500 text-sm">@claim.RedeemedAt.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>