feat(addin): add UI to link driver submissions to manual report requests

- Add DriverSubmission type to report.ts
- Add loadSubmissions and loadUnmergedSubmissions to reportService
- Update useRequests hook to accept linkedSubmissionId parameter
- Update NewRequestModal with dropdown to select unmerged driver submissions
- Auto-fill device, time range, and force report when submission is selected
- Build dist/ with new changes

Author: Steve Hansen

src/FleetClaim.AddIn.React/app/components/NewRequestModal.tsx

@@ -8,6 +8,8 @@ import {
 } from '@geotab/zenith';
 import { useGeotab } from '@/contexts';
 import { useRequests } from '@/hooks';
+import { loadUnmergedSubmissions, SubmissionRecord } from '@/services';
+import { DriverSubmission } from '@/types';
 
 interface NewRequestModalProps {
     isOpen: boolean;
@@ -112,7 +114,7 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
     onSubmit,
     toast
 }) => {
-    const { devices, loadDevices } = useGeotab();
+    const { api, devices, loadDevices } = useGeotab();
     const { submit } = useRequests();
 
     const [selectedDeviceId, setSelectedDeviceId] = useState<string>('');
@@ -125,13 +127,32 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
     const [forceReport, setForceReport] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [activePreset, setActivePreset] = useState<'hour' | '24h' | null>('hour');
+    
+    // Driver submissions state
+    const [submissions, setSubmissions] = useState<SubmissionRecord[]>([]);
+    const [selectedSubmissionId, setSelectedSubmissionId] = useState<string>('');
+    const [loadingSubmissions, setLoadingSubmissions] = useState(false);
 
     // Load devices when modal opens
     useEffect(() => {
         if (isOpen && devices.length === 0) {
             loadDevices();
         }
     }, [isOpen, devices.length, loadDevices]);
+    
+    // Load unmerged submissions when modal opens
+    useEffect(() => {
+        if (isOpen && api) {
+            setLoadingSubmissions(true);
+            loadUnmergedSubmissions(api)
+                .then(setSubmissions)
+                .catch(err => {
+                    console.warn('Failed to load submissions:', err);
+                    setSubmissions([]);
+                })
+                .finally(() => setLoadingSubmissions(false));
+        }
+    }, [isOpen, api]);
 
     const deviceOptions = useMemo(() => 
         devices.map(d => ({
@@ -145,6 +166,32 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
         devices.find(d => d.id === selectedDeviceId),
         [devices, selectedDeviceId]
     );
+    
+    // Filter submissions for selected device
+    const deviceSubmissions = useMemo(() => {
+        if (!selectedDeviceId) return submissions;
+        return submissions.filter(s => s.submission.deviceId === selectedDeviceId);
+    }, [submissions, selectedDeviceId]);
+    
+    // Format submission for dropdown
+    const submissionOptions = useMemo(() => 
+        deviceSubmissions.map(s => {
+            const date = new Date(s.submission.incidentTimestamp);
+            const dateStr = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            const driver = s.submission.driverName || 'Unknown driver';
+            const vehicle = s.submission.deviceName || 'Unknown vehicle';
+            return {
+                id: s.submission.id,
+                name: `${dateStr} - ${driver} (${vehicle})`
+            };
+        }),
+        [deviceSubmissions]
+    );
+    
+    const selectedSubmission = useMemo(() =>
+        submissions.find(s => s.submission.id === selectedSubmissionId)?.submission,
+        [submissions, selectedSubmissionId]
+    );
 
     const handleSubmit = useCallback(async () => {
         if (!selectedDeviceId) {
@@ -165,15 +212,16 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
                 selectedDevice?.name || 'Unknown',
                 rangeStart,
                 rangeEnd,
-                forceReport
+                forceReport,
+                selectedSubmissionId || undefined
             );
             onSubmit();
         } catch (err) {
             toast.error(err instanceof Error ? err.message : 'Failed to submit request');
         } finally {
             setIsSubmitting(false);
         }
-    }, [selectedDeviceId, selectedDevice, rangeStart, rangeEnd, forceReport, submit, onSubmit, toast]);
+    }, [selectedDeviceId, selectedDevice, rangeStart, rangeEnd, forceReport, selectedSubmissionId, submit, onSubmit, toast]);
 
     const handleSetLastHour = useCallback(() => {
         const end = new Date();
@@ -194,6 +242,25 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
     const handleCustomDateChange = useCallback(() => {
         setActivePreset(null);
     }, []);
+    
+    // When a submission is selected, auto-fill device and time range
+    const handleSubmissionSelect = useCallback((submissionId: string) => {
+        setSelectedSubmissionId(submissionId);
+        const submission = submissions.find(s => s.submission.id === submissionId)?.submission;
+        if (submission) {
+            // Set device
+            setSelectedDeviceId(submission.deviceId);
+            // Set time range: 30 min before to 30 min after incident
+            const incidentTime = new Date(submission.incidentTimestamp);
+            const start = new Date(incidentTime.getTime() - 30 * 60 * 1000);
+            const end = new Date(incidentTime.getTime() + 30 * 60 * 1000);
+            setRangeStart(start);
+            setRangeEnd(end);
+            setActivePreset(null);
+            // Force report since we're linking to a submission
+            setForceReport(true);
+        }
+    }, [submissions]);
 
     if (!isOpen) return null;
 
@@ -204,6 +271,48 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
             title="New Report Request"
         >
             <Modal.Content>
+                {/* Driver Submission Section - shown if there are unmerged submissions */}
+                {submissions.length > 0 && (
+                    <div style={styles.formField}>
+                        <label style={styles.label}>Link to Driver Submission (Optional)</label>
+                        <Dropdown
+                            dataItems={submissionOptions}
+                            value={selectedSubmissionId ? [selectedSubmissionId] : []}
+                            onChange={(selected: any[]) => {
+                                const id = selected?.[0]?.id || '';
+                                if (id) {
+                                    handleSubmissionSelect(id);
+                                } else {
+                                    setSelectedSubmissionId('');
+                                }
+                            }}
+                            placeholder={loadingSubmissions ? "Loading submissions..." : "Select a driver submission to link..."}
+                            searchField={true}
+                            multiselect={false}
+                            errorHandler={(e) => console.error('Dropdown error:', e)}
+                        />
+                        {selectedSubmission && (
+                            <div style={{ 
+                                marginTop: '8px', 
+                                padding: '12px', 
+                                backgroundColor: 'var(--zen-color-background-secondary, #f0f9ff)', 
+                                borderRadius: '6px',
+                                border: '1px solid var(--zen-color-info, #0ea5e9)',
+                                fontSize: '13px'
+                            }}>
+                                <strong>Driver submission selected</strong>
+                                <div style={{ marginTop: '4px', color: 'var(--zen-color-text-secondary, #6b7280)' }}>
+                                    {selectedSubmission.description || 'No description'} 
+                                    {selectedSubmission.driverName && ` — ${selectedSubmission.driverName}`}
+                                </div>
+                                <div style={{ marginTop: '4px', fontSize: '12px', color: 'var(--zen-color-text-tertiary, #9ca3af)' }}>
+                                    The vehicle, time range, and force report options have been auto-filled.
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+                
                 <div style={styles.formField}>
                     <label style={styles.label}>Vehicle</label>
                     <Dropdown
@@ -212,6 +321,10 @@ export const NewRequestModal: React.FC<NewRequestModalProps> = ({
                         onChange={(selected: any[]) => {
                             const id = selected?.[0]?.id || '';
                             setSelectedDeviceId(id);
+                            // Clear submission if device changes
+                            if (selectedSubmissionId && id !== selectedSubmission?.deviceId) {
+                                setSelectedSubmissionId('');
+                            }
                         }}
                         placeholder="Select a vehicle..."
                         searchField={true}

src/FleetClaim.AddIn.React/app/hooks/useRequests.ts

@@ -38,23 +38,29 @@ export function useRequests() {
         deviceName: string,
         rangeStart: Date,
         rangeEnd: Date,
-        forceReport = false
+        forceReport = false,
+        linkedSubmissionId?: string
     ) => {
         if (!api) return;
 
         // Get username - prefer credentials.userName (email) over currentUser.name (short name)
         // credentials comes from getSession() and has the full email
         const userName = credentials?.userName || session?.userName || currentUser?.name || 'Unknown User';
 
-        const request = {
+        const request: any = {
             deviceId,
             deviceName,
             requestedBy: userName,
             fromDate: rangeStart.toISOString(),
             toDate: rangeEnd.toISOString(),
-            forceReport
+            forceReport: forceReport || !!linkedSubmissionId // Force report if linking to submission
         };
 
+        // Add linkedSubmissionId if provided
+        if (linkedSubmissionId) {
+            request.linkedSubmissionId = linkedSubmissionId;
+        }
+        
         const addInDataId = await submitReportRequest(api, request);
 
         // Audit the request (best-effort, don't block)

src/FleetClaim.AddIn.React/app/services/reportService.ts

@@ -4,7 +4,7 @@
  * Handles loading, saving, and managing reports via Geotab AddInData
  */
 
-import { GeotabApi, AddInData, IncidentReport, ReportRequest, AddInDataWrapper } from '@/types';
+import { GeotabApi, AddInData, IncidentReport, ReportRequest, DriverSubmission, AddInDataWrapper } from '@/types';
 
 const ADDIN_ID = 'aji_jHQGE8k2TDodR8tZrpw';
 const API_BASE_URL = 'https://fleetclaim-api-589116575765.us-central1.run.app';
@@ -19,6 +19,11 @@ export interface RequestRecord {
     addInDataId: string;
 }
 
+export interface SubmissionRecord {
+    submission: DriverSubmission;
+    addInDataId: string;
+}
+
 /**
  * Load all reports from AddInData
  */
@@ -83,6 +88,46 @@ export async function loadRequests(api: GeotabApi): Promise<RequestRecord[]> {
     return requests;
 }
 
+/**
+ * Load all driver submissions from AddInData
+ */
+export async function loadSubmissions(api: GeotabApi): Promise<SubmissionRecord[]> {
+    const result = await apiCall<AddInData[]>(api, 'Get', {
+        typeName: 'AddInData',
+        search: { addInId: ADDIN_ID }
+    });
+    const addInData = result || [];
+    
+    const submissions: SubmissionRecord[] = [];
+    
+    for (const item of addInData) {
+        try {
+            const raw = item.details;
+            const wrapper = typeof raw === 'string' ? JSON.parse(raw) : raw;
+            
+            if (wrapper && (wrapper as AddInDataWrapper<DriverSubmission>).type === 'driverSubmission') {
+                const submission = (wrapper as AddInDataWrapper<DriverSubmission>).payload || wrapper;
+                submissions.push({
+                    submission: submission as DriverSubmission,
+                    addInDataId: item.id
+                });
+            }
+        } catch (e) {
+            console.warn('Error parsing submission:', e);
+        }
+    }
+    
+    return submissions;
+}
+
+/**
+ * Load unmerged driver submissions (status = 'synced')
+ */
+export async function loadUnmergedSubmissions(api: GeotabApi): Promise<SubmissionRecord[]> {
+    const all = await loadSubmissions(api);
+    return all.filter(s => s.submission.status === 'synced');
+}
+
 /**
  * Update a report in AddInData
  */

src/FleetClaim.AddIn.React/app/types/report.ts

@@ -152,12 +152,43 @@ export interface ReportRequest {
     toDate: string;
     status: RequestStatus;
     forceReport?: boolean;
+    linkedSubmissionId?: string;
     error?: string;
     completedAt?: string;
 }
 
+export interface DriverSubmission {
+    id: string;
+    deviceId: string;
+    deviceName?: string;
+    driverId?: string;
+    driverName?: string;
+    incidentTimestamp: string;
+    latitude?: number;
+    longitude?: number;
+    locationAddress?: string;
+    description?: string;
+    severity?: Severity;
+    damageDescription?: string;
+    damageLevel?: 'none' | 'minor' | 'moderate' | 'severe' | 'totalLoss';
+    vehicleDriveable?: boolean;
+    policeReportNumber?: string;
+    policeAgency?: string;
+    injuriesReported?: boolean;
+    injuryDescription?: string;
+    notes?: string;
+    photos?: Photo[];
+    status: 'synced' | 'merged' | 'converted' | 'standalone';
+    createdAt: string;
+    updatedAt: string;
+    submittedAt?: string;
+    mergedIntoReportId?: string;
+}
+
 export interface AddInDataWrapper<T> {
-    type: 'report' | 'reportRequest' | 'config' | 'driverSubmission';
+    type: 'report' | 'reportRequest' | 'config' | 'driverSubmission' | 'workerState';
     payload: T;
     version?: number;
 }
+
+export type SubmissionStatus = 'synced' | 'merged' | 'converted' | 'standalone';

src/FleetClaim.AddIn.React/dist/fleetclaim-addin.zip

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FleetClaim</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"><script defer="defer" src="fleetclaim.079b19b9.js"></script><link href="fleetclaim.fb977bff.css" rel="stylesheet"></head><body><div id="fleetclaim"></div></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FleetClaim</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"><script defer="defer" src="fleetclaim.a8d874fc.js"></script><link href="fleetclaim.fb977bff.css" rel="stylesheet"></head><body><div id="fleetclaim"></div></body></html>