updates on the map configuration and the design

src/lib/PageNotFound.jsx

@@ -1,15 +1,17 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Home } from 'lucide-react';
-import { Button, EmptyState, Surface } from '@/components/ds';
+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';
 
-/**
- * The 404 page.
- *
- * Signed-in operators get a second line naming the route table, because a
- * missing route in a console is nearly always a link that was renamed rather
- * than a page that never existed.
- */
 export default function PageNotFound() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -17,26 +19,139 @@ export default function PageNotFound() {
 
   const path = location.pathname;
 
-  return (
-    <main className="flex min-h-screen items-center justify-center p-6">
-      <Surface radius="xl" padding="lg" className="w-full max-w-md">
-        <EmptyState
-          icon={Home}
-          title="Page not found"
-          description={`Nothing is registered at "${path}".`}
-          action={
-            <Button onClick={() => navigate(isAuthenticated ? '/doormile/dispatch' : '/login')}>
-              {isAuthenticated ? 'Back to Dispatch' : 'Sign in'}
-            </Button>
-          }
-        />
+  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 && (
-          <p className="mt-2 text-center text-caption text-ink-4">
-            If this address used to work, check the route table in <code>src/App.jsx</code>.
-          </p>
+          <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>
         )}
-      </Surface>
+      </div>
     </main>
   );
 }