Spaces:
Sleeping
Sleeping
File size: 10,453 Bytes
b0a0ed0 c8d434a b0a0ed0 1a7e978 1723ad3 1a7e978 1723ad3 1a7e978 1723ad3 1a7e978 1723ad3 1a7e978 b0a0ed0 6f32ae8 b0a0ed0 c8d434a 6f32ae8 | 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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | @{
ViewData["Title"] = "Dashboard";
}
<div class="mb-10">
<h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Welcome Back</h1>
<p class="text-slate-500 font-medium">Here's what's happening with the library today.</p>
</div>
@if (User.Identity?.IsAuthenticated == true)
{
<!-- Loyalty Banner -->
<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>
<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>
</a>
}
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
<div class="flex items-center justify-between">
<div class="p-2 bg-slate-50 rounded-lg group-hover:bg-slate-100 transition-colors">
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
</div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Books</span>
</div>
<div>
<div class="text-3xl font-bold text-slate-900">@ViewBag.TotalBooks</div>
<div class="text-xs text-slate-500 mt-1 font-medium italic">Total in catalog</div>
</div>
</div>
<div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
<div class="flex items-center justify-between">
<div class="p-2 bg-emerald-50 rounded-lg group-hover:bg-emerald-100 transition-colors">
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
</div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Loans</span>
</div>
<div>
<div class="text-3xl font-bold text-slate-900">@ViewBag.ActiveLoans</div>
<div class="text-xs text-slate-500 mt-1 font-medium italic">Checking out right now</div>
</div>
</div>
<div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 border-l-4 border-l-rose-500">
<div class="flex items-center justify-between">
<div class="p-2 bg-rose-50 rounded-lg group-hover:bg-rose-100 transition-colors">
<svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest text-rose-500">Overdue</span>
</div>
<div>
<div class="text-3xl font-bold text-rose-600">@ViewBag.OverdueLoans</div>
<div class="text-xs text-rose-500 mt-1 font-medium italic">Require attention</div>
</div>
</div>
<div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
<div class="flex items-center justify-between">
<div class="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
</div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Members</span>
</div>
<div>
<div class="text-3xl font-bold text-slate-900">@ViewBag.TotalMembers</div>
<div class="text-xs text-slate-500 mt-1 font-medium italic">In the community</div>
</div>
</div>
</div>
<!-- Recent Arrivals -->
<div class="mb-12">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-slate-900 tracking-tight">Recent Arrivals</h2>
<a asp-controller="Books" asp-action="Index" class="text-sm font-bold text-slate-500 hover:text-slate-900 flex items-center group">
Browse All
<svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
@foreach (var book in (IEnumerable<LibraryManagement.Shared.Models.BookDto>)ViewBag.RecentBooks)
{
<div class="group cursor-pointer">
<div class="aspect-[2/3] w-full bg-slate-100 rounded-xl mb-3 flex items-center justify-center text-slate-300 group-hover:shadow-lg transition-all duration-300 relative overflow-hidden">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
@if (book.AvailableCopies <= 0)
{
<div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px] flex items-center justify-center">
<span class="bg-white text-slate-900 text-[8px] font-bold uppercase px-2 py-1 rounded">Out</span>
</div>
}
</div>
<h3 class="text-xs font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors">
<a asp-controller="Books" asp-action="Details" asp-route-id="@book.Id">@book.Title</a>
</h3>
<p class="text-[10px] text-slate-500 truncate mt-0.5 font-medium">@book.Author</p>
</div>
}
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-slate-900 text-white rounded-3xl p-8 flex flex-col justify-between overflow-hidden relative group">
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-2">Explore the Library</h2>
<p class="text-slate-400 text-sm max-w-[280px]">Access thousands of books across all categories with a premium member account.</p>
</div>
<div class="mt-8 relative z-10">
<a asp-controller="Books" asp-action="Index" class="inline-flex items-center bg-white text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold hover:bg-slate-100 transition-colors">
View Catalog
</a>
</div>
<svg class="absolute bottom-0 right-0 w-48 h-48 text-slate-800 -mb-12 -mr-12 opacity-50 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><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 class="bg-amber-50 rounded-3xl p-8 flex flex-col justify-between group border border-amber-100">
<div>
<h2 class="text-2xl font-bold text-slate-900 mb-2">My Current Loans</h2>
<p class="text-slate-600 text-sm max-w-[280px]">Don't forget to return your books on time to avoid late fees.</p>
</div>
<div class="mt-8">
<a asp-controller="Borrowings" asp-action="Index" class="inline-flex items-center text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold border-2 border-slate-900 hover:bg-slate-900 hover:text-white transition-all">
Manage My Loans
</a>
</div>
</div>
</div>
|