feat(admin): Phase 3b — Admin Triage Dispatch

apps/admin-desktop/package.json

@@ -13,8 +13,10 @@
   "dependencies": {
     "@bantayog/shared-types": "workspace:*",
     "@bantayog/shared-ui": "workspace:*",
+    "firebase": "^12.12.0",
     "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

apps/admin-desktop/src/App.tsx

@@ -1,10 +1,11 @@
-import styles from './App.module.css'
+import { RouterProvider } from 'react-router-dom'
+import { AuthProvider } from './app/auth-provider'
+import { router } from './routes'
 
-export function App() {
+export default function App() {
   return (
-    <main className={styles.container}>
-      <h1 className={styles.heading}>Bantayog Alert — Admin</h1>
-      <p className={styles.subheading}>Phase 0 scaffolding. Admin dashboard arrives in Phase 3.</p>
-    </main>
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
   )
 }

apps/admin-desktop/src/app/auth-provider.tsx

@@ -0,0 +1,70 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { onAuthStateChanged, signOut as fbSignOut, type User } from 'firebase/auth'
+import { auth } from './firebase'
+
+export interface AdminClaims {
+  role?: string
+  municipalityId?: string
+  active?: boolean
+}
+
+interface AuthState {
+  user: User | null
+  claims: AdminClaims | null
+  loading: boolean
+  signOut: () => Promise<void>
+  refreshClaims: () => Promise<void>
+}
+
+const Ctx = createContext<AuthState | null>(null)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [claims, setClaims] = useState<AdminClaims | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const refreshClaims = async () => {
+    if (!auth.currentUser) {
+      setClaims(null)
+      return
+    }
+    const tok = await auth.currentUser.getIdTokenResult(true)
+    setClaims({
+      role: tok.claims.role as string | undefined,
+      municipalityId: tok.claims.municipalityId as string | undefined,
+      active: tok.claims.active === true,
+    } as AdminClaims)
+  }
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (u) => {
+      setUser(u)
+      if (u) {
+        void u.getIdTokenResult().then((tok) => {
+          setClaims({
+            role: tok.claims.role as string | undefined,
+            municipalityId: tok.claims.municipalityId as string | undefined,
+            active: tok.claims.active === true,
+          } as AdminClaims)
+          setLoading(false)
+        })
+      } else {
+        setClaims(null)
+        setLoading(false)
+      }
+    })
+    return unsubscribe
+  }, [])
+
+  return (
+    <Ctx.Provider value={{ user, claims, loading, signOut: () => fbSignOut(auth), refreshClaims }}>
+      {children}
+    </Ctx.Provider>
+  )
+}
+
+export function useAuth() {
+  const v = useContext(Ctx)
+  if (!v) throw new Error('useAuth must be used inside AuthProvider')
+  return v
+}

apps/admin-desktop/src/app/firebase.ts

