cim_summary/.planning/phases/04-frontend/04-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
04-frontend	02	execute	2	04-01	frontend/src/App.tsx	false	ALRT-03 ANLY-02 HLTH-01	truths artifacts key_links Alert banner appears above tab navigation when there are active critical alerts Alert banner disappears immediately after admin clicks Acknowledge (optimistic update) Monitoring tab shows health status indicators and processing analytics from Supabase backend Non-admin user on monitoring tab sees Access Denied, not the dashboard Alert fetching only happens for admin users (gated by isAdmin check) path provides contains frontend/src/App.tsx Dashboard with AlertBanner wired above nav and AdminMonitoringDashboard in monitoring tab AlertBanner from to via pattern frontend/src/App.tsx frontend/src/components/AlertBanner.tsx import and render above nav import.*AlertBanner from to via pattern frontend/src/App.tsx frontend/src/components/AdminMonitoringDashboard.tsx import and render in monitoring tab import.*AdminMonitoringDashboard from to via pattern frontend/src/App.tsx frontend/src/services/adminService.ts getAlerts call in Dashboard useEffect adminService.getAlerts

Wire AlertBanner and AdminMonitoringDashboard into the Dashboard component in App.tsx. Add alert state management with optimistic acknowledge. Replace the monitoring tab content from UploadMonitoringDashboard to AdminMonitoringDashboard.

Purpose: This completes the frontend delivery of ALRT-03 (in-app alert banner), ANLY-02 (processing metrics UI), and HLTH-01 (health status UI). Output: Fully wired admin monitoring UI visible in the application.

<execution_context> @/home/jonathan/.claude/get-shit-done/workflows/execute-plan.md @/home/jonathan/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/04-frontend/04-RESEARCH.md @.planning/phases/04-frontend/04-01-SUMMARY.md @frontend/src/App.tsx Task 1: Wire AlertBanner and AdminMonitoringDashboard into Dashboard frontend/src/App.tsx Modify the Dashboard component in `frontend/src/App.tsx` with these changes:

1. Add imports (at the top of the file):

import AlertBanner from './components/AlertBanner';
import AdminMonitoringDashboard from './components/AdminMonitoringDashboard';

Import AlertEvent type from ./services/adminService.

The UploadMonitoringDashboard import can be removed since the monitoring tab will now use AdminMonitoringDashboard.

2. Add alert state inside the Dashboard component, after the existing state declarations:

const [activeAlerts, setActiveAlerts] = useState<AlertEvent[]>([]);

3. Add alert fetching useEffect — MUST be gated by isAdmin (RESEARCH Pitfall 5):

useEffect(() => {
  if (isAdmin) {
    adminService.getAlerts().then(setActiveAlerts).catch(() => {});
  }
}, [isAdmin]);

4. Add handleAcknowledge callback — uses optimistic update (RESEARCH Pitfall 2):

const handleAcknowledge = async (id: string) => {
  setActiveAlerts(prev => prev.filter(a => a.id !== id));
  try {
    await adminService.acknowledgeAlert(id);
  } catch {
    // On failure, re-fetch to restore correct state
    adminService.getAlerts().then(setActiveAlerts).catch(() => {});
  }
};

5. Render AlertBanner ABOVE the <nav> element (RESEARCH Pitfall 1 — must be above nav, not inside a tab): Inside the Dashboard return JSX, immediately after <div className="min-h-screen bg-gray-50"> and before the {/* Navigation */} comment and <nav> element, add:

{isAdmin && activeAlerts.length > 0 && (
  <AlertBanner alerts={activeAlerts} onAcknowledge={handleAcknowledge} />
)}

6. Replace monitoring tab content: Change:

{activeTab === 'monitoring' && isAdmin && (
  <UploadMonitoringDashboard />
)}

To:

{activeTab === 'monitoring' && isAdmin && (
  <AdminMonitoringDashboard />
)}

7. Keep the existing non-admin access-denied fallback for {activeTab === 'monitoring' && !isAdmin && (...)} — do not change it.

Do NOT change:

• The analytics tab content (still renders existing <Analytics />)
• Any other tab content
• The tab navigation buttons
• Any other Dashboard state or logic cd /home/jonathan/Coding/cim_summary/frontend && npx tsc --noEmit 2>&1 | head -30 Run npm run dev and verify: (1) AlertBanner shows above nav if alerts exist, (2) Monitoring tab shows health grid and analytics panel, (3) Non-admin sees Access Denied on monitoring tab AlertBanner renders above nav for admin users with active alerts; monitoring tab shows AdminMonitoringDashboard with health status and analytics; non-admin access denied preserved

Task 2: Visual verification of monitoring UI Complete admin monitoring frontend: 1. AlertBanner above navigation (shows when critical alerts exist) 2. AdminMonitoringDashboard in Monitoring tab (health status grid + analytics summary) 3. Alert acknowledge with optimistic update 1. Start frontend: `cd frontend && npm run dev` 2. Start backend: `cd backend && npm run dev` 3. Log in as admin (jpressnell@bluepointcapital.com) 4. Click the "Monitoring" tab — verify: - Health status cards show for all 4 services (Document AI, LLM API, Supabase, Firebase Auth) - Each card has colored dot (green/yellow/red/gray) and last-checked timestamp - Analytics section shows upload counts, success/failure rates, avg processing time - Range selector (24h/7d/30d) changes the analytics data - Refresh button reloads data 5. If there are active alerts: verify red banner appears ABOVE the tab navigation on ALL tabs (not just Monitoring) 6. If no alerts exist: verify no banner is shown (this is correct behavior) 7. (Optional) If you can trigger an alert (e.g., by having a service probe fail), verify the banner appears and "Acknowledge" button removes it immediately Type "approved" to complete Phase 4, or describe any issues to fix - `npx tsc --noEmit` passes with no errors - AlertBanner renders above `` in Dashboard (not inside a tab) - Alert state only fetched when `isAdmin` is true - Optimistic update: banner disappears immediately on acknowledge click - Monitoring tab renders AdminMonitoringDashboard (not UploadMonitoringDashboard) - Non-admin monitoring access denied fallback still works - `npm run build` completes successfully

<success_criteria> Admin user sees health indicators and processing metrics on the Monitoring tab. Alert banner appears above navigation when active critical alerts exist. Acknowledge removes the alert banner immediately. Non-admin users see Access Denied on admin tabs. </success_criteria>

After completion, create `.planning/phases/04-frontend/04-02-SUMMARY.md`