Spaces:
Sleeping
Sleeping
File size: 6,716 Bytes
b0a0ed0 7fe61c9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | @model Frontend.Models.SubscriptionsViewModel
@{
ViewData["Title"] = "Memberships";
}
<div class="mb-8">
<h1 class="text-2xl font-bold text-slate-900">Memberships</h1>
<p class="text-slate-600 mt-1">Available membership plans in the system</p>
</div>
<!-- Available Plans Section -->
<div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach (var plan in Model.AvailableMemberships)
{
<div class="card flex flex-col h-full relative transition duration-200 hover:shadow-md">
<div class="p-6 border-b border-slate-100 flex-grow">
<h3 class="text-lg font-bold text-slate-900 uppercase tracking-wider mb-2">@plan.Type</h3>
<div class="flex items-baseline gap-1 mb-4">
<span class="text-3xl font-extrabold text-slate-900">@plan.Price.ToString("N0") <span class="text-lg text-slate-500 font-medium">MMK</span></span>
<span class="text-slate-500 font-medium">/ @(plan.DurationMonths == 1 ? "month" : $"{plan.DurationMonths} months")</span>
</div>
<ul class="space-y-3 mt-6">
<li class="flex 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-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
<span class="text-slate-600">Borrow up to <span class="font-bold text-slate-900">@plan.MaxBooks books</span> at a time</span>
</li>
<li class="flex 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-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
<span class="text-slate-600">Keep books for <span class="font-bold text-slate-900">@plan.BorrowingDays days</span></span>
</li>
<li class="flex 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-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
<span class="text-slate-600">Full catalog access</span>
</li>
</ul>
</div>
<div class="p-4 bg-slate-50 mt-auto text-center border-t border-slate-100">
<span class="text-xs text-slate-500 font-medium uppercase tracking-widest">System Plan</span>
</div>
</div>
}
</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>
|