From eab249ab1fba9cb3f5c9d1ca794d0c69e789ee62 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Thu, 16 Oct 2025 10:27:56 +0200
Subject: [PATCH] beautify: unified admin dashboard style

---
 src/app/admin/page.tsx             | 64 +++++++++---------------------
 src/app/admin/user-verify/page.tsx | 58 ++++++++-------------------
 2 files changed, 34 insertions(+), 88 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index d4e252f..257fd04 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -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,8 +284,8 @@ export default function AdminDashboardPage() {
             </div>
           </div>
 
-        </div>
+        </main>
       </div>
     </PageLayout>
   )
-}
+}
\ No newline at end of file
diff --git a/src/app/admin/user-verify/page.tsx b/src/app/admin/user-verify/page.tsx
index 9ca85fe..cdd800c 100644
--- a/src/app/admin/user-verify/page.tsx
+++ b/src/app/admin/user-verify/page.tsx
@@ -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,8 +356,8 @@ export default function AdminUserVerifyPage() {
               </div>
             </div>
           </div>
-        </div>
+        </main>
       </div>
     </PageLayout>
   )
-}
+}
\ No newline at end of file