React Map Frontend: Interactive surveillance awareness dashboard

frontend/package.json

@@ -1,29 +1,66 @@
 {
   "name": "civwatch-frontend",
-  "version": "0.1.0",
+  "private": true,
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port ${VITE_PORT:-5173}",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint src --ext .ts,.tsx",
-    "test": "vitest run"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.17.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.3",
-    "react-toastify": "^10.0.6",
-    "recharts": "^2.15.4"
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/leaflet": "^1.9.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "leaflet": "^1.9.4",
+    "leaflet.heat": "^0.2.0",
+    "leaflet.markercluster": "^1.5.3",
+    "lucide-react": "^0.562.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-leaflet": "^5.0.0",
+    "react-router": "^7.6.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.31",
-    "@types/react-dom": "^18.3.7",
-    "@types/express": "^4.17.25",
-    "@vitejs/plugin-react": "^6.0.2",
-    "typescript": "^5.4.5",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.9"
+    "@eslint/js": "^9.32.0",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.5.0",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vitest": "^2.1.9"
   }
 }

frontend/src/App.tsx

@@ -1,109 +1,10 @@
-import React from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
-import { AuthProvider } from './context/AuthContext';
-import { ProtectedRoute, AdminRoute, AnalystRoute } from './components/ProtectedRoute';
-import { LoginPage } from './pages/LoginPage';
-import { RegisterPage } from './pages/RegisterPage';
-import { DashboardPage } from './pages/DashboardPage';
-import { AnomalyDashboard } from './pages/AnomalyDashboard';
-import { SourcesPage } from './pages/SourcesPage';
-import { AlertsPage } from './pages/AlertsPage';
-import { AnalyticsPage } from './pages/AnalyticsPage';
-import { AdminPage } from './pages/AdminPage';
-import { CampaignFinancePage } from './pages/CampaignFinancePage';
-import { ContractsPage } from './pages/ContractsPage';
-import { LegislationPage } from './pages/LegislationPage';
+import { Routes, Route } from 'react-router'
+import Home from './pages/Home'
 
 export default function App() {
   return (
-    <AuthProvider>
-      <Routes>
-        {/* Public routes */}
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
-
-        {/* Protected routes - all authenticated users */}
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <DashboardPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/anomalies"
-          element={
-            <ProtectedRoute>
-              <AnomalyDashboard />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/sources"
-          element={
-            <ProtectedRoute>
-              <SourcesPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/alerts"
-          element={
-            <ProtectedRoute>
-              <AlertsPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/analytics"
-          element={
-            <ProtectedRoute>
-              <AnalyticsPage />
-            </ProtectedRoute>
-          }
-        />
-
-        {/* Analyst routes */}
-        <Route
-          path="/contracts"
-          element={
-            <AnalystRoute>
-              <ContractsPage />
-            </AnalystRoute>
-          }
-        />
-        <Route
-          path="/campaign-finance"
-          element={
-            <AnalystRoute>
-              <CampaignFinancePage />
-            </AnalystRoute>
-          }
-        />
-        <Route
-          path="/legislation"
-          element={
-            <AnalystRoute>
-              <LegislationPage />
-            </AnalystRoute>
-          }
-        />
-
-        {/* Admin routes */}
-        <Route
-          path="/admin"
-          element={
-            <AdminRoute>
-              <AdminPage />
-            </AdminRoute>
-          }
-        />
-
-        {/* Default redirects */}
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
-        <Route path="*" element={<Navigate to="/dashboard" replace />} />
-      </Routes>
-    </AuthProvider>
-  );
+    <Routes>
+      <Route path="/" element={<Home />} />
+    </Routes>
+  )
 }

frontend/src/components/AlertSidebar.tsx

@@ -0,0 +1,131 @@
+import type { AlertItem, MarkerType } from '@/types';
+import { alerts, MARKER_COLORS } from '@/data/surveillanceData';
+
+const typeLabels: Record<MarkerType, string> = {
+  alpr: 'ALPR',
+  facial_recognition: 'FACE REC',
+  microphone: 'MIC ARRAY',
+  ice_raid: 'ICE',
+  protest: 'PROTEST',
+};
+
+export default function AlertSidebar() {
+  const getBorderColor = (type: MarkerType): string => {
+    return MARKER_COLORS[type] || '#5A6570';
+  };
+
+  return (
+    <aside
+      className="cw-scroll overflow-y-auto"
+      style={{
+        position: 'fixed',
+        top: 48,
+        left: 0,
+        width: 280,
+        bottom: 24,
+        background: 'rgba(13,15,20,0.95)',
+        backdropFilter: 'blur(8px)',
+        borderRight: '1px solid rgba(0,229,199,0.08)',
+        zIndex: 900,
+        padding: '16px 12px',
+      }}
+    >
+      <div
+        className="flex items-center gap-2 mb-4"
+        style={{
+          borderLeft: '2px solid #00E5C7',
+          paddingLeft: 10,
+        }}
+      >
+        <span
+          style={{
+            fontFamily: "'JetBrains Mono', monospace",
+            fontWeight: 500,
+            fontSize: 10,
+            letterSpacing: 2,
+            color: '#5A6570',
+            textTransform: 'uppercase',
+          }}
+        >
+          FIELD REPORTS
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {alerts.map((alert: AlertItem) => (
+          <div
+            key={alert.id}
+            className="cw-alert-card cw-focus"
+            style={{
+              background: '#161920',
+              borderRadius: 2,
+              padding: 12,
+              borderLeft: `2px solid ${getBorderColor(alert.type)}`,
+              cursor: 'pointer',
+            }}
+            tabIndex={0}
+            role="button"
+            aria-label={`${alert.label}: ${alert.description} at ${alert.location}, ${alert.city}`}
+          >
+            <div
+              style={{
+                fontFamily: "'JetBrains Mono', monospace",
+                fontWeight: 500,
+                fontSize: 9,
+                color: getBorderColor(alert.type),
+                letterSpacing: 1.5,
+                marginBottom: 4,
+              }}
+            >
+              {typeLabels[alert.type]}
+            </div>
+            <div
+              style={{
+                fontFamily: "'Inter', sans-serif",
+                fontWeight: 400,
+                fontSize: 13,
+                color: '#E8ECEF',
+                lineHeight: 1.4,
+                marginBottom: 6,
+              }}
+            >
+              {alert.description}
+            </div>
+            <div
+              style={{
+                fontFamily: "'JetBrains Mono', monospace",
+                fontSize: 10,
+                color: '#5A6570',
+                marginBottom: 4,
+              }}
+            >
+              {alert.location}
+            </div>
+            <div className="flex items-center justify-between">
+              <span
+                style={{
+                  fontFamily: "'JetBrains Mono', monospace",
+                  fontSize: 9,
+                  color: '#5A6570',
+                }}
+              >
+                {alert.city}, {alert.state}
+              </span>
+              <span
+                style={{
+                  fontFamily: "'JetBrains Mono', monospace",
+                  fontSize: 9,
+                  color: '#5A6570',
+                }}
+              >
+                {alert.timestamp}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div style={{ height: 16 }} />
+    </aside>
+  );
+}