Let me re-read all the specification documents thoroughly to build the complete interactive prototype.
Now let me read the remaining portions of the main spec files to get the complete risk engine rules, SMS formats, screen details, and data models:
Now let me read the remaining spec content for the SMS templates, reports module, and remaining details:
Now I have the complete specification. Let me set up the project plan and start building this interactive prototype.
Now I have the full picture. Let me build the complete interactive prototype. I'll start with the core data layer, risk engine, and theme.
Now let me build the core data layer and risk engine:
Now let me build the app store (state management) and then all the screen components. Let me create the state store first:
Now let me update the layout and build the main page with the app shell:
Now let me build all the screen components. I'll start with the PIN Login screen:
Now let me build the New Patient registration, Risk Alert, and Escalation screens:
The Agent timed out. Type a new prompt to continue.
Let me check the current state of all files and build the main app shell that ties everything together.
Good, I have all the data layer. Now let me read all the screen components to verify them, then build the main page:
Now let me read the remaining screens:
Now let me read the remaining screens:
All components look good. There's a duplicate import of Users in patient-list.tsx I need to fix, and I need to update the globals.css to properly wire the custom risk color utilities. Then I need to build the main page.tsx that ties everything together. Let me also read the current globals.css and page.tsx:
Good. Now I need to update the globals.css fonts for Devanagari/Inter, fix the patient-list duplicate import, and build the main page.tsx. Let me do all of these:
Now let me build the main page.tsx — the app shell that orchestrates all screens:
Now let me also fix the AshaWorker import issue in risk-engine.ts (the import is at the bottom, which is non-standard and could cause issues):
Now let me verify the mock-data.ts import for AshaWorker — it references the type but I need to check the export:
The mock data already uses import type { AshaWorker, Patient, Visit, Alert, Report } from "./types" — looks correct. Let me check the types has Report type properly (it uses a shorter version):
Good, the Report type exists. Now the store uses typeof mockReports for reports type — let me check the store exports the type properly for the page. Let me also verify the AshaWorker type in the store:
The store uses typeof mockAshaWorker — this is fine since it means AshaWorker effectively. Let me now do a final check to make sure the h-4.5 and w-4.5 classes work in Tailwind v4 (they should as they become arbitrary values). Actually, in Tailwind v4, h-4.5 IS a valid utility (maps to 1.125rem). Good.
Let me mark all tasks done:
The ASHA Saathi interactive prototype is now complete. Here's what was built across all 8+ screens matching the specification:
Core Engine: A fully deterministic risk engine implementing all 7 WHO BPCR + NHM rules (hemoglobin, BP, age, weight gain, previous complications, fetal movement, gestational diabetes) with RED/YELLOW/GREEN classification and Hindi risk messages.
All Screens: PIN login with lockout (demo PIN: 1234), step-by-step ASHA registration with voice simulation, morning briefing dashboard with TTS, patient list with risk-sorted filtering, patient detail with visit history and vitals cards, dual-mode visit entry (voice-guided and tap forms), real-time risk calculation with flag display, SMS escalation with doctor response simulation, auto-generated RCH/MCP reports, and settings with PHC/BHO number config.
Key UX Features: Mobile-first 430px viewport with phone frame, Hindi UI throughout, large 56dp touch targets, voice input simulation on every text field, offline-mode indicator, risk color-coded borders and badges (RED=#D32F2F, YELLOW=#F57F17, GREEN=#2E7D32), and proper navigation with back stack. The prototype runs entirely client-side with mock data representing 6 patients across all risk levels.
You can send messages while the preview loads