feat(phase-3c): responder loop end-to-end

apps/admin-desktop/src/pages/CancelDispatchModal.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import { callables } from '../services/callables'
+
+type CancelReason =
+  | 'responder_unavailable'
+  | 'duplicate_report'
+  | 'admin_error'
+  | 'citizen_withdrew'
+
+const REASONS: CancelReason[] = [
+  'responder_unavailable',
+  'duplicate_report',
+  'admin_error',
+  'citizen_withdrew',
+]
+
+export function CancelDispatchModal({
+  dispatchId,
+  currentStatus,
+  onClose,
+  onError,
+}: {
+  dispatchId: string
+  currentStatus: string
+  onClose: () => void
+  onError: (msg: string) => void
+}) {
+  const [reason, setReason] = useState<CancelReason>('admin_error')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function confirm() {
+    setSubmitting(true)
+    try {
+      await callables.cancelDispatch({
+        dispatchId,
+        reason,
+        idempotencyKey: crypto.randomUUID(),
+      })
+      onClose()
+    } catch (err: unknown) {
+      onError(err instanceof Error ? err.message : 'Cancel failed')
+      setSubmitting(false)
+    }
+  }
+
+  const cancellable =
+    currentStatus === 'pending' ||
+    currentStatus === 'accepted' ||
+    currentStatus === 'acknowledged' ||
+    currentStatus === 'en_route' ||
+    currentStatus === 'on_scene'
+
+  return (
+    <div role="dialog" aria-modal="true">
+      <h2>Cancel Dispatch</h2>
+      <p>This will revert the report back to verified status. The responder will be notified.</p>
+      {cancellable ? (
+        <>
+          <fieldset>
+            <legend>Reason</legend>
+            {REASONS.map((r) => (
+              <label key={r}>
+                <input
+                  type="radio"
+                  name="reason"
+                  value={r}
+                  checked={reason === r}
+                  onChange={() => {
+                    setReason(r)
+                  }}
+                />
+                {r}
+              </label>
+            ))}
+          </fieldset>
+          <button disabled={submitting} onClick={() => void confirm()}>
+            {submitting ? 'Cancelling…' : 'Cancel Dispatch'}
+          </button>
+        </>
+      ) : (
+        <p>
+          Dispatch in <strong>{currentStatus}</strong> cannot be cancelled (only{' '}
+          {REASONS.slice(0, -1).join(', ')} or {REASONS[REASONS.length - 1]} from{' '}
+          pending/accepted/acknowledged/en_route/on_scene).
+        </p>
+      )}
+      <button onClick={onClose}>Keep Dispatch</button>
+    </div>
+  )
+}

