Revamp driver portal UI

src/App.tsx

@@ -2,7 +2,7 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom'
 import LoginRoute from './routes/Login'
 import OrdersRoute from './routes/Orders/Index'
 import ProfileRoute from './routes/Profile'
-import { ProtectedRoute } from './components/ProtectedRoute'
+import { ProtectedRoute } from './components/ProtectedRoute.tsx'
 import { Header } from './components/Header'
 import { BottomNav } from './components/BottomNav'
 import { useAuth } from './hooks/useAuth'

src/components/Header.tsx

@@ -20,29 +20,32 @@ export function Header({ trackingActive }: HeaderProps): JSX.Element {
     <header className="app-header">
       <h1 className="app-title">
         <Link to="/orders" className="app-title-link">
-          Jason&apos;s Delivery
+          <span className="app-title-badge">Jason&apos;s Delivery</span>
+          <span className="app-title-subtitle">Driver Portal</span>
         </Link>
       </h1>
-      <div className="driver-pill">
-        <span
-          className={classNames(
-            'status-dot',
-            driver?.status === 'ONLINE' && 'online',
-            driver?.status === 'ON_DELIVERY' && 'onduty',
-            driver?.status === 'OFFLINE' && 'offline',
-          )}
-          aria-hidden
-        />
-        <div className="driver-pill-text">
-          <span className="driver-pill-name">{driver?.name ?? 'Driver'}</span>
-          <span className="driver-pill-status">{driver ? statusLabels[driver.status] : 'Offline'}</span>
+      <div className="driver-pill" aria-live="polite">
+        <div className="driver-pill-status-group">
+          <span
+            className={classNames(
+              'status-dot',
+              driver?.status === 'ONLINE' && 'online',
+              driver?.status === 'ON_DELIVERY' && 'onduty',
+              driver?.status === 'OFFLINE' && 'offline',
+            )}
+            aria-hidden
+          />
+          <div className="driver-pill-text">
+            <span className="driver-pill-label">{driver?.name ?? 'Driver'}</span>
+            <span className="driver-pill-status">{driver ? statusLabels[driver.status] : 'Offline'}</span>
+          </div>
         </div>
-        <div
+        <span
           className={classNames('tracking-indicator', trackingActive && 'active')}
           title={trackingActive ? 'Location sharing active' : 'Location paused'}
         >
-          📡
-        </div>
+          {trackingActive ? 'Live' : 'Paused'}
+        </span>
       </div>
     </header>
   )

src/main.jsx

@@ -1,16 +1,24 @@
 import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-import './index.css'
-import App from './App.jsx'
-import { AuthProvider } from './context/AuthContext.jsx'
+import App from './App.tsx'
+import './styles/globals.css'
+import { AuthProvider } from './hooks/useAuth'
+import { ToastProvider } from './hooks/useToast'
+import { SocketProvider } from './hooks/useSocket'
+import { ToastContainer } from './components/ToastContainer'
 
-createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
-      <AuthProvider>
-        <App />
-      </AuthProvider>
+      <ToastProvider>
+        <AuthProvider>
+          <SocketProvider>
+            <App />
+          </SocketProvider>
+        </AuthProvider>
+        <ToastContainer />
+      </ToastProvider>
     </BrowserRouter>
   </StrictMode>,
 )

src/main.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-import App from './App'
+import App from './App.tsx'
 import './styles/globals.css'
 import { AuthProvider } from './hooks/useAuth'
 import { ToastProvider } from './hooks/useToast'

src/routes/Orders/Index.tsx