@@ -0,0 +1,46 @@
+import { initializeApp } from 'firebase/app'
+import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore'
+import { getAuth, connectAuthEmulator } from 'firebase/auth'
+import { getFunctions, connectFunctionsEmulator } from 'firebase/functions'
+import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check'
+
+const useEmulator = import.meta.env.VITE_USE_EMULATOR === 'true'
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+}
+
+export const firebaseApp = initializeApp(firebaseConfig)
+
+const recaptchaKey = import.meta.env.VITE_RECAPTCHA_SITE_KEY
+
+if (!useEmulator) {
+  if (recaptchaKey) {
+    initializeAppCheck(firebaseApp, {
+      provider: new ReCaptchaV3Provider(recaptchaKey as string),
+      isTokenAutoRefreshEnabled: true,
+    })
+  } else {
+    console.warn(
+      '[firebase] VITE_RECAPTCHA_SITE_KEY not set — App Check disabled. DO NOT USE IN PRODUCTION.',
+    )
+  }
+} else if (typeof window !== 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access -- Firebase App Check debug token is a browser global
+  ;(self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = import.meta.env.VITE_APPCHECK_DEBUG_TOKEN ?? true
+}
+
+export const db = getFirestore(firebaseApp)
+export const auth = getAuth(firebaseApp)
+export const functions = getFunctions(firebaseApp, 'asia-southeast1')
+
+if (useEmulator) {
+  connectFirestoreEmulator(db, 'localhost', 8080)
+  connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
+  connectFunctionsEmulator(functions, 'localhost', 5001)
+}

apps/admin-desktop/src/app/protected-route.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from './auth-provider'
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { user, claims, loading } = useAuth()
+  const location = useLocation()
+
+  if (loading) return <div>Loading…</div>
+  if (!user) return <Navigate to="/login" state={{ from: location }} replace />
+
+  if (claims?.role !== 'municipal_admin' && claims?.role !== 'provincial_superadmin') {
+    return (
+      <div role="alert">
+        You don&apos;t have admin access on this account. Contact your municipality&apos;s
+        superadmin.
+      </div>
+    )
+  }
+  if (claims.active !== true) {
+    return <div role="alert">Your account is not active. Please contact your superadmin.</div>
+  }
+  if (claims.role === 'municipal_admin' && !claims.municipalityId) {
+    return (
+      <div role="alert">
+        Your admin account is missing a municipality assignment. Contact superadmin.
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}

apps/admin-desktop/src/hooks/useEligibleResponders.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { collection, onSnapshot, query, where } from 'firebase/firestore'
+import { db } from '../app/firebase'
+import { getDatabase, ref, onValue } from 'firebase/database'
+import { firebaseApp } from '../app/firebase'
+
+export interface EligibleResponder {
+  uid: string
+  displayName: string
+  agencyId: string
+}
+
+export function useEligibleResponders(municipalityId: string | undefined) {
+  const [responders, setResponders] = useState<Record<string, EligibleResponder>>({})
+  const [shift, setShift] = useState<Record<string, { isOnShift: boolean }>>({})
+
+  useEffect(() => {
+    if (!municipalityId) {
+      setResponders({})
+      return
+    }
+    const q = query(
+      collection(db, 'responders'),
+      where('municipalityId', '==', municipalityId),
+      where('isActive', '==', true),
+    )
+    return onSnapshot(q, (snap) => {
+      const out: Record<string, EligibleResponder> = {}
+      snap.docs.forEach((d) => {
+        const data = d.data()
+        out[d.id] = {
+          uid: d.id,
+          displayName: String(data.displayName ?? d.id),
+          agencyId: String(data.agencyId ?? 'unknown'),
+        }
+      })
+      setResponders(out)
+    })
+  }, [municipalityId])
+
+  useEffect(() => {
+    if (!municipalityId) {
+      setShift({})
+      return
+    }
+    const rtdb = getDatabase(firebaseApp)
+    const node = ref(rtdb, `/responder_index/${municipalityId}`)
+    const unsub = onValue(node, (s) => {
+      const snapVal = s.val()
+      setShift(snapVal !== null ? (snapVal as Record<string, { isOnShift: boolean }>) : {})
+    })
+    return unsub
+  }, [municipalityId])
+
+  const eligible = Object.values(responders)
+    .filter((r) => shift[r.uid]?.isOnShift === true)
+    .sort((a, b) => a.displayName.localeCompare(b.displayName))
+  return eligible
+}

apps/admin-desktop/src/hooks/useMuniReports.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { collection, onSnapshot, query, where, orderBy, limit, Timestamp } from 'firebase/firestore'
+import { db } from '../app/firebase'
+
+export interface MuniReportRow {
+  reportId: string
+  status: string
+  severityDerived: string
+  createdAt: Timestamp
+  municipalityLabel: string
+}
+
+export function useMuniReports(municipalityId: string | undefined) {
+  const [rows, setRows] = useState<MuniReportRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!municipalityId) {
+      setRows([])
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    const q = query(
+      collection(db, 'reports'),
+      where('municipalityId', '==', municipalityId),
+      where('status', 'in', ['new', 'awaiting_verify', 'verified', 'assigned']),
+      orderBy('createdAt', 'desc'),
+      limit(100),
+    )
+    const unsub = onSnapshot(
+      q,
+      (snap) => {
+        setRows(
+          snap.docs.map((d) => {
+            const data = d.data()
+            return {
+              reportId: d.id,
+              status: String(data.status),
+              severityDerived: String(data.severityDerived ?? 'medium'),
+              createdAt: data.createdAt as Timestamp,
+              municipalityLabel: String(data.municipalityLabel ?? ''),
+            }
+          }),
+        )
+        setLoading(false)
+      },
+      (err) => {
+        setError(err.message)
+        setLoading(false)
+      },
+    )
+    return unsub
+  }, [municipalityId])
+
+  return { rows, loading, error }
+}

apps/admin-desktop/src/hooks/useReportDetail.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { doc, onSnapshot } from 'firebase/firestore'
+import { db } from '../app/firebase'
+import type { Timestamp } from 'firebase/firestore'
+
+export interface ReportDetail {
+  reportId: string
+  status: string
+  municipalityLabel: string
+  severityDerived: string
+  createdAt: Timestamp
+  verifiedBy?: string
+  verifiedAt?: Timestamp
+  currentDispatchId?: string
+}
+export interface ReportOps {
+  verifyQueuePriority: number
+  assignedMunicipalityAdmins: string[]
+}
+
+export function useReportDetail(reportId: string | undefined) {
+  const [report, setReport] = useState<ReportDetail | null>(null)
+  const [ops, setOps] = useState<ReportOps | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!reportId) {
+      setReport(null)
+      setOps(null)
+      return
+    }
+    const u1 = onSnapshot(
+      doc(db, 'reports', reportId),
+      (s) => {
+        setReport(
+          s.exists()
+            ? ({ reportId: s.id, ...(s.data() as Partial<ReportDetail>) } as ReportDetail)
+            : null,
+        )
+      },
+      (err) => {
+        setError(`reports: ${err.message}`)
+      },
+    )
+    const u2 = onSnapshot(
+      doc(db, 'report_ops', reportId),
+      (s) => {
+        setOps(s.exists() ? (s.data() as ReportOps) : null)
+      },
+      (err) => {
+        setError((prev) =>
+          prev ? `${prev}; report_ops: ${err.message}` : `report_ops: ${err.message}`,
+        )
+      },
+    )
+    return () => {
+      u1()
+      u2()
+    }
+  }, [reportId])
+
+  return { report, ops, error }
+}

apps/admin-desktop/src/main.tsx

@@ -1,12 +1,7 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from './App.js'
+import App from './App.js'
 
 const rootEl = document.getElementById('root')
 if (!rootEl) throw new Error('#root element not found')
 
-createRoot(rootEl).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+createRoot(rootEl).render(<App />)