Refresh driver shell styling

src/App.jsx

@@ -1,100 +1,42 @@
-import { useCallback } from 'react'
-import {
-  Link,
-  Navigate,
-  NavLink,
-  Outlet,
-  Route,
-  Routes,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom'
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom'
+import LoginRoute from './routes/Login.jsx'
+import OrdersRoute from './routes/Orders/Index.jsx'
+import ProfileRoute from './routes/Profile.jsx'
 import ProtectedRoute from './components/ProtectedRoute.jsx'
-import { useAuth } from './context/AuthContext.jsx'
-import LoginPage from './pages/Login.jsx'
-import SettingsPage from './pages/Settings.jsx'
-import OrdersFeed from './pages/orders/OrdersFeed.jsx'
-import OrderDetails from './pages/orders/OrderDetails.jsx'
-import OrderCamera from './pages/orders/OrderCamera.jsx'
-import OrderSignature from './pages/orders/OrderSignature.jsx'
-import OrderBypass from './pages/orders/OrderBypass.jsx'
-import OrderCancel from './pages/orders/OrderCancel.jsx'
-import './App.css'
+import Header from './components/Header.jsx'
+import BottomNav from './components/BottomNav.jsx'
+import { useAuth } from './hooks/useAuth.jsx'
+import { useLocationTracking } from './hooks/useLocationTracking.ts'
+import { OrdersProvider } from './hooks/useOrders.jsx'
 
-function AppLayout() {
-  const { user, logout } = useAuth()
-  const navigate = useNavigate()
-  const location = useLocation()
-
-  const handleLogout = useCallback(() => {
-    logout()
-    navigate('/login', { replace: true })
-  }, [logout, navigate])
-
-  const isSettingsRoute = location.pathname.startsWith('/settings')
-
-  const navItems = [
-    { to: '/orders', label: 'Orders' },
-    { to: '/settings', label: 'Settings' },
-  ]
+function AppShell() {
+  const { driver } = useAuth()
+  const trackingActive = useLocationTracking({ isActive: driver?.status !== 'OFFLINE' })
 
   return (
-    <div className="app-shell">
-      <header className="app-bar">
-        <div className="app-bar-left">
-          <Link to="/orders" className="brand" aria-label="Jason's Liquor driver portal">
-            Jason&apos;s Liquor Drivers
-          </Link>
-          <nav className="app-nav" aria-label="Primary">
-            {navItems.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) =>
-                  ['app-nav-link', isActive ? 'active' : ''].filter(Boolean).join(' ')
-                }
-                end={item.to === '/settings'}
-              >
-                {item.label}
-              </NavLink>
-            ))}
-          </nav>
-        </div>
-        <div className="app-bar-actions">
-          {isSettingsRoute ? (
-            <div className="user-meta">
-              <span className="user-name">{user?.name?.first} {user?.name?.last}</span>
-              <span className="user-email">{user?.email}</span>
-            </div>
-          ) : null}
-          <button type="button" className="link-button" onClick={handleLogout}>
-            Log out
-          </button>
-        </div>
-      </header>
-      <div className="app-content">
-        <Outlet />
-      </div>
+    <div className="driver-shell">
+      <Header trackingActive={trackingActive} />
+      <main className="driver-shell__main">
+        <OrdersProvider>
+          <Outlet context={{ trackingActive }} />
+        </OrdersProvider>
+      </main>
+      <BottomNav />
     </div>
   )
 }
 
 export default function App() {
   return (
     <Routes>
-      <Route path="/login" element={<LoginPage />} />
-        <Route element={<ProtectedRoute />}>
-          <Route element={<AppLayout />}>
-            <Route index element={<Navigate to="/orders" replace />} />
-            <Route path="/orders" element={<OrdersFeed />} />
-            <Route path="/orders/:status/:orderId" element={<OrderDetails />} />
-            <Route path="/orders/:status/:orderId/camera" element={<OrderCamera />} />
-            <Route path="/orders/:status/:orderId/signature" element={<OrderSignature />} />
-            <Route path="/orders/:status/:orderId/bypass" element={<OrderBypass />} />
-            <Route path="/orders/:status/:orderId/cancel" element={<OrderCancel />} />
-            <Route path="/settings" element={<SettingsPage />} />
-          </Route>
+      <Route path="/login" element={<LoginRoute />} />
+      <Route element={<ProtectedRoute />}>
+        <Route element={<AppShell />}>
+          <Route index element={<Navigate to="/orders" replace />} />
+          <Route path="/orders" element={<OrdersRoute />} />
+          <Route path="/profile" element={<ProfileRoute />} />
         </Route>
+      </Route>
       <Route path="*" element={<Navigate to="/orders" replace />} />
     </Routes>
   )

src/api/mockData.ts

@@ -1,4 +1,4 @@
-import { AuthResponse, Driver, Message, Order } from '../types'
+import { AuthResponse, Driver, Message } from '../types'
 
 const now = new Date()
 
@@ -14,71 +14,6 @@ export const mockDriver: Driver = {
   status: 'ONLINE',
 }
 
-export const mockOrders: Order[] = [
-  {
-    id: 'order-1',
-    number: 'JL-2847',
-    total: 127.5,
-    status: 'NEW',
-    requiresIdCheck: true,
-    requiresPaymentCheck: true,
-    createdAt: minutesAgo(35),
-    customer: {
-      name: 'Michael Rodriguez',
-      phone: '(555) 123-4567',
-      address: '85 Dolores Street, San Francisco, CA 94110',
-    },
-    priority: true,
-    assignedDriverId: 'driver-1',
-    items: [
-      { id: 'item-1', name: 'Johnnie Walker Black Label', quantity: 1 },
-      { id: 'item-2', name: 'Grey Goose Vodka', quantity: 1 },
-      { id: 'item-3', name: 'Corona Extra 6-pack', quantity: 1 },
-    ],
-  },
-  {
-    id: 'order-2',
-    number: 'JL-2846',
-    total: 156,
-    status: 'IN_PROGRESS',
-    requiresIdCheck: true,
-    requiresPaymentCheck: true,
-    createdAt: minutesAgo(28),
-    customer: {
-      name: 'John Doe',
-      phone: '(555) 246-8135',
-      address: '123 Market Street, San Francisco, CA 94103',
-      lat: 37.7937,
-      lng: -122.396,
-    },
-    assignedDriverId: 'driver-1',
-    items: [
-      { id: 'item-4', name: 'Don Julio Blanco', quantity: 1 },
-      { id: 'item-5', name: 'Casamigos Reposado', quantity: 1 },
-      { id: 'item-6', name: 'Limes', quantity: 6 },
-    ],
-  },
-  {
-    id: 'order-3',
-    number: 'JL-2845',
-    total: 98.4,
-    status: 'COMPLETED',
-    requiresIdCheck: true,
-    requiresPaymentCheck: true,
-    createdAt: minutesAgo(125),
-    customer: {
-      name: 'Alice Lee',
-      phone: '(555) 678-9012',
-      address: '678 Mission Street, San Francisco, CA 94105',
-    },
-    assignedDriverId: 'driver-1',
-    items: [
-      { id: 'item-7', name: 'Veuve Clicquot Brut', quantity: 2 },
-      { id: 'item-8', name: 'San Pellegrino', quantity: 4 },
-    ],
-  },
-]
-
 export const mockAuthResponse: AuthResponse = {
   token: 'demo-token',
   driver: mockDriver,

src/components/BottomNav.jsx

@@ -0,0 +1,35 @@
+import { NavLink } from 'react-router-dom'
+
+export default function BottomNav() {
+  return (
+    <nav className="driver-shell__nav">
+      <NavLink
+        to="/orders"
+        className={({ isActive }) =>
+          ['driver-shell__nav-item', isActive && 'driver-shell__nav-item--active']
+            .filter(Boolean)
+            .join(' ')
+        }
+        end
+      >
+        <span role="img" aria-hidden>
+          📦
+        </span>
+        <span>Orders</span>
+      </NavLink>
+      <NavLink
+        to="/profile"
+        className={({ isActive }) =>
+          ['driver-shell__nav-item', isActive && 'driver-shell__nav-item--active']
+            .filter(Boolean)
+            .join(' ')
+        }
+      >
+        <span role="img" aria-hidden>
+          👤
+        </span>
+        <span>Profile</span>
+      </NavLink>
+    </nav>
+  )
+}