@@ -95,72 +95,84 @@ export default function OrdersRoute(): JSX.Element {
 
   return (
     <div className="orders-page">
-      <Tabs
-        tabs={tabConfig.map((tab) => ({ ...tab, badge: tab.id === 'pending' ? segmented.pending.length : undefined }))}
-        activeId={activeTab}
-        onChange={(id) => setActiveTab(id as TabId)}
-      />
-      {activeTab === 'pending' ? (
-        <div className="pending-orders">
-          <div className="orders-list pending-list">
+      <section className="orders-hero-card">
+        <div className="orders-hero-text">
+          <p className="orders-overline">Orders</p>
+          <h2>Today&apos;s queue</h2>
+          <p className="orders-hero-subtitle">Monitor new requests and keep deliveries moving.</p>
+        </div>
+        <Tabs
+          tabs={tabConfig.map((tab) => ({
+            ...tab,
+            badge: tab.id === 'pending' ? segmented.pending.length : undefined,
+          }))}
+          activeId={activeTab}
+          onChange={(id) => setActiveTab(id as TabId)}
+        />
+      </section>
+      <div className="orders-body">
+        {activeTab === 'pending' ? (
+          <div className="pending-orders">
+            <div className="orders-list pending-list">
+              {listForTab.length === 0 ? (
+                <p className="empty-state">No orders in this state.</p>
+              ) : (
+                listForTab.map((order) => (
+                  <OrderCard key={order.id} order={order} onAccept={handleAccept} />
+                ))
+              )}
+            </div>
+          </div>
+        ) : activeTab === 'active' ? (
+          <div className="active-orders">
             {listForTab.length === 0 ? (
               <p className="empty-state">No orders in this state.</p>
             ) : (
               listForTab.map((order) => (
-                <OrderCard key={order.id} order={order} onAccept={handleAccept} />
+                <OrderDetail key={order.id} order={order} onArrive={handleArrive} onComplete={handleComplete} />
               ))
             )}
           </div>
-        </div>
-      ) : activeTab === 'active' ? (
-        <div className="active-orders">
-          {listForTab.length === 0 ? (
-            <p className="empty-state">No orders in this state.</p>
-          ) : (
-            listForTab.map((order) => (
-              <OrderDetail key={order.id} order={order} onArrive={handleArrive} onComplete={handleComplete} />
-            ))
-          )}
-        </div>
-      ) : (
-        <div className="completed-orders">
-          {segmented.completed.length === 0 ? (
-            <p className="empty-state">No orders in this state.</p>
-          ) : (
-            <>
-              <div className="completed-orders-list">
-                {visibleCompletedOrders.map((order) => (
-                  <CompletedOrderCard
-                    key={order.id}
-                    order={order}
-                    expanded={expandedCompletedId === order.id}
-                    onToggle={(next) =>
-                      setExpandedCompletedId((current) =>
-                        current === next.id ? undefined : next.id,
+        ) : (
+          <div className="completed-orders">
+            {segmented.completed.length === 0 ? (
+              <p className="empty-state">No orders in this state.</p>
+            ) : (
+              <>
+                <div className="completed-orders-list">
+                  {visibleCompletedOrders.map((order) => (
+                    <CompletedOrderCard
+                      key={order.id}
+                      order={order}
+                      expanded={expandedCompletedId === order.id}
+                      onToggle={(next) =>
+                        setExpandedCompletedId((current) =>
+                          current === next.id ? undefined : next.id,
+                        )
+                      }
+                      onArrive={handleArrive}
+                      onComplete={handleComplete}
+                    />
+                  ))}
+                </div>
+                {canShowMoreCompleted ? (
+                  <button
+                    type="button"
+                    className="see-more-button"
+                    onClick={() =>
+                      setCompletedVisibleCount((current) =>
+                        Math.min(current + 10, segmented.completed.length),
                       )
                     }
-                    onArrive={handleArrive}
-                    onComplete={handleComplete}
-                  />
-                ))}
-              </div>
-              {canShowMoreCompleted ? (
-                <button
-                  type="button"
-                  className="see-more-button"
-                  onClick={() =>
-                    setCompletedVisibleCount((current) =>
-                      Math.min(current + 10, segmented.completed.length),
-                    )
-                  }
-                >
-                  See more
-                </button>
-              ) : null}
-            </>
-          )}
-        </div>
-      )}
+                  >
+                    See more
+                  </button>
+                ) : null}
+              </>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   )
 }

src/routes/Profile.tsx

@@ -13,6 +13,15 @@ export default function ProfileRoute(): JSX.Element {
   const { driver, logout, setStatus } = useAuth()
   const { push } = useToast()
   const [updating, setUpdating] = useState(false)
+  const initials = (driver?.name ?? 'Driver')
+    .split(' ')
+    .map((part) => part.charAt(0))
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+  const isOffline = driver?.status === 'OFFLINE'
+  const isDriving = driver?.status === 'ONLINE' || driver?.status === 'ON_DELIVERY'
 
   async function handleStatusChange(nextStatus: DriverStatus) {
     if (!driver || driver.status === nextStatus) return
@@ -27,36 +36,56 @@ export default function ProfileRoute(): JSX.Element {
 
   return (
     <div className="profile-page">
-      <section className="profile-card">
-        <h2>Driver Profile</h2>
-        <p className="profile-name">{driver?.name}</p>
-        <p className="profile-email">{driver?.email}</p>
-        <p className="profile-phone">{driver?.phone}</p>
+      <section className="profile-card profile-summary">
+        <div className="profile-hero">
+          <div className="profile-avatar" aria-hidden>{initials}</div>
+          <div className="profile-hero-text">
+            <p className="profile-overline">Driver Profile</p>
+            <h2 className="profile-heading">{driver?.name ?? 'Driver'}</h2>
+            <p className="profile-subheading">Jason&apos;s Delivery partner</p>
+          </div>
+        </div>
+        <div className="profile-contact">
+          <div>
+            <span className="contact-label">Email</span>
+            <span className="contact-value">{driver?.email ?? 'Not provided'}</span>
+          </div>
+          <div>
+            <span className="contact-label">Phone</span>
+            <span className="contact-value">{driver?.phone ?? 'Not provided'}</span>
+          </div>
+        </div>
       </section>
-      <section className="profile-card">
-        <h3>Status</h3>
-        <div className="status-buttons">
+      <section className="profile-card profile-status">
+        <div className="profile-card-header">
+          <h3>Status</h3>
+          <span className={`tracking-chip ${trackingActive ? 'live' : 'paused'}`}>
+            {trackingActive ? 'Live location on' : 'Location paused'}
+          </span>
+        </div>
+        <div className="status-toggle">
           <button
             type="button"
-            className={`status-button ${driver?.status === 'OFFLINE' ? 'active' : ''}`}
+            className={`status-button ${isOffline ? 'active' : ''}`}
             disabled={updating}
             onClick={() => handleStatusChange('OFFLINE')}
           >
             Offline
           </button>
           <button
             type="button"
-            className={`status-button ${driver?.status === 'ONLINE' ? 'active' : ''}`}
+            className={`status-button ${isDriving ? 'active' : ''}`}
             disabled={updating}
             onClick={() => handleStatusChange('ONLINE')}
           >
-            Online
+            Drive
           </button>
         </div>
-        <p className="tracking-note">Location tracking: {trackingActive ? 'Active' : 'Paused'}</p>
+        <p className="status-helper">Switch to Drive when you&apos;re ready to accept new orders.</p>
       </section>
-      <section className="profile-card">
+      <section className="profile-card profile-session">
         <h3>Session</h3>
+        <p className="session-note">Signed in as {driver?.email ?? 'your account'}</p>
         <button type="button" className="action-btn danger" onClick={logout}>
           Sign Out
         </button>