CodeMyMobile · Studio-18 · Oct 7, 2025
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/App.tsx b/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'

diff --git a/src/api/mockData.ts b/src/api/mockData.ts
@@ -44,6 +44,8 @@ export const mockOrders: Order[] = [
     requiresIdCheck: true,
     requiresPaymentCheck: true,
     createdAt: minutesAgo(28),
+    acceptedAt: minutesAgo(32),
+    startedAt: minutesAgo(30),
     customer: {
       name: 'John Doe',
       phone: '(555) 246-8135',
@@ -66,6 +68,10 @@ export const mockOrders: Order[] = [
     requiresIdCheck: true,
     requiresPaymentCheck: true,
     createdAt: minutesAgo(125),
+    acceptedAt: minutesAgo(120),
+    startedAt: minutesAgo(118),
+    arrivedAt: minutesAgo(110),
+    completedAt: minutesAgo(105),
     customer: {
       name: 'Alice Lee',
       phone: '(555) 678-9012',

diff --git a/src/api/orders.ts b/src/api/orders.ts
@@ -23,6 +23,25 @@ export async function acceptOrder(orderId: string): Promise<Order> {
       if (!existing) {
         throw new Error('Order not found')
       }
+      existing.acceptedAt = new Date().toISOString()
+      existing.status = 'ASSIGNED'
+      return existing
+    },
+  )
+}
+
+export async function startOrder(orderId: string): Promise<Order> {
+  return safeRequest(
+    async () => {
+      const response = await apiClient.post<Order>(`/orders/${orderId}/start`)
+      return response.data
+    },
+    async () => {
+      const existing = mockOrders.find((order) => order.id === orderId)
+      if (!existing) {
+        throw new Error('Order not found')
+      }
+      existing.startedAt = new Date().toISOString()
       existing.status = 'IN_PROGRESS'
       return existing
     },
@@ -40,6 +59,7 @@ export async function arriveOrder(orderId: string): Promise<Order> {
       if (!existing) {
         throw new Error('Order not found')
       }
+      existing.arrivedAt = new Date().toISOString()
       existing.status = 'ARRIVED'
       return existing
     },
@@ -49,14 +69,17 @@ export async function arriveOrder(orderId: string): Promise<Order> {
 export async function completeOrder(orderId: string, signature?: string): Promise<Order> {
   return safeRequest(
     async () => {
-      const response = await apiClient.post<Order>(`/orders/${orderId}/complete`, { signature })
+      const response = await apiClient.post<Order>(`/orders/${orderId}/complete`, {
+        proof: signature ? { signatureUrl: signature } : undefined,
+      })
       return response.data
     },
     async () => {
       const existing = mockOrders.find((order) => order.id === orderId)
       if (!existing) {
         throw new Error('Order not found')
       }
+      existing.completedAt = new Date().toISOString()
       existing.status = 'COMPLETED'
       return existing
     },

diff --git a/src/components/VerifyChecklist.tsx b/src/components/VerifyChecklist.tsx
@@ -1,35 +1,55 @@
 interface VerifyChecklistProps {
   idChecked: boolean
   paymentChecked: boolean
+  requiresIdCheck: boolean
+  requiresPaymentCheck: boolean
   onChange: (next: { idChecked: boolean; paymentChecked: boolean }) => void
 }
 
-export function VerifyChecklist({ idChecked, paymentChecked, onChange }: VerifyChecklistProps): JSX.Element {
+export function VerifyChecklist({
+  idChecked,
+  paymentChecked,
+  requiresIdCheck,
+  requiresPaymentCheck,
+  onChange,
+}: VerifyChecklistProps): JSX.Element {
   return (
     <div className="verify-section">
       <div className="verify-header">
         <h3>Required Verifications</h3>
       </div>
-      <button
-        type="button"
-        className={`verify-item ${idChecked ? 'checked' : ''}`}
-        onClick={() => onChange({ idChecked: !idChecked, paymentChecked })}
-      >
-        <span>ID Verified (21+ years)</span>
-        <span className={`verify-checkbox ${idChecked ? 'checked' : ''}`} aria-hidden>
-          {idChecked ? '✓' : ''}
-        </span>
-      </button>
-      <button
-        type="button"
-        className={`verify-item ${paymentChecked ? 'checked' : ''}`}
-        onClick={() => onChange({ idChecked, paymentChecked: !paymentChecked })}
-      >
-        <span>Payment Verified</span>
-        <span className={`verify-checkbox ${paymentChecked ? 'checked' : ''}`} aria-hidden>
-          {paymentChecked ? '✓' : ''}
-        </span>
-      </button>
+      {requiresIdCheck ? (
+        <button
+          type="button"
+          className={`verify-item ${idChecked ? 'checked' : ''}`}
+          onClick={() => onChange({ idChecked: !idChecked, paymentChecked })}
+        >
+          <span>ID Verified (21+ years)</span>
+          <span className={`verify-checkbox ${idChecked ? 'checked' : ''}`} aria-hidden>
+            {idChecked ? '✓' : ''}
+          </span>
+        </button>
+      ) : (
+        <div className="verify-item disabled">
+          <span>ID verification not required</span>
+        </div>
+      )}
+      {requiresPaymentCheck ? (
+        <button
+          type="button"
+          className={`verify-item ${paymentChecked ? 'checked' : ''}`}
+          onClick={() => onChange({ idChecked, paymentChecked: !paymentChecked })}
+        >
+          <span>Payment Verified</span>
+          <span className={`verify-checkbox ${paymentChecked ? 'checked' : ''}`} aria-hidden>
+            {paymentChecked ? '✓' : ''}
+          </span>
+        </button>
+      ) : (
+        <div className="verify-item disabled">
+          <span>Payment verification not required</span>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/hooks/useOrders.tsx b/src/hooks/useOrders.tsx
@@ -7,8 +7,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { acceptOrder, completeOrder, getOrders } from '../api/orders'
-import { arriveOrder } from '../api/orders'
+import { acceptOrder, completeOrder, getOrders, startOrder, arriveOrder } from '../api/orders'
 import { Order } from '../types'
 import { useSocket } from './useSocket'
 import { useToast } from './useToast'
@@ -18,6 +17,7 @@ interface OrdersContextValue {
   orders: Order[]
   refresh: () => Promise<void>
   accept: (orderId: string) => Promise<void>
+  markStarted: (orderId: string) => Promise<void>
   markArrived: (orderId: string) => Promise<void>
   markComplete: (orderId: string, signature?: string) => Promise<void>
   isFetching: boolean
@@ -78,6 +78,12 @@ export function OrdersProvider({ children }: PropsWithChildren): JSX.Element {
     push({ title: 'Order accepted', description: order.number, variant: 'success' })
   }, [mergeOrder, push])
 
+  const markStarted = useCallback(async (orderId: string) => {
+    const order = await startOrder(orderId)
+    mergeOrder(order)
+    push({ title: 'Delivery started', description: order.number, variant: 'info' })
+  }, [mergeOrder, push])
+
   const markArrived = useCallback(async (orderId: string) => {
     const order = await arriveOrder(orderId)
     mergeOrder(order)
@@ -91,8 +97,8 @@ export function OrdersProvider({ children }: PropsWithChildren): JSX.Element {
   }, [mergeOrder, push])
 
   const value = useMemo<OrdersContextValue>(
-    () => ({ orders, refresh, accept, markArrived, markComplete, isFetching }),
-    [accept, isFetching, markArrived, markComplete, orders, refresh],
+    () => ({ orders, refresh, accept, markStarted, markArrived, markComplete, isFetching }),
+    [accept, isFetching, markArrived, markComplete, markStarted, orders, refresh],
   )
 
   return <OrdersContext.Provider value={value}>{children}</OrdersContext.Provider>

diff --git a/src/main.tsx b/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'

diff --git a/src/routes/Orders/CompletedOrderCard.tsx b/src/routes/Orders/CompletedOrderCard.tsx
@@ -7,18 +7,11 @@ interface CompletedOrderCardProps {
   order: Order
   expanded: boolean
   onToggle: (order: Order) => void
-  onArrive: (orderId: string) => Promise<void>
-  onComplete: (orderId: string, signature: string) => Promise<void>
 }
 
-export function CompletedOrderCard({
-  order,
-  expanded,
-  onToggle,
-  onArrive,
-  onComplete,
-}: CompletedOrderCardProps): JSX.Element {
-  const deliveredTime = formatTimeOfDay(order.createdAt)
+export function CompletedOrderCard({ order, expanded, onToggle }: CompletedOrderCardProps): JSX.Element {
+  const deliveredAt = order.completedAt ?? order.createdAt
+  const deliveredTime = formatTimeOfDay(deliveredAt)
 
   return (
     <article className={classNames('completed-order-card', expanded && 'expanded')}>
@@ -48,7 +41,7 @@ export function CompletedOrderCard({
       </button>
       {expanded ? (
         <div className="completed-order-detail" id={`completed-order-${order.id}`}>
-          <OrderDetail order={order} onArrive={onArrive} onComplete={onComplete} />
+          <OrderDetail order={order} />
         </div>
       ) : null}
     </article>