feat(phase-3a): citizen submission + triptych materialization

.github/workflows/ci.yml

@@ -98,6 +98,13 @@ jobs:
       - run: corepack prepare pnpm@${PNPM_VERSION} --activate
       - run: pnpm install --frozen-lockfile
       - run: pnpm exec tsx scripts/check-rule-coverage.ts
+      - run: pnpm exec tsx scripts/build-rules.ts
+      - name: Verify firestore.rules is not out of date
+        run: |
+          if ! git diff --exit-code -- infra/firebase/firestore.rules; then
+            echo "::error::firestore.rules is out of sync with scripts/build-rules.ts. Run 'pnpm exec tsx scripts/build-rules.ts' locally and commit."
+            exit 1
+          fi
 
   build:
     name: Build

apps/citizen-pwa/package.json

@@ -15,8 +15,10 @@
     "@bantayog/shared-firebase": "workspace:*",
     "@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": {
     "@testing-library/jest-dom": "^6.4.0",

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

@@ -1,75 +1,10 @@
 import '@testing-library/jest-dom/vitest'
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
 import { App } from './App.js'
 
-const { useCitizenShell } = vi.hoisted(() => {
-  const defaultShellState = {
-    status: 'ready',
-    authState: 'signed-in',
-    appCheckState: 'active',
-    user: { uid: 'anon-123' },
-    minAppVersion: {
-      citizen: '0.1.0',
-      admin: '0.1.0',
-      responder: '0.1.0',
-      updatedAt: 1713350400000,
-    },
-    alerts: [
-      {
-        id: 'phase1-hello',
-        title: 'System online',
-        body: 'Citizen shell wired for Phase 1.',
-        severity: 'info',
-        publishedAt: 1713350400000,
-        publishedBy: 'phase-1-bootstrap',
-      },
-    ],
-    error: null,
-  }
-  return {
-    useCitizenShell: vi.fn().mockReturnValue(defaultShellState),
-  }
-})
-
-vi.mock('./useCitizenShell.js', () => ({
-  useCitizenShell,
-}))
-
 describe('App', () => {
-  it('renders auth status, app version, and the hello-world alert feed', () => {
-    render(<App />)
-    expect(screen.getByText('anon-123')).toBeInTheDocument()
-    expect(screen.getByText('System online')).toBeInTheDocument()
-    expect(screen.getByText('0.1.0')).toBeInTheDocument()
-    expect(screen.getByText('signed-in')).toBeInTheDocument()
-  })
-
-  it('renders error message when status is error', () => {
-    useCitizenShell.mockReturnValueOnce({
-      status: 'error',
-      authState: 'signed-out',
-      appCheckState: 'failed',
-      user: null,
-      minAppVersion: null,
-      alerts: [],
-      error: 'Firebase initialization failed',
-    })
-    render(<App />)
-    expect(screen.getByText('Firebase initialization failed')).toBeInTheDocument()
-  })
-
-  it('renders signed-out state correctly', () => {
-    useCitizenShell.mockReturnValueOnce({
-      status: 'ready',
-      authState: 'signed-out',
-      appCheckState: 'pending',
-      user: null,
-      minAppVersion: null,
-      alerts: [],
-      error: null,
-    })
-    render(<App />)
-    expect(screen.getByText('signed-out')).toBeInTheDocument()
+  it('renders without throwing', () => {
+    expect(() => render(<App />)).not.toThrow()
   })
 })

apps/citizen-pwa/src/App.tsx

@@ -1,53 +1,5 @@
-import styles from './App.module.css'
-import { useCitizenShell } from './useCitizenShell.js'
+import { AppRoutes } from './routes.js'
 
 export function App() {
-  const state = useCitizenShell()
-
-  return (
-    <main className={styles.page}>
-      <section className={styles.panel}>
-        <p className={styles.eyebrow}>Bantayog Alert</p>
-        <h1 className={styles.title}>Citizen Phase 1 shell</h1>
-        <p className={styles.summary}>
-          Pseudonymous sign-in, app health, and a hello-world alert feed.
-        </p>
-
-        <dl className={styles.meta}>
-          <div>
-            <dt>Status</dt>
-            <dd>{state.status}</dd>
-          </div>
-          <div>
-            <dt>Auth</dt>
-            <dd>{state.authState}</dd>
-          </div>
-          <div>
-            <dt>App Check</dt>
-            <dd>{state.appCheckState}</dd>
-          </div>
-          <div>
-            <dt>User UID</dt>
-            <dd>{state.user?.uid ?? 'unavailable'}</dd>
-          </div>
-          <div>
-            <dt>Minimum citizen version</dt>
-            <dd>{state.minAppVersion?.citizen ?? 'unavailable'}</dd>
-          </div>
-        </dl>
-
-        {state.error ? <p className={styles.error}>{state.error}</p> : null}
-
-        <div className={styles.feed}>
-          {state.alerts.map((alert) => (
-            <article key={alert.id} className={styles.alert}>
-              <h2>{alert.title}</h2>
-              <p>{alert.body}</p>
-              <span>{alert.severity}</span>
-            </article>
-          ))}
-        </div>
-      </section>
-    </main>
-  )
+  return <AppRoutes />
 }

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

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { httpsCallable } from 'firebase/functions'
+import { fns } from '../services/firebase.js'
+
+interface LookupResult {
+  status: string
+  lastStatusAt: number
+  municipalityLabel: string
+}
+
+export function LookupScreen() {
+  const [publicRef, setPublicRef] = useState('')
+  const [secret, setSecret] = useState('')
+  const [result, setResult] = useState<LookupResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.SubmitEvent): Promise<void> {
+    e.preventDefault()
+    setError(null)
+    setResult(null)
+    try {
+      const res = await httpsCallable(fns(), 'requestLookup')({ publicRef, secret })
+      setResult(res.data as LookupResult)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'lookup failed')
+    }
+  }
+
+  return (
+    <section aria-label="Report status lookup">
+      <h1>Check report status</h1>
+      <form
+        onSubmit={(e) => {
+          void handleSubmit(e)
+        }}
+      >
+        <label>
+          Reference
+          <input
+            value={publicRef}
+            onChange={(e) => {
+              setPublicRef(e.target.value)
+            }}
+            required
+          />
+        </label>
+        <label>
+          Secret
+          <input
+            value={secret}
+            onChange={(e) => {
+              setSecret(e.target.value)
+            }}
+            required
+          />
+        </label>
+        <button type="submit">Look up</button>
+      </form>
+      {error && <p role="alert">{error}</p>}
+      {result && (
+        <dl>
+          <dt>Status</dt>
+          <dd>{result.status}</dd>
+          <dt>Municipality</dt>
+          <dd>{result.municipalityLabel}</dd>
+          <dt>Last update</dt>
+          <dd>{new Date(result.lastStatusAt).toLocaleString()}</dd>
+        </dl>
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { useLocation, Link } from 'react-router-dom'
+
+export function ReceiptScreen() {
+  const { state } = useLocation() as { state: { publicRef: string; secret: string } | null }
+  if (!state) return <p>No submission to display.</p>
+  return (
+    <section aria-label="Submission receipt">
+      <h1>Report submitted</h1>
+      <p>Save these two values. You will need them to check status.</p>
+      <dl>
+        <dt>Reference</dt>
+        <dd>
+          <code>{state.publicRef}</code>
+        </dd>
+        <dt>Secret</dt>
+        <dd>
+          <code>{state.secret}</code>
+        </dd>
+      </dl>
+      <p>
+        We&apos;ll notify you when we can. For now, check back with your reference number via the{' '}
+        <Link to="/lookup">lookup page</Link>.
+      </p>
+    </section>
+  )
+}