Spaces:
Running
Running
Ctrl+K
Build a fully working and responsive React + Tailwind CSS web app module, strictly styled using the Horizon UI (Tailwind + React) design system. 🏥 Module: Doctor Portal – Patient Management Pages to Create: 🔹 1. Patient Details Page Route: /patients/:id Use a Horizon-style 2-column layout inside a Card component. ✅ Left Side: Patient Summary Display: Full Name Age Gender Contact Info Patient Status (e.g., Active, Follow-up) Styled using Horizon components: text, spacing, shadows, etc. Add a functional “Edit Profile” button → opens a modal form to update info. ✅ Right Side: Visit History Display visit entries in a scrollable list. Each visit card should have: Date Visit Type Short Summary “Create Report” button on the top-right → routes to /patients/:id/create-report 🔹 2. Create Report Page Route: /patients/:id/create-report Use Horizon UI 2-column layout with Cards ✅ Left Column: Report Input Form Fields: Visit Date (Date Picker) Visit Type (Dropdown) Primary Reason (Text Area) File Upload for Discharge Summary (PDF/DOC; mock upload okay) Add “Generate Report” button → on click, display dummy report in right column. ✅ Right Column: AI Report Preview Display parsed report in sections: Diagnosis Medications Summary Use Horizon’s card styles, text headings, and shadows. Include “Back to Patient” and “Save Report” buttons. 🔹 3. Edit Profile Modal Triggered from Patient Details page. Modal with editable form: Full Name Age Gender Contact Info Save updates mock state. Match Horizon modal styling (rounded, shadowed, smooth transitions). 🧠 Functionality Use React functional components Use local state or dummy JSON API to manage patients, visits, and reports Upload field can simulate file parsing and show dummy AI output All buttons and links should be functional (i.e., navigate, show modals, save mock data) 🎨 Styling Instructions ✅ Strictly use Horizon UI theme: Colors: Match Horizon’s primary green (#1A998E) and accent shades Font: Use Inter (Horizon’s default) Text: Font sizes and weights from Horizon Buttons: Rounded, shadowed Horizon-style buttons Cards: Soft rounded corners, light shadows, Horizon UI spacing Inputs & Forms: Styled per Horizon form elements Dark mode compatibility (optional, not required) ✅ Responsive: Mobile-first, works well on tablet and desktop ✅ Accessible: Large touch targets, proper contrast, keyboard navigation Final Output: Working React + Tailwind app Fully styled with Horizon UI’s theme, fonts, components Responsive across devices Functional navigation and state using dummy data or mock API - Initial Deployment
7fae82b verified