158 lines
6.7 KiB
JavaScript
158 lines
6.7 KiB
JavaScript
import React from 'react';
|
|
import { useLocation, useNavigate, Link } from 'react-router-dom';
|
|
import {
|
|
ArrowLeft,
|
|
Radio,
|
|
Package,
|
|
Bike,
|
|
BarChart3,
|
|
Home,
|
|
MapPin,
|
|
Truck
|
|
} from 'lucide-react';
|
|
import { useAuth } from '@/lib/AuthContext';
|
|
|
|
export default function PageNotFound() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { isAuthenticated } = useAuth();
|
|
|
|
const path = location.pathname;
|
|
|
|
const quickLinks = [
|
|
{
|
|
title: 'Live Dispatch',
|
|
desc: 'Real-time fleet tracking & active runs',
|
|
icon: Radio,
|
|
path: '/doormile/dispatch',
|
|
color: 'text-rose-600 bg-rose-50 border-rose-200/70 group-hover:bg-rose-100/70'
|
|
},
|
|
{
|
|
title: 'Orders Management',
|
|
desc: 'Pending, assigned, and bulk bookings',
|
|
icon: Package,
|
|
path: '/doormile/orders',
|
|
color: 'text-blue-600 bg-blue-50 border-blue-200/70 group-hover:bg-blue-100/70'
|
|
},
|
|
{
|
|
title: 'Live Deliveries',
|
|
desc: 'Active consignments & transit logs',
|
|
icon: Truck,
|
|
path: '/doormile/deliveries',
|
|
color: 'text-amber-600 bg-amber-50 border-amber-200/70 group-hover:bg-amber-100/70'
|
|
},
|
|
{
|
|
title: 'Milers Fleet',
|
|
desc: 'Rider profiles, roster & status',
|
|
icon: Bike,
|
|
path: '/doormile/milers',
|
|
color: 'text-emerald-600 bg-emerald-50 border-emerald-200/70 group-hover:bg-emerald-100/70'
|
|
},
|
|
{
|
|
title: 'Reports & Analytics',
|
|
desc: 'Daily summaries & financial KPIs',
|
|
icon: BarChart3,
|
|
path: '/doormile/reports/orderssummary',
|
|
color: 'text-purple-600 bg-purple-50 border-purple-200/70 group-hover:bg-purple-100/70'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<main className="relative min-h-screen w-full bg-white text-slate-900 flex flex-col items-center justify-center p-6 selection:bg-rose-500 selection:text-white">
|
|
{/* Background subtle mesh & grid */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(216,30,6,0.06),rgba(255,255,255,0))] pointer-events-none" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a08_1px,transparent_1px),linear-gradient(to_bottom,#0f172a08_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_70%,transparent_100%)] pointer-events-none" />
|
|
|
|
<div className="relative z-10 w-full max-w-2xl flex flex-col items-center text-center">
|
|
{/* Top Brand Pill */}
|
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200/90 shadow-2xs mb-5">
|
|
<span className="w-2 h-2 rounded-full bg-rose-600 animate-pulse" />
|
|
<span className="text-xs font-semibold tracking-wider uppercase text-slate-600">
|
|
Doormile Operations Console
|
|
</span>
|
|
</div>
|
|
|
|
{/* Clean 404 Visual Graphic without any overlay icon */}
|
|
<div className="select-none my-1">
|
|
<span className="text-8xl sm:text-9xl font-black tracking-tight text-slate-900 bg-clip-text bg-gradient-to-b from-slate-900 via-slate-800 to-slate-400">
|
|
404
|
|
</span>
|
|
</div>
|
|
|
|
{/* Heading & Context */}
|
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900 mb-2">
|
|
Page not found
|
|
</h1>
|
|
|
|
<p className="text-sm sm:text-base text-slate-600 max-w-lg mb-4">
|
|
The requested destination is not registered in the console or has been moved to a new route.
|
|
</p>
|
|
|
|
{/* Target Path Badge */}
|
|
<div className="inline-flex items-center gap-2 max-w-full px-3.5 py-1.5 rounded-lg bg-slate-100 border border-slate-200 font-mono text-xs text-rose-600 mb-7 shadow-2xs truncate">
|
|
<MapPin className="w-3.5 h-3.5 text-slate-500 shrink-0" />
|
|
<span className="truncate">{path}</span>
|
|
</div>
|
|
|
|
{/* Primary & Secondary Action CTAs */}
|
|
<div className="flex flex-wrap items-center justify-center gap-3 w-full max-w-md mb-9">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(isAuthenticated ? '/doormile/dispatch' : '/login')}
|
|
className="flex-1 min-w-[160px] inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-white bg-rose-600 hover:bg-rose-700 active:scale-[0.98] shadow-sm shadow-rose-600/20 transition-all cursor-pointer"
|
|
>
|
|
<Home className="w-4 h-4" />
|
|
<span>{isAuthenticated ? 'Back to Dispatch' : 'Sign in to Console'}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(-1)}
|
|
className="flex-1 min-w-[140px] inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-slate-700 bg-white hover:bg-slate-50 border border-slate-200 active:scale-[0.98] transition-all cursor-pointer shadow-2xs"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Go Back</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Quick Operations Links */}
|
|
{isAuthenticated && (
|
|
<div className="w-full bg-slate-50/80 border border-slate-200 rounded-2xl p-5 shadow-xs">
|
|
<div className="flex items-center justify-between mb-3 text-left">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Quick Navigation
|
|
</span>
|
|
<span className="text-[11px] text-slate-500">Operational shortcuts</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-left">
|
|
{quickLinks.map((item) => {
|
|
const IconComponent = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className="flex items-center gap-3 p-2.5 rounded-xl bg-white hover:bg-slate-50/90 border border-slate-200/90 hover:border-slate-300 shadow-2xs transition-all group"
|
|
>
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${item.color} transition-transform group-hover:scale-105`}>
|
|
<IconComponent className="w-4 h-4" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-xs font-semibold text-slate-800 group-hover:text-slate-950 truncate">
|
|
{item.title}
|
|
</div>
|
|
<div className="text-[11px] text-slate-500 truncate">
|
|
{item.desc}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|