📱🔄📱 The Connection Engine

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:

1. Data Fetching: Build a useDashboardData hook with TanStack Query (React Query) to fetch from /api/executive/status, polling every 30s.
2. 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
3. Global Killswitch: Secure POST to src/api/routes/auth.js with CEO_PRIORITY middleware + JWT check.
4. M-Pesa Verification: Integrate src/payments/mpesa.js for real-time Success vs Hash Mismatch statuses.
5. 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.