apps/admin-desktop/src/pages/CloseReportModal.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { callables } from '../services/callables'
+
+export function CloseReportModal({
+  reportId,
+  onClose,
+  onError,
+}: {
+  reportId: string
+  onClose: () => void
+  onError: (msg: string) => void
+}) {
+  const [summary, setSummary] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  async function confirm() {
+    setSubmitting(true)
+    try {
+      const trimmed = summary.trim()
+      await callables.closeReport({
+        reportId,
+        idempotencyKey: crypto.randomUUID(),
+        ...(trimmed ? { closureSummary: trimmed } : {}),
+      })
+      onClose()
+    } catch (err: unknown) {
+      onError(err instanceof Error ? err.message : 'Close failed')
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div role="dialog" aria-modal="true">
+      <h2>Close Report</h2>
+      <p>
+        This will archive the report. Only close a report after the incident has been fully resolved
+        by responders.
+      </p>
+      <label>
+        Closure summary (optional)
+        <textarea
+          value={summary}
+          onChange={(e) => {
+            setSummary(e.target.value)
+          }}
+          maxLength={2000}
+          rows={3}
+        />
+      </label>
+      <button disabled={submitting} onClick={() => void confirm()}>
+        {submitting ? 'Closing…' : 'Close Report'}
+      </button>
+      <button onClick={onClose}>Cancel</button>
+    </div>
+  )
+}

apps/admin-desktop/src/pages/ReportDetailPanel.tsx

@@ -5,11 +5,13 @@ export function ReportDetailPanel({
   onVerify,
   onReject,
   onDispatch,
+  onClose,
 }: {
   reportId: string
   onVerify: (reportId: string) => void
   onReject: (reportId: string) => void
   onDispatch: (reportId: string) => void
+  onClose: (reportId: string) => void
 }) {
   const { report, ops, error } = useReportDetail(reportId)
   if (error) return <aside role="alert">Error loading report: {error}</aside>
@@ -18,6 +20,7 @@ export function ReportDetailPanel({
   const canVerify = report.status === 'new' || report.status === 'awaiting_verify'
   const canReject = report.status === 'awaiting_verify'
   const canDispatch = report.status === 'verified'
+  const canClose = report.status === 'resolved'
 
   return (
     <aside>
@@ -63,6 +66,14 @@ export function ReportDetailPanel({
         >
           Dispatch
         </button>
+        <button
+          disabled={!canClose}
+          onClick={() => {
+            onClose(reportId)
+          }}
+        >
+          Close
+        </button>
       </div>
     </aside>
   )

apps/admin-desktop/src/pages/TriageQueuePage.tsx

@@ -3,13 +3,15 @@ import { useAuth } from '../app/auth-provider'
 import { useMuniReports } from '../hooks/useMuniReports'
 import { ReportDetailPanel } from './ReportDetailPanel'
 import { DispatchModal } from './DispatchModal'
+import { CloseReportModal } from './CloseReportModal'
 import { callables } from '../services/callables'
 
 export function TriageQueuePage() {
   const { claims, signOut } = useAuth()
   const { rows, loading, error } = useMuniReports(claims?.municipalityId)
   const [selected, setSelected] = useState<string | null>(null)
   const [dispatchForReportId, setDispatchForReportId] = useState<string | null>(null)
+  const [closeForReportId, setCloseForReportId] = useState<string | null>(null)
   const [banner, setBanner] = useState<string | null>(null)
 
   const handleVerify = (reportId: string) => {
@@ -83,6 +85,7 @@ export function TriageQueuePage() {
             onVerify={handleVerify}
             onReject={handleReject}
             onDispatch={setDispatchForReportId}
+            onClose={setCloseForReportId}
           />
         )}
       </section>
@@ -97,6 +100,17 @@ export function TriageQueuePage() {
           }}
         />
       )}
+      {closeForReportId && (
+        <CloseReportModal
+          reportId={closeForReportId}
+          onClose={() => {
+            setCloseForReportId(null)
+          }}
+          onError={(msg: string) => {
+            setBanner(msg)
+          }}
+        />
+      )}
     </main>
   )
 }

apps/admin-desktop/src/services/callables.ts

@@ -38,4 +38,13 @@ export const callables = {
       functions,
       'cancelDispatch',
     )(payload).then((r) => r.data),
+  closeReport: (payload: {
+    reportId: string
+    idempotencyKey: IdempotencyKey
+    closureSummary?: string
+  }) =>
+    httpsCallable<typeof payload, { status: ReportStatus; reportId: string }>(
+      functions,
+      'closeReport',
+    )(payload).then((r) => r.data),
 }

apps/responder-app/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@bantayog/shared-types": "workspace:*",
     "@bantayog/shared-ui": "workspace:*",
+    "@bantayog/shared-validators": "workspace:*",
     "@capacitor/core": "^8.3.1",
     "firebase": "^12.12.0",
     "react": "^19.2.5",

apps/responder-app/public/firebase-messaging-sw.js

@@ -0,0 +1,58 @@
+/**
+ * firebase-messaging-sw.js
+ *
+ * Firebase Cloud Messaging service worker.
+ * Handles background push notifications when the app is not in focus.
+ * Placed in /public so it is served at the root scope (/).
+ */
+
+import { initializeApp } from 'firebase/app'
+import { getMessaging, onBackgroundMessage } from 'firebase/messaging/sw'
+
+// Injected by Vite at build time.
+const {
+  VITE_FIREBASE_API_KEY: apiKey,
+  VITE_FIREBASE_AUTH_DOMAIN: authDomain,
+  VITE_FIREBASE_PROJECT_ID: projectId,
+  VITE_FIREBASE_STORAGE_BUCKET: storageBucket,
+  VITE_FIREBASE_MESSAGING_SENDER_ID: messagingSenderId,
+  VITE_FIREBASE_APP_ID: appId,
+} = import.meta.env
+
+let messaging = null
+
+try {
+  const app = initializeApp({
+    apiKey,
+    authDomain,
+    projectId,
+    storageBucket,
+    messagingSenderId,
+    appId,
+  })
+  messaging = getMessaging(app)
+} catch {
+  // Config may not be available at SW load time in some environments.
+}
+
+if (messaging) {
+  onBackgroundMessage(messaging, (payload) => {
+    const title = payload.notification?.title ?? 'New Dispatch'
+    const body = payload.notification?.body ?? 'Open the app for details'
+    const dispatchId = payload.data?.dispatchId
+
+    self.registration.showNotification(title, {
+      body,
+      data: payload.data,
+      icon: '/favicon.svg',
+      tag: dispatchId ? `dispatch-${dispatchId}` : 'dispatch',
+    })
+  })
+
+  self.addEventListener('notificationclick', (event) => {
+    event.notification.close()
+    const dispatchId = event.notification.data?.dispatchId
+    const target = dispatchId ? `/dispatches/${dispatchId}` : '/'
+    event.waitUntil(self.clients.openWindow(target))
+  })
+}

apps/responder-app/src/App.tsx

@@ -1,6 +1,33 @@
 import './App.module.css'
+import { useEffect } from 'react'
 import { AppRouter } from './routes'
+import { useAuth } from './app/auth-provider'
+import { useRegisterFcmToken } from './hooks/useRegisterFcmToken'
+
+function FcmSetup() {
+  const { user } = useAuth()
+  const { register } = useRegisterFcmToken({
+    responderDocPath: user ? `responders/${user.uid}` : '',
+  })
+
+  useEffect(() => {
+    if (!user) return
+    navigator.serviceWorker
+      .register('/firebase-messaging-sw.js')
+      .then(() => register())
+      .catch(() => {
+        // SW registration failure is non-fatal — app still works.
+      })
+  }, [user, register])
+
+  return null
+}
 
 export default function App() {
-  return <AppRouter />
+  return (
+    <>
+      <FcmSetup />
+      <AppRouter />
+    </>
+  )
 }

apps/responder-app/src/hooks/useAcceptDispatch.ts

@@ -0,0 +1,29 @@
+import { useRef, useState } from 'react'
+import { httpsCallable } from 'firebase/functions'
+import { functions } from '../app/firebase'
+
+export function useAcceptDispatch(dispatchId: string) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | undefined>()
+  // Idempotency key generated once per hook mount — equivalent to 30-second client memory
+  const keyRef = useRef(crypto.randomUUID())
+
+  async function accept() {
+    setLoading(true)
+    setError(undefined)
+    try {
+      const fn = httpsCallable<{ dispatchId: string; idempotencyKey: string }, { status: string }>(
+        functions,
+        'acceptDispatch',
+      )
+      await fn({ dispatchId, idempotencyKey: keyRef.current })
+    } catch (err: unknown) {
+      if (err instanceof Error) setError(err)
+      else setError(new Error(String(err)))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return { accept, loading, error }
+}