FRONTEND_GUIDE.md

PRESAGE Next.js Frontend - Quick Start Guide

🚀 Project Status

✅ COMPLETE - Modern React/Next.js frontend with TypeScript, Tailwind CSS, and Framer Motion animations.

Completed Components

1. PresageDashboard (components/PresageDashboard.tsx)

Main dashboard with 3-column layout:

• Left Column: Patient profile form (16 fields)
• Right Columns: Results display (health score, risk assessment, interventions)
• Features:
  • Real-time API health check on load
  • Form state management for all patient metrics
  • Loading states with spinners
  • Error handling with helpful messages
  • Animated health index ring (0-100 scale)

2. RiskVisualization (components/RiskVisualization.tsx)

Disease risk assessment display:

• SVG circular progress indicators with dynamic colors
• Animated entrance and progress transitions
• Risk level badges (High/Elevated/Moderate/Low)
• Displays: Diabetes, Hypertension, Cardiovascular risk percentages

3. ImageDropzone (components/ImageDropzone.tsx)

Medical document upload interface:

• Drag-and-drop file upload (images, PDFs)
• File preview list
• Framer Motion animations
• Loading state support

4. API Client (lib/api.ts)

Axios HTTP client with:

• Type-safe interfaces for PatientData and HealthAnalysisResponse
• 3-minute timeout for long-running analyses
• Health check endpoint
• Analysis endpoint POST handler

📋 Configuration

Environment Variables

Created .env.local:

NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

Package Dependencies Installed

react-dropzone      - File upload handling
axios               - HTTP client
recharts            - Charting library
framer-motion       - Animations
lucide-react        - Icon library

Total: 418 npm packages installed

🎯 How to Run

Terminal 1: Start the FastAPI Backend

cd e:\New folder (2)\future
python main.py

• API runs on: http://127.0.0.1:8000
• Health check: http://127.0.0.1:8000/health
• Analysis endpoint: http://127.0.0.1:8000/analyze (POST)

Terminal 2: Start the Next.js Frontend

cd "e:\New folder (2)\future\client"
npm run dev

• Frontend runs on: http://localhost:3000
• Hot reload enabled for development
• TypeScript type-checking during development

📊 Using the Dashboard

1. Fill Patient Profile (Left Column)

   • Age, Sex
   • Blood pressure (systolic/diastolic)
   • Fasting blood sugar
   • BMI
   • Lifestyle metrics (sleep, exercise, smoking, alcohol)

2. Click "🚀 Run Health Analysis"

   • Form validates data
   • Sends POST request to FastAPI backend
   • Shows loading spinner during processing

3. View Results (Right Columns)

   • Overall Health Index: 0-100 score with animated ring
   • Disease Risk Assessment: Diabetes/Hypertension/Cardiovascular percentages
   • Risk Explanations: Clinical factors driving the assessment
   • 90-Day Prevention Plan: Personalized interventions and timeline

🔌 API Integration

Request Flow

Browser Form → POST /analyze
               ↓
           FastAPI Backend (main.py)
               ↓
           Multi-Agent Orchestrator
               ├─ Data Agent (validation)
               ├─ Risk Agent (clinical calculator)
               ├─ Literature Agent (PubMed search)
               └─ Intervention Agent (90-day plan)
               ↓
           HealthAnalysisResponse (JSON)
               ↓
           Display Results with Animations

Request/Response Format

Request (PatientData):

{
  age: number,
  sex: "male" | "female" | "other",
  blood_pressure_systolic: number,
  blood_pressure_diastolic: number,
  blood_sugar_fasting: number,
  cholesterol_total: number,
  hdl_cholesterol: number,
  bmi: number,
  sleep_hours: number,
  stress_level: "low" | "medium" | "high",
  smoking: boolean,
  alcohol: "none" | "moderate" | "heavy",
  exercise_days_per_week: number,
  iron_level: number,
  cortisol: number,
  family_history: string[]
}

Response (HealthAnalysisResponse):

{
  overall_health_score: 75,
  risk_scores: {
    diabetes: 35,
    hypertension: 42,
    cardiovascular: 48
  },
  risk_explanations: "...",
  profile_summary: "...",
  evidence: "...",
  intervention_plan: "..."
}

🎨 Theme & Styling

Color Scheme

• Background: Slate-950 to slate-900 gradient
• Accents: Cyan-400/500 and blue-400/500
• Cards: Slate-900 with 50% opacity + backdrop blur
• Borders: Cyan-500 with 20% opacity

Typography

• Headings: Cyan-400 gradient text
• Primary Text: White
• Secondary Text: Slate-300 to slate-400
• Disabled: Reduced opacity

⚙️ Development Tips

Add New Form Fields

Edit PresageDashboard.tsx:

1. Add field to PatientData interface in lib/api.ts
2. Add input element in left column
3. Add to handleInputChange() state management
4. Update form submission

Customize Risk Colors

Edit RiskVisualization.tsx:

const getRiskColor = (risk: number) => {
  if (risk >= 80) return '#ef4444'; // red
  if (risk >= 60) return '#f97316'; // orange
  if (risk >= 40) return '#eab308'; // yellow
  return '#22c55e'; // green
};

Extend Result Display

Add new sections to PresageDashboard.tsx right column (after intervention_plan):

<motion.div className="rounded-xl bg-slate-900/50 border border-cyan-500/20 p-6">
  <h3>New Section</h3>
  <p>{result.new_field}</p>
</motion.div>

🐛 Troubleshooting

Issue	Solution
"Cannot connect to API server"	Ensure FastAPI is running on port 8000
CORS errors in console	Backend has CORSMiddleware enabled
Form not submitting	Check browser console for validation errors
Slow analysis	Analysis takes 30-120s depending on system
Images not uploading	ImageDropzone component created but not yet integrated

📁 Project Structure

client/
├── app/
│   ├── layout.tsx         ← Root layout (dark theme)
│   ├── page.tsx           ← Entry point (renders PresageDashboard)
│   └── globals.css        ← Tailwind directives
├── components/
│   ├── PresageDashboard.tsx  ← Main dashboard (3-column layout)
│   ├── RiskVisualization.tsx ← Risk ring animations
│   └── ImageDropzone.tsx     ← File upload interface
├── lib/
│   └── api.ts             ← Axios client & TypeScript interfaces
├── .env.local             ← API endpoint configuration
├── next.config.ts         ← Next.js configuration
├── tailwind.config.ts     ← Tailwind CSS configuration
├── tsconfig.json          ← TypeScript configuration
└── package.json           ← Dependencies

✨ Features Implemented

✅ Dark theme with neon accents
✅ Responsive grid layout (mobile-friendly)
✅ 16-field patient profile form
✅ Real-time API connectivity check
✅ Animated health score visualization
✅ Disease risk assessment display
✅ Clinical risk explanations
✅ 90-day intervention plan
✅ Loading states with spinners
✅ Error handling with helpful messages
✅ Framer Motion animations throughout
✅ Full TypeScript type safety
✅ Tailwind CSS styling
✅ Responsive design

🚢 Deployment (Future)

To deploy to production:

1. Build: npm run build
2. Deploy to Vercel: vercel deploy
3. Or containerize with Docker

📞 Support

For issues or questions:

1. Check API logs: python main.py terminal output
2. Check browser console: F12 → Console tab
3. Verify environment variables: .env.local contains correct API URL
4. Ensure both services running on correct ports (3000 for Next.js, 8000 for API)