feat(mobile): Add field app with date range navigation

- Add React Native Expo field app for mobile staff
- Use main /appointments/ endpoint with date range support
- Add X-Business-Subdomain header for tenant context
- Support day/week view navigation
- Remove WebSocket console logging from frontend
- Update AppointmentStatus type to include all backend statuses
- Add responsive status legend to scheduler header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/hooks/useAppointmentWebSocket.ts

@@ -10,23 +10,31 @@ import { getSubdomain } from '../api/config';
 import { getWebSocketUrl } from '../utils/domain';
 import { Appointment } from '../types';
 
-interface WebSocketMessage {
-  type: 'connection_established' | 'appointment_created' | 'appointment_updated' | 'appointment_deleted' | 'pong';
-  appointment?: {
-    id: string;
-    business_id: string;
-    service_id: string;
-    resource_id: string | null;
-    customer_id: string;
-    customer_name: string;
-    start_time: string;
-    end_time: string;
-    duration_minutes: number;
-    status: string;
-    notes: string;
+interface WebSocketEvent {
+  id: number;
+  title: string;
+  start_time: string;
+  end_time: string;
+  status: string;
+  notes: string;
+  service?: {
+    id: number;
+    name: string;
+    duration: number;
+    price: string;
   };
-  appointment_id?: string;
+}
+
+interface WebSocketMessage {
+  type: 'connection_established' | 'event_created' | 'event_updated' | 'event_deleted' | 'event_status_changed' | 'pong';
+  event?: WebSocketEvent;
+  event_id?: number;
+  old_status?: string;
+  new_status?: string;
+  changed_fields?: string[];
   message?: string;
+  user_id?: number;
+  groups?: string[];
 }
 
 interface UseAppointmentWebSocketOptions {
@@ -36,25 +44,26 @@ interface UseAppointmentWebSocketOptions {
   onError?: (error: Event) => void;
 }
 
-// WebSocket is not yet implemented in the backend - disable for now
-const WEBSOCKET_ENABLED = false;
+// Enable WebSocket for real-time calendar updates
+const WEBSOCKET_ENABLED = true;
 
 /**
- * Transform backend appointment format to frontend format
+ * Transform backend event format to frontend appointment format
  */
-function transformAppointment(data: WebSocketMessage['appointment']): Appointment | null {
+function transformEvent(data: WebSocketEvent): Partial<Appointment> | null {
   if (!data) return null;
 
+  const startTime = new Date(data.start_time);
+  const endTime = new Date(data.end_time);
+  const durationMinutes = Math.round((endTime.getTime() - startTime.getTime()) / 60000);
+
   return {
-    id: data.id,
-    resourceId: data.resource_id,
-    customerId: data.customer_id,
-    customerName: data.customer_name,
-    serviceId: data.service_id,
-    startTime: new Date(data.start_time),
-    durationMinutes: data.duration_minutes,
+    id: String(data.id),
+    startTime,
+    durationMinutes,
     status: data.status as Appointment['status'],
     notes: data.notes,
+    serviceId: data.service ? String(data.service.id) : undefined,
   };
 }
 
@@ -92,12 +101,18 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
     const token = getCookie('access_token');
     const subdomain = getSubdomain();
 
-    if (!token || !subdomain) {
+    if (!token) {
       return null;
     }
 
     // Use the getWebSocketUrl utility from domain.ts
-    return `${getWebSocketUrl()}appointments/?token=${token}&subdomain=${subdomain}`;
+    // Backend uses /ws/calendar/ endpoint with token query param
+    const baseUrl = getWebSocketUrl();
+    let url = `${baseUrl}calendar/?token=${token}`;
+    if (subdomain) {
+      url += `&subdomain=${subdomain}`;
+    }
+    return url;
   };
 
   const updateQueryCache = useCallback((message: WebSocketMessage) => {
@@ -109,27 +124,46 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
         if (!old) return old;
 
         switch (message.type) {
-          case 'appointment_created': {
-            const newAppointment = transformAppointment(message.appointment);
-            if (!newAppointment) return old;
+          case 'event_created': {
+            if (!message.event) return old;
+            const eventUpdate = transformEvent(message.event);
+            if (!eventUpdate) return old;
+            const eventId = String(message.event.id);
             // Check if appointment already exists (avoid duplicates)
-            if (old.some(apt => apt.id === newAppointment.id)) {
+            if (old.some(apt => apt.id === eventId)) {
               return old;
             }
-            return [...old, newAppointment];
+            // Note: We only have partial data from WebSocket, so we trigger a refetch
+            // to get full appointment data (customer info, etc.)
+            queryClient.invalidateQueries({ queryKey: ['appointments'] });
+            return old;
           }
 
-          case 'appointment_updated': {
-            const updatedAppointment = transformAppointment(message.appointment);
-            if (!updatedAppointment) return old;
-            return old.map(apt =>
-              apt.id === updatedAppointment.id ? updatedAppointment : apt
-            );
+          case 'event_updated':
+          case 'event_status_changed': {
+            if (!message.event) return old;
+            const eventUpdate = transformEvent(message.event);
+            if (!eventUpdate) return old;
+            const eventId = String(message.event.id);
+
+            // Update the matching appointment with new data
+            const updated = old.map(apt => {
+              if (apt.id === eventId) {
+                return {
+                  ...apt,
+                  ...eventUpdate,
+                };
+              }
+              return apt;
+            });
+
+            return updated;
           }
 
-          case 'appointment_deleted': {
-            if (!message.appointment_id) return old;
-            return old.filter(apt => apt.id !== message.appointment_id);
+          case 'event_deleted': {
+            if (!message.event_id) return old;
+            const eventId = String(message.event_id);
+            return old.filter(apt => apt.id !== eventId);
           }
 
           default:
@@ -160,7 +194,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
 
       const url = getWsUrl();
       if (!url) {
-        console.log('WebSocket: Missing token or subdomain, skipping connection');
         return;
       }
 
@@ -169,7 +202,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
         wsRef.current.close();
       }
 
-      console.log('WebSocket: Connecting to', url.replace(/token=[^&]+/, 'token=***'));
       const ws = new WebSocket(url);
 
       ws.onopen = () => {
@@ -179,7 +211,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
           return;
         }
 
-        console.log('WebSocket: Connected');
         reconnectAttemptsRef.current = 0;
         setIsConnected(true);
         onConnectedRef.current?.();
@@ -204,40 +235,37 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
 
           switch (message.type) {
             case 'connection_established':
-              console.log('WebSocket: Connection confirmed -', message.message);
-              break;
             case 'pong':
-              // Heartbeat response, ignore
+              // Heartbeat/connection responses, ignore
               break;
-            case 'appointment_created':
-            case 'appointment_updated':
-            case 'appointment_deleted':
-              console.log('WebSocket: Received', message.type);
+            case 'event_created':
+            case 'event_updated':
+            case 'event_deleted':
+            case 'event_status_changed':
               updateQueryCache(message);
               break;
             default:
-              console.log('WebSocket: Unknown message type', message);
+              // Unknown message type, ignore
+              break;
           }
         } catch (err) {
-          console.error('WebSocket: Failed to parse message', err);
+          // Silently ignore parse errors
         }
       };
 
       ws.onerror = (error) => {
-        // Only log error if not aborted (StrictMode cleanup causes expected errors)
+        // Only call error callback if not aborted
         if (!effectAborted) {
-          console.error('WebSocket: Error', error);
           onErrorRef.current?.(error);
         }
       };
 
       ws.onclose = (event) => {
-        // Don't log or handle if effect was aborted (expected during StrictMode)
+        // Don't handle if effect was aborted (expected during StrictMode)
         if (effectAborted) {
           return;
         }
 
-        console.log('WebSocket: Disconnected', event.code, event.reason);
         setIsConnected(false);
         onDisconnectedRef.current?.();
 
@@ -250,7 +278,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
         // Only attempt reconnection if not cleaning up
         if (!isCleaningUpRef.current && reconnectAttemptsRef.current < maxReconnectAttempts) {
           const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
-          console.log(`WebSocket: Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current + 1})`);
 
           reconnectTimeoutRef.current = setTimeout(() => {
             reconnectAttemptsRef.current++;

frontend/src/pages/OwnerScheduler.tsx

@@ -4,7 +4,7 @@
 
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { Appointment, AppointmentStatus, User, Business, Resource } from '../types';
-import { Clock, Calendar as CalendarIcon, Filter, GripVertical, CheckCircle2, Trash2, X, User as UserIcon, Mail, Phone, Undo, Redo, ChevronLeft, ChevronRight, Check, AlertTriangle } from 'lucide-react';
+import { Clock, Calendar as CalendarIcon, Filter, GripVertical, CheckCircle2, Trash2, X, User as UserIcon, Mail, Phone, Undo, Redo, ChevronLeft, ChevronRight, ChevronDown, Check, AlertTriangle } from 'lucide-react';
 import { useAppointments, useUpdateAppointment, useDeleteAppointment } from '../hooks/useAppointments';
 import { useResources } from '../hooks/useResources';
 import { useServices } from '../hooks/useServices';
@@ -119,14 +119,18 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
   const [editDateTime, setEditDateTime] = useState('');
   const [editResource, setEditResource] = useState('');
   const [editDuration, setEditDuration] = useState(0);
-  const [editStatus, setEditStatus] = useState<AppointmentStatus>('CONFIRMED');
+  const [editStatus, setEditStatus] = useState<AppointmentStatus>('SCHEDULED');
 
   // Filter state
   const [showFilterMenu, setShowFilterMenu] = useState(false);
-  const [filterStatuses, setFilterStatuses] = useState<Set<AppointmentStatus>>(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
+  const [showStatusLegend, setShowStatusLegend] = useState(false);
+  const [filterStatuses, setFilterStatuses] = useState<Set<AppointmentStatus>>(new Set([
+    'PENDING', 'CONFIRMED', 'SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'CANCELED', 'NO_SHOW', 'NOSHOW'
+  ]));
   const [filterResources, setFilterResources] = useState<Set<string>>(new Set()); // Empty means all
   const [filterServices, setFilterServices] = useState<Set<string>>(new Set()); // Empty means all
   const filterMenuRef = useRef<HTMLDivElement>(null);
+  const statusLegendRef = useRef<HTMLDivElement>(null);
 
   // Update edit state when selected appointment changes
   useEffect(() => {
@@ -204,19 +208,22 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
     }
   }, [overlayWheelHandler]);
 
-  // Close filter menu when clicking outside
+  // Close dropdowns when clicking outside
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (filterMenuRef.current && !filterMenuRef.current.contains(e.target as Node)) {
         setShowFilterMenu(false);
       }
+      if (statusLegendRef.current && !statusLegendRef.current.contains(e.target as Node)) {
+        setShowStatusLegend(false);
+      }
     };
 
-    if (showFilterMenu) {
+    if (showFilterMenu || showStatusLegend) {
       document.addEventListener('mousedown', handleClickOutside);
       return () => document.removeEventListener('mousedown', handleClickOutside);
     }
-  }, [showFilterMenu]);
+  }, [showFilterMenu, showStatusLegend]);
 
   // Filter toggle helpers
   const toggleStatusFilter = (status: AppointmentStatus) => {
@@ -249,13 +256,18 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
     setFilterServices(newSet);
   };
 
+  // All statuses that should be shown by default
+  const DEFAULT_STATUSES: AppointmentStatus[] = [
+    'PENDING', 'CONFIRMED', 'SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'CANCELED', 'NO_SHOW', 'NOSHOW'
+  ];
+
   const clearAllFilters = () => {
-    setFilterStatuses(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
+    setFilterStatuses(new Set(DEFAULT_STATUSES));
     setFilterResources(new Set());
     setFilterServices(new Set());
   };
 
-  const hasActiveFilters = filterStatuses.size < 5 || filterResources.size > 0 || filterServices.size > 0;
+  const hasActiveFilters = filterStatuses.size < DEFAULT_STATUSES.length || filterResources.size > 0 || filterServices.size > 0;
 
   // Scroll to current time on mount (centered in view)
   useEffect(() => {
@@ -576,9 +588,19 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
   const getWidth = (durationMinutes: number) => durationMinutes * (PIXELS_PER_MINUTE * zoomLevel);
 
   const getStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
-    if (status === 'COMPLETED') return 'bg-green-100 border-green-500 text-green-900 dark:bg-green-900/50 dark:border-green-500 dark:text-green-200';
-    if (status === 'NO_SHOW') return 'bg-orange-100 border-orange-500 text-orange-900 dark:bg-orange-900/50 dark:border-orange-500 dark:text-orange-200';
-    if (status === 'CANCELLED') return 'bg-gray-100 border-gray-400 text-gray-500 opacity-75 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400';
+    // Completed statuses
+    if (status === 'COMPLETED' || status === 'PAID') return 'bg-green-100 border-green-500 text-green-900 dark:bg-green-900/50 dark:border-green-500 dark:text-green-200';
+    // No-show
+    if (status === 'NO_SHOW' || status === 'NOSHOW') return 'bg-orange-100 border-orange-500 text-orange-900 dark:bg-orange-900/50 dark:border-orange-500 dark:text-orange-200';
+    // Cancelled
+    if (status === 'CANCELLED' || status === 'CANCELED') return 'bg-gray-100 border-gray-400 text-gray-500 opacity-75 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400';
+    // En route - yellow/amber to show staff is traveling
+    if (status === 'EN_ROUTE') return 'bg-amber-100 border-amber-500 text-amber-900 dark:bg-amber-900/50 dark:border-amber-500 dark:text-amber-200';
+    // In progress - teal/cyan to show work is happening
+    if (status === 'IN_PROGRESS') return 'bg-teal-100 border-teal-500 text-teal-900 dark:bg-teal-900/50 dark:border-teal-500 dark:text-teal-200';
+    // Awaiting payment
+    if (status === 'AWAITING_PAYMENT') return 'bg-purple-100 border-purple-500 text-purple-900 dark:bg-purple-900/50 dark:border-purple-500 dark:text-purple-200';
+    // Time-based colors for scheduled appointments
     const now = new Date();
     if (now > endTime) return 'bg-red-100 border-red-500 text-red-900 dark:bg-red-900/50 dark:border-red-500 dark:text-red-200';
     if (now >= startTime && now <= endTime) return 'bg-yellow-100 border-yellow-500 text-yellow-900 dark:bg-yellow-900/50 dark:border-yellow-500 dark:text-yellow-200';
@@ -587,9 +609,19 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
 
   // Simplified status colors for month view (no border classes)
   const getMonthStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
-    if (status === 'COMPLETED') return 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800/50';
-    if (status === 'NO_SHOW') return 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800/50';
-    if (status === 'CANCELLED') return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 opacity-75 hover:bg-gray-200 dark:hover:bg-gray-600';
+    // Completed statuses
+    if (status === 'COMPLETED' || status === 'PAID') return 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800/50';
+    // No-show
+    if (status === 'NO_SHOW' || status === 'NOSHOW') return 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800/50';
+    // Cancelled
+    if (status === 'CANCELLED' || status === 'CANCELED') return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 opacity-75 hover:bg-gray-200 dark:hover:bg-gray-600';
+    // En route - amber
+    if (status === 'EN_ROUTE') return 'bg-amber-100 dark:bg-amber-900/50 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-800/50';
+    // In progress - teal
+    if (status === 'IN_PROGRESS') return 'bg-teal-100 dark:bg-teal-900/50 text-teal-800 dark:text-teal-200 hover:bg-teal-200 dark:hover:bg-teal-800/50';
+    // Awaiting payment
+    if (status === 'AWAITING_PAYMENT') return 'bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800/50';
+    // Time-based colors
     const now = new Date();
     if (now > endTime) return 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800/50';
     if (now >= startTime && now <= endTime) return 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800/50';
@@ -1056,32 +1088,90 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
               <Redo size={18} />
             </button>
           </div>
-          {/* Status Legend */}
-          <div className="flex items-center gap-3 border-l border-gray-300 dark:border-gray-600 pl-4">
+          {/* Status Legend - Hidden on smaller screens, shown on 2xl+ (1536px) */}
+          <div className="hidden 2xl:flex items-center gap-3 border-l border-gray-300 dark:border-gray-600 pl-4">
             <span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Status:</span>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-wrap">
               <div className="flex items-center gap-1">
                 <div className="w-3 h-3 rounded bg-blue-100 border border-blue-500"></div>
-                <span className="text-xs text-gray-600 dark:text-gray-400">Upcoming</span>
+                <span className="text-xs text-gray-600 dark:text-gray-400">Scheduled</span>
               </div>
               <div className="flex items-center gap-1">
-                <div className="w-3 h-3 rounded bg-yellow-100 border border-yellow-500"></div>
+                <div className="w-3 h-3 rounded bg-amber-100 border border-amber-500"></div>
+                <span className="text-xs text-gray-600 dark:text-gray-400">En Route</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-teal-100 border border-teal-500"></div>
                 <span className="text-xs text-gray-600 dark:text-gray-400">In Progress</span>
               </div>
-              <div className="flex items-center gap-1">
-                <div className="w-3 h-3 rounded bg-red-100 border border-red-500"></div>
-                <span className="text-xs text-gray-600 dark:text-gray-400">Overdue</span>
-              </div>
               <div className="flex items-center gap-1">
                 <div className="w-3 h-3 rounded bg-green-100 border border-green-500"></div>
                 <span className="text-xs text-gray-600 dark:text-gray-400">Completed</span>
               </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-purple-100 border border-purple-500"></div>
+                <span className="text-xs text-gray-600 dark:text-gray-400">Awaiting Payment</span>
+              </div>
               <div className="flex items-center gap-1">
                 <div className="w-3 h-3 rounded bg-gray-100 border border-gray-400"></div>
                 <span className="text-xs text-gray-600 dark:text-gray-400">Cancelled</span>
               </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 rounded bg-orange-100 border border-orange-500"></div>
+                <span className="text-xs text-gray-600 dark:text-gray-400">No Show</span>
+              </div>
             </div>
           </div>
+          {/* Status Legend Dropdown - Shown on screens smaller than 2xl */}
+          <div className="2xl:hidden relative" ref={statusLegendRef}>
+            <button
+              onClick={() => setShowStatusLegend(!showStatusLegend)}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
+            >
+              <div className="flex gap-0.5">
+                <div className="w-2 h-2 rounded bg-blue-500"></div>
+                <div className="w-2 h-2 rounded bg-amber-500"></div>
+                <div className="w-2 h-2 rounded bg-teal-500"></div>
+                <div className="w-2 h-2 rounded bg-green-500"></div>
+              </div>
+              <span className="text-xs font-medium">Legend</span>
+              <ChevronDown size={14} className={`transition-transform ${showStatusLegend ? 'rotate-180' : ''}`} />
+            </button>
+            {showStatusLegend && (
+              <div className="absolute right-0 top-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 p-3 min-w-[180px]">
+                <div className="grid grid-cols-1 gap-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-blue-100 border border-blue-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">Scheduled</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-amber-100 border border-amber-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">En Route</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-teal-100 border border-teal-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">In Progress</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-green-100 border border-green-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">Completed</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-purple-100 border border-purple-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">Awaiting Payment</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-gray-100 border border-gray-400"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">Cancelled</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded bg-orange-100 border border-orange-500"></div>
+                    <span className="text-xs text-gray-600 dark:text-gray-400">No Show</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
         <div className="flex items-center gap-3">
           <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors shadow-sm">
@@ -1120,7 +1210,7 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
                   <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
                     <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Status</h4>
                     <div className="space-y-1">
-                      {(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW'] as AppointmentStatus[]).map(status => (
+                      {(['SCHEDULED', 'EN_ROUTE', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED', 'NO_SHOW', 'AWAITING_PAYMENT'] as AppointmentStatus[]).map(status => (
                         <div
                           key={status}
                           onClick={() => toggleStatusFilter(status)}
@@ -1134,13 +1224,16 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
                             {filterStatuses.has(status) && <Check size={12} className="text-white" />}
                           </div>
                           <span className="text-sm text-gray-700 dark:text-gray-300 capitalize">
-                            {status.toLowerCase().replace('_', ' ')}
+                            {status.toLowerCase().replace(/_/g, ' ')}
                           </span>
                           <div className={`w-2 h-2 rounded-full ml-auto ${
-                            status === 'COMPLETED' ? 'bg-green-500' :
-                            status === 'CANCELLED' ? 'bg-gray-400' :
-                            status === 'NO_SHOW' ? 'bg-orange-500' :
-                            status === 'CONFIRMED' ? 'bg-blue-500' :
+                            status === 'COMPLETED' || status === 'PAID' ? 'bg-green-500' :
+                            status === 'CANCELLED' || status === 'CANCELED' ? 'bg-gray-400' :
+                            status === 'NO_SHOW' || status === 'NOSHOW' ? 'bg-orange-500' :
+                            status === 'EN_ROUTE' ? 'bg-amber-500' :
+                            status === 'IN_PROGRESS' ? 'bg-teal-500' :
+                            status === 'AWAITING_PAYMENT' ? 'bg-purple-500' :
+                            status === 'SCHEDULED' ? 'bg-blue-500' :
                             'bg-yellow-400'
                           }`}></div>
                         </div>
@@ -1897,9 +1990,11 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
                       onChange={(e) => setEditStatus(e.target.value as AppointmentStatus)}
                       className="w-full px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-semibold text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                     >
-                      <option value="PENDING">Pending</option>
-                      <option value="CONFIRMED">Confirmed</option>
+                      <option value="SCHEDULED">Scheduled</option>
+                      <option value="EN_ROUTE">En Route</option>
+                      <option value="IN_PROGRESS">In Progress</option>
                       <option value="COMPLETED">Completed</option>
+                      <option value="AWAITING_PAYMENT">Awaiting Payment</option>
                       <option value="CANCELLED">Cancelled</option>
                       <option value="NO_SHOW">No Show</option>
                     </select>

frontend/src/types.ts

@@ -151,9 +151,15 @@ export interface Resource {
   savedLaneCount?: number; // Remembered lane count when multilane is disabled
   created_at?: string; // Used for quota overage calculation (oldest archived first)
   is_archived_by_quota?: boolean; // True if archived due to quota overage
+  userCanEditSchedule?: boolean; // Allow linked user to edit their schedule regardless of role
 }
 
-export type AppointmentStatus = 'PENDING' | 'CONFIRMED' | 'COMPLETED' | 'CANCELLED' | 'NO_SHOW';
+// Backend uses: SCHEDULED, EN_ROUTE, IN_PROGRESS, CANCELED, COMPLETED, AWAITING_PAYMENT, PAID, NOSHOW
+// Frontend aliases: PENDING (for SCHEDULED), CONFIRMED (for SCHEDULED), CANCELLED (for CANCELED), NO_SHOW (for NOSHOW)
+export type AppointmentStatus =
+  | 'SCHEDULED' | 'EN_ROUTE' | 'IN_PROGRESS' | 'CANCELED' | 'COMPLETED' | 'AWAITING_PAYMENT' | 'PAID' | 'NOSHOW'
+  // Legacy aliases for frontend compatibility
+  | 'PENDING' | 'CONFIRMED' | 'CANCELLED' | 'NO_SHOW';
 
 export interface Appointment {
   id: string;