A polished, healthcare-grade web application for monitoring surgical patients through their post-operative recovery. AfterCare provides role-based experiences for patients, surgeons, caregivers, and practice administrators — powered by Supabase and a deterministic AI engine.

1. Overview
2. Tech Stack
3. Design System
4. Getting Started
5. Application Structure
6. Directory Layout
7. Route Reference
8. Data Layer
9. Library Utilities
10. Component Architecture
11. Mock Personas

AfterCare simulates a complete post-surgical monitoring platform with three distinct portals:

The landing page at / serves as the product marketing page with role-based entry points.

Core capabilities:

• Daily check-in flow with pain scoring, symptom logging, and CAM-ICU delirium screening
• Wound photo upload simulation with AI-powered analysis (deterministic, not a real model)
• Medication tracking with adherence monitoring and opioid trend analysis
• Mobility and PT exercise logging with step tracking
• Secure messaging between patients and care teams with automated triage labeling
• Recovery guide with procedure-specific milestones and warning signs
• Surgeon patient panel with real-time triage color sorting (Red / Amber / Green)
• Analytics dashboard with cohort metrics and population-level trend charts
• Configurable alert thresholds per metric
• EHR integration status display (Epic, Cerner, Meditech, Allscripts — mock FHIR R4)
• HIPAA-grade audit log viewer with user/action/resource/IP tracking
• ML model registry with status, accuracy, and feature listings
• Patient onboarding workflow simulation

No backend. All state is client-side; data is imported from static TypeScript modules.

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to see the landing page.

Note: next.config.ts sets typescript.ignoreBuildErrors: true to suppress a false-positive type error in Next.js 16's generated .next/types/app/page.ts file. All application code is fully typed.

/                           Landing page — product marketing + role entry points
├── /app                    Patient-facing application
│   ├── /app                Patient dashboard (default patient: Margaret Chen)
│   ├── /app/checkin        Multi-step daily check-in flow
│   ├── /app/pain           Pain history with trend charts
│   ├── /app/symptoms       Symptom log with severity tracking
│   ├── /app/wounds         Wound photo upload + AI analysis results
│   ├── /app/medications    Medication list, schedule, and adherence gauge
│   ├── /app/mobility       PT exercises, step tracking, mobility chart
│   ├── /app/messages       Patient ↔ care team messaging
│   ├── /app/guide          Procedure-specific recovery guide by day range
│   └── /app/settings       Patient profile and notification preferences
│
├── /portal                 Surgeon-facing portal
│   ├── /portal             Patient panel with triage color sorting
│   ├── /portal/patients/[id]  Individual patient deep-dive
│   ├── /portal/wounds      Wound review queue across all patients
│   ├── /portal/messages    Surgeon messaging inbox with triage labels
│   └── /portal/analytics   Cohort analytics and outcome trend charts
│   └── /portal/alerts      Alert threshold configuration
│
└── /admin                  Practice admin console
    ├── /admin              System overview with key metrics
    ├── /admin/ehr          EHR integration status (Epic, Cerner, etc.)
    ├── /admin/onboarding   Patient onboarding workflow
    ├── /admin/audit        HIPAA audit log with filters
    └── /admin/models       ML model registry and status

