From 5f637817ced517e58a3ef220b711b2ee33a0883c Mon Sep 17 00:00:00 2001
From: Joachim Hummel <jh@unixweb.de>
Date: Sat, 29 Nov 2025 22:37:08 +0000
Subject: [PATCH] Improve admin page UI with modern SaaS design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add gradient hero section with welcome message
- Redesign stat cards with colorful gradients and hover effects
- Update system status cards with color-coded backgrounds
- Enhance database statistics section with modern cards
- Modernize device list table with gradient headers
- Improve database maintenance section with better visual hierarchy
- Add gradient background to entire admin layout
- Update header with glassmorphism effect and modern badges
- Enhance navigation with improved active states and transitions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/admin/layout.tsx |  41 +++---
 app/admin/page.tsx   | 325 ++++++++++++++++++++++++++-----------------
 2 files changed, 220 insertions(+), 146 deletions(-)

diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 624d470..cfc3c63 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -34,43 +34,46 @@ export default function AdminLayout({
   });
 
   return (
-    <div className="min-h-screen bg-gray-100">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
       {/* Header */}
-      <header className="bg-white shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+      <header className="bg-white/80 backdrop-blur-lg shadow-lg border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
           {/* Top row: Title + User Info + Actions */}
-          <div className="flex justify-between items-center mb-3 lg:mb-0">
-            <div>
-              <h1 className="text-xl sm:text-2xl font-bold text-black">
+          <div className="flex justify-between items-center mb-4 lg:mb-0">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center text-white text-xl shadow-lg">
+                🎯
+              </div>
+              <h1 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-700 bg-clip-text text-transparent">
                 {isAdmin ? 'Admin Panel' : 'Dashboard'}
               </h1>
             </div>
             <div className="flex gap-2 sm:gap-4 items-center">
               {/* User info */}
-              <div className="flex items-center gap-2 text-xs sm:text-sm">
-                <span className="text-gray-600">Angemeldet als:</span>
-                <span className="font-semibold text-black">{username || session?.user?.email}</span>
+              <div className="flex items-center gap-3 text-xs sm:text-sm bg-gradient-to-r from-gray-50 to-slate-50 px-4 py-2 rounded-xl border border-gray-200 shadow-sm">
+                <span className="text-gray-600 font-medium">Angemeldet als:</span>
+                <span className="font-bold text-gray-900">{username || session?.user?.email}</span>
                 {!isAdmin && (
-                  <span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs">Viewer</span>
+                  <span className="px-3 py-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg text-xs font-bold shadow-md">Viewer</span>
                 )}
                 {isAdmin && (
-                  <span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">Admin</span>
+                  <span className="px-3 py-1 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg text-xs font-bold shadow-md">Admin</span>
                 )}
               </div>
               {/* Actions */}
-              <div className="flex gap-2 items-center border-l border-gray-300 pl-2 sm:pl-4">
+              <div className="flex gap-2 items-center border-l-2 border-gray-300 pl-2 sm:pl-4">
                 <Link
                   href="/map"
-                  className="px-2 sm:px-4 py-2 text-sm text-black font-semibold hover:text-blue-600"
+                  className="px-3 sm:px-5 py-2.5 text-sm text-gray-700 font-bold hover:text-blue-600 bg-white rounded-lg hover:bg-blue-50 transition-all shadow-sm hover:shadow-md border border-gray-200"
                 >
-                  Map
+                  🗺️ Map
                 </Link>
                 <button
                   onClick={async () => {
                     await signOut({ redirect: false });
                     window.location.href = '/login';
                   }}
-                  className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-semibold"
+                  className="px-3 sm:px-5 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-lg hover:from-red-700 hover:to-red-800 text-sm font-bold shadow-md hover:shadow-lg transition-all"
                 >
                   Logout
                 </button>
@@ -79,15 +82,15 @@ export default function AdminLayout({
           </div>
 
           {/* Navigation row (scrollable on mobile) */}
-          <nav className="flex gap-2 overflow-x-auto lg:gap-4 pb-2 lg:pb-0 -mx-4 px-4 sm:mx-0 sm:px-0">
+          <nav className="flex gap-2 overflow-x-auto lg:gap-3 pb-2 lg:pb-0 -mx-4 px-4 sm:mx-0 sm:px-0 mt-4 border-t border-gray-200 pt-4">
             {navigation.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
-                className={`px-3 py-2 rounded-md text-sm font-semibold transition-colors whitespace-nowrap ${
+                className={`px-4 py-2.5 rounded-xl text-sm font-bold transition-all whitespace-nowrap shadow-sm ${
                   pathname === item.href
-                    ? "bg-blue-600 text-white"
-                    : "text-black hover:bg-gray-200"
+                    ? "bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg scale-105"
+                    : "bg-white text-gray-700 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:text-blue-700 border border-gray-200"
                 }`}
               >
                 {item.name}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 910b785..b30e48e 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -256,49 +256,77 @@ export default function AdminDashboard() {
   ];
 
   return (
-    <div className="space-y-6">
-      <h2 className="text-3xl font-bold text-gray-900">Dashboard</h2>
+    <div className="space-y-8">
+      {/* Hero Section with Gradient */}
+      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 shadow-xl">
+        <div className="absolute top-0 right-0 -mt-4 -mr-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
+        <div className="absolute bottom-0 left-0 -mb-4 -ml-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
+        <div className="relative">
+          <h2 className="text-4xl font-bold text-white mb-2">Dashboard</h2>
+          <p className="text-blue-100 text-lg">Willkommen zurück! Hier ist ein Überblick über dein System.</p>
+        </div>
+      </div>
 
       {/* Stats Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {statCards.map((stat) => (
-          <div
-            key={stat.title}
-            className="bg-white rounded-lg shadow p-6 flex items-center gap-4"
-          >
-            <div className="text-4xl">{stat.icon}</div>
-            <div>
-              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
-              <p className="text-3xl font-bold text-gray-900">{stat.value}</p>
+        {statCards.map((stat, index) => {
+          const gradients = [
+            'from-emerald-500 to-teal-600',
+            'from-blue-500 to-indigo-600',
+            'from-violet-500 to-purple-600'
+          ];
+          return (
+            <div
+              key={stat.title}
+              className="group relative overflow-hidden bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
+            >
+              <div className={`absolute inset-0 bg-gradient-to-br ${gradients[index]} opacity-0 group-hover:opacity-5 transition-opacity`}></div>
+              <div className="p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div className={`flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br ${gradients[index]} text-white text-2xl shadow-lg`}>
+                    {stat.icon}
+                  </div>
+                </div>
+                <p className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">{stat.title}</p>
+                <p className="text-4xl font-bold bg-gradient-to-br from-gray-900 to-gray-700 bg-clip-text text-transparent">{stat.value}</p>
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
       {/* System Status */}
       {systemStatus && (
-        <div className="bg-white rounded-lg shadow">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h3 className="text-lg font-semibold text-gray-900">
-              System Status
-            </h3>
+        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
+          <div className="bg-gradient-to-r from-slate-50 to-gray-50 px-6 py-5 border-b border-gray-200">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-white text-xl">
+                ⚙️
+              </div>
+              <h3 className="text-xl font-bold text-gray-900">
+                System Status
+              </h3>
+            </div>
           </div>
           <div className="p-6">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">App Uptime</p>
-                <p className="text-2xl font-bold text-gray-900">{systemStatus.uptime.formatted}</p>
-                <p className="text-xs text-gray-500 mt-1">Running since server start</p>
+              <div className="relative overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50 p-5 rounded-xl border border-green-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">⏱️</div>
+                <p className="text-sm font-semibold text-green-700 uppercase tracking-wide mb-1">App Uptime</p>
+                <p className="text-3xl font-bold text-green-900">{systemStatus.uptime.formatted}</p>
+                <p className="text-xs text-green-600 mt-2">Running since server start</p>
               </div>
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">Memory Usage</p>
-                <p className="text-2xl font-bold text-gray-900">{systemStatus.memory.heapUsed} MB</p>
-                <p className="text-xs text-gray-500 mt-1">Heap: {systemStatus.memory.heapTotal} MB / RSS: {systemStatus.memory.rss} MB</p>
+              <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-50 p-5 rounded-xl border border-blue-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">💾</div>
+                <p className="text-sm font-semibold text-blue-700 uppercase tracking-wide mb-1">Memory Usage</p>
+                <p className="text-3xl font-bold text-blue-900">{systemStatus.memory.heapUsed} MB</p>
+                <p className="text-xs text-blue-600 mt-2">Heap: {systemStatus.memory.heapTotal} MB / RSS: {systemStatus.memory.rss} MB</p>
               </div>
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">Runtime</p>
-                <p className="text-2xl font-bold text-gray-900">{systemStatus.nodejs}</p>
-                <p className="text-xs text-gray-500 mt-1">Platform: {systemStatus.platform}</p>
+              <div className="relative overflow-hidden bg-gradient-to-br from-purple-50 to-violet-50 p-5 rounded-xl border border-purple-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">🚀</div>
+                <p className="text-sm font-semibold text-purple-700 uppercase tracking-wide mb-1">Runtime</p>
+                <p className="text-3xl font-bold text-purple-900">{systemStatus.nodejs}</p>
+                <p className="text-xs text-purple-600 mt-2">Platform: {systemStatus.platform}</p>
               </div>
             </div>
           </div>
@@ -307,45 +335,61 @@ export default function AdminDashboard() {
 
       {/* Database Statistics */}
       {dbStats && (
-        <div className="bg-white rounded-lg shadow">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h3 className="text-lg font-semibold text-gray-900">
-              Database Statistics
-            </h3>
+        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
+          <div className="bg-gradient-to-r from-amber-50 to-orange-50 px-6 py-5 border-b border-orange-100">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-600 to-orange-600 flex items-center justify-center text-white text-xl">
+                📊
+              </div>
+              <h3 className="text-xl font-bold text-gray-900">
+                Database Statistics
+              </h3>
+            </div>
           </div>
           <div className="p-6">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">Database Size</p>
-                <p className="text-2xl font-bold text-gray-900">{dbStats.sizeMB} MB</p>
-                <p className="text-xs text-gray-500 mt-1">WAL Mode: {dbStats.walMode}</p>
+              <div className="relative overflow-hidden bg-gradient-to-br from-cyan-50 to-blue-50 p-5 rounded-xl border border-cyan-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">💽</div>
+                <p className="text-sm font-semibold text-cyan-700 uppercase tracking-wide mb-1">Database Size</p>
+                <p className="text-3xl font-bold text-cyan-900">{dbStats.sizeMB} MB</p>
+                <p className="text-xs text-cyan-600 mt-2">WAL Mode: {dbStats.walMode}</p>
               </div>
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">Time Range</p>
-                <p className="text-sm font-semibold text-gray-900">
+              <div className="relative overflow-hidden bg-gradient-to-br from-indigo-50 to-blue-50 p-5 rounded-xl border border-indigo-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">📅</div>
+                <p className="text-sm font-semibold text-indigo-700 uppercase tracking-wide mb-1">Time Range</p>
+                <p className="text-sm font-semibold text-indigo-900">
                   {dbStats.oldest ? new Date(dbStats.oldest).toLocaleDateString() : 'N/A'}
                 </p>
-                <p className="text-xs text-gray-500">to</p>
-                <p className="text-sm font-semibold text-gray-900">
+                <p className="text-xs text-indigo-600">to</p>
+                <p className="text-sm font-semibold text-indigo-900">
                   {dbStats.newest ? new Date(dbStats.newest).toLocaleDateString() : 'N/A'}
                 </p>
               </div>
-              <div className="bg-gray-50 p-4 rounded">
-                <p className="text-sm text-gray-600">Average Per Day</p>
-                <p className="text-2xl font-bold text-gray-900">{dbStats.avgPerDay}</p>
-                <p className="text-xs text-gray-500 mt-1">locations (last 7 days)</p>
+              <div className="relative overflow-hidden bg-gradient-to-br from-pink-50 to-rose-50 p-5 rounded-xl border border-pink-100">
+                <div className="absolute top-0 right-0 text-6xl opacity-10">📈</div>
+                <p className="text-sm font-semibold text-pink-700 uppercase tracking-wide mb-1">Average Per Day</p>
+                <p className="text-3xl font-bold text-pink-900">{dbStats.avgPerDay}</p>
+                <p className="text-xs text-pink-600 mt-2">locations (last 7 days)</p>
               </div>
             </div>
 
             {/* Locations per Device */}
             {dbStats.perDevice && dbStats.perDevice.length > 0 && (
-              <div>
-                <h4 className="text-sm font-semibold text-gray-700 mb-3">Locations per Device</h4>
+              <div className="bg-gradient-to-br from-gray-50 to-slate-50 p-5 rounded-xl border border-gray-200">
+                <h4 className="text-sm font-bold text-gray-700 uppercase tracking-wide mb-4 flex items-center gap-2">
+                  <span className="text-lg">📱</span>
+                  Locations per Device
+                </h4>
                 <div className="space-y-2">
-                  {dbStats.perDevice.map((device: any) => (
-                    <div key={device.username} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded">
-                      <span className="text-sm font-medium text-gray-700">Device {device.username}</span>
-                      <span className="text-sm text-gray-900">{device.count.toLocaleString()} locations</span>
+                  {dbStats.perDevice.map((device: any, idx: number) => (
+                    <div key={device.username} className="group flex items-center justify-between py-3 px-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-100">
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold">
+                          {idx + 1}
+                        </div>
+                        <span className="text-sm font-semibold text-gray-700">Device {device.username}</span>
+                      </div>
+                      <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">{device.count.toLocaleString()} locations</span>
                     </div>
                   ))}
                 </div>
@@ -356,82 +400,98 @@ export default function AdminDashboard() {
       )}
 
       {/* Device List */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">
-            Configured Devices
-          </h3>
+      <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
+        <div className="bg-gradient-to-r from-teal-50 to-cyan-50 px-6 py-5 border-b border-teal-100">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-teal-600 to-cyan-600 flex items-center justify-center text-white text-xl">
+              📱
+            </div>
+            <h3 className="text-xl font-bold text-gray-900">
+              Configured Devices
+            </h3>
+          </div>
         </div>
         <div className="p-6">
-          <table className="min-w-full">
-            <thead>
-              <tr className="border-b border-gray-200">
-                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">
-                  ID
-                </th>
-                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">
-                  Name
-                </th>
-                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">
-                  Color
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {devices.map((device) => (
-                <tr
-                  key={device.id}
-                  className="border-b border-gray-100 hover:bg-gray-50"
-                >
-                  <td className="py-3 px-4 text-sm text-gray-900">
-                    {device.id}
-                  </td>
-                  <td className="py-3 px-4 text-sm text-gray-900">
-                    {device.name}
-                  </td>
-                  <td className="py-3 px-4">
-                    <div className="flex items-center gap-2">
-                      <div
-                        className="w-6 h-6 rounded-full border border-gray-300"
-                        style={{ backgroundColor: device.color }}
-                      />
-                      <span className="text-sm text-gray-600">
-                        {device.color}
-                      </span>
-                    </div>
-                  </td>
+          <div className="overflow-x-auto">
+            <table className="min-w-full">
+              <thead>
+                <tr className="border-b-2 border-gray-200">
+                  <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
+                    ID
+                  </th>
+                  <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
+                    Name
+                  </th>
+                  <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
+                    Color
+                  </th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {devices.map((device, idx) => (
+                  <tr
+                    key={device.id}
+                    className="border-b border-gray-100 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 transition-all"
+                  >
+                    <td className="py-4 px-4 text-sm font-semibold text-gray-900">
+                      {device.id}
+                    </td>
+                    <td className="py-4 px-4 text-sm font-semibold text-gray-900">
+                      {device.name}
+                    </td>
+                    <td className="py-4 px-4">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="w-8 h-8 rounded-lg shadow-md ring-2 ring-white"
+                          style={{ backgroundColor: device.color }}
+                        />
+                        <span className="text-sm font-mono text-gray-600 bg-gray-100 px-2 py-1 rounded">
+                          {device.color}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
 
       {/* Database Maintenance - SUPER ADMIN ONLY (username "admin") */}
       {isSuperAdmin && (
-        <div className="bg-white rounded-lg shadow">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h3 className="text-lg font-semibold text-gray-900">
-              Database Maintenance
-            </h3>
+        <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-red-100">
+          <div className="bg-gradient-to-r from-red-50 to-orange-50 px-6 py-5 border-b border-red-100">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-red-600 to-orange-600 flex items-center justify-center text-white text-xl">
+                🛠️
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-gray-900">
+                  Database Maintenance
+                </h3>
+                <p className="text-xs text-red-600 font-semibold">SUPER ADMIN ONLY</p>
+              </div>
+            </div>
           </div>
           <div className="p-6 space-y-6">
           {/* Cleanup Section */}
-          <div>
-            <h4 className="text-sm font-semibold text-gray-700 mb-2">
+          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100">
+            <h4 className="text-base font-bold text-gray-900 mb-2 flex items-center gap-2">
+              <span className="text-xl">🧹</span>
               Clean up old data
             </h4>
-            <p className="text-sm text-gray-600 mb-3">
+            <p className="text-sm text-gray-700 mb-4">
               Delete old location data to keep the database size manageable.
             </p>
 
             {/* Cleanup Status Message */}
             {cleanupStatus.message && (
               <div
-                className={`mb-3 p-3 rounded ${
+                className={`mb-4 p-4 rounded-lg font-semibold ${
                   cleanupStatus.type === 'success'
-                    ? 'bg-green-100 text-green-800'
-                    : 'bg-red-100 text-red-800'
+                    ? 'bg-green-100 text-green-800 border border-green-200'
+                    : 'bg-red-100 text-red-800 border border-red-200'
                 }`}
               >
                 {cleanupStatus.message}
@@ -443,54 +503,57 @@ export default function AdminDashboard() {
               <button
                 onClick={() => handleCleanup(168)}
                 disabled={cleanupStatus.loading}
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed font-semibold shadow-md hover:shadow-lg transition-all"
               >
                 {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 7 days'}
               </button>
               <button
                 onClick={() => handleCleanup(360)}
                 disabled={cleanupStatus.loading}
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed font-semibold shadow-md hover:shadow-lg transition-all"
               >
                 {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 15 days'}
               </button>
               <button
                 onClick={() => handleCleanup(720)}
                 disabled={cleanupStatus.loading}
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-lg hover:from-indigo-700 hover:to-indigo-800 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed font-semibold shadow-md hover:shadow-lg transition-all"
               >
                 {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 30 days'}
               </button>
               <button
                 onClick={() => handleCleanup(2160)}
                 disabled={cleanupStatus.loading}
-                className="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="px-5 py-2.5 bg-gradient-to-r from-orange-600 to-red-600 text-white rounded-lg hover:from-orange-700 hover:to-red-700 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed font-semibold shadow-md hover:shadow-lg transition-all"
               >
                 {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 90 days'}
               </button>
             </div>
 
-            <p className="text-xs text-gray-500 mt-4">
-              Current database size: {stats.totalPoints} locations
-            </p>
+            <div className="mt-4 bg-white/70 p-3 rounded-lg border border-blue-200">
+              <p className="text-xs text-gray-600">
+                <span className="font-semibold">Current database size:</span> {stats.totalPoints.toLocaleString()} locations
+              </p>
+            </div>
           </div>
 
           {/* Optimize Section */}
-          <div className="border-t pt-6">
-            <h4 className="text-sm font-semibold text-gray-700 mb-2">
+          <div className="bg-gradient-to-br from-purple-50 to-violet-50 p-6 rounded-xl border border-purple-100">
+            <h4 className="text-base font-bold text-gray-900 mb-2 flex items-center gap-2">
+              <span className="text-xl">⚡</span>
               Optimize Database
             </h4>
-            <p className="text-sm text-gray-600 mb-3">
+            <p className="text-sm text-gray-700 mb-4">
               Run VACUUM and ANALYZE to reclaim disk space and improve query performance. Recommended after cleanup.
             </p>
 
             {/* Optimize Status Message */}
             {optimizeStatus.message && (
               <div
-                className={`mb-3 p-3 rounded ${
+                className={`mb-4 p-4 rounded-lg font-semibold ${
                   optimizeStatus.type === 'success'
-                    ? 'bg-green-100 text-green-800'
-                    : 'bg-red-100 text-red-800'
+                    ? 'bg-green-100 text-green-800 border border-green-200'
+                    : 'bg-red-100 text-red-800 border border-red-200'
                 }`}
               >
                 {optimizeStatus.message}
@@ -500,9 +563,9 @@ export default function AdminDashboard() {
             <button
               onClick={handleOptimize}
               disabled={optimizeStatus.loading}
-              className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
+              className="px-6 py-3 bg-gradient-to-r from-purple-600 to-violet-600 text-white rounded-lg hover:from-purple-700 hover:to-violet-700 disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed font-semibold shadow-md hover:shadow-lg transition-all flex items-center gap-2"
             >
-              <span>{optimizeStatus.loading ? '⚙️' : '⚡'}</span>
+              <span className="text-xl">{optimizeStatus.loading ? '⚙️' : '⚡'}</span>
               {optimizeStatus.loading ? 'Optimizing...' : 'Optimize Now'}
             </button>
           </div>
@@ -511,8 +574,16 @@ export default function AdminDashboard() {
       )}
 
       {/* Last Updated */}
-      <div className="text-sm text-gray-500 text-right">
-        Last updated: {new Date(stats.lastUpdated).toLocaleString()}
+      <div className="bg-gradient-to-r from-gray-50 to-slate-50 rounded-xl p-4 border border-gray-200">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-gray-600">
+            <span className="text-lg">🕒</span>
+            <span className="text-sm font-semibold">Last Updated</span>
+          </div>
+          <span className="text-sm font-mono text-gray-700 bg-white px-3 py-1 rounded-lg shadow-sm">
+            {new Date(stats.lastUpdated).toLocaleString()}
+          </span>
+        </div>
       </div>
     </div>
   );