+ {/* Header */}
+
+
+
GPS Tracking
+
Monitor driver locations in real-time
+
+
+
+ {status?.traccarAvailable && (
+
+ )}
+
+
+
+ {/* Traccar Status */}
+ {!status?.traccarAvailable && (
+
+
+
+
+
Traccar Server Offline
+
GPS tracking is unavailable until the server is online.
+
+
+
+ )}
+
+ {/* Status Cards */}
+
+
+
+
+
Total Enrolled
+
{status?.enrolledDrivers || 0}
+
+
+
+
+
+
+
+
+
+
+
Active Now
+
{status?.activeDrivers || 0}
+
+
+
+
+
+
+
+
+
Update Interval
+
{status?.settings?.updateIntervalSeconds || 60}s
+
+
+
+
+
+
+
+
+
+
+
Shift Hours
+
{status?.settings?.shiftStartTime || '4:00'} - {status?.settings?.shiftEndTime || '1:00'}
+
+
+
+
+
+
+
+
+ {/* Tabs */}
+
+
+ {[
+ { id: 'map', label: 'Live Map', icon: MapPin },
+ { id: 'devices', label: 'Devices', icon: Smartphone },
+ { id: 'stats', label: 'Stats', icon: Gauge },
+ { id: 'settings', label: 'Settings', icon: Settings },
+ ].map(tab => (
+
+ ))}
+
+
+
+ {/* Tab Content */}
+
+ {/* Map Tab */}
+ {activeTab === 'map' && (
+
+
+ {locationsLoading ? (
+
+
+
+ ) : (
+
+
+ {locations && }
+ {locations?.filter(l => l.location).map((driver) => (
+
+
+
+
{driver.driverName}
+ {driver.driverPhone && (
+
{driver.driverPhone}
+ )}
+
+
+
+
+ {driver.location?.speed?.toFixed(1) || 0} mph
+
+ {driver.location?.battery && (
+
+
+ {Math.round(driver.location.battery)}%
+
+ )}
+
+
+ {formatDistanceToNow(new Date(driver.location!.timestamp), { addSuffix: true })}
+
+
+
+ )}
+
+ {/* Map Legend */}
+
+
+
+ {/* Active Drivers List */}
+
+
Active Drivers ({locations?.filter(l => l.location).length || 0})
+ {!locations || locations.filter(l => l.location).length === 0 ? (
+
No active drivers reporting location
+ ) : (
+
+ {locations.filter(l => l.location).map((driver) => (
+
+
+
{driver.driverName}
+
+ {driver.location?.speed?.toFixed(0) || 0} mph
+
+
+
+ Online
+
+
+ ))}
+
+ )}
+
+
+ )}
+
+ {/* Devices Tab */}
+ {activeTab === 'devices' && (
+
+
+
Enrolled Devices
+
+
+
+ {devicesLoading ? (
+
+ ) : devices && devices.length > 0 ? (
+
+
+
+
+ | Driver |
+ Device ID |
+ Status |
+ Consent |
+ Last Active |
+ Actions |
+
+
+
+ {devices.map((device: any) => (
+
+ |
+ {device.driver?.name || 'Unknown'}
+ {device.driver?.phone && {device.driver.phone} }
+ |
+ {device.deviceIdentifier} |
+
+
+ {device.isActive ? 'Active' : 'Inactive'}
+
+ |
+
+ {device.consentGiven ? (
+
+ ) : (
+
+ )}
+ |
+
+ {device.lastActive ? formatDistanceToNow(new Date(device.lastActive), { addSuffix: true }) : 'Never'}
+ |
+
+
+ |
+
+ ))}
+
+
+
+ ) : (
+
+
+
No devices enrolled
+
Start by enrolling drivers for GPS tracking
+
+ )}
+
+ )}
+
+ {/* Stats Tab */}
+ {activeTab === 'stats' && (
+
+
Driver Statistics
+
+
+
+
+
+
+ {selectedDriverId && driverStats ? (
+
+
+
+
+
+
{driverStats.stats?.totalMiles || 0}
+
Miles Driven
+
+
+
+
+
+
+
+
{driverStats.stats?.topSpeedMph || 0} mph
+
Top Speed
+
+
+
+
+
+
+
+
{driverStats.stats?.averageSpeedMph || 0} mph
+
Avg Speed
+
+
+
+
+
+
+
+
{driverStats.stats?.totalTrips || 0}
+
Total Trips
+
+
+
+
+ ) : selectedDriverId ? (
+
+ ) : (
+
Select a driver to view their statistics
+ )}
+
+ )}
+
+ {/* Settings Tab */}
+ {activeTab === 'settings' && (
+
+
GPS Settings
+
+ {settingsLoading ? (
+
+ ) : settings ? (
+
+
+
+
{
+ const value = parseInt(e.target.value);
+ if (value >= 30 && value <= 300 && value !== settings.updateIntervalSeconds) {
+ updateSettings.mutate({ updateIntervalSeconds: value });
+ }
+ }}
+ className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:ring-primary focus:border-primary"
+ />
+
How often drivers report their location (30-300 seconds)
+
+
+
+
+
{
+ const value = parseInt(e.target.value);
+ if (value >= 7 && value <= 90 && value !== settings.retentionDays) {
+ updateSettings.mutate({ retentionDays: value });
+ }
+ }}
+ className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground focus:ring-primary focus:border-primary"
+ />
+
How long to keep location history (7-90 days)
+
+
+
+
+
+
+
+ {
+ const [hours, minutes] = e.target.value.split(':').map(Number);
+ if (!isNaN(hours) && !isNaN(minutes)) {
+ updateSettings.mutate({
+ shiftStartHour: hours,
+ shiftStartMinute: minutes,
+ });
+ }
+ }}
+ className="mt-1 px-3 py-2 border border-input rounded-md bg-background text-foreground focus:ring-primary focus:border-primary"
+ />
+
+
to
+
+
+ {
+ const [hours, minutes] = e.target.value.split(':').map(Number);
+ if (!isNaN(hours) && !isNaN(minutes)) {
+ updateSettings.mutate({
+ shiftEndHour: hours,
+ shiftEndMinute: minutes,
+ });
+ }
+ }}
+ className="mt-1 px-3 py-2 border border-input rounded-md bg-background text-foreground focus:ring-primary focus:border-primary"
+ />
+
+
+
+ Drivers are only tracked during these hours.
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ {/* Enroll Driver Modal */}
+ {showEnrollModal && (
+
+
+
+
+ {enrollmentResult ? 'Driver Enrolled!' : 'Enroll Driver for GPS'}
+
+
+
+
+ {!enrollmentResult ? (
+ <>
+
+
+
+ setSearchTerm(e.target.value)}
+ className="w-full pl-10 pr-4 py-2 border border-input rounded-md bg-background text-foreground focus:ring-primary focus:border-primary"
+ />
+
+
+ {filteredUnenrolled.length === 0 ? (
+
+
+
+ {searchTerm ? 'No matching drivers found' : 'All drivers are already enrolled'}
+
+
+ ) : (
+
+ {filteredUnenrolled.map((driver) => (
+
+
+
{driver.name}
+
{driver.phone || 'No phone'}
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ Enrolling a driver will send them setup instructions via Signal message.
+
+
+
+ ) : (
+
+
+
+ Driver Enrolled Successfully!
+
+
+ {enrollmentResult.signalMessageSent && (
+
+
+ Setup instructions sent via Signal
+
+ )}
+
+ {/* QR Code for Traccar Client app */}
+
+
+
+ Scan with Traccar Client
+
+
+ {/* Traccar Client expects: serverUrl?id=xxx&interval=xxx&accuracy=high */}
+
+
+
+ Open Traccar Client → Settings → Scan QR Code
+
+
+
+
+
+
+
+
+ {enrollmentResult.deviceIdentifier}
+
+
+
+
+
+
+
+
+ {enrollmentResult.serverUrl}
+
+
+
+
+
+
+
+
Driver Instructions:
+
+ - Download "Traccar Client" from App Store or Play Store
+ - Open app and enter the Device ID and Server URL
+ - Set frequency to {settings?.updateIntervalSeconds || 60} seconds
+ - Tap "Service Status" to start tracking
+
+
+
+
+
+ )}
+
+
+ )}
+