From 6c345a6cdb15ee33ab271c9abeb2a3f3231ccbe3 Mon Sep 17 00:00:00 2001
From: admin <admin@gitea.pressmess.duckdns.org>
Date: Tue, 24 Feb 2026 16:38:52 -0500
Subject: [PATCH] feat(04-02): wire AlertBanner and AdminMonitoringDashboard
 into Dashboard

- Add AlertBanner import and render above nav (admin + active alerts only)
- Add AdminMonitoringDashboard import replacing UploadMonitoringDashboard in monitoring tab
- Add activeAlerts state (AlertEvent[]) with isAdmin-gated useEffect fetch
- Add handleAcknowledge with optimistic update and re-fetch on failure
- Remove UploadMonitoringDashboard import (replaced by AdminMonitoringDashboard)
---
 frontend/src/App.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e330430..3c7043d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,10 +7,11 @@ import DocumentUpload from './components/DocumentUpload';
 import DocumentList from './components/DocumentList';
 import DocumentViewer from './components/DocumentViewer';
 import Analytics from './components/Analytics';
-import UploadMonitoringDashboard from './components/UploadMonitoringDashboard';
+import AlertBanner from './components/AlertBanner';
+import AdminMonitoringDashboard from './components/AdminMonitoringDashboard';
 import LogoutButton from './components/LogoutButton';
 import { documentService, GCSErrorHandler, GCSError } from './services/documentService';
-import { adminService } from './services/adminService';
+import { adminService, AlertEvent } from './services/adminService';
 // import { debugAuth, testAPIAuth } from './utils/authDebug';
 
 import { 
@@ -38,6 +39,24 @@ const Dashboard: React.FC = () => {
   // Check if user is admin
   const isAdmin = adminService.isAdmin(user?.email);
 
+  const [activeAlerts, setActiveAlerts] = useState<AlertEvent[]>([]);
+
+  useEffect(() => {
+    if (isAdmin) {
+      adminService.getAlerts().then(setActiveAlerts).catch(() => {});
+    }
+  }, [isAdmin]);
+
+  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(() => {});
+    }
+  };
+
   // Map backend status to frontend status
   const mapBackendStatus = (backendStatus: string): string => {
     switch (backendStatus) {
@@ -400,6 +419,9 @@ const Dashboard: React.FC = () => {
 
   return (
     <div className="min-h-screen bg-gray-50">
+      {isAdmin && activeAlerts.length > 0 && (
+        <AlertBanner alerts={activeAlerts} onAcknowledge={handleAcknowledge} />
+      )}
       {/* Navigation */}
       <nav className="bg-primary-600 shadow-soft border-b border-primary-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -688,7 +710,7 @@ const Dashboard: React.FC = () => {
           )}
 
           {activeTab === 'monitoring' && isAdmin && (
-            <UploadMonitoringDashboard />
+            <AdminMonitoringDashboard />
           )}
 
           {/* Redirect non-admin users away from admin tabs */}