From 4d10052ce84d3d578a5538b68d99cbddb02cc5ac Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Thu, 16 Oct 2025 10:22:30 +0200
Subject: [PATCH] beautify: user-management like referral management

---
 src/app/admin/user-management/page.tsx | 60 ++++++++------------------
 1 file changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/app/admin/user-management/page.tsx b/src/app/admin/user-management/page.tsx
index f6388ec..69b41e1 100644
--- a/src/app/admin/user-management/page.tsx
+++ b/src/app/admin/user-management/page.tsx
@@ -123,12 +123,10 @@ export default function AdminUserManagementPage() {
   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>
@@ -139,8 +137,8 @@ export default function AdminUserManagementPage() {
   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>
@@ -233,43 +231,19 @@ export default function AdminUserManagementPage() {
 
   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-mgmt-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-mgmt-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 wrapper card */}
-        <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 Management
-            </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 with referral management) */}
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
+            <p className="text-gray-600 mt-2">
               Manage all users, view statistics, and handle verification.
             </p>
           </div>
 
-            {/* Error Message */}
+          {/* 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 users</p>
@@ -287,7 +261,7 @@ export default function AdminUserManagementPage() {
           {/* Filter Card */}
           <form
             onSubmit={applyFilter}
-            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 Users
@@ -493,8 +467,8 @@ export default function AdminUserManagementPage() {
               </div>
             </div>
           </div>
-        </div>
+        </main>
       </div>
     </PageLayout>
   )
-}
+}
\ No newline at end of file