feat(phase5): Cluster A — Admin UI Hardening

.lint-baselines.json

@@ -0,0 +1,12 @@
+{
+  "@bantayog/shared-types": 0,
+  "@bantayog/citizen-pwa": 0,
+  "@bantayog/shared-sms-parser": 0,
+  "@bantayog/responder-app": 0,
+  "@bantayog/shared-ui": 0,
+  "@bantayog/functions": 0,
+  "@bantayog/admin-desktop": 0,
+  "@bantayog/shared-validators": 0,
+  "@bantayog/shared-data": 0,
+  "@bantayog/e2e-tests": 0
+}

apps/admin-desktop/package.json

@@ -8,7 +8,8 @@
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint src",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@bantayog/shared-types": "workspace:*",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",

apps/admin-desktop/src/__tests__/shift-handoff-modal.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+const mockInitiateHandoff = vi.hoisted(() => vi.fn())
+
+vi.mock('../app/firebase', () => ({ db: {} }))
+
+vi.mock('@bantayog/shared-ui', () => ({
+  useAuth: () => ({
+    claims: { municipalityId: 'daet', role: 'municipal_admin' },
+    signOut: vi.fn(),
+  }),
+}))
+
+vi.mock('../services/callables', () => ({
+  callables: {
+    verifyReport: vi.fn(),
+    rejectReport: vi.fn(),
+    initiateShiftHandoff: mockInitiateHandoff,
+    acceptShiftHandoff: vi.fn(),
+  },
+}))
+
+vi.mock('../hooks/useMuniReports', () => ({
+  useMuniReports: () => ({
+    reports: [],
+    hasMore: false,
+    loadMore: vi.fn(),
+    loading: false,
+    error: null,
+  }),
+}))
+
+vi.mock('../hooks/usePendingHandoffs', () => ({
+  usePendingHandoffs: () => [],
+}))
+
+vi.mock('../pages/ReportDetailPanel', () => ({ ReportDetailPanel: () => <div>detail</div> }))
+vi.mock('../pages/DispatchModal', () => ({ DispatchModal: () => <div>dispatch</div> }))
+vi.mock('../pages/CloseReportModal', () => ({ CloseReportModal: () => <div>close</div> }))
+
+import { TriageQueuePage } from '../pages/TriageQueuePage'
+
+describe('ShiftHandoffModal', () => {
+  beforeEach(() => {
+    mockInitiateHandoff.mockResolvedValue({ success: true, handoffId: 'h-new-1' })
+  })
+
+  it('renders Start Handoff button in header', () => {
+    render(<TriageQueuePage />)
+    expect(screen.getByRole('button', { name: /start handoff/i })).toBeInTheDocument()
+  })
+
+  it('opens ShiftHandoffModal on Start Handoff click', async () => {
+    const user = userEvent.setup()
+    render(<TriageQueuePage />)
+    await user.click(screen.getByRole('button', { name: /start handoff/i }))
+    expect(screen.getByRole('dialog', { name: /shift handoff/i })).toBeInTheDocument()
+  })
+
+  it('calls initiateShiftHandoff on Initiate click', async () => {
+    const user = userEvent.setup()
+    render(<TriageQueuePage />)
+    await user.click(screen.getByRole('button', { name: /start handoff/i }))
+    const notesField = screen.getByLabelText(/notes/i)
+    await user.type(notesField, 'End of day shift')
+    await user.click(screen.getByRole('button', { name: /initiate/i }))
+    expect(mockInitiateHandoff).toHaveBeenCalledWith(
+      expect.objectContaining({ notes: 'End of day shift' }),
+    )
+  })
+})
+
+describe('Incoming handoff banner', () => {
+  it('shows no banner when no pending handoffs', () => {
+    render(<TriageQueuePage />)
+    expect(screen.queryByRole('button', { name: /accept handoff/i })).not.toBeInTheDocument()
+  })
+})

