Executive Dashboard Backend Bridge
1. The Logic: How the Connection Works
The Executive Dashboard doesn’t directly query the database; it communicates with a Controller via API endpoints.
- The Backend (Express): Defines routes like
GET /api/v1/executive/summary to aggregate metrics (new leads, M-Pesa logs, SI status).
- The Frontend (React/Next.js): Uses hooks (e.g.,
useEffect or SWR) to poll these routes every 30 seconds, ensuring live updates without page refresh.
2. The Technical Developer Prompt (The Connection Engine)
"Implement the Backend Integration for the HTS Executive Dashboard (CEO View)."
Objective: Connect the React 19 frontend to the Express.js server logic in src/api/routes/ and src/services/.
Technical Requirements:
- Data Fetching: Build a
useDashboardData hook with TanStack Query (React Query) to fetch from /api/executive/status, polling every 30s.
- State Mapping:
- System Pulse → heartbeat from
src/services/inquest/monitor.js
- Compliance KPIs → counts from
Invoices and Users schemas
- Watchtower Alerts → last 5 active logs from
Alerts collection
- Global Killswitch: Secure POST to
src/api/routes/auth.js with CEO_PRIORITY middleware + JWT check.
- M-Pesa Verification: Integrate
src/payments/mpesa.js for real-time Success vs Hash Mismatch statuses.
- Visual Feedback: Use Slate (#8b949e) for loading, Amber (#ffbf00) for transient updates.
Deliverable: A functional dashboardController.js and React component with live data binding.
3. The "CEO Folder" Explanation (For Docs)
📁 BACKEND_BRIDGE_PROTOCOL.md
The connection is established via REST API Endpoints. The Dashboard acts as a "Read-Only" observer of the src/api/ layer, except for the Killswitch, which requires a high-privilege POST request. This separation ensures that even if the UI is compromised, the core Autonomous Logic remains protected behind the server's firewall.