joachim/location-mqtt-tracker-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve admin page UI with modern SaaS design

Browse Source 
- 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>
This commit is contained in:
Joachim Hummel
2025-11-29 22:37:08 +00:00
parent 31c0e1f572
commit 5f637817ce
2 changed files with 220 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/admin/layout.tsx
View File

@@ -34,43 +34,46 @@ export default function AdminLayout({
}); });
return ( 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 */}
<header className="bg-white shadow"> <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-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
{/* Top row: Title + User Info + Actions */} {/* Top row: Title + User Info + Actions */}
<div className="flex justify-between items-center mb-3 lg:mb-0"> <div className="flex justify-between items-center mb-4 lg:mb-0">
<div> <div className="flex items-center gap-3">
<h1 className="text-xl sm:text-2xl font-bold text-black"> <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'} {isAdmin ? 'Admin Panel' : 'Dashboard'}
</h1> </h1>
</div> </div>
<div className="flex gap-2 sm:gap-4 items-center"> <div className="flex gap-2 sm:gap-4 items-center">
{/* User info */} {/* User info */}
<div className="flex items-center gap-2 text-xs sm:text-sm"> <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">Angemeldet als:</span> <span className="text-gray-600 font-medium">Angemeldet als:</span>
<span className="font-semibold text-black">{username || session?.user?.email}</span> <span className="font-bold text-gray-900">{username || session?.user?.email}</span>
{!isAdmin && ( {!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 && ( {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> </div>
{/* Actions */} {/* 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 <Link
href="/map" 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> </Link>
<button <button
onClick={async () => { onClick={async () => {
await signOut({ redirect: false }); await signOut({ redirect: false });
window.location.href = '/login'; 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 Logout
</button> </button>
@@ -79,15 +82,15 @@ export default function AdminLayout({
</div> </div>
{/* Navigation row (scrollable on mobile) */} {/* 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) => ( {navigation.map((item) => (
<Link <Link
key={item.href} key={item.href}
href={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 pathname === item.href
? "bg-blue-600 text-white" ? "bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg scale-105"
: "text-black hover:bg-gray-200" : "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} {item.name}

325
app/admin/page.tsx
View File

@@ -256,49 +256,77 @@ export default function AdminDashboard() {
]; ];
return ( return (
<div className="space-y-6"> <div className="space-y-8">
<h2 className="text-3xl font-bold text-gray-900">Dashboard</h2> {/* 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 */} {/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{statCards.map((stat) => ( {statCards.map((stat, index) => {
<div const gradients = [
key={stat.title} 'from-emerald-500 to-teal-600',
className="bg-white rounded-lg shadow p-6 flex items-center gap-4" 'from-blue-500 to-indigo-600',
> 'from-violet-500 to-purple-600'
<div className="text-4xl">{stat.icon}</div> ];
<div> return (
<p className="text-sm font-medium text-gray-600">{stat.title}</p> <div
<p className="text-3xl font-bold text-gray-900">{stat.value}</p> 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> );
))} })}
</div> </div>
{/* System Status */} {/* System Status */}
{systemStatus && ( {systemStatus && (
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200"> <div className="bg-gradient-to-r from-slate-50 to-gray-50 px-6 py-5 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex items-center gap-3">
System Status <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">
</h3> ⚙️
</div>
<h3 className="text-xl font-bold text-gray-900">
System Status
</h3>
</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50 p-5 rounded-xl border border-green-100">
<p className="text-sm text-gray-600">App Uptime</p> <div className="absolute top-0 right-0 text-6xl opacity-10">⏱️</div>
<p className="text-2xl font-bold text-gray-900">{systemStatus.uptime.formatted}</p> <p className="text-sm font-semibold text-green-700 uppercase tracking-wide mb-1">App Uptime</p>
<p className="text-xs text-gray-500 mt-1">Running since server start</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>
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-50 p-5 rounded-xl border border-blue-100">
<p className="text-sm text-gray-600">Memory Usage</p> <div className="absolute top-0 right-0 text-6xl opacity-10">💾</div>
<p className="text-2xl font-bold text-gray-900">{systemStatus.memory.heapUsed} MB</p> <p className="text-sm font-semibold text-blue-700 uppercase tracking-wide mb-1">Memory Usage</p>
<p className="text-xs text-gray-500 mt-1">Heap: {systemStatus.memory.heapTotal} MB / RSS: {systemStatus.memory.rss} MB</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>
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-purple-50 to-violet-50 p-5 rounded-xl border border-purple-100">
<p className="text-sm text-gray-600">Runtime</p> <div className="absolute top-0 right-0 text-6xl opacity-10">🚀</div>
<p className="text-2xl font-bold text-gray-900">{systemStatus.nodejs}</p> <p className="text-sm font-semibold text-purple-700 uppercase tracking-wide mb-1">Runtime</p>
<p className="text-xs text-gray-500 mt-1">Platform: {systemStatus.platform}</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> </div>
</div> </div>
@@ -307,45 +335,61 @@ export default function AdminDashboard() {
{/* Database Statistics */} {/* Database Statistics */}
{dbStats && ( {dbStats && (
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200"> <div className="bg-gradient-to-r from-amber-50 to-orange-50 px-6 py-5 border-b border-orange-100">
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex items-center gap-3">
Database Statistics <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">
</h3> 📊
</div>
<h3 className="text-xl font-bold text-gray-900">
Database Statistics
</h3>
</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-cyan-50 to-blue-50 p-5 rounded-xl border border-cyan-100">
<p className="text-sm text-gray-600">Database Size</p> <div className="absolute top-0 right-0 text-6xl opacity-10">💽</div>
<p className="text-2xl font-bold text-gray-900">{dbStats.sizeMB} MB</p> <p className="text-sm font-semibold text-cyan-700 uppercase tracking-wide mb-1">Database Size</p>
<p className="text-xs text-gray-500 mt-1">WAL Mode: {dbStats.walMode}</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>
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-indigo-50 to-blue-50 p-5 rounded-xl border border-indigo-100">
<p className="text-sm text-gray-600">Time Range</p> <div className="absolute top-0 right-0 text-6xl opacity-10">📅</div>
<p className="text-sm font-semibold text-gray-900"> <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'} {dbStats.oldest ? new Date(dbStats.oldest).toLocaleDateString() : 'N/A'}
</p> </p>
<p className="text-xs text-gray-500">to</p> <p className="text-xs text-indigo-600">to</p>
<p className="text-sm font-semibold text-gray-900"> <p className="text-sm font-semibold text-indigo-900">
{dbStats.newest ? new Date(dbStats.newest).toLocaleDateString() : 'N/A'} {dbStats.newest ? new Date(dbStats.newest).toLocaleDateString() : 'N/A'}
</p> </p>
</div> </div>
<div className="bg-gray-50 p-4 rounded"> <div className="relative overflow-hidden bg-gradient-to-br from-pink-50 to-rose-50 p-5 rounded-xl border border-pink-100">
<p className="text-sm text-gray-600">Average Per Day</p> <div className="absolute top-0 right-0 text-6xl opacity-10">📈</div>
<p className="text-2xl font-bold text-gray-900">{dbStats.avgPerDay}</p> <p className="text-sm font-semibold text-pink-700 uppercase tracking-wide mb-1">Average Per Day</p>
<p className="text-xs text-gray-500 mt-1">locations (last 7 days)</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>
</div> </div>
{/* Locations per Device */} {/* Locations per Device */}
{dbStats.perDevice && dbStats.perDevice.length > 0 && ( {dbStats.perDevice && dbStats.perDevice.length > 0 && (
<div> <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-semibold text-gray-700 mb-3">Locations per Device</h4> <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"> <div className="space-y-2">
{dbStats.perDevice.map((device: any) => ( {dbStats.perDevice.map((device: any, idx: number) => (
<div key={device.username} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded"> <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">
<span className="text-sm font-medium text-gray-700">Device {device.username}</span> <div className="flex items-center gap-3">
<span className="text-sm text-gray-900">{device.count.toLocaleString()} locations</span> <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>
))} ))}
</div> </div>
@@ -356,82 +400,98 @@ export default function AdminDashboard() {
)} )}
{/* Device List */} {/* Device List */}
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200"> <div className="bg-gradient-to-r from-teal-50 to-cyan-50 px-6 py-5 border-b border-teal-100">
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex items-center gap-3">
Configured Devices <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">
</h3> 📱
</div>
<h3 className="text-xl font-bold text-gray-900">
Configured Devices
</h3>
</div>
</div> </div>
<div className="p-6"> <div className="p-6">
<table className="min-w-full"> <div className="overflow-x-auto">
<thead> <table className="min-w-full">
<tr className="border-b border-gray-200"> <thead>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700"> <tr className="border-b-2 border-gray-200">
ID <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
</th> ID
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700"> </th>
Name <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
</th> Name
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700"> </th>
Color <th className="text-left py-4 px-4 text-xs font-bold text-gray-600 uppercase tracking-wider">
</th> Color
</tr> </th>
</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>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {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>
</div> </div>
{/* Database Maintenance - SUPER ADMIN ONLY (username "admin") */} {/* Database Maintenance - SUPER ADMIN ONLY (username "admin") */}
{isSuperAdmin && ( {isSuperAdmin && (
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-red-100">
<div className="px-6 py-4 border-b border-gray-200"> <div className="bg-gradient-to-r from-red-50 to-orange-50 px-6 py-5 border-b border-red-100">
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex items-center gap-3">
Database Maintenance <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">
</h3> 🛠️
</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>
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
{/* Cleanup Section */} {/* Cleanup Section */}
<div> <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100">
<h4 className="text-sm font-semibold text-gray-700 mb-2"> <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 Clean up old data
</h4> </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. Delete old location data to keep the database size manageable.
</p> </p>
{/* Cleanup Status Message */} {/* Cleanup Status Message */}
{cleanupStatus.message && ( {cleanupStatus.message && (
<div <div
className={`mb-3 p-3 rounded ${ className={`mb-4 p-4 rounded-lg font-semibold ${
cleanupStatus.type === 'success' cleanupStatus.type === 'success'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800 border border-green-200'
: 'bg-red-100 text-red-800' : 'bg-red-100 text-red-800 border border-red-200'
}`} }`}
> >
{cleanupStatus.message} {cleanupStatus.message}
@@ -443,54 +503,57 @@ export default function AdminDashboard() {
<button <button
onClick={() => handleCleanup(168)} onClick={() => handleCleanup(168)}
disabled={cleanupStatus.loading} 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'} {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 7 days'}
</button> </button>
<button <button
onClick={() => handleCleanup(360)} onClick={() => handleCleanup(360)}
disabled={cleanupStatus.loading} 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'} {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 15 days'}
</button> </button>
<button <button
onClick={() => handleCleanup(720)} onClick={() => handleCleanup(720)}
disabled={cleanupStatus.loading} 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'} {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 30 days'}
</button> </button>
<button <button
onClick={() => handleCleanup(2160)} onClick={() => handleCleanup(2160)}
disabled={cleanupStatus.loading} 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'} {cleanupStatus.loading ? 'Cleaning...' : 'Delete > 90 days'}
</button> </button>
</div> </div>
<p className="text-xs text-gray-500 mt-4"> <div className="mt-4 bg-white/70 p-3 rounded-lg border border-blue-200">
Current database size: {stats.totalPoints} locations <p className="text-xs text-gray-600">
</p> <span className="font-semibold">Current database size:</span> {stats.totalPoints.toLocaleString()} locations
</p>
</div>
</div> </div>
{/* Optimize Section */} {/* Optimize Section */}
<div className="border-t pt-6"> <div className="bg-gradient-to-br from-purple-50 to-violet-50 p-6 rounded-xl border border-purple-100">
<h4 className="text-sm font-semibold text-gray-700 mb-2"> <h4 className="text-base font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-xl">⚡</span>
Optimize Database Optimize Database
</h4> </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. Run VACUUM and ANALYZE to reclaim disk space and improve query performance. Recommended after cleanup.
</p> </p>
{/* Optimize Status Message */} {/* Optimize Status Message */}
{optimizeStatus.message && ( {optimizeStatus.message && (
<div <div
className={`mb-3 p-3 rounded ${ className={`mb-4 p-4 rounded-lg font-semibold ${
optimizeStatus.type === 'success' optimizeStatus.type === 'success'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800 border border-green-200'
: 'bg-red-100 text-red-800' : 'bg-red-100 text-red-800 border border-red-200'
}`} }`}
> >
{optimizeStatus.message} {optimizeStatus.message}
@@ -500,9 +563,9 @@ export default function AdminDashboard() {
<button <button
onClick={handleOptimize} onClick={handleOptimize}
disabled={optimizeStatus.loading} 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'} {optimizeStatus.loading ? 'Optimizing...' : 'Optimize Now'}
</button> </button>
</div> </div>
@@ -511,8 +574,16 @@ export default function AdminDashboard() {
)} )}
{/* Last Updated */} {/* Last Updated */}
<div className="text-sm text-gray-500 text-right"> <div className="bg-gradient-to-r from-gray-50 to-slate-50 rounded-xl p-4 border border-gray-200">
Last updated: {new Date(stats.lastUpdated).toLocaleString()} <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>
</div> </div>
); );