apps/admin-desktop/src/__tests__/triage-queue.test.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+const mockUseMuniReports = vi.fn()
+
+vi.mock('../hooks/useMuniReports', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  useMuniReports: (...args: unknown[]) => mockUseMuniReports(...args),
+}))
+
+vi.mock('../app/firebase', () => ({
+  db: {},
+}))
+
+vi.mock('@bantayog/shared-ui', () => ({
+  useAuth: () => ({
+    claims: { municipalityId: 'daet', role: 'municipal_admin' },
+    signOut: vi.fn(),
+  }),
+}))
+
+vi.mock('../services/callables', () => ({
+  callables: {
+    verifyReport: vi.fn(),
+    rejectReport: vi.fn(),
+  },
+}))
+
+vi.mock('../hooks/usePendingHandoffs', () => ({
+  usePendingHandoffs: () => [],
+}))
+
+vi.mock('../pages/ReportDetailPanel', () => ({
+  ReportDetailPanel: () => <div>detail</div>,
+}))
+vi.mock('../pages/DispatchModal', () => ({
+  DispatchModal: () => <div>dispatch</div>,
+}))
+vi.mock('../pages/CloseReportModal', () => ({
+  CloseReportModal: () => <div>close</div>,
+}))
+
+import { TriageQueuePage } from '../pages/TriageQueuePage'
+
+describe('TriageQueuePage', () => {
+  beforeEach(() => {
+    mockUseMuniReports.mockReturnValue({
+      reports: [],
+      hasMore: false,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+  })
+
+  it('renders Load More button when hasMore is true', () => {
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+      ],
+      hasMore: true,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    expect(screen.getByRole('button', { name: /load more/i })).toBeInTheDocument()
+  })
+
+  it('does not render Load More button when hasMore is false', () => {
+    render(<TriageQueuePage />)
+    expect(screen.queryByRole('button', { name: /load more/i })).not.toBeInTheDocument()
+  })
+
+  it('calls loadMore when Load More is clicked', () => {
+    const loadMore = vi.fn()
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+      ],
+      hasMore: true,
+      loadMore,
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    fireEvent.click(screen.getByRole('button', { name: /load more/i }))
+    expect(loadMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows Showing X count', () => {
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+        {
+          reportId: 'r2',
+          status: 'new',
+          severity: 'medium',
+          createdAt: null,
+          municipalityLabel: '',
+        },
+      ],
+      hasMore: true,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    expect(screen.getByText(/showing 2/i)).toBeInTheDocument()
+  })
+
+  it('renders severity from severity field, not severityDerived', () => {
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+      ],
+      hasMore: false,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    expect(screen.getByText(/high/i)).toBeInTheDocument()
+  })
+
+  it('pressing j selects the next report in the list', async () => {
+    const user = userEvent.setup()
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+        {
+          reportId: 'r2',
+          status: 'new',
+          severity: 'medium',
+          createdAt: null,
+          municipalityLabel: '',
+        },
+      ],
+      hasMore: false,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    await user.keyboard('j')
+    expect(screen.getByText('detail')).toBeInTheDocument()
+  })
+
+  it('pressing k moves selection backward', async () => {
+    const user = userEvent.setup()
+    mockUseMuniReports.mockReturnValue({
+      reports: [
+        { reportId: 'r1', status: 'new', severity: 'high', createdAt: null, municipalityLabel: '' },
+        {
+          reportId: 'r2',
+          status: 'new',
+          severity: 'medium',
+          createdAt: null,
+          municipalityLabel: '',
+        },
+      ],
+      hasMore: false,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    await user.keyboard('jj')
+    await user.keyboard('k')
+    expect(screen.getByText('detail')).toBeInTheDocument()
+  })
+
+  it('keyboard shortcuts do not fire when a modal is open', async () => {
+    const user = userEvent.setup()
+    mockUseMuniReports.mockReturnValue({
+      reports: [],
+      hasMore: false,
+      loadMore: vi.fn(),
+      loading: false,
+      error: null,
+    })
+    render(<TriageQueuePage />)
+    await user.keyboard('j')
+    await user.keyboard('k')
+    expect(screen.queryByText('detail')).not.toBeInTheDocument()
+  })
+})