Protocol for bridging React 19 Frontend with Express.js Service Layers.
1. System Objective
Establish a real-time "Pulse" between the Executive Dashboard and the Autonomous Backend. Transition from static HTML to dynamic JSON ingestion via RESTful endpoints.
2. API Endpoint Requirements
Service Layer
Logic Path
Required Output
Inquest
src/services/inquest/
Scraper Heartbeat & Lead Velocity
SI Intelligence
src/ai/intent.js
High-Intent Threshold Counts
Payments
src/payments/mpesa.js
Lipa na M-Pesa Hash Verification
3. Security & Privilege Gates
Middleware: All POST requests (Killswitches) must pass through CEO_PRIORITY validation.
Encryption: JWT-based authentication required for all /api/v1/executive/* routes.
Polling: Implement 30s auto-refresh via TanStack Query to prevent stale data.
๐ Copy/Paste Developer Prompt
"Implement the Backend-to-Frontend Data Bridge for the HTS Executive Dashboard. Objective: Connect React 19 to Express logic in src/api/routes/. Requirements: Use TanStack Query for 30s polling of /api/v1/executive/pulse. Map SI Intent scoring to Amber alerts. Secure the Killswitch with CEO_PRIORITY middleware and JWT validation. Deliverable: dashboard.controller.js and useExecutivePulse.js hook."
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.
This folder contains the proprietary Health Trend Seller architecture.
Redistribution or unauthorized access to these logic layers is strictly prohibited.
[LAYER_01] INQUEST_PULSE
Monitoring src/services/inquest/ for real-time trend ingestion.
[LAYER_02] SI_INTENT_SCORING
Behavioral thresholds via src/ai/intent.js for Surgical Hijacks.
[LAYER_04] TRANSACTION_INTEGRITY
M-Pesa mpesa.js Hash defense against receipt fraud.