116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import AdminLogo from '../../components/AdminLogo';
|
|
|
|
export default function AdminDashboard() {
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
// Check if admin is logged in
|
|
const adminLoggedIn = sessionStorage.getItem('adminLoggedIn');
|
|
if (adminLoggedIn !== 'true') {
|
|
router.push('/admin');
|
|
return;
|
|
}
|
|
setIsAuthenticated(true);
|
|
}, [router]);
|
|
|
|
const handleLogout = () => {
|
|
sessionStorage.removeItem('adminLoggedIn');
|
|
router.push('/admin');
|
|
};
|
|
|
|
if (!isAuthenticated) {
|
|
return null;
|
|
}
|
|
|
|
const adminActions = [
|
|
{
|
|
id: 'add-job',
|
|
title: 'Add New Job',
|
|
description: 'Create a new service job for a vehicle',
|
|
href: '/admin/jobs/add',
|
|
},
|
|
{
|
|
id: 'view-jobs',
|
|
title: 'View All Jobs',
|
|
description: 'Browse and search all service jobs',
|
|
href: '/admin/jobs',
|
|
},
|
|
// Add more actions here in the future
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<AdminLogo />
|
|
<div className="relative min-h-screen bg-black tech-grid scanlines">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-4xl px-4 py-12">
|
|
<div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
|
|
<div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
|
|
<div className="relative">
|
|
<div className="mb-8 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
|
|
<h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
|
|
Admin Dashboard
|
|
</h1>
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<h2 className="mb-4 text-xl font-bold text-white uppercase tracking-wider">
|
|
Admin Actions
|
|
</h2>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{adminActions.map((action) => (
|
|
<Link
|
|
key={action.id}
|
|
href={action.href}
|
|
className="group relative rounded-lg border-2 border-white/20 bg-black/50 p-6 transition-all hover:border-white/40 hover:bg-white/5 hover:shadow-[0_0_15px_rgba(255,255,255,0.2)]"
|
|
>
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<div className="h-2 w-2 rounded-full bg-white group-hover:animate-pulse"></div>
|
|
<h3 className="text-lg font-bold text-white uppercase tracking-wider">
|
|
{action.title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-white/60 font-mono">
|
|
{action.description}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 text-center">
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider"
|
|
>
|
|
← Back to Home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|