refactor: implement refactor audit 2026-04-23 (P1-P3)

apps/admin-desktop/src/App.tsx

@@ -1,10 +1,11 @@
 import { RouterProvider } from 'react-router-dom'
-import { AuthProvider } from './app/auth-provider'
+import { AuthProvider } from '@bantayog/shared-ui'
+import { auth } from './app/firebase'
 import { router } from './routes'
 
 export default function App() {
   return (
-    <AuthProvider>
+    <AuthProvider auth={auth}>
       <RouterProvider router={router} />
     </AuthProvider>
   )

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useAuth } from '../app/auth-provider'
+import { useAuth } from '@bantayog/shared-ui'
 import { useEligibleResponders } from '../hooks/useEligibleResponders'
 import { callables } from '../services/callables'
 
@@ -13,7 +13,9 @@ export function DispatchModal({
   onError: (msg: string) => void
 }) {
   const { claims } = useAuth()
-  const eligible = useEligibleResponders(claims?.municipalityId)
+  const municipalityId =
+    typeof claims?.municipalityId === 'string' ? claims.municipalityId : undefined
+  const eligible = useEligibleResponders(municipalityId)
   const [picked, setPicked] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
 

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useAuth } from '../app/auth-provider'
+import { useAuth } from '@bantayog/shared-ui'
 import { useMuniReports } from '../hooks/useMuniReports'
 import { ReportDetailPanel } from './ReportDetailPanel'
 import { DispatchModal } from './DispatchModal'
@@ -8,7 +8,9 @@ import { callables } from '../services/callables'
 
 export function TriageQueuePage() {
   const { claims, signOut } = useAuth()
-  const { rows, loading, error } = useMuniReports(claims?.municipalityId)
+  const municipalityId =
+    typeof claims?.municipalityId === 'string' ? claims.municipalityId : undefined
+  const { rows, loading, error } = useMuniReports(municipalityId)
   const [selected, setSelected] = useState<string | null>(null)
   const [dispatchForReportId, setDispatchForReportId] = useState<string | null>(null)
   const [closeForReportId, setCloseForReportId] = useState<string | null>(null)
@@ -50,7 +52,7 @@ export function TriageQueuePage() {
   return (
     <main>
       <header>
-        <h1>Triage · {claims?.municipalityId ?? 'N/A'}</h1>
+        <h1>Triage · {municipalityId ?? 'N/A'}</h1>
         <button onClick={() => void signOut()}>Sign out</button>
       </header>
       {banner && <div role="alert">{banner}</div>}

apps/admin-desktop/src/routes.tsx

@@ -1,5 +1,5 @@
 import { createBrowserRouter } from 'react-router-dom'
-import { ProtectedRoute } from './app/protected-route'
+import { ProtectedRoute } from '@bantayog/shared-ui'
 import { LoginPage } from './pages/LoginPage'
 import { TriageQueuePage } from './pages/TriageQueuePage'
 
@@ -8,7 +8,16 @@ export const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute
+        allowedRoles={['municipal_admin', 'provincial_superadmin']}
+        requireActive
+        requireMunicipalityIdForRoles={['municipal_admin']}
+        unauthorizedFallback={
+          <div role="alert">
+            You do not have access to this page. Please contact your superadmin.
+          </div>
+        }
+      >
         <TriageQueuePage />
       </ProtectedRoute>
     ),

apps/citizen-pwa/src/components/SubmitReportForm/BarangaySelector.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BarangaySelector } from './BarangaySelector.js'
+
+describe('BarangaySelector', () => {
+  it('renders nothing when municipalityId is empty', () => {
+    const { container } = render(<BarangaySelector municipalityId="" value="" onChange={vi.fn()} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders barangay options for the given municipality', () => {
+    render(<BarangaySelector municipalityId="daet" value="" onChange={vi.fn()} />)
+
+    const select = screen.getByRole('combobox')
+    expect(select).toBeInTheDocument()
+
+    const options = screen.getAllByRole('option')
+    expect(options[0]).toHaveTextContent('Select barangay (optional)...')
+
+    // Daet has specific barangays — spot-check a couple
+    expect(screen.getByRole('option', { name: 'Alawihao' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Bagasbas' })).toBeInTheDocument()
+  })
+
+  it('calls onChange when selection changes', () => {
+    const onChange = vi.fn()
+    render(<BarangaySelector municipalityId="daet" value="" onChange={onChange} />)
+
+    const select = screen.getByRole('combobox')
+    fireEvent.change(select, { target: { value: 'Bagasbas' } })
+
+    expect(onChange).toHaveBeenCalledExactlyOnceWith('Bagasbas')
+  })
+
+  it('shows optional label', () => {
+    render(<BarangaySelector municipalityId="daet" value="" onChange={vi.fn()} />)
+
+    expect(screen.getByText(/— optional/)).toBeInTheDocument()
+  })
+
+  it('reflects the value prop on the select element', () => {
+    render(<BarangaySelector municipalityId="daet" value="Bagasbas" onChange={vi.fn()} />)
+
+    const select = screen.getByRole('combobox')
+    expect(select).toHaveValue('Bagasbas')
+  })
+})

apps/citizen-pwa/src/components/SubmitReportForm/BarangaySelector.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { FALLBACK_BARANGAYS, MUNICIPALITY_LABELS } from './location-constants.js'
+
+interface BarangaySelectorProps {
+  municipalityId: string
+  value: string
+  onChange: (barangayId: string) => void
+}
+
+export function BarangaySelector({ municipalityId, value, onChange }: BarangaySelectorProps) {
+  const barangayOptions = useMemo(() => {
+    if (!municipalityId) return []
+    return FALLBACK_BARANGAYS.filter(
+      (b) => MUNICIPALITY_LABELS[municipalityId] === b.municipality,
+    ).sort((a, b) => a.name.localeCompare(b.name))
+  }, [municipalityId])
+
+  if (!municipalityId) {
+    return null
+  }
+
+  return (
+    <div className="field-group">
+      <p className="field-label">
+        Barangay
+        <span className="field-label-optional"> — optional</span>
+      </p>
+      <select
+        className="text-select"
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value)
+        }}
+      >
+        <option value="">Select barangay (optional)...</option>
+        {barangayOptions.map((b) => (
+          <option key={b.name} value={b.name}>
+            {b.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}