AfterCare/
│
├── app/                            Next.js App Router root
│   ├── layout.tsx                  Root layout — fonts (Playfair Display + Source Sans 3), metadata
│   ├── page.tsx                    Landing page (/)
│   ├── globals.css                 Global styles, Tailwind @theme, custom CSS variables
│   │
│   ├── app/                        Patient app segment
│   │   ├── layout.tsx              Patient layout — mounts PatientNav, sets left padding for sidebar
│   │   ├── page.tsx                Patient dashboard
│   │   ├── checkin/page.tsx        Multi-step daily check-in
│   │   ├── pain/page.tsx           Pain history and trend charts
│   │   ├── symptoms/page.tsx       Symptom log and history
│   │   ├── wounds/page.tsx         Wound photo upload and AI analysis
│   │   ├── medications/page.tsx    Medication tracker and adherence gauge
│   │   ├── mobility/page.tsx       PT exercises and step chart
│   │   ├── messages/page.tsx       Patient messaging interface
│   │   ├── guide/page.tsx          Recovery guide by procedure and day
│   │   └── settings/page.tsx       Patient settings and profile
│   │
│   ├── portal/                     Surgeon portal segment
│   │   ├── layout.tsx              Portal layout — mounts PortalNav
│   │   ├── page.tsx                Patient panel with triage sorting
│   │   ├── patients/[id]/page.tsx  Dynamic patient detail page
│   │   ├── wounds/page.tsx         Wound review queue
│   │   ├── messages/page.tsx       Surgeon messaging inbox
│   │   ├── analytics/page.tsx      Cohort analytics dashboard
│   │   └── alerts/page.tsx         Alert threshold configuration
│   │
│   └── admin/                      Admin console segment
│       ├── layout.tsx              Admin layout — mounts AdminNav
│       ├── page.tsx                System overview
│       ├── ehr/page.tsx            EHR integration management
│       ├── onboarding/page.tsx     Patient onboarding workflow
│       ├── audit/page.tsx          Audit log viewer
│       └── models/page.tsx         ML model registry
│
├── components/
│   ├── ui/
│   │   └── index.tsx               Shared UI primitives (see Component Architecture)
│   ├── navigation/
│   │   ├── PatientNav.tsx          Patient sidebar + top bar (blue/white)
│   │   ├── PortalNav.tsx           Surgeon sidebar + top bar (dark navy)
│   │   └── AdminNav.tsx            Admin sidebar + top bar (slate-900)
│   └── charts/
│       ├── PainTrendChart.tsx      AreaChart + sparkline for pain scores
│       ├── OpioidChart.tsx         BarChart for daily opioid doses
│       ├── MobilityChart.tsx       AreaChart for daily step counts
│       └── AdherenceChart.tsx      RadialBarChart gauge + PieChart breakdown
│
├── data/
│   ├── mockPatients.ts             6 seeded patients with full clinical profiles
│   ├── fakeData.ts                 Pain entries, symptoms, CAM assessments, wound photos,
│   │                               medication logs, and mobility data (200+ records)
│   ├── mockMessages.ts             6 message threads, 30 messages total
│   ├── mockAlerts.ts               17 clinical alerts across all patients
│   └── mockBenchmarks.ts           Recovery benchmarks (105 records) + cohort metrics
│
├── lib/
│   ├── helpers.ts                  Formatting, color mapping, and utility functions
│   ├── triage.ts                   Clinical triage and risk scoring logic
│   └── fakeAI.ts                   Deterministic AI response engine + wound analysis + recovery guide
│
├── types/
│   └── index.ts                    All TypeScript interfaces and type aliases
│
├── next.config.ts                  Next.js config (ignoreBuildErrors: true)
├── tailwind.config.ts              (Tailwind v4 — config lives in globals.css @theme)
├── tsconfig.json                   TypeScript config
└── package.json

The product marketing page. Features:

• Hero section with animated headline and dual CTA buttons
• Feature cards with staggered vertical offset (3-column grid on desktop)
• Role-based entry point cards: Patient App, Surgeon Portal, Admin Console
• Paper grain texture overlay on hero background
• Procedure type chips (knee, hip, spine, appendectomy, cholecystectomy, colectomy)

All patient pages share the PatientNav layout: sticky top bar + left sidebar (desktop) or drawer (mobile).

• Recovery progress header: Day post-op, triage color badge, procedure label
• Today's summary cards: pain score, steps, medication adherence
• Active alerts banner with severity color coding
• Pain trend sparkline (last 7 days)
• Next scheduled medications widget
• Quick action links to each section

Multi-step wizard:

1. Pain — 0–10 slider with color feedback, location and character selectors
2. Symptoms — Multi-select symptom checklist with severity rating
3. CAM-ICU — 4-criterion delirium screening (acute onset, inattention, disorganized thinking, altered consciousness)
4. Wound — Photo upload simulation with instant AI analysis result card
5. Medications — Mark each scheduled medication as taken or skipped
6. Mobility — PT exercise completion checkboxes + steps entry
7. Summary — Confirmation screen with submission toast

• Current pain score card with color-coded label
• Area chart of pain scores over all post-op days
• Benchmark overlay showing expected pain range for the patient's procedure
• Pain entry history table with timestamp, location, and character columns

• Symptom frequency bar chart
• Severity distribution pills
• Chronological symptom entry history with expandable notes

• Wound photo gallery with day-by-day thumbnails
• AI analysis result for each photo: redness, drainage, dehiscence, swelling, risk level
• Healing trajectory status card
• Upload new photo button (simulated)

• Active medication cards with dosage, frequency, route, and instructions
• Today's schedule: taken / skipped / due / overdue status per dose
• Adherence gauge (RadialBarChart) — overall compliance percentage
• Medication category breakdown (PieChart): opioid vs NSAID vs antibiotic, etc.
• Opioid usage trend BarChart

