beautify: unified admin dashboard style
This commit is contained in:
DeathKaioken
parent
4d10052ce8
commit
eab249ab1f
@ -49,12 +49,10 @@ export default function AdminDashboardPage() {
|
||||
if (!isClient) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
|
||||
<div className="text-center">
|
||||
<div className="h-4 w-4 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="h-12 w-12 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
@ -65,8 +63,8 @@ export default function AdminDashboardPage() {
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-red-500/20 p-6 sm:p-10">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
|
||||
<p className="text-gray-600">You need admin privileges to access this page.</p>
|
||||
@ -79,43 +77,18 @@ export default function AdminDashboardPage() {
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
{/* Background */}
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute inset-0 -z-20 bg-gradient-to-br from-[#0b3e98] via-[#0d51c2] to-[#1d66d9]" />
|
||||
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
|
||||
<defs>
|
||||
<pattern id="admin-dash-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#admin-dash-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||
</svg>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48"
|
||||
>
|
||||
<div
|
||||
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#94b3ff] to-[#a78bfa] opacity-40"
|
||||
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Outer container card */}
|
||||
<div className="relative mx-auto w-full max-w-7xl bg-white/90 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10 space-y-8">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Heading */}
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#11306b]">
|
||||
Admin Dashboard
|
||||
</h1>
|
||||
<p className="text-sm sm:text-base text-[#34507d] font-medium">
|
||||
Manage all administrative features, user management, permissions, and global settings.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
|
||||
<p className="text-sm sm:text-base text-gray-600 mt-2">
|
||||
Manage all administrative features, user management, permissions, and global settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Warning banner */}
|
||||
<div className="rounded-lg border border-red-300 bg-red-50/90 text-red-700 px-5 py-4 flex gap-3 items-start text-sm">
|
||||
<div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start text-sm mb-8">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
|
||||
<div className="leading-relaxed">
|
||||
<p className="font-semibold mb-0.5">
|
||||
@ -128,7 +101,7 @@ export default function AdminDashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Top grid: User Management + Permission Management */}
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="grid gap-6 lg:grid-cols-2 mb-8">
|
||||
{/* User Management Card */}
|
||||
<div className="rounded-xl border border-gray-200 bg-[#f5f9ff] p-6 shadow-sm hover:shadow-md transition">
|
||||
<div className="flex items-start gap-3 mb-5">
|
||||
@ -234,7 +207,6 @@ export default function AdminDashboardPage() {
|
||||
<button
|
||||
type="button"
|
||||
className="w-full inline-flex items-center justify-center gap-2 rounded-md bg-violet-50 hover:bg-violet-100 border border-violet-200 text-violet-700 text-xs sm:text-sm font-medium px-4 py-2.5 transition"
|
||||
// TODO: navigate to permissions page
|
||||
onClick={() => router.push('/admin/user-management')}
|
||||
>
|
||||
Go to Permission Management
|
||||
@ -312,7 +284,7 @@ export default function AdminDashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
|
||||
@ -106,12 +106,10 @@ export default function AdminUserVerifyPage() {
|
||||
if (!isClient) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
|
||||
<div className="text-center">
|
||||
<div className="h-4 w-4 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="h-12 w-12 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
@ -122,8 +120,8 @@ export default function AdminUserVerifyPage() {
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-red-500/20 p-6 sm:p-10">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
|
||||
<div className="text-center">
|
||||
<ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
|
||||
@ -137,43 +135,19 @@ export default function AdminUserVerifyPage() {
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10">
|
||||
{/* Background */}
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute inset-0 -z-20 bg-gradient-to-tr from-[#0d3894] via-[#1860d2] to-[#1d66d9]" />
|
||||
<svg aria-hidden="true" className="absolute inset-0 h-full w-full stroke-white/10">
|
||||
<defs>
|
||||
<pattern id="admin-user-verify-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#admin-user-verify-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||
</svg>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48"
|
||||
>
|
||||
<div
|
||||
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#5b8dff] to-[#a78bfa] opacity-40"
|
||||
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Outer container */}
|
||||
<div className="relative mx-auto w-full max-w-7xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#0e2f63]">
|
||||
User Verification Center
|
||||
</h1>
|
||||
<p className="mt-2 text-sm sm:text-base text-[#33507d] font-medium">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Title (unified) */}
|
||||
<div className="mb-8 text-left">
|
||||
<h1 className="text-3xl font-bold text-gray-900">User Verification Center</h1>
|
||||
<p className="mt-2 text-sm sm:text-base text-gray-600">
|
||||
Review and verify all users who need admin approval. Users must complete all steps before verification.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start">
|
||||
<div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start mb-6">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-semibold">Error loading data</p>
|
||||
@ -191,7 +165,7 @@ export default function AdminUserVerifyPage() {
|
||||
{/* Filter Card */}
|
||||
<form
|
||||
onSubmit={applyFilters}
|
||||
className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 px-4 sm:px-6 py-5 flex flex-col gap-4"
|
||||
className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 px-4 sm:px-6 py-5 flex flex-col gap-4 mb-6"
|
||||
>
|
||||
<h2 className="text-sm font-semibold text-[#0f2c55]">
|
||||
Search & Filter Pending Users
|
||||
@ -382,7 +356,7 @@ export default function AdminUserVerifyPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user