feat(citizen-pwa): 3-step report wizard wiring + GPS fixes + auto-fill

apps/citizen-pwa/src/App.routes.test.tsx

@@ -6,7 +6,7 @@ vi.mock('./components/MapTab/index.js', () => ({
   MapTab: () => <div>Map tab</div>,
 }))
 
-vi.mock('./components/SubmitReportForm.js', () => ({
+vi.mock('./components/SubmitReportForm/index.js', () => ({
   SubmitReportForm: () => <div>Report form</div>,
 }))
 
@@ -41,10 +41,9 @@ describe('App routes', () => {
     expect(screen.getByRole('button', { name: /map/i })).toHaveAttribute('aria-current', 'page')
   })
 
-  it('shows the report shell at /report', async () => {
+  it('shows the report form at /report', async () => {
     await renderAppAt('/report')
     expect(screen.getByText('Report form')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /report/i })).toHaveAttribute('aria-current', 'page')
   })
 
   it('navigates between shell tabs', async () => {

apps/citizen-pwa/src/components/CitizenShell.tsx

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { Map, Rss, AlertTriangle, Bell, User } from 'lucide-react'
 import '../styles/design-tokens.css'
 
 const TABS = [
-  { label: 'Map', path: '/' },
-  { label: 'Feed', path: '/feed' },
-  { label: 'Report', path: '/report' },
-  { label: 'Alerts', path: '/alerts' },
-  { label: 'Profile', path: '/profile' },
+  { label: 'Map', path: '/', Icon: Map },
+  { label: 'Feed', path: '/feed', Icon: Rss },
+  { label: 'Report', path: '/report', Icon: AlertTriangle },
+  { label: 'Alerts', path: '/alerts', Icon: Bell },
+  { label: 'Profile', path: '/profile', Icon: User },
 ] as const
 
 export function CitizenShell({ children }: { children: ReactNode }) {
@@ -80,17 +81,13 @@ export function CitizenShell({ children }: { children: ReactNode }) {
               cursor: 'pointer',
             }}
           >
-            <span style={{ fontSize: '1.25rem', lineHeight: 1 }}>
-              {tab.label === 'Report'
-                ? '🚨'
-                : tab.label === 'Alerts'
-                  ? '⚠️'
-                  : tab.label === 'Profile'
-                    ? '👤'
-                    : tab.label === 'Feed'
-                      ? '📋'
-                      : '🗺'}
-            </span>
+            <tab.Icon
+              size={20}
+              strokeWidth={pathname === tab.path ? 2.5 : 2}
+              color={
+                pathname === tab.path ? 'var(--color-primary)' : 'var(--color-on-surface-variant)'
+              }
+            />
             {tab.label}
           </button>
         ))}

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

@@ -326,11 +326,18 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
   const [locationError, setLocationError] = useState<string | null>(null)
   const [nameError, setNameError] = useState<string | null>(null)
   const [phoneError, setPhoneError] = useState<string | null>(null)
+  const [hasMemory, setHasMemory] = useState(false)
 
   const attemptGps = async () => {
     setLocationError(null)
     setGpsLoading(true)
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!navigator.geolocation) {
+        setLocationError('GPS not supported on this device.')
+        setLocationMethod('manual')
+        return
+      }
       const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
         navigator.geolocation.getCurrentPosition(resolve, reject, {
           enableHighAccuracy: true,
@@ -341,7 +348,13 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
       setLocationMethod('gps')
     } catch (err: unknown) {
       console.error('[Step2WhoWhere] attemptGps failed:', err)
-      setLocationError('Could not get location.')
+      let msg = 'Could not get location. Choose municipality manually.'
+      if (err && typeof err === 'object' && 'code' in err) {
+        const code = (err as GeolocationPositionError).code
+        if (code === 1) msg = 'Location access denied. Choose municipality manually.'
+        else if (code === 3) msg = 'Location timed out. Choose municipality manually.'
+      }
+      setLocationError(msg)
       setLocationMethod('manual')
     } finally {
       setGpsLoading(false)
@@ -353,6 +366,17 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
     void attemptGps()
   }, [])
 
+  useEffect(() => {
+    const savedName = localStorage.getItem('bantayog.reporter.name')
+    const savedMsisdn = localStorage.getItem('bantayog.reporter.msisdn')
+    if (savedName || savedMsisdn) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      if (savedName) setReporterName(savedName)
+      if (savedMsisdn) setReporterMsisdn(savedMsisdn)
+      setHasMemory(true)
+    }
+  }, [])
+
   const handleSelectMunicipality = (muniId: string) => {
     setSelectedMunicipalityId(muniId)
     setSelectedBarangayId(undefined)
@@ -387,6 +411,9 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
       }
     }
 
+    localStorage.setItem('bantayog.reporter.name', reporterName)
+    localStorage.setItem('bantayog.reporter.msisdn', reporterMsisdn)
+
     onNext({
       location: finalLocation ?? { lat: 0, lng: 0 },
       reporterName,
@@ -562,6 +589,7 @@ export function Step2WhoWhere({ onNext, onBack, isSubmitting = false }: Step2Who
 
       {locationMethod !== null ? (
         <>
+          {hasMemory && <p className="memory-hint">Pre-filled from your last report</p>}
           <div className="field-group">
             <p className="field-label">Your name</p>
             <input