• Daily step count AreaChart
• PT exercise checklist with sets/reps/completion state
• Assistance level tracker (independent → dependent scale)
• Walking distance log

• Thread list with unread count badges and triage color labels
• Message thread view with sender role badges
• Compose new message form with subject and body
• Real-time-style message display (timestamps, read receipts)

• Procedure-specific milestone cards organized by day ranges (e.g., Days 1–3, Days 4–7, Days 8–14)
• Each card covers: pain expectations, mobility targets, wound care, medications, warning signs, when to call doctor
• Current day highlighted

• Patient profile display (name, MRN, DOB, procedure, surgeon)
• Notification preferences toggles
• Emergency contact information
• Account details

All portal pages share the PortalNav layout: dark navy sidebar + header with Dr. Sarah Chen profile.

• Triage-sorted patient list (Red → Amber → Green)
• Each patient card shows: name, procedure, day post-op, triage badge, active alert count, last check-in time
• Filter by triage color, procedure type, or alert status
• Click-through to individual patient detail

Dynamic route for each of the 6 seeded patients. Sections:

• Patient header: name, MRN, procedure, surgeon, day post-op, triage color
• Alert timeline: all active alerts with severity and action required
• Pain trend chart with benchmark overlay
• CAM assessment history table
• Wound photo review with AI analysis results
• Medication adherence summary
• Mobility progress
• Message thread with patient

• All recent wound photos across all patients sorted by risk level
• Each entry shows patient name, day post-op, AI risk level badge, and key findings
• Filter by risk level (critical / high / moderate / low)
• Bulk acknowledge workflow

• Full message thread list with patient name, triage label, unread count
• Thread view with full message history
• Compose reply or new message
• Auto-triage label assignment based on message content

• Cohort overview metrics: avg days to discharge, readmission rate, opioid duration, satisfaction score
• Population pain trend chart (all patients overlaid)
• Procedure comparison BarChart
• Compliance rate trend over time
• Risk distribution PieChart

• List of all configurable alert thresholds (pain score, step count, CAM positive, etc.)
• Each threshold: metric name, operator (>, <, >=, <=, =), value, severity level, enabled toggle
• Add / edit / delete threshold forms

All admin pages share the AdminNav layout: slate-900 sidebar + header with Jordan Reed (Practice Admin) profile.

• System health metrics: total patients, active alerts, EHR sync status, model accuracy
• Recent activity feed
• Quick links to all admin sections

• Connection cards for Epic, Cerner, Meditech, Allscripts
• Each card shows: status badge (connected / syncing / error / disconnected), last sync time, patients imported, FHIR version, endpoint URL
• Sync now and disconnect actions (simulated)

• Multi-step onboarding wizard for adding new patients
• Steps: patient demographics → procedure details → care team assignment → EHR import → portal access setup
• Confirmation screen with generated credentials

• Paginated table of all system events
• Columns: timestamp, user, role, action, resource, resource ID, IP address, status (success / failure / warning)
• Filter by user, role, action type, date range, and status
• Export to CSV (simulated)

• Cards for each ML model (wound risk classifier, pain trajectory predictor, readmission risk, delirium screener)
• Each card: name, version, status (active / training / staged / deprecated), last trained date, accuracy score, feature list
• Promote / deprecate / retrain actions (simulated)

getAIResponse(input: string): AIResponse

Keyword-matching response engine covering 14 clinical categories:

• Pain management, wound care, medications, fever, swelling, mobility, diet, bleeding, infection signs, delirium, when to call 911, discharge criteria, opioid safety, and general recovery

Every response includes a medical disclaimer. Severity is tagged as info, warning, or urgent.

generateWoundAnalysis(patientId, dayPostOp): WoundAnalysis

Deterministic wound analysis seeded from patientId + dayPostOp. Returns redness, drainage, dehiscence, swelling, risk level, findings array, healing stage, and recommendation — consistent across renders.

recoveryGuide: Record<ProcedureType, RecoveryGuideEntry[]>

5 entries per procedure type, each covering a day range with expected pain, mobility targets, wound guidance, medication notes, warning signs, and doctor call criteria.

Shared primitive components used across all three portals:

All charts use Recharts with custom tooltips styled to match the design system (rounded-2xl, subtle shadow).

All nav components use usePathname() from Next.js for active link detection.

The app ships with three hardcoded user personas visible in the navigation: