Initial deployment of Pathora Colposcopy Assistant

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+Dockerfile*
+.dockerignore
+.git
+.gitignore
+.vscode
+**/dist
+**/.DS_Store
+*.swp
+*.local
+*.env*

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitattributes

@@ -0,0 +1,6 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.bmp filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -0,0 +1,30 @@
+# Multi-stage build for Vite React app served as static site
+
+FROM node:18-alpine AS build
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci || npm install
+
+# Copy source
+COPY . .
+
+# Build static assets
+RUN npm run build
+
+FROM node:18-alpine AS runtime
+WORKDIR /app
+
+# Install a lightweight static file server
+RUN npm install -g serve
+
+# Copy build output from previous stage
+COPY --from=build /app/dist ./dist
+
+# Spaces sets PORT; default to 7860 for local runs
+ENV PORT=7860
+EXPOSE 7860
+
+# Serve the built app
+CMD ["sh", "-c", "serve -s dist -l ${PORT}"]

README.md

@@ -0,0 +1,132 @@
+# Pathora Colposcopy Assistant
+
+A React-based colposcopy assistant application with image annotation, patient history tracking, and AI-powered chatbot features.
+
+## Local Development
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run development server:
+```bash
+npm run dev
+```
+
+3. Build for production:
+```bash
+npm run build
+```
+
+## Deploy to Hugging Face Spaces
+
+This project is configured for deployment on Hugging Face Spaces using Docker runtime.
+
+### Step-by-Step Deployment Instructions
+
+#### Step 1: Install Git and Git LFS
+
+If you don't have Git installed:
+- Download and install Git from https://git-scm.com/download/win
+- Restart your terminal after installation
+
+Install Git LFS (Large File Storage):
+```bash
+git lfs install
+```
+
+#### Step 2: Initialize Git Repository
+
+Navigate to your project folder and initialize Git:
+```bash
+cd "c:\Users\FARRUKH SAYEED\OneDrive\Desktop\Manalife Internship\Pathora_colpo"
+git init
+```
+
+#### Step 3: Add Hugging Face Remote
+
+Add your Hugging Face Space as the remote repository:
+```bash
+git remote add origin https://huggingface.co/spaces/ManalifeAI/Pathora_Colposcopy_Assistant
+```
+
+#### Step 4: Stage All Files
+
+Add all files to Git:
+```bash
+git add .
+```
+
+#### Step 5: Commit Your Changes
+
+Create your first commit:
+```bash
+git commit -m "Initial deployment of Pathora Colposcopy Assistant"
+```
+
+#### Step 6: Push to Hugging Face
+
+Push your code to Hugging Face Spaces:
+```bash
+git push -u origin main
+```
+
+**Note:** You'll be prompted for your Hugging Face credentials:
+- Username: Your Hugging Face username
+- Password: Use a **Hugging Face Access Token** (not your password)
+  - Get token from: https://huggingface.co/settings/tokens
+  - Create a new token with "write" access if you don't have one
+
+#### Step 7: Wait for Build
+
+After pushing:
+1. Go to https://huggingface.co/spaces/ManalifeAI/Pathora_Colposcopy_Assistant
+2. The Space will automatically start building from the Dockerfile
+3. Wait 2-5 minutes for the build to complete
+4. Your app will be live at the Space URL
+
+### Updating Your Space
+
+To push updates after making changes:
+```bash
+git add .
+git commit -m "Description of your changes"
+git push
+```
+
+## Local Docker Testing (Optional)
+
+Test the Docker build locally before deploying:
+
+```bash
+# Build the image
+docker build -t pathora-colposcopy .
+
+# Run the container
+docker run --rm -e PORT=7860 -p 7860:7860 pathora-colposcopy
+
+# Open http://localhost:7860 in your browser
+```
+
+## Project Structure
+
+- `src/` - React TypeScript source code
+  - `components/` - Reusable UI components
+  - `pages/` - Page components
+- `public/` - Static assets
+- `Dockerfile` - Docker configuration for Hugging Face Spaces
+- `vite.config.ts` - Vite build configuration
+
+## Technologies Used
+
+- React 18
+- TypeScript
+- Vite
+- Tailwind CSS
+- Lucide React Icons
+- html2pdf.js
+
+## Space URL
+
+🚀 Live at: https://huggingface.co/spaces/ManalifeAI/Pathora_Colposcopy_Assistant

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <title>Pathora | Manalife's AI Pathology Assistant </title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "magic-patterns-vite-template",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx vite",
+    "build": "npx vite build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "preview": "npx vite preview"
+  },
+  "dependencies": {
+    "html2pdf.js": "^0.14.0",
+    "lucide-react": "0.522.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.18",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "latest",
+    "eslint": "^8.50.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.1",
+    "postcss": "latest",
+    "tailwindcss": "3.4.17",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { PatientHistoryPage } from './pages/PatientHistoryPage';
+
+import HomePage from './pages/HomePage.tsx';
+import { PatientRegistry } from './pages/PatientRegistry.tsx';
+import { GuidedCapturePage } from './pages/GuidedCapturePage';
+import { AcetowhiteExamPage } from './pages/AcetowhiteExamPage';
+import { GreenFilterPage } from './pages/GreenFilterPage';
+import { LugolExamPage } from './pages/LugolExamPage';
+import { BiopsyMarking } from './pages/BiopsyMarking';
+import { ReportPage } from './pages/ReportPage';
+import { Sidebar } from './components/Sidebar';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { ChatBot } from './components/ChatBot';
+
+export function App() {
+  const [currentPage, setCurrentPage] = useState<'home' | 'patientinfo' | 'patienthistory' | 'colposcopyimaging' | 'acetowhite' | 'greenfilter' | 'lugol' | 'guidedcapture' | 'biopsymarking' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings'>('home');
+  const [currentPatientId, setCurrentPatientId] = useState<string | undefined>(undefined);
+  const [isNewPatientFlow, setIsNewPatientFlow] = useState(false);
+  const [capturedImages, setCapturedImages] = useState<any[]>([]);
+  const [guidanceMode, setGuidanceMode] = useState<'capture' | 'annotation' | 'compare' | 'report'>('capture');
+
+  const goToPatientRegistry = () => {
+    setCurrentPatientId(undefined);
+    setIsNewPatientFlow(false);
+    setCurrentPage('patientinfo');
+  };
+
+  const goToPatientHistory = (patientId?: string, isNewPatient: boolean = false) => {
+    setCurrentPatientId(patientId);
+    setIsNewPatientFlow(isNewPatient);
+    setCurrentPage('patienthistory');
+  };
+
+  const goToHome = () => {
+    setCurrentPatientId(undefined);
+    setIsNewPatientFlow(false);
+    setCurrentPage('home');
+  };
+
+  const goToColposcopyImaging = () => setCurrentPage('colposcopyimaging');
+  const goToAcetowhite = () => setCurrentPage('acetowhite');
+  const goToGreenFilter = () => setCurrentPage('greenfilter');
+  const goToLugol = () => setCurrentPage('lugol');
+  const goToGuidedCapture = () => setCurrentPage('guidedcapture');
+  const goToBiopsyMarking = () => setCurrentPage('biopsymarking');
+  const goToCapture = () => {
+    setCurrentPage('capture');
+    setGuidanceMode('capture');
+  };
+  const goToAnnotation = () => {
+    setCurrentPage('annotation');
+    setGuidanceMode('annotation');
+  };
+  const goToCompare = () => {
+    setCurrentPage('compare');
+    setGuidanceMode('compare');
+  };
+  const goToReport = () => setCurrentPage('report');
+
+  const renderMain = () => {
+    switch (currentPage) {
+      case 'home':
+        return <HomePage onNavigateToPatients={goToPatientRegistry} onNext={goToPatientRegistry} />;
+      case 'patientinfo':
+        return <PatientRegistry onNewPatient={() => goToPatientHistory(undefined)} onSelectExisting={(id: string) => goToPatientHistory(id)} onBackToHome={goToHome} onNext={goToGuidedCapture} />;
+      case 'patienthistory':
+        return <PatientHistoryPage goToImaging={goToGuidedCapture} goBackToRegistry={goToPatientRegistry} patientID={currentPatientId} goToGuidedCapture={isNewPatientFlow ? goToGuidedCapture : undefined} />;
+      
+      case 'acetowhite':
+        return <AcetowhiteExamPage goBack={goToColposcopyImaging} onNext={goToGreenFilter} />;
+      case 'greenfilter':
+        return <GreenFilterPage goBack={goToAcetowhite} onNext={goToLugol} />;
+      case 'lugol':
+        return <LugolExamPage goBack={goToGreenFilter} onNext={goToGuidedCapture} />;
+      case 'guidedcapture':
+        return <GuidedCapturePage onNext={goToBiopsyMarking} onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+      case 'biopsymarking':
+        return <BiopsyMarking onBack={goToGuidedCapture} onNext={goToReport} capturedImages={capturedImages} />;
+      case 'capture':
+        return <GuidedCapturePage onNext={goToBiopsyMarking} initialMode="capture" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+      case 'annotation':
+        return <GuidedCapturePage onNext={goToBiopsyMarking} initialMode="annotation" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+      case 'compare':
+        return <GuidedCapturePage onNext={goToBiopsyMarking} initialMode="compare" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+      case 'report':
+        return <ReportPage onBack={goToCompare} onNext={goToHome} capturedImages={capturedImages} />;
+      default:
+        return <div className="p-8">Page "{currentPage}" not implemented yet.</div>;
+    }
+  };
+
+  // Sidebar is shown on all pages except home
+  const showSidebar = currentPage !== 'home';
+  const sidebarKey = currentPage === 'patienthistory' ? 'patientinfo' : ['capture', 'annotation', 'compare', 'guidedcapture'].includes(currentPage) ? guidanceMode : currentPage;
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header compact={currentPage === 'guidedcapture'} />
+
+      <div className="flex-1 flex min-h-0">
+        {showSidebar && <Sidebar current={sidebarKey as 'home' | 'patientinfo' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings'} onNavigate={k => {
+          if (k === 'home') goToHome();
+          else if (k === 'patientinfo') goToPatientRegistry();
+          else if (k === 'capture') goToCapture();
+          else if (k === 'annotation') goToAnnotation();
+          else if (k === 'compare') goToCompare();
+          else if (k === 'report') goToReport();
+          else setCurrentPage(k as any);
+        }} />}
+        <main className="flex-1 bg-white overflow-auto">
+          {renderMain()}
+        </main>
+      </div>
+
+      <Footer compact={currentPage === 'guidedcapture'} />
+      <ChatBot />
+    </div>
+  );
+}

src/components/AceticAnnotator.tsx

@@ -0,0 +1,767 @@
+import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
+import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp } from 'lucide-react';
+
+type ShapeType = 'rect' | 'circle' | 'polygon';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface Annotation {
+  id: string;
+  type: ShapeType;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+  label?: string;
+  points?: Point[];
+  source?: 'manual' | 'ai';
+  identified?: boolean;
+  accepted?: boolean;
+}
+
+interface AceticAnnotatorProps {
+  imageUrl?: string;
+  imageUrls?: string[];
+  onAnnotationsChange?: (annotations: Annotation[]) => void;
+}
+
+export interface AceticAnnotatorHandle {
+  addAIAnnotations: (aiAnnotations: Annotation[]) => void;
+}
+
+const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange }, ref) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [tool, setTool] = useState<ShapeType>('rect');
+  const [color, setColor] = useState('#05998c');
+  const [labelInput, setLabelInput] = useState('');
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
+  const [currentAnnotation, setCurrentAnnotation] = useState<Annotation | null>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
+  const [polygonPoints, setPolygonPoints] = useState<Point[]>([]);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [isAnnotationsOpen, setIsAnnotationsOpen] = useState(true);
+  const [isLabelDropdownOpen, setIsLabelDropdownOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<'annotate' | 'findings'>('annotate');
+  const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
+  const [selectedFindings, setSelectedFindings] = useState<Record<string, boolean>>({});
+  const [additionalNotes, setAdditionalNotes] = useState('');
+
+  // Edit state for annotation list
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editLabel, setEditLabel] = useState('');
+  const [editColor, setEditColor] = useState('#05998c');
+  
+  // Annotation metadata state
+  const [annotationIdentified, setAnnotationIdentified] = useState<Record<string, boolean>>({});
+  const [annotationAccepted, setAnnotationAccepted] = useState<Record<string, boolean>>({});
+  
+  // Predefined label options for Acetic Acid step (ONLY CHANGE from ImageAnnotator)
+  const labelOptions = [
+    'Acetowhite',
+    'Mosaic',
+    'Punctation',
+    'Blood Vessel',
+    'Border'
+  ];
+
+  // Category-based findings structure
+  const findingsCategories = [
+    {
+      name: 'Thin Acetowhite Epithelium',
+      features: ['Dull white', 'Appears slowly', 'Fades quickly']
+    },
+    {
+      name: 'Borders',
+      features: ['Irregular', 'Geographic', 'Feathered edges', 'Sharp', 'Raised', 'Rolled edges', 'Inner border sign']
+    },
+    {
+      name: 'Vascular Pattern',
+      features: ['Fine punctation', 'Fine mosaic', 'Coarse punctation', 'Coarse mosaic']
+    },
+    {
+      name: 'Dense Acetowhite Epithelium',
+      features: ['Chalky white', 'Oyster white', 'Greyish white', 'Rapid onset', 'Persists']
+    },
+    {
+      name: 'Gland Openings',
+      features: ['Cuffed', 'Enlarged crypt openings']
+    },
+    {
+      name: 'Non-Specific Abnormal Findings',
+      features: ['Leukoplakia (keratosis)', 'Hyperkeratosis', 'Erosion']
+    }
+  ];
+
+  // Filter labels based on input
+  const filteredLabels = labelOptions.filter(label =>
+    label.toLowerCase().includes(labelInput.toLowerCase())
+  );
+
+  // Finding checkboxes
+  const toggleFinding = (label: string) => {
+    setSelectedFindings(prev => ({
+      ...prev,
+      [label]: !prev[label]
+    }));
+  };
+
+  const toggleCategory = (name: string) => {
+    setSelectedCategories(prev => ({
+      ...prev,
+      [name]: !prev[name]
+    }));
+  };
+
+  // Expose addAIAnnotations method via ref
+  useImperativeHandle(ref, () => ({
+    addAIAnnotations: (aiAnnotations: Annotation[]) => {
+      setAnnotations(prev => [...prev, ...aiAnnotations]);
+    }
+  }));
+
+  const images = imageUrls || (imageUrl ? [imageUrl] : []);
+  const currentImageUrl = images[selectedImageIndex];
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = currentImageUrl;
+    img.onload = () => {
+      setImageDimensions({ width: img.width, height: img.height });
+      setImageLoaded(true);
+      drawCanvas();
+    };
+  }, [currentImageUrl]);
+
+  useEffect(() => {
+    if (imageLoaded) drawCanvas();
+  }, [annotations, currentAnnotation, polygonPoints, imageLoaded]);
+
+  useEffect(() => {
+    if (onAnnotationsChange) onAnnotationsChange(annotations);
+  }, [annotations, onAnnotationsChange]);
+
+  const clearAnnotations = () => setAnnotations([]);
+  const deleteLastAnnotation = () => setAnnotations(prev => prev.slice(0, -1));
+
+  const getCanvasCoordinates = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = imageDimensions.width / canvas.width || 1;
+    const scaleY = imageDimensions.height / canvas.height || 1;
+    return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };
+  };
+
+  const startDrawing = (point: Point) => {
+    setStartPoint(point);
+    setIsDrawing(true);
+  };
+
+  const finishDrawingRectOrCircle = () => {
+    if (currentAnnotation && (currentAnnotation.width > 5 || currentAnnotation.height > 5)) {
+      const ann: Annotation = { ...currentAnnotation, id: Date.now().toString(), label: labelInput, source: 'manual', identified: false };
+      setAnnotations(prev => [...prev, ann]);
+    }
+    setIsDrawing(false);
+    setStartPoint(null);
+    setCurrentAnnotation(null);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const p = getCanvasCoordinates(e);
+    if (tool === 'polygon') {
+      // add point to polygon
+      setPolygonPoints(prev => [...prev, p]);
+      return;
+    }
+    startDrawing(p);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (tool === 'polygon') return; // polygon preview handled by polygonPoints
+    if (!isDrawing || !startPoint) return;
+    const p = getCanvasCoordinates(e);
+    const w = p.x - startPoint.x;
+    const h = p.y - startPoint.y;
+    const ann: Annotation = {
+      id: 'temp',
+      type: tool,
+      x: w > 0 ? startPoint.x : p.x,
+      y: h > 0 ? startPoint.y : p.y,
+      width: Math.abs(w),
+      height: Math.abs(h),
+      color,
+      label: labelInput
+    };
+    setCurrentAnnotation(ann);
+  };
+
+  const handleMouseUp = () => {
+    if (tool === 'polygon') return;
+    if (isDrawing) finishDrawingRectOrCircle();
+  };
+
+  const finishPolygon = () => {
+    if (polygonPoints.length < 3) return;
+    const bounds = getBoundsFromPoints(polygonPoints);
+    const ann: Annotation = {
+      id: Date.now().toString(),
+      type: 'polygon',
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      color,
+      label: labelInput,
+      points: polygonPoints,
+      source: 'manual',
+      identified: false
+    };
+    setAnnotations(prev => [...prev, ann]);
+    setPolygonPoints([]);
+    setLabelInput('');
+  };
+
+  const cancelPolygon = () => setPolygonPoints([]);
+
+  const getBoundsFromPoints = (pts: Point[]) => {
+    const xs = pts.map(p => p.x);
+    const ys = pts.map(p => p.y);
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    const maxX = Math.max(...xs);
+    const maxY = Math.max(...ys);
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  };
+
+  const drawCanvas = () => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const img = new Image();
+    img.src = currentImageUrl;
+    img.onload = () => {
+      const containerWidth = container.clientWidth;
+      const aspectRatio = img.height / img.width || 1;
+      const canvasHeight = containerWidth * aspectRatio;
+      canvas.width = containerWidth;
+      canvas.height = canvasHeight;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+      // draw saved annotations
+      annotations.forEach(a => drawAnnotation(ctx, a, canvas.width, canvas.height));
+
+      // draw polygon being created
+      if (polygonPoints.length > 0) {
+        drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
+      }
+
+      // draw current temp annotation
+      if (currentAnnotation) drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
+    };
+  };
+
+  const drawPreviewPolygon = (ctx: CanvasRenderingContext2D, pts: Point[], canvasWidth: number, canvasHeight: number, col: string) => {
+    const scaleX = canvasWidth / imageDimensions.width || 1;
+    const scaleY = canvasHeight / imageDimensions.height || 1;
+    ctx.strokeStyle = col;
+    ctx.lineWidth = 2;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath();
+    pts.forEach((p, i) => {
+      const x = p.x * scaleX;
+      const y = p.y * scaleY;
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+    ctx.setLineDash([]);
+  };
+
+  const drawAnnotation = (ctx: CanvasRenderingContext2D, annotation: Annotation, canvasWidth: number, canvasHeight: number) => {
+    const scaleX = canvasWidth / imageDimensions.width || 1;
+    const scaleY = canvasHeight / imageDimensions.height || 1;
+    ctx.strokeStyle = annotation.color;
+    ctx.lineWidth = 3;
+    ctx.setLineDash([]);
+    if (annotation.type === 'rect') {
+      ctx.strokeRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fillRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+    } else if (annotation.type === 'circle') {
+      const cx = (annotation.x + annotation.width / 2) * scaleX;
+      const cy = (annotation.y + annotation.height / 2) * scaleY;
+      const r = Math.max(annotation.width * scaleX, annotation.height * scaleY) / 2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fill();
+    } else if (annotation.type === 'polygon' && annotation.points) {
+      ctx.beginPath();
+      annotation.points.forEach((p, i) => {
+        const x = p.x * scaleX;
+        const y = p.y * scaleY;
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+      });
+      ctx.closePath();
+      ctx.stroke();
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fill();
+    }
+  };
+
+  // list editing
+  const startEdit = (ann: Annotation) => {
+    setEditingId(ann.id);
+    setEditLabel(ann.label || '');
+    setEditColor(ann.color || '#05998c');
+  };
+  const saveEdit = () => {
+    setAnnotations(prev => prev.map(a => a.id === editingId ? { ...a, label: editLabel, color: editColor } : a));
+    setEditingId(null);
+  };
+  const deleteAnnotation = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
+
+  const getShapeTypeName = (type: ShapeType): string => {
+    const typeMap: Record<ShapeType, string> = {
+      'rect': 'Rectangle',
+      'circle': 'Circle',
+      'polygon': 'Polygon'
+    };
+    return typeMap[type] || type;
+  };
+
+  return (
+    <div className="space-y-3 md:space-y-4">
+      {/* Image Selection - Show if multiple images */}
+      {images.length > 1 && (
+        <div>
+          <label className="block text-xs font-semibold text-gray-500 uppercase mb-2 md:mb-3">
+            Select Image
+          </label>
+          <div className="flex gap-2 overflow-x-auto pb-2">
+            {images.map((imgUrl, idx) => (
+              <button
+                key={idx}
+                onClick={() => setSelectedImageIndex(idx)}
+                className={`relative flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden border-2 transition-all ${
+                  selectedImageIndex === idx
+                    ? 'border-[#05998c] ring-2 ring-[#05998c]/50'
+                    : 'border-gray-300'
+                }`}
+              >
+                <img
+                  src={imgUrl}
+                  alt={`Image ${idx + 1}`}
+                  className="w-full h-full object-cover"
+                />
+                {/* Grey overlay for selected image */}
+                {selectedImageIndex === idx && (
+                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
+                    <div className="w-5 h-5 rounded-full bg-[#05998c] flex items-center justify-center">
+                      <div className="w-2 h-2 bg-white rounded-full" />
+                    </div>
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Tab Switcher */}
+      <div className="flex justify-center">
+        <div className="inline-flex bg-gray-100 rounded-lg p-1 border border-gray-300">
+          <button
+            onClick={() => setActiveTab('annotate')}
+            className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
+              activeTab === 'annotate'
+                ? 'bg-[#05998c] text-white shadow-sm'
+                : 'bg-transparent text-gray-700 hover:text-gray-900'
+            }`}
+          >
+            Annotate
+          </button>
+          <button
+            onClick={() => setActiveTab('findings')}
+            className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
+              activeTab === 'findings'
+                ? 'bg-[#05998c] text-white shadow-sm'
+                : 'bg-transparent text-gray-700 hover:text-gray-900'
+            }`}
+          >
+            Findings
+          </button>
+        </div>
+      </div>
+
+      {/* Annotate Tab */}
+      {activeTab === 'annotate' && (
+        <>
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-3">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 text-xs md:text-sm text-gray-600 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100 whitespace-nowrap">
+                <Wrench className="w-4 h-4 text-[#05998c]" />
+                <span className="font-medium">Tools</span>
+              </div>
+              <div className="flex items-center gap-1 md:gap-2">
+                <button onClick={() => setTool('rect')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'rect' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><SquareIcon className="inline w-4 h-4" /></button>
+                <button onClick={() => setTool('circle')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'circle' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><CircleIcon className="inline w-4 h-4" /></button>
+                <button onClick={() => setTool('polygon')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'polygon' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><Hexagon className="inline w-4 h-4" /></button>
+              </div>
+            </div>
+
+            <div className="flex flex-col md:flex-row md:items-center gap-2">
+              <div className="relative">
+                <input 
+                  aria-label="Annotation label" 
+                  placeholder="Search or select label" 
+                  value={labelInput} 
+                  onChange={e => setLabelInput(e.target.value)}
+                  onFocus={() => setIsLabelDropdownOpen(true)}
+                  onBlur={() => setTimeout(() => setIsLabelDropdownOpen(false), 200)}
+                  className="px-3 py-1 border rounded text-xs md:text-sm w-48" 
+                />
+                {isLabelDropdownOpen && filteredLabels.length > 0 && (
+                  <div className="absolute top-full left-0 mt-1 w-48 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto z-50">
+                    {filteredLabels.map((label, idx) => (
+                      <button
+                        key={idx}
+                        type="button"
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          setLabelInput(label);
+                          setIsLabelDropdownOpen(false);
+                        }}
+                        className="w-full text-left px-3 py-2 text-xs md:text-sm hover:bg-gray-100 transition-colors"
+                      >
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <input aria-label="Annotation color" type="color" value={color} onChange={e => setColor(e.target.value)} className="w-10 h-8 p-0 border rounded" />
+              <button onClick={deleteLastAnnotation} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-1 md:gap-2">
+                <Trash2 className="w-4 h-4" />
+                <span className="hidden md:inline">Undo</span>
+                <span className="inline md:hidden">Undo</span>
+              </button>
+              <button onClick={clearAnnotations} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Clear All</button>
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <div>
+              <div ref={containerRef} className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700">
+                <canvas ref={canvasRef} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} className="w-full cursor-crosshair" />
+              </div>
+            </div>
+          </div>
+
+          {tool === 'polygon' && (
+            <div className="flex flex-col md:flex-row md:items-center gap-2">
+              <span className="text-xs md:text-sm text-gray-600">Polygon points: {polygonPoints.length}</span>
+              <button onClick={finishPolygon} disabled={polygonPoints.length < 3} className="px-3 py-1 text-xs md:text-sm bg-green-600 text-white rounded disabled:opacity-50">Finish Polygon</button>
+              <button onClick={cancelPolygon} disabled={polygonPoints.length === 0} className="px-3 py-1 text-xs md:text-sm bg-gray-200 rounded">Cancel</button>
+            </div>
+          )}
+
+          {/* Annotations Table */}
+          <div className="border border-gray-200 rounded-lg overflow-hidden">
+            <button
+              onClick={() => setIsAnnotationsOpen(!isAnnotationsOpen)}
+              className="w-full flex items-center justify-between p-3 md:p-4 bg-gray-50 hover:bg-gray-100 transition-colors"
+            >
+              <div className="flex items-center gap-2">
+                <span className="text-xs md:text-sm font-semibold text-gray-700">
+                  Annotations ({annotations.length})
+                </span>
+              </div>
+              {isAnnotationsOpen ? (
+                <ChevronUp className="w-4 h-4 text-gray-600" />
+              ) : (
+                <ChevronDown className="w-4 h-4 text-gray-600" />
+              )}
+            </button>
+
+            {isAnnotationsOpen && (
+              <div className="overflow-x-auto border-t border-gray-200 max-h-96 overflow-y-auto">
+                {annotations.length === 0 ? (
+                  <div className="p-3 md:p-4 bg-white text-center">
+                    <p className="text-xs text-gray-500">No annotations yet. Draw on the image to create annotations.</p>
+                  </div>
+                ) : (
+                  <table className="w-full">
+                    <thead className="bg-gray-50 sticky top-0 border-b border-gray-200">
+                      <tr>
+                        <th className="px-3 md:px-4 py-2 text-left text-xs font-semibold text-gray-700">Annotation</th>
+                        <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Identified</th>
+                        <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Source</th>
+                        <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Action</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {annotations.map((a) => (
+                        <tr key={a.id} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+                          {/* Annotation Column - shown in color it was drawn */}
+                          <td className="px-3 md:px-4 py-3">
+                            {editingId === a.id ? (
+                              <div className="flex items-center gap-2">
+                                <input 
+                                  type="color" 
+                                  value={editColor} 
+                                  onChange={e => setEditColor(e.target.value)} 
+                                  className="w-6 h-6 rounded p-0 border cursor-pointer" 
+                                />
+                                <input 
+                                  value={editLabel} 
+                                  onChange={e => setEditLabel(e.target.value)} 
+                                  className="px-2 py-1 border rounded text-xs flex-1" 
+                                  placeholder="Label"
+                                />
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-3">
+                                <div className="w-6 h-6 rounded-sm flex-shrink-0" style={{ backgroundColor: a.color }} />
+                                <div>
+                                  <div className="text-sm font-medium text-gray-900">{a.label || '(no label)'}</div>
+                                  <div className="text-xs text-gray-500">{getShapeTypeName(a.type)}</div>
+                                </div>
+                              </div>
+                            )}
+                          </td>
+
+                          {/* Identified Checkbox Column */}
+                          <td className="px-3 md:px-4 py-3 text-center">
+                            <input
+                              type="checkbox"
+                              checked={annotationIdentified[a.id] || false}
+                              onChange={(e) => {
+                                setAnnotationIdentified(prev => ({
+                                  ...prev,
+                                  [a.id]: e.target.checked
+                                }));
+                              }}
+                              className="w-4 h-4 rounded border-gray-300 cursor-pointer"
+                            />
+                          </td>
+
+                          {/* Source Column (Manual/AI) */}
+                          <td className="px-3 md:px-4 py-3 text-center">
+                            <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                              a.source === 'ai' 
+                                ? 'bg-blue-100 text-blue-800' 
+                                : 'bg-gray-100 text-gray-800'
+                            }`}>
+                              {a.source === 'ai' ? 'AI' : 'Manual'}
+                            </span>
+                          </td>
+
+                          {/* Action Column - Accept/Reject for AI, Edit/Delete for Manual */}
+                          <td className="px-3 md:px-4 py-3">
+                            <div className="flex items-center justify-center gap-2">
+                              {editingId === a.id ? (
+                                <>
+                                  <button
+                                    onClick={saveEdit}
+                                    className="px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                                  >
+                                    Save
+                                  </button>
+                                  <button
+                                    onClick={() => setEditingId(null)}
+                                    className="px-2 py-1 text-xs font-medium bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors"
+                                  >
+                                    Cancel
+                                  </button>
+                                </>
+                              ) : a.source === 'ai' ? (
+                                <>
+                                  {annotationAccepted[a.id] === true ? (
+                                    <div className="flex items-center gap-2">
+                                      <span className="px-3 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
+                                        ✓ Accepted
+                                      </span>
+                                      <button
+                                        onClick={() => {
+                                          setAnnotationAccepted(prev => {
+                                            const next = { ...prev };
+                                            delete next[a.id];
+                                            return next;
+                                          });
+                                          setAnnotationIdentified(prev => {
+                                            const next = { ...prev };
+                                            delete next[a.id];
+                                            return next;
+                                          });
+                                        }}
+                                        className="px-2 py-1 text-[11px] font-medium bg-white border border-gray-200 text-gray-700 rounded hover:bg-gray-50 transition-colors"
+                                      >
+                                        Undo
+                                      </button>
+                                    </div>
+                                  ) : annotationAccepted[a.id] === false ? (
+                                    <span className="px-3 py-1 text-xs font-medium bg-red-100 text-red-700 rounded-full">
+                                      ✕ Rejected
+                                    </span>
+                                  ) : (
+                                    <>
+                                      <button
+                                        onClick={() => {
+                                          setAnnotationAccepted(prev => ({
+                                            ...prev,
+                                            [a.id]: true
+                                          }));
+                                          setAnnotationIdentified(prev => ({
+                                            ...prev,
+                                            [a.id]: true
+                                          }));
+                                        }}
+                                        className="px-2 py-1 text-xs font-medium bg-green-50 text-green-700 border border-green-200 rounded hover:bg-green-100 transition-colors"
+                                      >
+                                        ✓ Accept
+                                      </button>
+                                      <button
+                                        onClick={() => {
+                                          setAnnotations(prev => prev.filter(item => item.id !== a.id));
+                                          setAnnotationAccepted(prev => {
+                                            const next = { ...prev };
+                                            delete next[a.id];
+                                            return next;
+                                          });
+                                          setAnnotationIdentified(prev => {
+                                            const next = { ...prev };
+                                            delete next[a.id];
+                                            return next;
+                                          });
+                                        }}
+                                        className="px-2 py-1 text-xs font-medium bg-red-50 text-red-700 border border-red-200 rounded hover:bg-red-100 transition-colors"
+                                      >
+                                        ✕ Reject
+                                      </button>
+                                    </>
+                                  )}
+                                </>
+                              ) : (
+                                <>
+                                  <button
+                                    onClick={() => startEdit(a)}
+                                    className="px-2 py-1 text-xs font-medium bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors"
+                                  >
+                                    Edit
+                                  </button>
+                                  <button
+                                    onClick={() => deleteAnnotation(a.id)}
+                                    className="px-2 py-1 text-xs font-medium bg-red-50 text-red-700 border border-red-200 rounded hover:bg-red-100 transition-colors"
+                                  >
+                                    Delete
+                                  </button>
+                                </>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Findings Tab */}
+      {activeTab === 'findings' && (
+        <div className="flex flex-col md:flex-row gap-4 items-start">
+          {/* Left Side - Image Viewer */}
+          <div className="flex-1">
+            <div ref={containerRef} className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700">
+              <canvas ref={canvasRef} className="w-full cursor-default" style={{ pointerEvents: 'none' }} />
+            </div>
+          </div>
+
+          {/* Right Side - Clinical Findings Form */}
+          <div className="w-full md:w-96 bg-gradient-to-b from-white to-blue-50 border-2 border-[#05998c] rounded-xl shadow-lg p-5 md:p-6 max-h-[600px] overflow-y-auto">
+            {/* Header */}
+            <div className="mb-5 pb-4 border-b-2 border-[#05998c]">
+              <div className="flex items-center gap-2 mb-1">
+                <div className="w-1 h-5 bg-[#05998c] rounded-full"></div>
+                <p className="text-sm uppercase tracking-wider font-bold text-[#05998c]">Clinical Findings</p>
+              </div>
+              <p className="text-xs text-gray-600 ml-3">Select findings for each category</p>
+            </div>
+
+            <div className="space-y-5 text-sm text-gray-800">
+              {/* Render all categories with their features */}
+              {findingsCategories.map(category => (
+                <div key={category.name} className="space-y-3 pb-4 border-b border-gray-300">
+                  {/* Category as Checkbox (multi-select) */}
+                  <label className="flex items-center gap-3 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors -ml-2">
+                    <input
+                      type="checkbox"
+                      checked={!!selectedCategories[category.name]}
+                      onChange={() => toggleCategory(category.name)}
+                      className="w-4 h-4 cursor-pointer accent-[#05998c] flex-shrink-0"
+                    />
+                    <div className="flex items-center gap-2 flex-1">
+                      <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0"></span>
+                      <p className="font-bold text-gray-900">{category.name}</p>
+                    </div>
+                  </label>
+
+                  {/* Features as Checkboxes */}
+                  <div className="space-y-2 pl-8">
+                    {category.features.map(feature => (
+                      <label key={feature} className="flex items-center gap-3 text-gray-700 hover:text-[#05998c] cursor-pointer transition-colors">
+                        <input
+                          type="checkbox"
+                          checked={!!selectedFindings[feature]}
+                          onChange={() => toggleFinding(feature)}
+                          className="w-4 h-4 rounded border-[#05998c] cursor-pointer accent-[#05998c] flex-shrink-0"
+                        />
+                        <span className="text-sm">{feature}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ))}
+
+              {/* Additional Notes Section */}
+              <div className="space-y-2 pt-1">
+                <label className="flex items-center gap-2">
+                  <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0"></span>
+                  <p className="font-bold text-gray-900">Additional Notes</p>
+                </label>
+                <textarea
+                  value={additionalNotes}
+                  onChange={e => setAdditionalNotes(e.target.value)}
+                  placeholder="Add any clinical observations..."
+                  className="w-full border-2 border-[#05998c] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#05998c] focus:border-transparent bg-white/80"
+                  rows={3}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+AceticAnnotatorComponent.displayName = 'AceticAnnotator';
+
+export const AceticAnnotator = AceticAnnotatorComponent;
+export type { AceticAnnotatorProps, Annotation };

src/components/ChatBot.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { MessageCircle, X, Send, Bot } from 'lucide-react';
+
+interface Message {
+  id: string;
+  text: string;
+  sender: 'user' | 'bot';
+  timestamp: Date;
+}
+
+export function ChatBot() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: '1',
+      text: 'Hello! I\'m your AI assistant for colposcopy examinations. How can I help you today?',
+      sender: 'bot',
+      timestamp: new Date()
+    }
+  ]);
+  const [inputMessage, setInputMessage] = useState('');
+
+  const dummyResponses = [
+    'I can help you with colposcopy examination procedures and best practices.',
+    'For acetic acid application, wait 1-3 minutes before capturing images.',
+    'Lugol\'s iodine staining helps identify abnormal cervical tissue.',
+    'Green filter enhances vascular patterns in cervical images.',
+    'Biopsy should be taken from the most suspicious areas identified during examination.',
+    'Regular follow-up is important for patients with abnormal findings.',
+    'I can assist with image annotation and lesion identification.',
+    'Would you like me to explain any specific examination technique?'
+  ];
+
+  const handleSendMessage = () => {
+    if (!inputMessage.trim()) return;
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      text: inputMessage,
+      sender: 'user',
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInputMessage('');
+
+    // Simulate bot response after a short delay
+    setTimeout(() => {
+      const randomResponse = dummyResponses[Math.floor(Math.random() * dummyResponses.length)];
+      const botMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        text: randomResponse,
+        sender: 'bot',
+        timestamp: new Date()
+      };
+      setMessages(prev => [...prev, botMessage]);
+    }, 1000);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  return (
+    <>
+      {/* Chat Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="fixed bottom-6 right-6 bg-[#05998c] hover:bg-[#047569] text-white p-4 rounded-full shadow-lg transition-all duration-300 hover:scale-110 z-50"
+        aria-label="Open AI Chat Assistant"
+      >
+        {isOpen ? <X className="w-6 h-6" /> : <MessageCircle className="w-6 h-6" />}
+      </button>
+
+      {/* Chat Window */}
+      {isOpen && (
+        <div className="fixed bottom-20 right-6 w-80 h-96 bg-white rounded-lg shadow-2xl border border-gray-200 z-40 flex flex-col">
+          {/* Header */}
+          <div className="bg-[#05998c] text-white p-4 rounded-t-lg flex items-center gap-3">
+            <Bot className="w-6 h-6" />
+            <div>
+              <h3 className="font-semibold">AI Assistant</h3>
+              <p className="text-sm opacity-90">Colposcopy Expert</p>
+            </div>
+          </div>
+
+          {/* Messages */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div
+                  className={`max-w-[80%] p-3 rounded-lg text-sm ${
+                    message.sender === 'user'
+                      ? 'bg-[#05998c] text-white'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}
+                >
+                  {message.text}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Input */}
+          <div className="p-4 border-t border-gray-200">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={inputMessage}
+                onChange={(e) => setInputMessage(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Ask me anything about colposcopy..."
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent text-sm"
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={!inputMessage.trim()}
+                className="bg-[#05998c] hover:bg-[#047569] disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
+                aria-label="Send message"
+              >
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+type Props = {
+  compact?: boolean
+}
+
+export function Footer({ compact = false }: Props) {
+  const heightClass = compact ? 'h-12 md:h-14 lg:h-16' : 'h-16 md:h-20 lg:h-24'
+
+  return (
+    <footer className={`relative w-full ${heightClass} overflow-hidden`}>
+      {/* Background image – untouched */}
+      <img
+        src="/banner.jpeg"
+        alt="Footer background"
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+
+      {/* Content */}
+      <div className="relative z-10 h-full flex items-center justify-center text-white text-xs px-3 md:px-4">
+        {/* Center Text */}
+        <div className="text-center leading-tight">
+          <div className="text-xs md:text-sm">© 2025 Manalife. All rights reserved.</div>
+          <div className="text-xs hidden md:block">
+            Advancing innovation in women's health and digital pathology.
+          </div>
+        </div>
+
+        {/* Logo Bottom Right */}
+        <div className="absolute right-2 md:right-3 lg:right-4 bottom-1 md:bottom-2">
+          <img
+            src="/white_logo.png"
+            alt="Manalife logo"
+            className={compact ? 'h-5 md:h-6 lg:h-6' : 'h-6 md:h-7 lg:h-8'}
+          />
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Header.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+type Props = {
+  compact?: boolean
+}
+
+export function Header({ compact = false }: Props) {
+  const heightClass = compact ? 'h-16 md:h-20 lg:h-20' : 'h-24 md:h-28 lg:h-32'
+
+  return (
+    <header className={`relative w-full ${heightClass} overflow-hidden`}>
+      {/* Background image */}
+      <img
+        src="/banner.jpeg"
+        alt="Header background"
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+
+      {/* Content */}
+      <div className="relative z-10 h-full flex items-center px-3 md:px-6">
+        {/* Logo */}
+        <img
+          src="/white_logo.png"
+          alt="Manalife logo"
+          className={compact ? 'h-10 md:h-11 lg:h-12 mr-2 md:mr-3 flex-shrink-0' : 'h-12 md:h-14 lg:h-16 mr-2 md:mr-4 flex-shrink-0'}
+        />
+
+        {/* Title */}
+        <h1 className="text-white text-sm md:text-lg lg:text-xl font-semibold tracking-wide line-clamp-2">
+          <span className="font-bold">Pathora</span>{' '}
+          <span className="text-white/90 hidden md:inline">
+            | Manalife&apos;s Colposcopy Assistant
+          </span>
+        </h1>
+      </div>
+    </header>
+  )
+}

src/components/ImageAnnotator.tsx

@@ -0,0 +1,620 @@
+import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
+import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp } from 'lucide-react';
+
+type ShapeType = 'rect' | 'circle' | 'polygon';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface Annotation {
+  id: string;
+  type: ShapeType;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+  label?: string;
+  points?: Point[];
+  source?: 'manual' | 'ai';
+  identified?: boolean;
+  accepted?: boolean;
+}
+
+interface ImageAnnotatorProps {
+  imageUrl?: string;
+  imageUrls?: string[];
+  onAnnotationsChange?: (annotations: Annotation[]) => void;
+}
+
+export interface ImageAnnotatorHandle {
+  addAIAnnotations: (aiAnnotations: Annotation[]) => void;
+}
+
+const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange }, ref) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [tool, setTool] = useState<ShapeType>('rect');
+  const [color, setColor] = useState('#05998c');
+  const [labelInput, setLabelInput] = useState('');
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
+  const [currentAnnotation, setCurrentAnnotation] = useState<Annotation | null>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
+  const [polygonPoints, setPolygonPoints] = useState<Point[]>([]);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [isAnnotationsOpen, setIsAnnotationsOpen] = useState(true);
+  const [isLabelDropdownOpen, setIsLabelDropdownOpen] = useState(false);
+
+  // Edit state for annotation list
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editLabel, setEditLabel] = useState('');
+  const [editColor, setEditColor] = useState('#05998c');
+  
+  // Annotation metadata state
+  const [annotationIdentified, setAnnotationIdentified] = useState<Record<string, boolean>>({});
+  const [annotationAccepted, setAnnotationAccepted] = useState<Record<string, boolean>>({});
+  // Predefined label options
+  const labelOptions = [
+    'Cervix',
+    'SCJ',
+    'OS',
+    'TZ',
+    'Blood Discharge',
+    'Scarring',
+    'Growth',
+    'Ulcer',
+    'Inflammation',
+    'Polypoidal Growth',
+    'Cauliflower-like Growth',
+    'Fungating Mass'
+  ];
+
+  // Filter labels based on input
+  const filteredLabels = labelOptions.filter(label =>
+    label.toLowerCase().includes(labelInput.toLowerCase())
+  );
+
+  // Expose addAIAnnotations method via ref
+  useImperativeHandle(ref, () => ({
+    addAIAnnotations: (aiAnnotations: Annotation[]) => {
+      setAnnotations(prev => [...prev, ...aiAnnotations]);
+    }
+  }));
+
+  const images = imageUrls || (imageUrl ? [imageUrl] : []);
+  const currentImageUrl = images[selectedImageIndex];
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = currentImageUrl;
+    img.onload = () => {
+      setImageDimensions({ width: img.width, height: img.height });
+      setImageLoaded(true);
+      drawCanvas();
+    };
+  }, [currentImageUrl]);
+
+  useEffect(() => {
+    if (imageLoaded) drawCanvas();
+  }, [annotations, currentAnnotation, polygonPoints, imageLoaded]);
+
+  useEffect(() => {
+    if (onAnnotationsChange) onAnnotationsChange(annotations);
+  }, [annotations, onAnnotationsChange]);
+
+  const clearAnnotations = () => setAnnotations([]);
+  const deleteLastAnnotation = () => setAnnotations(prev => prev.slice(0, -1));
+
+  const getCanvasCoordinates = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = imageDimensions.width / canvas.width || 1;
+    const scaleY = imageDimensions.height / canvas.height || 1;
+    return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };
+  };
+
+  const startDrawing = (point: Point) => {
+    setStartPoint(point);
+    setIsDrawing(true);
+  };
+
+  const finishDrawingRectOrCircle = () => {
+    if (currentAnnotation && (currentAnnotation.width > 5 || currentAnnotation.height > 5)) {
+      const ann: Annotation = { ...currentAnnotation, id: Date.now().toString(), label: labelInput, source: 'manual', identified: true };
+      setAnnotations(prev => [...prev, ann]);
+    }
+    setIsDrawing(false);
+    setStartPoint(null);
+    setCurrentAnnotation(null);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const p = getCanvasCoordinates(e);
+    if (tool === 'polygon') {
+      // add point to polygon
+      setPolygonPoints(prev => [...prev, p]);
+      return;
+    }
+    startDrawing(p);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (tool === 'polygon') return; // polygon preview handled by polygonPoints
+    if (!isDrawing || !startPoint) return;
+    const p = getCanvasCoordinates(e);
+    const w = p.x - startPoint.x;
+    const h = p.y - startPoint.y;
+    const ann: Annotation = {
+      id: 'temp',
+      type: tool,
+      x: w > 0 ? startPoint.x : p.x,
+      y: h > 0 ? startPoint.y : p.y,
+      width: Math.abs(w),
+      height: Math.abs(h),
+      color,
+      label: labelInput
+    };
+    setCurrentAnnotation(ann);
+  };
+
+  const handleMouseUp = () => {
+    if (tool === 'polygon') return;
+    if (isDrawing) finishDrawingRectOrCircle();
+  };
+
+  const finishPolygon = () => {
+    if (polygonPoints.length < 3) return;
+    const bounds = getBoundsFromPoints(polygonPoints);
+    const ann: Annotation = {
+      id: Date.now().toString(),
+      type: 'polygon',
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      color,
+      label: labelInput,
+      points: polygonPoints,
+      source: 'manual',
+      identified: true
+    };
+    setAnnotations(prev => [...prev, ann]);
+    setPolygonPoints([]);
+    setLabelInput('');
+  };
+
+  const cancelPolygon = () => setPolygonPoints([]);
+
+  const getBoundsFromPoints = (pts: Point[]) => {
+    const xs = pts.map(p => p.x);
+    const ys = pts.map(p => p.y);
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    const maxX = Math.max(...xs);
+    const maxY = Math.max(...ys);
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  };
+
+  const drawCanvas = () => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const img = new Image();
+    img.src = currentImageUrl;
+    img.onload = () => {
+      const containerWidth = container.clientWidth;
+      const aspectRatio = img.height / img.width || 1;
+      const canvasHeight = containerWidth * aspectRatio;
+      canvas.width = containerWidth;
+      canvas.height = canvasHeight;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+      // draw saved annotations
+      annotations.forEach(a => drawAnnotation(ctx, a, canvas.width, canvas.height));
+
+      // draw polygon being created
+      if (polygonPoints.length > 0) {
+        drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
+      }
+
+      // draw current temp annotation
+      if (currentAnnotation) drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
+    };
+  };
+
+  const drawPreviewPolygon = (ctx: CanvasRenderingContext2D, pts: Point[], canvasWidth: number, canvasHeight: number, col: string) => {
+    const scaleX = canvasWidth / imageDimensions.width || 1;
+    const scaleY = canvasHeight / imageDimensions.height || 1;
+    ctx.strokeStyle = col;
+    ctx.lineWidth = 2;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath();
+    pts.forEach((p, i) => {
+      const x = p.x * scaleX;
+      const y = p.y * scaleY;
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+    ctx.setLineDash([]);
+  };
+
+  const drawAnnotation = (ctx: CanvasRenderingContext2D, annotation: Annotation, canvasWidth: number, canvasHeight: number) => {
+    const scaleX = canvasWidth / imageDimensions.width || 1;
+    const scaleY = canvasHeight / imageDimensions.height || 1;
+    ctx.strokeStyle = annotation.color;
+    ctx.lineWidth = 3;
+    ctx.setLineDash([]);
+    if (annotation.type === 'rect') {
+      ctx.strokeRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fillRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+    } else if (annotation.type === 'circle') {
+      const cx = (annotation.x + annotation.width / 2) * scaleX;
+      const cy = (annotation.y + annotation.height / 2) * scaleY;
+      const r = Math.max(annotation.width * scaleX, annotation.height * scaleY) / 2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fill();
+    } else if (annotation.type === 'polygon' && annotation.points) {
+      ctx.beginPath();
+      annotation.points.forEach((p, i) => {
+        const x = p.x * scaleX;
+        const y = p.y * scaleY;
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+      });
+      ctx.closePath();
+      ctx.stroke();
+      ctx.fillStyle = annotation.color + '20';
+      ctx.fill();
+    }
+  };
+
+  // list editing
+  const startEdit = (ann: Annotation) => {
+    setEditingId(ann.id);
+    setEditLabel(ann.label || '');
+    setEditColor(ann.color || '#05998c');
+  };
+  const saveEdit = () => {
+    setAnnotations(prev => prev.map(a => a.id === editingId ? { ...a, label: editLabel, color: editColor } : a));
+    setEditingId(null);
+  };
+  const deleteAnnotation = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
+
+  const getShapeTypeName = (type: ShapeType): string => {
+    const typeMap: Record<ShapeType, string> = {
+      'rect': 'Rectangle',
+      'circle': 'Circle',
+      'polygon': 'Polygon'
+    };
+    return typeMap[type] || type;
+  };
+
+  return (
+    <div className="space-y-3 md:space-y-4">
+      {/* Image Selection - Show if multiple images */}
+      {images.length > 1 && (
+        <div>
+          <label className="block text-xs font-semibold text-gray-500 uppercase mb-2 md:mb-3">
+            Select Image
+          </label>
+          <div className="flex gap-2 overflow-x-auto pb-2">
+            {images.map((imgUrl, idx) => (
+              <button
+                key={idx}
+                onClick={() => setSelectedImageIndex(idx)}
+                className={`relative flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden border-2 transition-all ${
+                  selectedImageIndex === idx
+                    ? 'border-[#05998c] ring-2 ring-[#05998c]/50'
+                    : 'border-gray-300'
+                }`}
+              >
+                <img
+                  src={imgUrl}
+                  alt={`Image ${idx + 1}`}
+                  className="w-full h-full object-cover"
+                />
+                {/* Grey overlay for selected image */}
+                {selectedImageIndex === idx && (
+                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
+                    <div className="w-5 h-5 rounded-full bg-[#05998c] flex items-center justify-center">
+                      <div className="w-2 h-2 bg-white rounded-full" />
+                    </div>
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-3">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 text-xs md:text-sm text-gray-600 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100 whitespace-nowrap">
+            <Wrench className="w-4 h-4 text-[#05998c]" />
+            <span className="font-medium">Tools</span>
+          </div>
+          <div className="flex items-center gap-1 md:gap-2">
+            <button onClick={() => setTool('rect')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'rect' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><SquareIcon className="inline w-4 h-4" /></button>
+            <button onClick={() => setTool('circle')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'circle' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><CircleIcon className="inline w-4 h-4" /></button>
+            <button onClick={() => setTool('polygon')} className={`px-2 md:px-3 py-1 rounded text-xs md:text-sm ${tool === 'polygon' ? 'bg-gray-800 text-white' : 'bg-white text-gray-700'} border`}><Hexagon className="inline w-4 h-4" /></button>
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row md:items-center gap-2">
+          <div className="relative">
+            <input 
+              aria-label="Annotation label" 
+              placeholder="Search or select label" 
+              value={labelInput} 
+              onChange={e => setLabelInput(e.target.value)}
+              onFocus={() => setIsLabelDropdownOpen(true)}
+              onBlur={() => setTimeout(() => setIsLabelDropdownOpen(false), 200)}
+              className="px-3 py-1 border rounded text-xs md:text-sm w-48" 
+            />
+            {isLabelDropdownOpen && filteredLabels.length > 0 && (
+              <div className="absolute top-full left-0 mt-1 w-48 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto z-50">
+                {filteredLabels.map((label, idx) => (
+                  <button
+                    key={idx}
+                    type="button"
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      setLabelInput(label);
+                      setIsLabelDropdownOpen(false);
+                    }}
+                    className="w-full text-left px-3 py-2 text-xs md:text-sm hover:bg-gray-100 transition-colors"
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <input aria-label="Annotation color" type="color" value={color} onChange={e => setColor(e.target.value)} className="w-10 h-8 p-0 border rounded" />
+          <button onClick={deleteLastAnnotation} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-1 md:gap-2">
+            <Trash2 className="w-4 h-4" />
+            <span className="hidden md:inline">Undo</span>
+            <span className="inline md:hidden">Undo</span>
+          </button>
+          <button onClick={clearAnnotations} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Clear All</button>
+        </div>
+      </div>
+
+      <div ref={containerRef} className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700">
+        <canvas ref={canvasRef} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} className="w-full cursor-crosshair" />
+        {/* show guide */}
+        {annotations.length === 0 && polygonPoints.length === 0 && !isDrawing && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none text-white/70 text-xs md:text-sm px-4">
+        
+          </div>
+        )}
+      </div>
+
+      {tool === 'polygon' && (
+        <div className="flex flex-col md:flex-row md:items-center gap-2">
+          <span className="text-xs md:text-sm text-gray-600">Polygon points: {polygonPoints.length}</span>
+          <button onClick={finishPolygon} disabled={polygonPoints.length < 3} className="px-3 py-1 text-xs md:text-sm bg-green-600 text-white rounded disabled:opacity-50">Finish Polygon</button>
+          <button onClick={cancelPolygon} disabled={polygonPoints.length === 0} className="px-3 py-1 text-xs md:text-sm bg-gray-200 rounded">Cancel</button>
+        </div>
+      )}
+
+      {/* Annotations Table */}
+      <div className="border border-gray-200 rounded-lg overflow-hidden">
+        <button
+          onClick={() => setIsAnnotationsOpen(!isAnnotationsOpen)}
+          className="w-full flex items-center justify-between p-3 md:p-4 bg-gray-50 hover:bg-gray-100 transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-xs md:text-sm font-semibold text-gray-700">
+              Annotations ({annotations.length})
+            </span>
+          </div>
+          {isAnnotationsOpen ? (
+            <ChevronUp className="w-4 h-4 text-gray-600" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-gray-600" />
+          )}
+        </button>
+
+        {isAnnotationsOpen && (
+          <div className="overflow-x-auto border-t border-gray-200 max-h-96 overflow-y-auto">
+            {annotations.length === 0 ? (
+              <div className="p-3 md:p-4 bg-white text-center">
+                <p className="text-xs text-gray-500">No annotations yet. Draw on the image to create annotations.</p>
+              </div>
+            ) : (
+              <table className="w-full">
+                <thead className="bg-gray-50 sticky top-0 border-b border-gray-200">
+                  <tr>
+                    <th className="px-3 md:px-4 py-2 text-left text-xs font-semibold text-gray-700">Annotation</th>
+                    <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Identified</th>
+                    <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Source</th>
+                    <th className="px-3 md:px-4 py-2 text-center text-xs font-semibold text-gray-700">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {annotations.map((a) => (
+                    <tr key={a.id} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+                      {/* Annotation Column - shown in color it was drawn */}
+                      <td className="px-3 md:px-4 py-3">
+                        {editingId === a.id ? (
+                          <div className="flex items-center gap-2">
+                            <input 
+                              type="color" 
+                              value={editColor} 
+                              onChange={e => setEditColor(e.target.value)} 
+                              className="w-6 h-6 rounded p-0 border cursor-pointer" 
+                            />
+                            <input 
+                              value={editLabel} 
+                              onChange={e => setEditLabel(e.target.value)} 
+                              className="px-2 py-1 border rounded text-xs flex-1" 
+                              placeholder="Label"
+                            />
+                          </div>
+                        ) : (
+                          <div className="flex items-center gap-3">
+                            <div className="w-6 h-6 rounded-sm flex-shrink-0" style={{ backgroundColor: a.color }} />
+                            <div>
+                              <div className="text-sm font-medium text-gray-900">{a.label || '(no label)'}</div>
+                              <div className="text-xs text-gray-500">{getShapeTypeName(a.type)}</div>
+                            </div>
+                          </div>
+                        )}
+                      </td>
+
+                      {/* Identified Checkbox Column */}
+                      <td className="px-3 md:px-4 py-3 text-center">
+                        <input
+                          type="checkbox"
+                          checked={a.identified || false}
+                          onChange={(e) => {
+                            setAnnotations(prev => prev.map(ann => 
+                              ann.id === a.id ? { ...ann, identified: e.target.checked } : ann
+                            ));
+                          }}
+                          className="w-4 h-4 rounded border-gray-300 cursor-pointer"
+                        />
+                      </td>
+
+                      {/* Source Column (Manual/AI) */}
+                      <td className="px-3 md:px-4 py-3 text-center">
+                        <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                          a.source === 'ai' 
+                            ? 'bg-blue-100 text-blue-800' 
+                            : 'bg-gray-100 text-gray-800'
+                        }`}>
+                          {a.source === 'ai' ? 'AI' : 'Manual'}
+                        </span>
+                      </td>
+
+                      {/* Action Column - Accept/Reject for AI, Edit/Delete for Manual */}
+                      <td className="px-3 md:px-4 py-3">
+                        <div className="flex items-center justify-center gap-2">
+                          {editingId === a.id ? (
+                            <>
+                              <button
+                                onClick={saveEdit}
+                                className="px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                              >
+                                Save
+                              </button>
+                              <button
+                                onClick={() => setEditingId(null)}
+                                className="px-2 py-1 text-xs font-medium bg-gray-300 text-gray-800 rounded hover:bg-gray-400 transition-colors"
+                              >
+                                Cancel
+                              </button>
+                            </>
+                          ) : a.source === 'ai' ? (
+                            <>
+                              {annotationAccepted[a.id] === true ? (
+                                <div className="flex items-center gap-2">
+                                  <span className="px-3 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
+                                    ✓ Accepted
+                                  </span>
+                                  <button
+                                    onClick={() => {
+                                      setAnnotationAccepted(prev => {
+                                        const next = { ...prev };
+                                        delete next[a.id];
+                                        return next;
+                                      });
+                                      setAnnotationIdentified(prev => {
+                                        const next = { ...prev };
+                                        delete next[a.id];
+                                        return next;
+                                      });
+                                    }}
+                                    className="px-2 py-1 text-[11px] font-medium bg-white border border-gray-200 text-gray-700 rounded hover:bg-gray-50 transition-colors"
+                                  >
+                                    Undo
+                                  </button>
+                                </div>
+                              ) : annotationAccepted[a.id] === false ? (
+                                <span className="px-3 py-1 text-xs font-medium bg-red-100 text-red-700 rounded-full">
+                                  ✕ Rejected
+                                </span>
+                              ) : (
+                                <>
+                                  <button
+                                    onClick={() => {
+                                      setAnnotationAccepted(prev => ({
+                                        ...prev,
+                                        [a.id]: true
+                                      }));
+                                      setAnnotationIdentified(prev => ({
+                                        ...prev,
+                                        [a.id]: true
+                                      }));
+                                    }}
+                                    className="px-2 py-1 text-xs font-medium bg-green-50 text-green-700 border border-green-200 rounded hover:bg-green-100 transition-colors"
+                                  >
+                                    ✓ Accept
+                                  </button>
+                                  <button
+                                    onClick={() => {
+                                      setAnnotations(prev => prev.filter(item => item.id !== a.id));
+                                      setAnnotationAccepted(prev => {
+                                        const next = { ...prev };
+                                        delete next[a.id];
+                                        return next;
+                                      });
+                                      setAnnotationIdentified(prev => {
+                                        const next = { ...prev };
+                                        delete next[a.id];
+                                        return next;
+                                      });
+                                    }}
+                                    className="px-2 py-1 text-xs font-medium bg-red-50 text-red-700 border border-red-200 rounded hover:bg-red-100 transition-colors"
+                                  >
+                                    ✕ Reject
+                                  </button>
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            <>
+                              <button
+                                onClick={() => startEdit(a)}
+                                className="px-2 py-1 text-xs font-medium bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors"
+                              >
+                                Edit
+                              </button>
+                              <button
+                                onClick={() => deleteAnnotation(a.id)}
+                                className="px-2 py-1 text-xs font-medium bg-red-50 text-red-700 border border-red-200 rounded hover:bg-red-100 transition-colors"
+                              >
+                                Delete
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+ImageAnnotatorComponent.displayName = 'ImageAnnotator';
+
+export const ImageAnnotator = ImageAnnotatorComponent;

src/components/ImagingObservations.tsx

@@ -0,0 +1,328 @@
+import React, { useState } from 'react';
+import { CheckSquare, FileText } from 'lucide-react';
+interface ImagingObservationsProps {
+  onObservationsChange?: (observations: any) => void;
+  layout?: 'vertical' | 'horizontal';
+}
+export function ImagingObservations({
+  onObservationsChange,
+  layout = 'vertical'
+}: ImagingObservationsProps) {
+  const [observations, setObservations] = useState({
+    obviousGrowths: false,
+    contactBleeding: false,
+    irregularSurface: false,
+    other: false,
+    additionalNotes: '',
+    // Examination Adequacy
+    cervixFullyVisible: null as null | 'Yes' | 'No',
+    obscuredBy: {
+      blood: false,
+      inflammation: false,
+      discharge: false,
+      scarring: false
+    },
+    adequacyNotes: '',
+    // SCJ & TZ
+    scjVisibility: 'Completely visible',
+    scjNotes: '',
+    tzType: 'TZ 1',
+    // Native exam
+    suspiciousAtNativeView: false,
+    skipStainInterpretation: false
+  });
+  const handleCheckboxChange = (field: string) => {
+    const updated = {
+      ...observations,
+      [field]: !observations[field as keyof typeof observations]
+    };
+    setObservations(updated);
+    if (onObservationsChange) {
+      onObservationsChange(updated);
+    }
+  };
+  const handleFieldChange = (field: string, value: any) => {
+    const updated = {
+      ...observations,
+      [field]: value
+    };
+    setObservations(updated);
+    if (onObservationsChange) {
+      onObservationsChange(updated);
+    }
+  };
+  const handleObscuredChange = (key: string) => {
+    const updatedObscured = {
+      ...observations.obscuredBy,
+      [key]: !observations.obscuredBy[key as keyof typeof observations.obscuredBy]
+    };
+    const updated = {
+      ...observations,
+      obscuredBy: updatedObscured
+    };
+    setObservations(updated);
+    if (onObservationsChange) onObservationsChange(updated);
+  };
+  const handleNotesChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const updated = {
+      ...observations,
+      additionalNotes: e.target.value
+    };
+    setObservations(updated);
+    if (onObservationsChange) {
+      onObservationsChange(updated);
+    }
+  };
+  return <div className={`bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden ${layout === 'vertical' ? 'h-full flex flex-col' : ''}`}>
+      <div className="bg-teal-50/50 p-3 md:p-4 border-b border-teal-100 flex items-center gap-2 md:gap-3">
+        <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center flex-shrink-0">
+          <CheckSquare className="w-4 h-4 md:w-5 md:h-5" />
+        </div>
+        <h3 className="font-bold text-sm md:text-base text-[#0A2540]">Visual Observations</h3>
+      </div>
+
+      <div className={`p-4 md:p-6 ${layout === 'horizontal' ? 'space-y-6 flex-1 overflow-y-auto' : 'space-y-4 md:space-y-6 flex-1 overflow-y-auto'}`}>
+        {layout === 'horizontal' && (
+          <div className="space-y-6">
+            {/* Row: Cervix fully visible */}
+            <div className="pb-4 border-b border-gray-100">
+              <div className="flex flex-col md:flex-row md:items-center gap-3 md:gap-6">
+                <label className="text-sm md:text-base font-semibold text-gray-900 min-w-fit">Cervix fully visible?</label>
+                <div className="flex items-center gap-2">
+                  {['Yes', 'No'].map(opt => (
+                    <label key={opt} className={`px-4 py-2 rounded-lg border cursor-pointer transition-all text-xs md:text-sm font-medium ${observations.cervixFullyVisible === opt ? 'border-teal-300 bg-teal-50 text-teal-700' : 'border-gray-200 bg-gray-50 text-gray-600'}`}>
+                      <input type="radio" name="cervixVisible" checked={observations.cervixFullyVisible === opt} onChange={() => handleFieldChange('cervixFullyVisible', opt)} className="mr-2" />
+                      {opt}
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Row: Obscured by */}
+            <div className="pb-4 border-b border-gray-100">
+              <label className="block text-sm md:text-base font-semibold text-gray-900 mb-3">Obscured by:</label>
+              <div className="flex flex-wrap gap-2">
+                {['blood', 'inflammation', 'discharge', 'scarring'].map(k => <label key={k} className="flex items-center gap-2 px-4 py-2 rounded-lg border bg-gray-50 border-gray-200 cursor-pointer hover:border-teal-200 transition-all">
+                    <input type="checkbox" checked={observations.obscuredBy[k as keyof typeof observations.obscuredBy]} onChange={() => handleObscuredChange(k)} className="w-4 h-4" />
+                    <span className="text-sm capitalize">{k}</span>
+                  </label>)}
+              </div>
+            </div>
+
+            {/* Row: Adequacy notes */}
+            <div className="pb-4 border-b border-gray-100">
+              <label className="block text-sm font-semibold text-gray-900 mb-2">Adequacy Notes</label>
+              <textarea value={observations.adequacyNotes} onChange={e => handleFieldChange('adequacyNotes', e.target.value)} rows={2} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm focus:border-teal-300 focus:ring-2 focus:ring-teal-100 outline-none transition-all" placeholder="Notes about adequacy..." />
+            </div>
+
+            {/* Row: SCJ Visibility */}
+            <div className="pb-4 border-b border-gray-100">
+              <label className="block text-sm md:text-base font-semibold text-gray-900 mb-3">SCJ Visibility</label>
+              <div className="flex flex-wrap items-center gap-2">
+                {['Completely visible', 'Partially visible', 'Not visible'].map(opt => <label key={opt} className={`px-4 py-2 rounded-lg border cursor-pointer transition-all text-xs md:text-sm font-medium ${observations.scjVisibility === opt ? 'border-teal-300 bg-teal-50 text-teal-700' : 'border-gray-200 bg-gray-50 text-gray-600'}`}>
+                    <input type="radio" name="scj" checked={observations.scjVisibility === opt} onChange={() => handleFieldChange('scjVisibility', opt)} className="mr-2" />
+                    {opt}
+                  </label>)}
+              </div>
+              <div className="mt-3">
+                <textarea value={observations.scjNotes} onChange={e => handleFieldChange('scjNotes', e.target.value)} rows={2} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm focus:border-teal-300 focus:ring-2 focus:ring-teal-100 outline-none transition-all" placeholder="SCJ notes..." />
+              </div>
+            </div>
+
+            {/* Row: Transformation Zone Type */}
+            <div className="pb-4 border-b border-gray-100">
+              <label className="block text-sm md:text-base font-semibold text-gray-900 mb-3">Transformation Zone (TZ) Type</label>
+              <div className="flex items-center gap-2">
+                {['TZ 1', 'TZ 2', 'TZ 3'].map(tz => (
+                  <label key={tz} className={`px-4 py-2 rounded-lg border cursor-pointer transition-all text-xs md:text-sm font-medium ${observations.tzType === tz ? 'border-teal-300 bg-teal-50 text-teal-700' : 'border-gray-200 bg-gray-50 text-gray-600'}`}>
+                    <input type="radio" name="tzType" checked={observations.tzType === tz} onChange={() => handleFieldChange('tzType', tz)} className="mr-2" />
+                    {tz}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Row: Native (Untreated) Examination */}
+            <div className="pb-4 border-b border-gray-100">
+              <label className="block text-sm md:text-base font-semibold text-gray-900 mb-3">Native (Untreated) Examination</label>
+              <label className="flex items-center gap-3 cursor-pointer">
+                <input type="checkbox" checked={observations.suspiciousAtNativeView} onChange={() => {
+                const next = !observations.suspiciousAtNativeView;
+                const updated = {
+                  ...observations,
+                  suspiciousAtNativeView: next,
+                  skipStainInterpretation: next
+                };
+                setObservations(updated);
+                if (onObservationsChange) onObservationsChange(updated);
+              }} className="w-5 h-5 rounded text-teal-600 border-gray-300" />
+                <span className="text-sm font-medium text-gray-900">Suspicious at Native View</span>
+              </label>
+              {observations.suspiciousAtNativeView && <div className="mt-3">
+                  <textarea value={observations.adequacyNotes} onChange={e => handleFieldChange('adequacyNotes', e.target.value)} rows={2} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm focus:border-teal-300 focus:ring-2 focus:ring-teal-100 outline-none transition-all" placeholder="Additional notes..." />
+                </div>}
+            </div>
+          </div>
+        )}
+
+        {layout !== 'horizontal' && (
+          <>
+            {/* Default Vertical Layout - kept for non-native pages */}
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2 md:mb-3">
+                Examination Adequacy Checklist
+              </label>
+              <div className="space-y-2 md:space-y-3">
+                <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4">
+                  <label className="text-xs md:text-sm font-medium whitespace-nowrap">Cervix fully visible?</label>
+                  <div className="flex items-center gap-2">
+                    {['Yes', 'No'].map(opt => (
+                      <label key={opt} className={`px-3 py-1 rounded-lg border cursor-pointer text-xs md:text-sm ${observations.cervixFullyVisible === opt ? 'bg-teal-50 border-teal-200' : 'bg-gray-50 border-gray-200'}`}>
+                        <input type="radio" name="cervixVisibleVertical" checked={observations.cervixFullyVisible === opt} onChange={() => handleFieldChange('cervixFullyVisible', opt)} className="mr-2" />
+                        {opt}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <span className="block text-sm font-semibold text-gray-900">Obscured by:</span>
+                  <div className="mt-2 grid grid-cols-2 gap-2">
+                    {['blood', 'inflammation', 'discharge', 'scarring'].map(k => <label key={k} className="flex items-center gap-2 p-3 rounded-lg border bg-gray-50 border-gray-200 cursor-pointer">
+                        <input type="checkbox" checked={observations.obscuredBy[k as keyof typeof observations.obscuredBy]} onChange={() => handleObscuredChange(k)} className="w-4 h-4" />
+                        <span className="text-sm capitalize">{k}</span>
+                      </label>)}
+                  </div>
+                </div>
+
+                <div className="pt-2">
+                  <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">Additional notes</label>
+                  <textarea value={observations.adequacyNotes} onChange={e => handleFieldChange('adequacyNotes', e.target.value)} rows={3} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm" placeholder="Notes about adequacy..." />
+                </div>
+              </div>
+            </div>
+
+            {/* SCJ Visibility and TZ */}
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">SCJ Visibility</label>
+              <div className="flex items-center gap-3">
+                {['Completely visible', 'Partially visible', 'Not visible'].map(opt => <label key={opt} className={`p-3 rounded-lg border ${observations.scjVisibility === opt ? 'border-teal-200 bg-teal-50' : 'border-gray-200 bg-gray-50'} cursor-pointer`}>
+                    <input type="radio" name="scj" checked={observations.scjVisibility === opt} onChange={() => handleFieldChange('scjVisibility', opt)} className="mr-2" />
+                    <span className="text-sm">{opt}</span>
+                  </label>)}
+              </div>
+              <div className="mt-3">
+                <textarea value={observations.scjNotes} onChange={e => handleFieldChange('scjNotes', e.target.value)} rows={2} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm" placeholder="SCJ notes..." />
+              </div>
+
+              <div className="mt-4">
+                <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">Transformation Zone (TZ) Type</label>
+                <div className="flex items-center gap-2">
+                  {['TZ 1', 'TZ 2', 'TZ 3'].map(tz => (
+                    <label key={tz} className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${observations.tzType === tz ? 'border-teal-200 bg-teal-50' : 'border-gray-200 bg-gray-50'}`}>
+                      <input type="radio" name="tzTypeVertical" checked={observations.tzType === tz} onChange={() => handleFieldChange('tzType', tz)} className="mr-2" />
+                      {tz}
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Native (Untreated) Examination */}
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">Native (Untreated) Examination (STEP 2)</label>
+              <div className="flex items-center gap-3">
+                <label className="flex items-center gap-2">
+                  <input type="checkbox" checked={observations.suspiciousAtNativeView} onChange={() => {
+                  const next = !observations.suspiciousAtNativeView;
+                  const updated = {
+                    ...observations,
+                    suspiciousAtNativeView: next,
+                    skipStainInterpretation: next
+                  };
+                  setObservations(updated);
+                  if (onObservationsChange) onObservationsChange(updated);
+                }} className="w-4 h-4" />
+                  <span className="text-sm font-medium">Suspicious at Native View</span>
+                </label>
+              </div>
+              {observations.suspiciousAtNativeView && <div className="mt-3">
+                  <textarea value={observations.adequacyNotes} onChange={e => handleFieldChange('adequacyNotes', e.target.value)} rows={2} className="w-full px-3 py-2 bg-gray-50 border-2 border-gray-200 rounded-lg text-sm" placeholder="Additional notes..." />
+                </div>}
+            </div>
+          </>
+        )}
+
+        <div>
+          <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">
+            Clinical Findings
+          </label>
+          <div className="space-y-3">
+            <label className="flex items-start p-4 rounded-lg border-2 border-gray-200 hover:border-[#05998c]/50 cursor-pointer transition-all bg-gray-50/50 group">
+              <input type="checkbox" checked={observations.obviousGrowths} onChange={() => handleCheckboxChange('obviousGrowths')} className="w-5 h-5 rounded text-[#05998c] focus:ring-[#05998c] border-gray-300 mt-0.5" />
+              <div className="ml-3">
+                <span className="block text-sm font-semibold text-gray-900 group-hover:text-[#0A2540]">
+                  Obvious growths / ulcers
+                </span>
+                <span className="block text-xs text-gray-500 mt-0.5">
+                  Visible abnormal tissue growth or ulceration
+                </span>
+              </div>
+            </label>
+
+            <label className="flex items-start p-4 rounded-lg border-2 border-gray-200 hover:border-[#05998c]/50 cursor-pointer transition-all bg-gray-50/50 group">
+              <input type="checkbox" checked={observations.contactBleeding} onChange={() => handleCheckboxChange('contactBleeding')} className="w-5 h-5 rounded text-[#05998c] focus:ring-[#05998c] border-gray-300 mt-0.5" />
+              <div className="ml-3">
+                <span className="block text-sm font-semibold text-gray-900 group-hover:text-[#0A2540]">
+                  Contact bleeding
+                </span>
+                <span className="block text-xs text-gray-500 mt-0.5">
+                  Bleeding upon contact with instrument
+                </span>
+              </div>
+            </label>
+
+            <label className="flex items-start p-4 rounded-lg border-2 border-gray-200 hover:border-[#05998c]/50 cursor-pointer transition-all bg-gray-50/50 group">
+              <input type="checkbox" checked={observations.irregularSurface} onChange={() => handleCheckboxChange('irregularSurface')} className="w-5 h-5 rounded text-[#05998c] focus:ring-[#05998c] border-gray-300 mt-0.5" />
+              <div className="ml-3">
+                <span className="block text-sm font-semibold text-gray-900 group-hover:text-[#0A2540]">
+                  Irregular surface
+                </span>
+                <span className="block text-xs text-gray-500 mt-0.5">
+                  Uneven or abnormal surface texture
+                </span>
+              </div>
+            </label>
+
+            <label className="flex items-start p-4 rounded-lg border-2 border-gray-200 hover:border-[#05998c]/50 cursor-pointer transition-all bg-gray-50/50 group">
+              <input type="checkbox" checked={observations.other} onChange={() => handleCheckboxChange('other')} className="w-5 h-5 rounded text-[#05998c] focus:ring-[#05998c] border-gray-300 mt-0.5" />
+              <div className="ml-3">
+                <span className="block text-sm font-semibold text-gray-900 group-hover:text-[#0A2540]">
+                  Other findings
+                </span>
+                <span className="block text-xs text-gray-500 mt-0.5">
+                  Additional observations not listed above
+                </span>
+              </div>
+            </label>
+            </div>
+        </div>
+
+        <div className="pt-6 border-t border-gray-100">
+          <label className="block text-xs font-semibold text-gray-500 uppercase mb-3 flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            Additional Notes
+          </label>
+          <textarea value={observations.additionalNotes} onChange={handleNotesChange} rows={6} className="w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-[#05998c] outline-none transition-all resize-none text-sm" placeholder="Document any additional observations, measurements, or clinical notes..." />
+        </div>
+
+        <div className="bg-blue-50 rounded-lg p-4 border border-blue-100">
+          <p className="text-xs text-blue-800 leading-relaxed">
+            <strong>Tip:</strong> Use the annotation tool to mark specific areas
+            of concern on the image, then document your findings here.
+          </p>
+        </div>
+      </div>
+    </div>;
+}

src/components/PatientHistoryForm.tsx

@@ -0,0 +1,391 @@
+import React, { useState } from 'react';
+import { User, Calendar, Stethoscope, AlertTriangle, Save, ChevronRight, ArrowLeft } from 'lucide-react';
+interface PatientHistoryFormProps {
+  onContinue: () => void;
+  onBack: () => void;
+  patientID?: string | undefined;
+}
+export function PatientHistoryForm({
+  onContinue,
+  onBack,
+  patientID
+}: PatientHistoryFormProps) {
+  const [formData, setFormData] = useState({
+    // Patient Profile
+    age: '',
+    bloodGroup: '',
+    parity: '',
+    menstrualStatus: '',
+    sexualHistory: '',
+    hpvStatus: '',
+    hpvVaccination: '',
+    patientProfileNotes: '',
+    // Symptoms
+    postCoitalBleeding: false,
+    interMenstrualBleeding: false,
+    persistentDischarge: false,
+    symptomsNotes: '',
+    // Screening
+    papSmearResult: '',
+    hpvDnaTypes: '',
+    pastProcedures: {
+      biopsy: false,
+      leep: false,
+      cryotherapy: false,
+      none: false
+    },
+    screeningNotes: '',
+    // Risk Factors
+    smoking: '',
+    immunosuppression: {
+      hiv: false,
+      steroids: false,
+      none: false
+    },
+    riskFactorsNotes: ''
+  });
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const {
+      name,
+      value
+    } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleNestedCheckboxChange = (category: 'pastProcedures' | 'immunosuppression', field: string) => {
+    if (category === 'pastProcedures') {
+      setFormData(prev => ({
+        ...prev,
+        pastProcedures: {
+          ...prev.pastProcedures,
+          [field]: !prev.pastProcedures[field as keyof typeof prev.pastProcedures]
+        }
+      }));
+      return;
+    }
+
+    // category === 'immunosuppression'
+    setFormData(prev => ({
+      ...prev,
+      immunosuppression: {
+        ...prev.immunosuppression,
+        [field]: !prev.immunosuppression[field as keyof typeof prev.immunosuppression]
+      }
+    }));
+  };
+  const handleSave = () => {
+    console.log('Saving patient history:', formData);
+  };
+  const handleSaveAndContinue = () => {
+    handleSave();
+    onContinue();
+  };
+  return <div className="w-full max-w-8xl mx-auto p-4 md:p-6 lg:p-10">
+      <div className="mb-4 md:mb-6 lg:mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0">
+        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-[#0A2540]">
+          Patient Information & Clinical History
+        </h2>
+        <div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 bg-white px-3 md:px-4 py-2 rounded-lg shadow-sm whitespace-nowrap">
+          <span>Patient ID:</span>
+          <span className="font-mono font-bold text-[#0A2540]">
+            {patientID ?? 'New - unsaved'}
+          </span>
+        </div>
+      </div>
+
+      <form className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
+        {/* SECTION 1: Patient Profile */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-full">
+          <div className="bg-blue-50/50 p-3 md:p-4 border-b border-blue-100 flex items-center gap-2 md:gap-3">
+            <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0">
+              <User className="w-4 h-4 md:w-5 md:h-5" />
+            </div>
+            <h3 className="font-bold text-sm md:text-base text-[#0A2540]">Patient Name</h3>
+            <input type="text" name="name" className="w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent outline-none transition-all" placeholder="Full name" />
+          </div>
+
+          <div className="p-4 md:p-6 lg:p-8 space-y-4 md:space-y-5 lg:space-y-6 flex-1">
+            <div className="grid grid-cols-3 gap-2 md:gap-3 lg:gap-4">
+              <div>
+                <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">
+                  Age
+                </label>
+                <input value={formData.age} onChange={handleInputChange} type="number" name="age" className="w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all" placeholder="Yrs" />
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">
+                  Blood Group
+                </label>
+                <select value={formData.bloodGroup} onChange={handleInputChange} name="bloodGroup" className="w-full px-4 py-3 text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all">
+                  <option value="">Select</option>
+                  <option value="A+">A+</option>
+                  <option value="A-">A-</option>
+                  <option value="B+">B+</option>
+                  <option value="B-">B-</option>
+                  <option value="AB+">AB+</option>
+                  <option value="AB-">AB-</option>
+                  <option value="O+">O+</option>
+                  <option value="O-">O-</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">
+                  Parity
+                </label>
+                <input value={formData.parity} onChange={handleInputChange} type="text" name="parity" className="w-full px-4 py-3 text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all" placeholder="G P A" />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
+                Menstrual Status
+              </label>
+              <div className="space-y-2">
+                {['Pre-menopausal', 'Post-menopausal', 'Pregnant'].map(status => <label key={status} className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all">
+                      <input type="radio" name="menstrualStatus" value={status} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                      <span className="text-base text-gray-700">{status}</span>
+                    </label>)}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
+                HPV Status
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {['Positive', 'Negative', 'Unknown'].map(status => <label key={status} className="flex-1 min-w-[80px] text-center cursor-pointer">
+                    <input type="radio" name="hpvStatus" value={status} className="peer sr-only" />
+                    <div className="px-3 py-1.5 rounded-md text-sm font-medium bg-gray-50 text-gray-600 border border-gray-200 peer-checked:bg-[#0A2540] peer-checked:text-white peer-checked:border-[#0A2540] transition-all">
+                      {status}
+                    </div>
+                  </label>)}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
+                HPV Vaccination
+              </label>
+              <div className="flex gap-4">
+                {['Yes', 'No', 'Unknown'].map(opt => <label key={opt} className="flex items-center gap-2 cursor-pointer">
+                    <input type="radio" name="hpvVaccination" value={opt} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                    <span className="text-base text-gray-700">{opt}</span>
+                  </label>)}
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
+                Additional Notes
+              </label>
+              <textarea name="patientProfileNotes" value={formData.patientProfileNotes} onChange={handleInputChange} rows={3} className="w-full px-4 py-3 text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all resize-none" placeholder="Add any additional notes about patient profile..." />
+            </div>
+          </div>
+        </div>
+
+        {/* SECTION 2: Presenting Symptoms */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-full">
+          <div className="bg-indigo-50/50 p-4 border-b border-indigo-100 flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
+              <Calendar className="w-5 h-5" />
+            </div>
+            <h3 className="font-bold text-[#0A2540]">Presenting Symptoms</h3>
+          </div>
+
+          <div className="p-8 space-y-4 flex-1">
+            <label className="flex items-start gap-3 p-4 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
+              <div className="flex items-center h-5">
+                <input type="checkbox" name="postCoitalBleeding" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+              </div>
+              <div>
+                <span className="block text-base font-medium text-gray-900">
+                  Post-coital bleeding
+                </span>
+                <span className="block text-sm text-gray-500 mt-0.5">
+                  Bleeding after intercourse
+                </span>
+              </div>
+            </label>
+
+            <label className="flex items-start gap-3 p-4 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
+              <div className="flex items-center h-5">
+                <input type="checkbox" name="interMenstrualBleeding" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+              </div>
+              <div>
+                <span className="block text-base font-medium text-gray-900">
+                  Inter-menstrual / Post-menopausal
+                </span>
+                <span className="block text-sm text-gray-500 mt-0.5">
+                  Irregular bleeding patterns
+                </span>
+              </div>
+            </label>
+
+            <label className="flex items-start gap-3 p-3 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
+              <div className="flex items-center h-5">
+                <input type="checkbox" name="persistentDischarge" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+              </div>
+              <div>
+                <span className="block text-sm font-medium text-gray-900">
+                  Persistent discharge
+                </span>
+                <span className="block text-xs text-gray-500 mt-0.5">
+                  Unusual color or odor
+                </span>
+              </div>
+            </label>
+
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
+                Additional Notes
+              </label>
+              <textarea name="symptomsNotes" value={formData.symptomsNotes} onChange={handleInputChange} rows={3} className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="Add any additional notes about symptoms..." />
+            </div>
+          </div>
+        </div>
+
+        {/* SECTION 3: Screening History */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-full">
+          <div className="bg-teal-50/50 p-4 border-b border-teal-100 flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center">
+              <Stethoscope className="w-5 h-5" />
+            </div>
+            <h3 className="font-bold text-[#0A2540]">Screening History</h3>
+          </div>
+
+          <div className="p-8 space-y-6 flex-1">
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
+                Pap Smear Result
+              </label>
+              <div className="space-y-2">
+                {['ASC-US', 'LSIL', 'HSIL', 'Normal', 'Not Done'].map(result => <label key={result} className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all group">
+                      <span className="text-sm text-gray-700 group-hover:text-[#0A2540]">
+                        {result}
+                      </span>
+                      <input type="radio" name="papSmearResult" value={result} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                    </label>)}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">
+                HPV DNA (High-risk)
+              </label>
+              <input type="text" name="hpvDnaTypes" className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all" placeholder="e.g. Type 16, 18" />
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
+                Past Procedures
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                {['Biopsy', 'LEEP', 'Cryotherapy', 'None'].map(proc => <label key={proc} className="flex items-center gap-2 cursor-pointer">
+                    <input type="checkbox" checked={formData.pastProcedures[proc.toLowerCase() as keyof typeof formData.pastProcedures]} onChange={() => handleNestedCheckboxChange('pastProcedures', proc.toLowerCase())} className="w-4 h-4 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                    <span className="text-sm text-gray-700">{proc}</span>
+                  </label>)}
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
+                Additional Notes
+              </label>
+              <textarea name="screeningNotes" value={formData.screeningNotes} onChange={handleInputChange} rows={3} className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="Add any additional notes about screening history..." />
+            </div>
+          </div>
+        </div>
+
+        {/* SECTION 4: Risk Factors */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-full">
+          <div className="bg-rose-50/50 p-4 border-b border-rose-100 flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-rose-100 text-rose-600 flex items-center justify-center">
+              <AlertTriangle className="w-5 h-5" />
+            </div>
+            <h3 className="font-bold text-[#0A2540]">Risk Factors</h3>
+          </div>
+
+          <div className="p-8 space-y-6 flex-1">
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">
+                Smoking History
+              </label>
+              <div className="flex gap-2">
+                <label className="flex-1 cursor-pointer">
+                  <input type="radio" name="smoking" value="Yes" className="peer sr-only" />
+                  <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 peer-checked:bg-rose-50 peer-checked:border-rose-200 peer-checked:text-rose-700 transition-all">
+                    <span className="font-medium">Yes</span>
+                  </div>
+                </label>
+                <label className="flex-1 cursor-pointer">
+                  <input type="radio" name="smoking" value="No" className="peer sr-only" />
+                  <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 peer-checked:bg-green-50 peer-checked:border-green-200 peer-checked:text-green-700 transition-all">
+                    <span className="font-medium">No</span>
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">
+                Immunosuppression
+              </label>
+              <div className="space-y-3">
+                <label className="flex items-center p-3 rounded-lg border border-gray-200 hover:border-gray-300 cursor-pointer transition-all bg-gray-50/50">
+                  <input type="checkbox" checked={formData.immunosuppression.hiv} onChange={() => handleNestedCheckboxChange('immunosuppression', 'hiv')} className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                  <span className="ml-3 text-sm font-medium text-gray-700">
+                    HIV Positive
+                  </span>
+                </label>
+
+                <label className="flex items-center p-3 rounded-lg border border-gray-200 hover:border-gray-300 cursor-pointer transition-all bg-gray-50/50">
+                  <input type="checkbox" checked={formData.immunosuppression.steroids} onChange={() => handleNestedCheckboxChange('immunosuppression', 'steroids')} className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                  <span className="ml-3 text-sm font-medium text-gray-700">
+                    Chronic Steroid Use
+                  </span>
+                </label>
+
+                <label className="flex items-center p-3 rounded-lg border border-gray-200 hover:border-gray-300 cursor-pointer transition-all bg-gray-50/50">
+                  <input type="checkbox" checked={formData.immunosuppression.none} onChange={() => handleNestedCheckboxChange('immunosuppression', 'none')} className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                  <span className="ml-3 text-sm font-medium text-gray-700">
+                    None known
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-gray-100">
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
+                Additional Notes
+              </label>
+              <textarea name="riskFactorsNotes" value={formData.riskFactorsNotes} onChange={handleInputChange} rows={3} className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="Add any additional notes about risk factors..." />
+            </div>
+          </div>
+        </div>
+      </form>
+
+      <div className="mt-6 md:mt-8 flex flex-col md:flex-row md:justify-between gap-3 md:gap-4">
+        <button onClick={onBack} className="px-4 md:px-6 py-2 md:py-3 rounded-xl text-gray-600 font-medium hover:bg-gray-100 transition-colors text-sm md:text-base flex items-center justify-center md:justify-start gap-2">
+          <ArrowLeft className="w-4 h-4 md:w-5 md:h-5" />
+          <span className="hidden md:inline">Back to Registry</span>
+          <span className="inline md:hidden">Back</span>
+        </button>
+
+        <div className="flex flex-col md:flex-row gap-3 md:gap-4">
+          <button onClick={handleSave} className="px-4 md:px-6 py-2 md:py-3 rounded-xl text-gray-600 font-medium hover:bg-gray-100 transition-colors text-sm md:text-base">
+            Save Draft
+          </button>
+
+          <button onClick={handleSaveAndContinue} className="px-6 md:px-8 py-2 md:py-3 rounded-xl bg-[#05998c] text-white font-bold shadow-lg shadow-teal-500/20 hover:bg-[#047569] hover:shadow-teal-500/30 transition-all flex items-center justify-center gap-2 text-sm md:text-base">
+            <Save className="w-4 h-4 md:w-5 md:h-5" />
+            Save & Continue
+            <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
+          </button>
+        </div>
+      </div>
+    </div>;
+}

src/components/Sidebar.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Home, User, Camera, Edit2, Info, FileText, Settings, ChevronLeft, ChevronRight } from 'lucide-react';
+
+type MenuKey = 'home' | 'patientinfo' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings';
+
+type Props = {
+  current: MenuKey;
+  onNavigate: (key: MenuKey) => void;
+};
+
+export function Sidebar({ current, onNavigate }: Props) {
+  const [collapsed, setCollapsed] = useState(false);
+  const items: { key: MenuKey; label: string; icon: React.ReactNode }[] = [
+    { key: 'home', label: 'Home', icon: <Home className="w-5 h-5" /> },
+    { key: 'patientinfo', label: 'Patients', icon: <User className="w-5 h-5" /> },
+    { key: 'capture', label: 'Capture', icon: <Camera className="w-5 h-5" /> },
+    { key: 'annotation', label: 'Annotate', icon: <Edit2 className="w-5 h-5" /> },
+    { key: 'compare', label: 'Compare', icon: <Info className="w-5 h-5" /> },
+    { key: 'report', label: 'Report', icon: <FileText className="w-5 h-5" /> }
+  ];
+
+  return (
+    <aside className={`bg-white border-r border-gray-100 transition-all flex-shrink-0 ${collapsed ? 'w-16 md:w-20' : 'w-56 md:w-64'}`}>
+      <div className="flex flex-col h-full">
+        <div className="px-2 md:px-3 py-3 md:py-4 flex items-center justify-between">
+          {!collapsed && <div className="font-bold text-sm md:text-lg text-[#0A2540]">Menu</div>}
+          <button onClick={() => setCollapsed(c => !c)} className="p-1 rounded hover:bg-gray-100">
+            {collapsed ? <ChevronRight className="w-4 h-4 md:w-5 md:h-5" /> : <ChevronLeft className="w-4 h-4 md:w-5 md:h-5" />}
+          </button>
+        </div>
+
+        <nav className="flex-1 px-1 md:px-2 py-2 md:py-4 space-y-0.5 md:space-y-1">
+          {items.map(item => {
+            const active = current === item.key;
+            return (
+              <button key={item.key} onClick={() => onNavigate(item.key)} className={`w-full flex items-center gap-2 md:gap-3 px-2 md:px-3 py-1.5 md:py-2 rounded-lg text-left hover:bg-gray-50 transition-colors ${active ? 'bg-[#E0F2F1] border-l-4 border-[#05998c]' : ''}`}>
+                <div className={`text-gray-600 flex-shrink-0 ${active ? 'text-[#0A2540]' : ''}`}>{item.icon}</div>
+                {!collapsed && <span className={`text-xs md:text-sm truncate ${active ? 'text-[#0A2540] font-semibold' : 'text-gray-700'}`}>{item.label}</span>}
+              </button>
+            );
+          })}
+        </nav>
+
+        <div className="px-1 md:px-2 py-2 md:py-4 border-t border-gray-100">
+          <div className="px-0.5 md:px-1">
+            <button onClick={() => onNavigate('settings')} className={`w-full flex items-center gap-2 md:gap-3 px-2 md:px-3 py-1.5 md:py-2 rounded-lg hover:bg-gray-50 transition-colors ${current === 'settings' ? 'bg-[#E0F2F1] border-l-4 border-[#05998c]' : ''}`}>
+              <Settings className="w-4 h-4 md:w-5 md:h-5 text-gray-600 flex-shrink-0" />
+              {!collapsed && <span className="text-xs md:text-sm text-gray-700 truncate">Settings</span>}
+            </button>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+export default Sidebar;

src/index.css

@@ -0,0 +1,131 @@
+/* URL IMPORTS (SUCH AS FONT IMPORTS) SHOULD BE KEPT ABOVE TAILWIND IMPORTS - DO NOT DELETE THIS COMMENT */
+
+/* PLEASE NOTE: THESE TAILWIND IMPORTS SHOULD NEVER BE DELETED - DO NOT DELETE THIS COMMENT */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+/* DO NOT DELETE THESE TAILWIND IMPORTS, OTHERWISE THE STYLING WILL NOT RENDER AT ALL - DO NOT DELETE THIS COMMENT */
+
+/* Tablet Landscape Responsive Styles */
+html {
+  font-size: clamp(12px, 2vw, 16px);
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+input, textarea, select, button {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+/* Tablet landscape optimization */
+@media (min-width: 768px) and (orientation: landscape) {
+  body {
+    font-size: 14px;
+  }
+  
+  html {
+    font-size: 14px;
+  }
+}
+
+/* Optimize for iPad landscape */
+@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
+  body {
+    font-size: 15px;
+  }
+}
+
+/* Custom scrollbar for modern look */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #05998c, #047569);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #047569, #036356);
+}
+/* Print Styles for Report Page */
+@media print {
+  body {
+    margin: 0;
+    padding: 0;
+    background: white;
+  }
+
+  /* Hide non-printable elements */
+  .no-print {
+    display: none !important;
+  }
+
+  /* Page break rules */
+  .page-break-after {
+    page-break-after: auto;
+  }
+
+  /* Optimize for printing */
+  .print-container {
+    width: 100%;
+    max-width: 210mm;
+    margin: 0 auto;
+    padding: 20mm;
+    background: white;
+    box-shadow: none;
+  }
+
+  /* Print friendly spacing */
+  .print-section {
+    page-break-inside: avoid;
+    margin-bottom: 0.5cm;
+  }
+
+  /* Image sizing for print */
+  .print-image {
+    max-width: 100%;
+    height: auto;
+    page-break-inside: avoid;
+  }
+
+  /* Remove shadows and borders for print */
+  .shadow-lg, .shadow-md, .shadow-sm {
+    box-shadow: none !important;
+  }
+
+  /* Adjust colors for print */
+  .bg-gradient-to-br {
+    background: linear-gradient(135deg, #f8f9fa 0%, #f0f4f8 100%) !important;
+  }
+
+  /* Font optimization */
+  body {
+    font-size: 10pt;
+    line-height: 1.4;
+  }
+
+  h1 {
+    font-size: 18pt;
+    margin: 0.2cm 0;
+  }
+
+  h3 {
+    font-size: 12pt;
+    margin: 0.15cm 0;
+  }
+
+  p {
+    margin: 0.1cm 0;
+  }
+}

src/index.tsx

@@ -0,0 +1,10 @@
+import './index.css';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const container = document.getElementById("root");
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}

src/pages/AcetowhiteExamPage.tsx

@@ -0,0 +1,569 @@
+import { useState, useEffect } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight } from 'lucide-react';
+import { ImageAnnotator } from '../components/ImageAnnotator';
+import { ImagingObservations } from '../components/ImagingObservations';
+
+type CapturedItem = {
+  id: string;
+  type: 'image' | 'video';
+  url: string;
+  timestamp: Date;
+  annotations?: any[];
+  observations?: any;
+};
+
+type Props = {
+  goBack: () => void;
+  onNext: () => void;
+};
+
+export function AcetowhiteExamPage({ goBack, onNext }: Props) {
+  const [capturedItems, setCapturedItems] = useState<CapturedItem[]>([]);
+  const [isRecording, setIsRecording] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [annotations, setAnnotations] = useState<any[]>([]);
+  const [observations, setObservations] = useState({});
+  const [showExitWarning, setShowExitWarning] = useState(false);
+  
+  // Timer states
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [aceticApplied, setAceticApplied] = useState(false);
+  const [showFlash, setShowFlash] = useState(false);
+  const audibleAlert = true;
+  const [timerPaused, setTimerPaused] = useState(false);
+
+  const cervixImageUrl = "/C87Aceto_(1).jpg";
+
+  // Timer effect
+  useEffect(() => {
+    if (!timerStarted || !aceticApplied || timerPaused) return;
+
+    const interval = setInterval(() => {
+      setSeconds(prev => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timerStarted, aceticApplied, timerPaused]);
+
+  // Check for 1 minute and 3 minute marks
+  useEffect(() => {
+    if (seconds === 60) {
+      // 1 minute mark
+      setShowFlash(true);
+      if (audibleAlert) {
+        // Play beep sound (in real app)
+        console.log('BEEP - 1 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    } else if (seconds === 180) {
+      // 3 minute mark
+      setShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 3 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    }
+  }, [seconds, audibleAlert]);
+
+  const formatTime = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleAceticApplied = () => {
+    setAceticApplied(true);
+    setTimerStarted(true);
+    setSeconds(0);
+  };
+
+  const handleRestartTimer = () => {
+    setSeconds(0);
+    setTimerStarted(false);
+    setAceticApplied(false);
+    setShowFlash(false);
+    setTimerPaused(false);
+  };
+
+  const handleCaptureImage = () => {
+    const newCapture: CapturedItem = {
+      id: Date.now().toString(),
+      type: 'image',
+      url: cervixImageUrl,
+      timestamp: new Date()
+    };
+    setCapturedItems(prev => [...prev, newCapture]);
+  };
+
+  const handleToggleRecording = () => {
+    if (!isRecording) {
+      setIsRecording(true);
+    } else {
+      setIsRecording(false);
+      const newCapture: CapturedItem = {
+        id: Date.now().toString(),
+        type: 'video',
+        url: cervixImageUrl,
+        timestamp: new Date()
+      };
+      setCapturedItems(prev => [...prev, newCapture]);
+    }
+  };
+
+  const handleSaveAnnotations = () => {
+    if (!selectedImage) return;
+    
+    setCapturedItems(prev => prev.map(item =>
+      item.id === selectedImage
+        ? { ...item, annotations, observations }
+        : item
+    ));
+    setSelectedImage(null);
+    setAnnotations([]);
+    setObservations({});
+  };
+
+  const handleDeleteCapture = (id: string) => {
+    setCapturedItems(prev => prev.filter(item => item.id !== id));
+    if (selectedImage === id) {
+      setSelectedImage(null);
+    }
+  };
+
+  const selectedItem = selectedImage
+    ? capturedItems.find(item => item.id === selectedImage)
+    : null;
+
+  const totalCaptures = capturedItems.length;
+  const imageCaptures = capturedItems.filter(item => item.type === 'image');
+  const videoCaptures = capturedItems.filter(item => item.type === 'video');
+  const hasRequiredCapture = imageCaptures.length > 0;
+
+  return (
+    <div className="w-full bg-white/95 relative">
+      <div className="relative z-10 py-4 md:py-6 lg:py-8">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          
+          {/* Page Header */}
+          <div className="mb-4 md:mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <button onClick={() => setShowExitWarning(true)} className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600">
+                  <ArrowLeft className="w-5 h-5" />
+                </button>
+                <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-[#0A2540]">Acetowhite Examination</h1>
+              </div>
+              <div className="flex items-center gap-3">
+              </div>
+            </div>
+
+            {/* Progress Bar - Capture / Annotation / Comparison View / Report */}
+            <div className="mb-4 flex gap-1 md:gap-2 items-center">
+              <div className="flex gap-1 md:gap-2 flex-1">
+                {['Capture', 'Annotation', 'Comparison View', 'Report'].map((stage, idx) => (
+                  <div key={stage} className="flex items-center flex-1">
+                    <button
+                      className={`flex-1 py-2 px-2 md:px-3 rounded-lg font-medium text-sm md:text-base transition-all border-2 border-[#0A2540] ${
+                        (stage === 'Capture' && !selectedImage) ||
+                        (stage === 'Annotation' && selectedImage)
+                          ? 'bg-[#05998c] text-white shadow-md'
+                          : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {stage}
+                    </button>
+                    {idx < 3 && <div className="w-1.5 h-1.5 rounded-full bg-gray-300 mx-1" />}
+                  </div>
+                ))}
+              </div>
+              <button onClick={onNext} className="ml-4 px-6 md:px-8 py-2 md:py-3 rounded-xl bg-gray-600 text-white font-bold shadow-lg shadow-gray-500/20 hover:bg-slate-700 hover:shadow-gray-500/30 transition-all flex items-center justify-center gap-2 text-sm md:text-base">
+                <Save className="w-4 h-4 md:w-5 md:h-5" />
+                <span className="hidden lg:inline">Next</span>
+                <span className="inline lg:hidden">Next</span>
+                <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
+              </button>
+            </div>
+          </div>
+
+          {!selectedImage ? (
+            // Live Feed View
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Main Live Feed */}
+              <div className="lg:col-span-2 space-y-4">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  <div className="mb-4">
+                    <h2 className="text-2xl md:text-3xl font-bold text-[#0A2540] mb-2">
+                      Acetowhite
+                    </h2>
+                    <p className="text-gray-600">
+                      Acetic acid application and acetowhitening observation
+                    </p>
+                  </div>
+
+                  {/* Live Video Feed */}
+                  <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 mb-4">
+                    <div className="aspect-video flex items-center justify-center">
+                      <img src={cervixImageUrl} alt="Live Feed" className="w-full h-full object-cover" />
+                      
+                      {/* Live indicator */}
+                      <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
+                        <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-white animate-pulse' : 'bg-white/70'}`} />
+                        {isRecording ? 'Recording' : 'Live'}
+                      </div>
+
+                      {/* Timer overlay */}
+                      {aceticApplied && (
+                        <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
+                          <p className="text-2xl font-mono font-bold">{formatTime(seconds)}</p>
+                        </div>
+                      )}
+
+                      {/* Flash overlay at 1 and 3 minutes */}
+                      {showFlash && (
+                        <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
+                          <div className="bg-white/90 px-6 py-4 rounded-lg">
+                            <p className="text-2xl font-bold text-[#0A2540]">
+                              {seconds >= 180 ? '3 Minutes!' : '1 Minute!'}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="mt-4 flex items-center gap-2 text-sm text-gray-500">
+                    <Camera className="w-4 h-4" />
+                    <span>Captures: {totalCaptures} / 1 required (image)</span>
+                    {hasRequiredCapture && <CheckCircle2 className="w-4 h-4 text-green-500 ml-2" />}
+                  </div>
+
+                  {!hasRequiredCapture && timerStarted && (
+                    <div className="mt-4 flex items-center gap-2 text-sm text-amber-600 bg-amber-50 px-4 py-2 rounded-lg">
+                      <Info className="w-4 h-4" />
+                      <span>At least one image capture required</span>
+                    </div>
+                  )}
+
+                  {/* Captured Images Selection for Annotation */}
+                  {imageCaptures.length > 0 && (
+                    <div className="mt-6 pt-6 border-t border-gray-200">
+                      <h4 className="text-sm font-semibold text-gray-700 mb-3">Select Image to Annotate</h4>
+                      <div className="grid grid-cols-3 gap-3">
+                        {imageCaptures.map(item => (
+                          <div 
+                            key={item.id} 
+                            onClick={() => setSelectedImage(item.id)}
+                            className="relative group cursor-pointer"
+                          >
+                            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-[#05998c] transition-all">
+                              <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
+                              {item.annotations && item.annotations.length > 0 && (
+                                <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
+                                  <CheckCircle2 className="w-3 h-3" />
+                                </div>
+                              )}
+                            </div>
+                            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
+                              <span className="text-white text-xs font-semibold">Annotate</span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Captures Sidebar */}
+              <div className="lg:col-span-1">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  {/* Instruction Card */}
+                  {!timerStarted && (
+                    <div className="mb-4">
+                      {/* Apply Acetic Acid Message Box */}
+                      <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-4 mb-4 shadow-md">
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
+                            <Info className="w-6 h-6 text-blue-600" />
+                          </div>
+                          <div>
+                            <p className="text-white font-bold text-lg">Apply Acetic Acid Now</p>
+                            <p className="text-blue-100 text-sm">Apply 3-5% acetic acid to the cervix</p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={handleAceticApplied}
+                        className="w-full px-6 py-3 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-all shadow-md hover:shadow-lg"
+                      >
+                        Acetic acid applied — Start timer
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Timer Display */}
+                  {timerStarted && (
+                    <div className={`mb-4 rounded-lg p-4 border-2 transition-all ${
+                      seconds < 50 
+                        ? 'bg-gradient-to-r from-[#05998c]/10 to-[#0A2540]/10 border-[#05998c]'
+                        : seconds < 55
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 60
+                        ? 'bg-red-100 border-red-300'
+                        : seconds >= 60 && seconds <= 60
+                        ? 'bg-red-200 border-red-400'
+                        : seconds > 60 && seconds < 170
+                        ? 'bg-gradient-to-r from-green-50 to-green-50 border-green-300'
+                        : seconds < 175
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 180
+                        ? 'bg-red-100 border-red-300'
+                        : 'bg-red-200 border-red-400'
+                    }`}>
+                      <div className="flex flex-col gap-3">
+                        <div>
+                          <p className="text-sm text-gray-600 mb-1">Timer</p>
+                          <p className={`text-4xl font-bold font-mono ${
+                            seconds >= 180 ? 'text-red-600' : 
+                            seconds >= 60 ? 'text-amber-500' : 
+                            seconds >= 50 ? 'text-amber-400' : 
+                            'text-[#0A2540]'
+                          }`}>{formatTime(seconds)}</p>
+                          {seconds >= 60 && seconds < 180 && (
+                            <p className="text-sm text-amber-600 mt-1">Approaching 3-minute mark...</p>
+                          )}
+                          {seconds >= 180 && (
+                            <p className="text-sm text-green-600 mt-1">3-minute observation period complete</p>
+                          )}
+                        </div>
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => setTimerPaused(!timerPaused)}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            {timerPaused ? (
+                              <>
+                                <Video className="w-4 h-4" />
+                                <span className="text-sm font-medium">Play</span>
+                              </>
+                            ) : (
+                              <>
+                                <Pause className="w-4 h-4" />
+                                <span className="text-sm font-medium">Pause</span>
+                              </>
+                            )}
+                          </button>
+                          <button
+                            onClick={handleRestartTimer}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            <RotateCcw className="w-4 h-4" />
+                            <span className="text-sm font-medium">Restart</span>
+                          </button>
+                        </div>
+                      </div>
+                      {seconds === 60 && (
+                        <div className="mt-3 bg-amber-100 border border-amber-300 rounded-lg p-3">
+                          <p className="text-amber-800 font-semibold text-sm">⏰ 1-minute mark - Capture recommended!</p>
+                        </div>
+                      )}
+                      {seconds === 180 && (
+                        <div className="mt-3 bg-green-100 border border-green-300 rounded-lg p-3">
+                          <p className="text-green-800 font-semibold text-sm">⏰ 3-minute mark - Final capture recommended!</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Capture Controls */}
+                  <div className="space-y-3 mb-4">
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleCaptureImage}
+                        disabled={!timerStarted}
+                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                          showFlash && (seconds === 60 || seconds === 180)
+                            ? 'bg-[#05998c] text-white animate-pulse'
+                            : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                        } disabled:opacity-50 disabled:cursor-not-allowed`}
+                      >
+                        <Camera className="w-4 h-4" />
+                        Capture
+                      </button>
+                      <button
+                        onClick={handleToggleRecording}
+                        disabled={!timerStarted}
+                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                          isRecording
+                            ? 'bg-red-500 text-white hover:bg-red-600'
+                            : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                        } disabled:opacity-50 disabled:cursor-not-allowed`}
+                      >
+                        {isRecording ? <Pause className="w-4 h-4" /> : <Video className="w-4 h-4" />}
+                        {isRecording ? 'Stop' : 'Record'}
+                      </button>
+                    </div>
+                    <button onClick={onNext} className="w-full flex items-center justify-center gap-2 px-6 md:px-8 py-2 md:py-3 rounded-xl bg-gray-600 text-white font-bold shadow-lg shadow-gray-500/20 hover:bg-slate-700 hover:shadow-gray-500/30 transition-all text-sm md:text-base">
+                      <Save className="w-4 h-4 md:w-5 md:h-5" />
+                      <span className="hidden lg:inline">Next</span>
+                      <span className="inline lg:hidden">Next</span>
+                      <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
+                    </button>
+                  </div>
+                  <h3 className="font-bold text-[#0A2540] mb-4">Captured Media</h3>
+                  
+                  {totalCaptures === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <Camera className="w-16 h-16 text-gray-300 mb-3" />
+                      <p className="text-gray-500 font-medium">No captures yet</p>
+                      <p className="text-sm text-gray-400 mt-1">Apply acetic acid and start capturing</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {/* Image Thumbnails */}
+                      {imageCaptures.length > 0 && (
+                        <div>
+                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Images ({imageCaptures.length})</h4>
+                          <div className="grid grid-cols-2 gap-2">
+                            {imageCaptures.map(item => (
+                              <div key={item.id} className="relative group">
+                                <div 
+                                  onClick={() => setSelectedImage(item.id)}
+                                  className="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-[#05998c] transition-all"
+                                >
+                                  <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
+                                  {item.annotations && item.annotations.length > 0 && (
+                                    <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
+                                      <CheckCircle2 className="w-3 h-3" />
+                                    </div>
+                                  )}
+                                </div>
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleDeleteCapture(item.id);
+                                  }}
+                                  className="absolute top-1 left-1 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                  <X className="w-3 h-3" />
+                                </button>
+                                <button
+                                  onClick={() => setSelectedImage(item.id)}
+                                  className="absolute bottom-1 right-1 bg-[#0A2540] text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                  <Edit2 className="w-3 h-3" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Video Items */}
+                      {videoCaptures.length > 0 && (
+                        <div className="mt-4">
+                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Videos ({videoCaptures.length})</h4>
+                          <div className="space-y-2">
+                            {videoCaptures.map(item => (
+                              <div key={item.id} className="relative group bg-gray-50 rounded-lg p-3 flex items-center gap-3">
+                                <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
+                                  <Video className="w-6 h-6 text-gray-500" />
+                                </div>
+                                <div className="flex-1">
+                                  <p className="text-sm font-medium text-gray-700">Video Recording</p>
+                                  <p className="text-xs text-gray-500">{item.timestamp.toLocaleTimeString()}</p>
+                                </div>
+                                <button
+                                  onClick={() => handleDeleteCapture(item.id)}
+                                  className="p-1 hover:bg-red-50 rounded text-red-500"
+                                >
+                                  <X className="w-4 h-4" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            // Annotation View
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <button
+                  onClick={() => {
+                    setSelectedImage(null);
+                    setAnnotations([]);
+                    setObservations({});
+                  }}
+                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Live Feed
+                </button>
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={handleSaveAnnotations}
+                    className="px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                  >
+                    Save Annotations
+                  </button>
+                  <button onClick={onNext} className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
+                    Next
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2">
+                  <ImageAnnotator 
+                    imageUrl={selectedItem?.url || cervixImageUrl} 
+                    onAnnotationsChange={setAnnotations} 
+                  />
+                </div>
+                <div className="lg:col-span-1">
+                  <ImagingObservations onObservationsChange={setObservations} />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Exit Warning Dialog */}
+          {showExitWarning && (
+            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+              <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md mx-4">
+                <h3 className="text-xl font-bold text-[#0A2540] mb-3">Leave Examination?</h3>
+                <p className="text-gray-600 mb-6">
+                  If you go back now, all captures, timer data, and annotations will be lost. Are you sure you want to continue?
+                </p>
+                <div className="flex gap-3 justify-end">
+                  <button
+                    onClick={() => setShowExitWarning(false)}
+                    className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => {
+                      setShowExitWarning(false);
+                      goBack();
+                    }}
+                    className="px-6 py-2 bg-red-500 text-white rounded-lg font-semibold hover:bg-red-600 transition-colors"
+                  >
+                    Leave Anyway
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/BiopsyMarking.tsx

@@ -0,0 +1,578 @@
+import React, { useState, useRef } from 'react';
+import { ArrowLeft, ArrowRight, Undo2, Trash2, Upload, Image, Video, ZoomIn, ZoomOut } from 'lucide-react';
+
+// Simple UI Component replacements
+const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
+  const baseClass = 'inline-flex items-center justify-center font-medium rounded transition-colors';
+  const variantClass = variant === 'ghost' ? 'hover:bg-gray-200 text-gray-700' : variant === 'outline' ? 'border border-gray-300 hover:bg-gray-50' : 'bg-blue-600 text-white hover:bg-blue-700';
+  const sizeClass = size === 'sm' ? 'px-2 py-1 text-sm' : 'px-4 py-2';
+  return <button className={`${baseClass} ${variantClass} ${sizeClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`} onClick={onClick} disabled={disabled} {...props}>{children}</button>;
+};
+
+export interface BiopsyCapturedImage {
+  id: string;
+  src: string;
+  stepId: string;
+  type: 'image' | 'video';
+}
+
+interface CapturedImage {
+  id: string;
+  src: string;
+  stepId: string;
+  type: 'image' | 'video';
+}
+
+interface BiopsyMarkingProps {
+  onBack: () => void;
+  onNext: () => void;
+  capturedImages?: CapturedImage[];
+}
+
+interface LesionMark {
+  id: string;
+  type: string;
+  typeCode: string;
+  clockHour: number;
+  color: string;
+}
+
+const LESION_TYPES = [
+  { code: 'EC', name: 'Ectopy', color: '#22c55e' },
+  { code: 'TTZ', name: 'T.Trans Zone', color: '#3b82f6' },
+  { code: 'ATZ', name: 'At. Trans Zone', color: '#8b5cf6' },
+  { code: 'L', name: 'Leukoplakia', color: '#f59e0b' },
+  { code: 'AB', name: 'Abn. Vessel', color: '#ef4444' },
+  { code: 'NF', name: 'Nabo.Fol', color: '#06b6d4' },
+  { code: 'XB', name: 'Biopsy Site', color: '#ec4899' },
+  { code: 'C', name: 'Condylomata', color: '#84cc16' },
+  { code: 'AW', name: 'Acetowhite', color: '#f97316' },
+  { code: 'MO', name: 'Mosaic', color: '#6366f1' },
+  { code: 'GO', name: 'Gland Opening', color: '#14b8a6' },
+  { code: 'PN', name: 'Punctation', color: '#e11d48' }
+];
+
+const CLOCK_HOURS = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+const stepLabels: Record<string, string> = {
+  native: 'Native Cervix',
+  acetowhite: 'Acetowhite',
+  iodine: "Lugol's Iodine"
+};
+
+const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedImages = [] }) => {
+  const [selectedType, setSelectedType] = useState<typeof LESION_TYPES[0] | null>(null);
+  const [lesionMarks, setLesionMarks] = useState<LesionMark[]>([]);
+  const [selectedImage, setSelectedImage] = useState<CapturedImage | null>(
+    capturedImages.length > 0 ? capturedImages[0] : null
+  );
+  const [uploadedImages, setUploadedImages] = useState<CapturedImage[]>([]);
+  const [overlayScale, setOverlayScale] = useState(100);
+  const [overlayOffset, setOverlayOffset] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const imageContainerRef = useRef<HTMLDivElement>(null);
+
+  const filteredLesionTypes = LESION_TYPES.filter(type =>
+    type.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    type.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const allImages = [...capturedImages, ...uploadedImages];
+
+  const handleUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const isVideo = file.type.startsWith('video/');
+      const newImage: CapturedImage = {
+        id: `uploaded-${Date.now()}`,
+        src: URL.createObjectURL(file),
+        stepId: 'uploaded',
+        type: isVideo ? 'video' : 'image'
+      };
+      setUploadedImages(prev => [...prev, newImage]);
+      setSelectedImage(newImage);
+    }
+    e.target.value = '';
+  };
+
+  const handleClockClick = (hour: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!selectedType) return;
+
+    const existingIndex = lesionMarks.findIndex(
+      mark => mark.clockHour === hour && mark.typeCode === selectedType.code
+    );
+
+    if (existingIndex >= 0) {
+      setLesionMarks(lesionMarks.filter((_, i) => i !== existingIndex));
+    } else {
+      const newMark: LesionMark = {
+        id: Date.now().toString(),
+        type: selectedType.name,
+        typeCode: selectedType.code,
+        clockHour: hour,
+        color: selectedType.color
+      };
+      setLesionMarks([...lesionMarks, newMark]);
+    }
+  };
+
+  const undoLastMark = () => {
+    setLesionMarks(lesionMarks.slice(0, -1));
+  };
+
+  const clearAllMarks = () => {
+    setLesionMarks([]);
+  };
+
+  const getClockPosition = (hour: number, radius: number, centerX: number, centerY: number) => {
+    const angle = ((hour - 3) * 30 * Math.PI) / 180;
+    return {
+      x: centerX + radius * Math.cos(angle),
+      y: centerY + radius * Math.sin(angle)
+    };
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // Allow dragging with left click anywhere on the image/overlay area
+    if (e.button === 0) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - overlayOffset.x, y: e.clientY - overlayOffset.y });
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      setOverlayOffset({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const groupedImages = allImages.reduce((acc, img) => {
+    const key = img.stepId;
+    if (!acc[key]) acc[key] = [];
+    acc[key].push(img);
+    return acc;
+  }, {} as Record<string, CapturedImage[]>);
+
+  const markedHours = [...new Set(lesionMarks.map(mark => mark.clockHour))];
+  const coveragePercent = Math.round((markedHours.length / 12) * 100);
+
+  const marksByType = lesionMarks.reduce((acc, mark) => {
+    if (!acc[mark.typeCode]) {
+      acc[mark.typeCode] = { type: mark.type, color: mark.color, hours: [] as number[] };
+    }
+    if (!acc[mark.typeCode].hours.includes(mark.clockHour)) {
+      acc[mark.typeCode].hours.push(mark.clockHour);
+    }
+    return acc;
+  }, {} as Record<string, { type: string; color: string; hours: number[] }>);
+
+  const overlaySize = overlayScale * 2.5;
+
+  return (
+    <div className="h-full flex flex-col bg-gradient-to-br from-slate-50 to-slate-100 overflow-hidden">
+      <div className="flex items-center gap-3 px-4 py-2.5 bg-white border-b border-slate-200 shadow-sm shrink-0">
+        <Button variant="ghost" size="sm" className="h-8 px-2 text-slate-700" onClick={onBack}>
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back
+        </Button>
+        <h2 className="text-lg font-semibold text-slate-800">Biopsy Marking</h2>
+        <div className="ml-auto flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 px-3 text-slate-700 border-slate-300"
+            onClick={undoLastMark}
+            disabled={lesionMarks.length === 0}
+          >
+            <Undo2 className="h-4 w-4 mr-1" />
+            Undo
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 px-3 text-slate-700 border-slate-300"
+            onClick={clearAllMarks}
+            disabled={lesionMarks.length === 0}
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            Clear
+          </Button>
+          <Button
+            size="sm"
+            className="h-8 px-3 bg-gray-600 text-white hover:bg-slate-700"
+          >
+            Next
+            <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex gap-3 p-3 min-h-0 overflow-hidden">
+        {/* Center Image Area */}
+        <div
+          ref={imageContainerRef}
+          className="flex-1 relative overflow-hidden"
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+        >
+          {selectedImage ? (
+            selectedImage.type === 'video' ? (
+              <div className="w-full h-full flex items-center justify-center">
+                <Video className="h-16 w-16 text-blue-400" />
+              </div>
+            ) : (
+              <img src={selectedImage.src} alt="Cervix" className="w-full h-full object-contain" />
+            )
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-slate-600">
+              <div className="text-center">
+                <Image className="h-16 w-16 opacity-20 mx-auto mb-3" />
+                <p className="text-sm text-slate-500">Upload or select an image</p>
+              </div>
+            </div>
+          )}
+
+          <div
+            className="absolute inset-0 flex items-center justify-center pointer-events-none"
+            style={{ transform: `translate(${overlayOffset.x}px, ${overlayOffset.y}px)` }}
+          >
+            <svg
+              width={overlaySize}
+              height={overlaySize}
+              viewBox="0 0 300 300"
+              className={`pointer-events-auto ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+            >
+              <circle cx="150" cy="150" r="140" fill="none" stroke="rgba(59,130,246,0.8)" strokeWidth="3" />
+              <line x1="150" y1="10" x2="150" y2="290" stroke="rgba(59,130,246,0.6)" strokeWidth="2" />
+              <line x1="10" y1="150" x2="290" y2="150" stroke="rgba(59,130,246,0.6)" strokeWidth="2" />
+              <ellipse cx="150" cy="150" rx="35" ry="20" fill="none" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
+
+              {lesionMarks.map(mark => {
+                const startAngle = ((mark.clockHour - 3.5) * 30 * Math.PI) / 180;
+                const endAngle = ((mark.clockHour - 2.5) * 30 * Math.PI) / 180;
+                const innerR = 25;
+                const outerR = 130;
+
+                const x1 = 150 + outerR * Math.cos(startAngle);
+                const y1 = 150 + outerR * Math.sin(startAngle);
+                const x2 = 150 + outerR * Math.cos(endAngle);
+                const y2 = 150 + outerR * Math.sin(endAngle);
+                const x3 = 150 + innerR * Math.cos(endAngle);
+                const y3 = 150 + innerR * Math.sin(endAngle);
+                const x4 = 150 + innerR * Math.cos(startAngle);
+                const y4 = 150 + innerR * Math.sin(startAngle);
+
+                const pathD = `M ${x1} ${y1} A ${outerR} ${outerR} 0 0 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 0 0 ${x4} ${y4} Z`;
+
+                return (
+                  <path key={mark.id} d={pathD} fill={mark.color} opacity={0.5} stroke={mark.color} strokeWidth="2" />
+                );
+              })}
+
+              {CLOCK_HOURS.map(hour => {
+                const pos = getClockPosition(hour, 130, 150, 150);
+                const marksAtHour = lesionMarks.filter(mark => mark.clockHour === hour);
+                const hasMarks = marksAtHour.length > 0;
+
+                return (
+                  <g key={`clock-${hour}`}>
+                    <circle
+                      cx={pos.x}
+                      cy={pos.y}
+                      r={16}
+                      fill={hasMarks ? marksAtHour[0].color : 'rgba(100,116,139,0.6)'}
+                      stroke="white"
+                      strokeWidth="2"
+                      className={`${selectedType ? 'cursor-pointer hover:opacity-80' : ''} transition-all`}
+                      onClick={event => handleClockClick(hour, event)}
+                    />
+                    <text
+                      x={pos.x}
+                      y={pos.y}
+                      textAnchor="middle"
+                      dominantBaseline="central"
+                      fontSize="12"
+                      fontWeight="bold"
+                      fill="white"
+                      className="pointer-events-none"
+                    >
+                      {hour}
+                    </text>
+
+                    {hasMarks && (
+                      <text
+                        x={pos.x}
+                        y={pos.y + 22}
+                        textAnchor="middle"
+                        fontSize="9"
+                        fontWeight="bold"
+                        fill={marksAtHour[0].color}
+                        stroke="black"
+                        strokeWidth="0.5"
+                        className="pointer-events-none"
+                      >
+                        {marksAtHour.map(mark => mark.typeCode).join(',')}
+                      </text>
+                    )}
+                  </g>
+                );
+              })}
+
+              <text x="110" y="35" fill="white" fontSize="14" fontWeight="bold">
+                Q4
+              </text>
+              <text x="180" y="35" fill="white" fontSize="14" fontWeight="bold">
+                Q1
+              </text>
+              <text x="180" y="275" fill="white" fontSize="14" fontWeight="bold">
+                Q2
+              </text>
+              <text x="110" y="275" fill="white" fontSize="14" fontWeight="bold">
+                Q3
+              </text>
+            </svg>
+          </div>
+
+        </div>
+
+        {/* Right Sidebar */}
+        <div className="w-72 flex flex-col gap-4 shrink-0 overflow-y-auto">
+          {/* Select Marking Card */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+            <h3 className="font-bold text-[#0A2540] mb-4">Marking Type</h3>
+            <div className="relative">
+              <button
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                className="w-full h-10 px-3 rounded-lg bg-white border-2 border-[#05998c] text-sm text-gray-800 flex items-center gap-2 hover:bg-gray-50 transition-colors justify-between"
+              >
+                <span className="truncate">{selectedType ? `${selectedType.code} - ${selectedType.name}` : 'Select Marking'}</span>
+                <span className="text-xs shrink-0">▼</span>
+              </button>
+
+              {isDropdownOpen && (
+                <div className="absolute top-full left-0 right-0 mt-2 w-full bg-white border-2 border-[#05998c] rounded-lg shadow-lg z-50">
+                  <input
+                    type="text"
+                    placeholder="Search by code or name..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    autoFocus
+                    className="w-full px-3 py-2 border-b-2 border-[#05998c]/30 text-sm text-gray-800 placeholder-gray-500 focus:outline-none bg-[#05998c]/5"
+                  />
+                  <div className="max-h-64 overflow-auto">
+                    {filteredLesionTypes.length > 0 ? (
+                      filteredLesionTypes.map(type => (
+                        <div
+                          key={type.code}
+                          className={`flex items-center gap-2 p-3 cursor-pointer transition-colors ${
+                            selectedType?.code === type.code
+                              ? 'bg-[#05998c]/20 border-l-4 border-[#05998c]'
+                              : 'hover:bg-[#05998c]/10 border-l-4 border-transparent'
+                          }`}
+                          onClick={() => {
+                            setSelectedType(type);
+                            setIsDropdownOpen(false);
+                            setSearchQuery('');
+                          }}
+                        >
+                          <div className="w-3 h-3 rounded shrink-0" style={{ backgroundColor: type.color }} />
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-semibold text-gray-800">{type.code}</p>
+                            <p className="text-xs text-gray-600 truncate">{type.name}</p>
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <p className="text-xs text-gray-500 text-center py-4">No features match</p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Images Card */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-bold text-[#0A2540]">Images</h3>
+              <Button variant="outline" size="sm" className="h-8 text-xs px-2 border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={handleUpload}>
+                <Upload className="h-3.5 w-3.5 mr-1" />
+                Upload
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*,video/*"
+                className="hidden"
+                onChange={handleFileChange}
+              />
+            </div>
+
+            <div className="space-y-3">
+              {Object.entries(groupedImages).map(([stepId, images]) => (
+                <div key={stepId}>
+                  <p className="text-sm font-semibold text-gray-700 mb-2">
+                    {stepLabels[stepId] || (stepId === 'uploaded' ? 'Uploaded' : stepId)}
+                  </p>
+                  <div className="flex gap-2 flex-wrap">
+                    {images.map(img => (
+                      <button
+                        key={img.id}
+                        onClick={() => setSelectedImage(img)}
+                        className={`w-14 h-14 rounded-lg overflow-hidden border-2 transition-all ${
+                          selectedImage?.id === img.id
+                            ? 'border-[#05998c] ring-2 ring-teal-200'
+                            : 'border-gray-200 hover:border-[#05998c]'
+                        }`}
+                      >
+                        {img.type === 'video' ? (
+                          <div className="w-full h-full bg-gray-800 flex items-center justify-center">
+                            <Video className="h-6 w-6 text-[#05998c]" />
+                          </div>
+                        ) : (
+                          <img src={img.src} alt="Thumbnail" className="w-full h-full object-cover" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+              {allImages.length === 0 && (
+                <p className="text-sm text-gray-500 text-center py-3">No images</p>
+              )}
+            </div>
+          </div>
+
+          {/* Overlay Controls Card */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+            <h3 className="font-bold text-[#0A2540] mb-4">Overlay Controls</h3>
+
+            <div className="space-y-4">
+              <div>
+                <label className="text-sm font-semibold text-gray-700 block mb-2">Size: {overlayScale}%</label>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 w-8 p-0 border-[#05998c] text-[#05998c] hover:bg-teal-50"
+                    onClick={() => setOverlayScale(Math.max(30, overlayScale - 10))}
+                  >
+                    <ZoomOut className="h-4 w-4" />
+                  </Button>
+                  <input
+                    type="range"
+                    min="30"
+                    max="200"
+                    value={overlayScale}
+                    onChange={e => setOverlayScale(Number(e.target.value))}
+                    className="flex-1 h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+                  />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 w-8 p-0 border-[#05998c] text-[#05998c] hover:bg-teal-50"
+                    onClick={() => setOverlayScale(Math.min(200, overlayScale + 10))}
+                  >
+                    <ZoomIn className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <label className="text-sm font-semibold text-gray-700 block mb-2">Position X: {overlayOffset.x}</label>
+                <div className="flex items-center gap-2">
+                  <Button variant="outline" size="sm" className="h-8 px-2 text-xs border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={() => setOverlayOffset(prev => ({ ...prev, x: prev.x - 20 }))}>←</Button>
+                  <input
+                    type="range"
+                    min="-200"
+                    max="200"
+                    value={overlayOffset.x}
+                    onChange={e => setOverlayOffset(prev => ({ ...prev, x: Number(e.target.value) }))}
+                    className="flex-1 h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+                  />
+                  <Button variant="outline" size="sm" className="h-8 px-2 text-xs border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={() => setOverlayOffset(prev => ({ ...prev, x: prev.x + 20 }))}>→</Button>
+                </div>
+              </div>
+
+              <div>
+                <label className="text-sm font-semibold text-gray-700 block mb-2">Position Y: {overlayOffset.y}</label>
+                <div className="flex items-center gap-2">
+                  <Button variant="outline" size="sm" className="h-8 px-2 text-xs border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={() => setOverlayOffset(prev => ({ ...prev, y: prev.y - 20 }))}>↑</Button>
+                  <input
+                    type="range"
+                    min="-200"
+                    max="200"
+                    value={overlayOffset.y}
+                    onChange={e => setOverlayOffset(prev => ({ ...prev, y: Number(e.target.value) }))}
+                    className="flex-1 h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+                  />
+                  <Button variant="outline" size="sm" className="h-8 px-2 text-xs border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={() => setOverlayOffset(prev => ({ ...prev, y: prev.y + 20 }))}>↓</Button>
+                </div>
+              </div>
+
+              <Button
+                className="w-full bg-[#05998c] text-white hover:bg-[#047569] rounded-lg"
+                onClick={() => {
+                  setOverlayOffset({ x: 0, y: 0 });
+                  setOverlayScale(100);
+                }}
+              >
+                Reset Position
+              </Button>
+            </div>
+          </div>
+
+          {/* Coverage Card */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex-1 min-h-0 flex flex-col">
+            <h3 className="font-bold text-[#0A2540] mb-3">
+              Coverage: <span className="text-[#05998c] font-bold">{coveragePercent}%</span>
+            </h3>
+            {Object.keys(marksByType).length === 0 ? (
+              <p className="text-sm text-gray-500">No lesions marked</p>
+            ) : (
+              <div className="space-y-2 overflow-auto flex-1">
+                {Object.entries(marksByType).map(([code, data]) => (
+                  <div
+                    key={code}
+                    className="flex items-center gap-2 p-2 rounded-lg bg-gray-50 border border-gray-200"
+                  >
+                    <div className="w-3 h-3 rounded shrink-0" style={{ backgroundColor: data.color }} />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-semibold text-gray-800">{code}</p>
+                      <p className="text-xs text-gray-600">{data.hours.sort((a, b) => a - b).join(', ')}h</p>
+                    </div>
+                    <span className="text-xs font-medium text-gray-700">
+                      {Math.round((data.hours.length / 12) * 100)}%
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { BiopsyMarking };
+export default BiopsyMarking;
+

src/pages/Compare.tsx

@@ -0,0 +1,419 @@
+import { useState, useEffect, useRef } from 'react';
+import { ArrowLeft, X, ZoomIn, ZoomOut, Download, RotateCcw } from 'lucide-react';
+
+type CapturedImage = {
+  id: string;
+  src: string;
+  stepId: string;
+  type: 'image' | 'video';
+};
+
+type CompareImage = {
+  id: string;
+  src: string;
+  stepId: string;
+  label: string;
+};
+
+type Props = {
+  onBack: () => void;
+  capturedImages: CapturedImage[];
+};
+
+const stepLabels: Record<string, string> = {
+  native: 'Native',
+  acetowhite: 'Acetic Acid',
+  greenFilter: 'Green Filter',
+  lugol: 'Lugol'
+};
+
+const stepColors: Record<string, string> = {
+  native: 'from-blue-500 to-blue-600',
+  acetowhite: 'from-purple-500 to-purple-600',
+  greenFilter: 'from-green-500 to-green-600',
+  lugol: 'from-amber-500 to-amber-600'
+};
+
+export function Compare({ onBack, capturedImages }: Props) {
+  const [leftImage, setLeftImage] = useState<CompareImage | null>(null);
+  const [rightImage, setRightImage] = useState<CompareImage | null>(null);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [draggedImageData, setDraggedImageData] = useState<string | null>(null);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+  const leftImageRef = useRef<HTMLDivElement>(null);
+  const rightImageRef = useRef<HTMLDivElement>(null);
+
+  // Group images by step
+  const imagesByStep = capturedImages.reduce((acc, img) => {
+    if (img.type === 'image') {
+      if (!acc[img.stepId]) acc[img.stepId] = [];
+      acc[img.stepId].push(img);
+    }
+    return acc;
+  }, {} as Record<string, CapturedImage[]>);
+
+  const handleImageDragStart = (e: React.DragEvent, image: CapturedImage, side: 'left' | 'right') => {
+    const data = JSON.stringify({ ...image, side });
+    e.dataTransfer.setData('application/compare-image', data);
+    e.dataTransfer.effectAllowed = 'copy';
+    setDraggedImageData(data);
+  };
+
+  const handleImageDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  };
+
+  const handleImageDrop = (e: React.DragEvent, side: 'left' | 'right') => {
+    e.preventDefault();
+    const data = e.dataTransfer.getData('application/compare-image');
+    if (data) {
+      try {
+        const image = JSON.parse(data);
+        const compareImage: CompareImage = {
+          id: image.id,
+          src: image.src,
+          stepId: image.stepId,
+          label: stepLabels[image.stepId] || image.stepId
+        };
+        if (side === 'left') {
+          setLeftImage(compareImage);
+        } else {
+          setRightImage(compareImage);
+        }
+      } catch {
+        // ignore invalid drag data
+      }
+    }
+    setDraggedImageData(null);
+  };
+
+  const handleDownloadComparison = () => {
+    if (!leftImage || !rightImage) return;
+
+    // Create a canvas to combine both images
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    canvas.width = 1600;
+    canvas.height = 800;
+
+    // Load and draw images
+    const leftImg = new Image();
+    const rightImg = new Image();
+    let imagesLoaded = 0;
+
+    const drawComparison = () => {
+      // Draw left image
+      ctx.drawImage(leftImg, 0, 0, 800, 800);
+      
+      // Draw right image
+      ctx.drawImage(rightImg, 800, 0, 800, 800);
+
+      // Add labels
+      ctx.fillStyle = 'white';
+      ctx.font = 'bold 28px Arial';
+      ctx.fillText(leftImage.label, 20, 750);
+      ctx.fillText(rightImage.label, 820, 750);
+
+      // Download
+      canvas.toBlob(blob => {
+        if (blob) {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `comparison_${Date.now()}.png`;
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      });
+    };
+
+    leftImg.onload = () => {
+      imagesLoaded++;
+      if (imagesLoaded === 2) drawComparison();
+    };
+    rightImg.onload = () => {
+      imagesLoaded++;
+      if (imagesLoaded === 2) drawComparison();
+    };
+
+    leftImg.src = leftImage.src;
+    rightImg.src = rightImage.src;
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (zoomLevel > 1) {
+      setIsPanning(true);
+      setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isPanning && zoomLevel > 1) {
+      setPanOffset({
+        x: e.clientX - panStart.x,
+        y: e.clientY - panStart.y
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsPanning(false);
+  };
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setZoomLevel(prev => Math.max(0.5, Math.min(3, prev + delta)));
+  };
+
+  const handleReset = () => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  };
+
+  return (
+    <div className="w-full bg-white">
+      <div className="py-4 md:py-6">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-4">
+              <button
+                onClick={onBack}
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                <ArrowLeft className="w-5 h-5 text-gray-700" />
+              </button>
+              <h1 className="text-2xl font-bold text-gray-900">Image Comparison</h1>
+            </div>
+            <button
+              onClick={handleDownloadComparison}
+              disabled={!leftImage || !rightImage}
+              className="flex items-center gap-2 px-6 py-3 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Download className="w-4 h-4" />
+              Download Comparison
+            </button>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            
+            {/* Left Comparison View */}
+            <div className="lg:col-span-2">
+              <div className="grid grid-cols-2 gap-6">
+                {/* Left Side */}
+                <div
+                  onDragOver={handleImageDragOver}
+                  onDrop={(e) => handleImageDrop(e, 'left')}
+                  className={`rounded-lg border-4 border-dashed transition-all ${
+                    draggedImageData ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-gray-50'
+                  }`}
+                >
+                  {leftImage ? (
+                    <div 
+                      ref={leftImageRef}
+                      className="relative h-full flex items-center justify-center bg-black rounded-lg overflow-hidden"
+                      onMouseDown={handleMouseDown}
+                      onMouseMove={handleMouseMove}
+                      onMouseUp={handleMouseUp}
+                      onMouseLeave={handleMouseUp}
+                      onWheel={handleWheel}
+                      style={{ cursor: zoomLevel > 1 ? (isPanning ? 'grabbing' : 'grab') : 'default' }}
+                    >
+                      <img
+                        src={leftImage.src}
+                        alt={leftImage.label}
+                        style={{ 
+                          transform: `scale(${zoomLevel}) translate(${panOffset.x / zoomLevel}px, ${panOffset.y / zoomLevel}px)`,
+                          transformOrigin: 'center center'
+                        }}
+                        className="w-full h-96 object-contain transition-transform select-none"
+                        draggable={false}
+                      />
+                      <button
+                        onClick={() => setLeftImage(null)}
+                        className="absolute top-3 right-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors z-10"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                      <div className="absolute bottom-3 left-3 bg-black/70 text-white px-3 py-2 rounded-lg z-10">
+                        <p className="text-sm font-semibold">{leftImage.label}</p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="h-96 flex flex-col items-center justify-center text-gray-500">
+                      <div className="text-center">
+                        <p className="text-lg font-semibold mb-2">Left Image</p>
+                        <p className="text-sm">Drag and drop an image here</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Right Side */}
+                <div
+                  onDragOver={handleImageDragOver}
+                  onDrop={(e) => handleImageDrop(e, 'right')}
+                  className={`rounded-lg border-4 border-dashed transition-all ${
+                    draggedImageData ? 'border-green-500 bg-green-50' : 'border-gray-300 bg-gray-50'
+                  }`}
+                >
+                  {rightImage ? (
+                    <div 
+                      ref={rightImageRef}
+                      className="relative h-full flex items-center justify-center bg-black rounded-lg overflow-hidden"
+                      onMouseDown={handleMouseDown}
+                      onMouseMove={handleMouseMove}
+                      onMouseUp={handleMouseUp}
+                      onMouseLeave={handleMouseUp}
+                      onWheel={handleWheel}
+                      style={{ cursor: zoomLevel > 1 ? (isPanning ? 'grabbing' : 'grab') : 'default' }}
+                    >
+                      <img
+                        src={rightImage.src}
+                        alt={rightImage.label}
+                        style={{ 
+                          transform: `scale(${zoomLevel}) translate(${panOffset.x / zoomLevel}px, ${panOffset.y / zoomLevel}px)`,
+                          transformOrigin: 'center center'
+                        }}
+                        className="w-full h-96 object-contain transition-transform select-none"
+                        draggable={false}
+                      />
+                      <button
+                        onClick={() => setRightImage(null)}
+                        className="absolute top-3 right-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors z-10"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                      <div className="absolute bottom-3 left-3 bg-black/70 text-white px-3 py-2 rounded-lg z-10">
+                        <p className="text-sm font-semibold">{rightImage.label}</p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="h-96 flex flex-col items-center justify-center text-gray-500">
+                      <div className="text-center">
+                        <p className="text-lg font-semibold mb-2">Right Image</p>
+                        <p className="text-sm">Drag and drop an image here</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Zoom Controls */}
+              {(leftImage || rightImage) && (
+                <div className="mt-6 flex items-center justify-center gap-4 bg-gray-50 p-4 rounded-lg">
+                  <button
+                    onClick={() => setZoomLevel(prev => Math.max(0.5, prev - 0.1))}
+                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                    title="Zoom Out"
+                  >
+                    <ZoomOut className="w-5 h-5 text-gray-700" />
+                  </button>
+                  <span className="text-sm font-semibold text-gray-700 w-16 text-center">
+                    {Math.round(zoomLevel * 100)}%
+                  </span>
+                  <button
+                    onClick={() => setZoomLevel(prev => Math.min(3, prev + 0.1))}
+                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                    title="Zoom In"
+                  >
+                    <ZoomIn className="w-5 h-5 text-gray-700" />
+                  </button>
+                  <div className="flex-1 ml-4">
+                    <input
+                      type="range"
+                      min="0.5"
+                      max="3"
+                      step="0.1"
+                      value={zoomLevel}
+                      onChange={(e) => setZoomLevel(parseFloat(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+                  <button
+                    onClick={handleReset}
+                    className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+                    title="Reset Zoom & Pan"
+                  >
+                    <RotateCcw className="w-5 h-5 text-gray-700" />
+                  </button>
+                </div>
+              )}
+
+              {/* Instructions */}
+              {(leftImage || rightImage) && zoomLevel > 1 && (
+                <div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <p className="text-xs text-blue-700">
+                    🖱️ <strong>Click and drag</strong> to pan the image | <strong>Scroll</strong> to zoom | Use controls to fine-tune
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Image Library Sidebar */}
+            <div className="lg:col-span-1">
+              <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sticky top-20">
+                <h2 className="font-bold text-gray-900 mb-4 pb-2 border-b border-gray-300">
+                  Image Library
+                </h2>
+
+                {Object.entries(imagesByStep).length === 0 ? (
+                  <div className="text-center py-8 text-gray-400">
+                    <p className="text-sm font-medium">No images available</p>
+                    <p className="text-xs mt-1">Capture images to compare</p>
+                  </div>
+                ) : (
+                  <div className="space-y-4 max-h-[600px] overflow-y-auto">
+                    {Object.entries(imagesByStep).map(([stepId, images]) => (
+                      <div key={stepId} className={`bg-gradient-to-br ${stepColors[stepId] || 'from-gray-500 to-gray-600'} rounded-lg overflow-hidden shadow-sm`}>
+                        <div className="bg-black/30 px-3 py-2">
+                          <p className="text-white font-bold text-sm">{stepLabels[stepId] || stepId}</p>
+                        </div>
+                        <div className="p-3 space-y-2 bg-white">
+                          {images.map((image, idx) => (
+                            <div
+                              key={image.id}
+                              draggable
+                              onDragStart={(e) => handleImageDragStart(e, image, 'left')}
+                              className="relative group cursor-grab hover:cursor-grabbing"
+                            >
+                              <div className="bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200 hover:border-[#05998c] transition-colors">
+                                <img
+                                  src={image.src}
+                                  alt={`${stepLabels[stepId]} ${idx + 1}`}
+                                  className="w-full h-20 object-cover group-hover:opacity-80 transition-opacity"
+                                />
+                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
+                                  <p className="text-white text-xs font-semibold">Drag to compare</p>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* Info Box */}
+                <div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
+                  <p className="text-xs text-blue-700">
+                    💡 Drag images from the library to left or right side to compare them side by side.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/ExaminationRecordsPage.tsx

@@ -0,0 +1,475 @@
+import { useState } from 'react';
+import { Calendar, User, Eye, FileText, Clock, Camera, ArrowLeft, Search, Filter } from 'lucide-react';
+
+// Types for examination records
+interface ExamRecord {
+  id: string;
+  date: Date;
+  indication: string;
+  impression: string;
+  tzType: string;
+  biopsy: 'Taken' | 'Not Taken';
+  finalStatus: string;
+  performedBy?: string;
+  scjVisibility: 'Fully' | 'Partially' | 'Not visible';
+  media: MediaItem[];
+  findings: Findings;
+  outcome: Outcome;
+}
+
+interface MediaItem {
+  id: string;
+  step: string;
+  timestamp: Date;
+  thumbnail: string;
+  type: 'image' | 'video';
+}
+
+interface Findings {
+  acetowhite: string;
+  borders: string;
+  vascularPattern: string;
+  lugolsUptake: string;
+}
+
+interface Outcome {
+  impression: string;
+  biopsyTaken: boolean;
+  plan: string;
+}
+
+// Dummy data
+const dummyExams: ExamRecord[] = [
+  {
+    id: 'COLPO-2025-001',
+    date: new Date('2025-01-10'),
+    indication: 'VIA positive',
+    impression: 'Low-grade lesion',
+    tzType: 'Type 2',
+    biopsy: 'Taken',
+    finalStatus: 'Follow-up advised',
+    performedBy: 'Dr. Sarah Johnson',
+    scjVisibility: 'Fully',
+    media: [
+      { id: '1', step: 'Native', timestamp: new Date('2025-01-10T09:00:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '2', step: 'Acetic Acid (1 min)', timestamp: new Date('2025-01-10T09:01:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '3', step: 'Acetic Acid (3 min)', timestamp: new Date('2025-01-10T09:03:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '4', step: 'Green Filter', timestamp: new Date('2025-01-10T09:05:00'), thumbnail: '/greenC87Aceto_(1).jpg', type: 'image' },
+      { id: '5', step: 'Lugol\'s Iodine', timestamp: new Date('2025-01-10T09:07:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '6', step: 'Biopsy Marking', timestamp: new Date('2025-01-10T09:10:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' }
+    ],
+    findings: {
+      acetowhite: 'Thin, rapidly fading',
+      borders: 'Irregular',
+      vascularPattern: 'Fine punctation',
+      lugolsUptake: 'Partial'
+    },
+    outcome: {
+      impression: 'Low-grade squamous intraepithelial lesion (LSIL)',
+      biopsyTaken: true,
+      plan: 'Follow-up in 6 months with repeat colposcopy'
+    }
+  },
+  {
+    id: 'COLPO-2025-002',
+    date: new Date('2025-02-15'),
+    indication: 'Follow-up',
+    impression: 'Normal',
+    tzType: 'Type 1',
+    biopsy: 'Not Taken',
+    finalStatus: 'Discharged',
+    performedBy: 'Dr. Sarah Johnson',
+    scjVisibility: 'Fully',
+    media: [
+      { id: '7', step: 'Native', timestamp: new Date('2025-02-15T10:30:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '8', step: 'Acetic Acid (1 min)', timestamp: new Date('2025-02-15T10:31:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '9', step: 'Acetic Acid (3 min)', timestamp: new Date('2025-02-15T10:33:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' }
+    ],
+    findings: {
+      acetowhite: 'None',
+      borders: 'Regular',
+      vascularPattern: 'Normal',
+      lugolsUptake: 'Complete'
+    },
+    outcome: {
+      impression: 'Normal colposcopy',
+      biopsyTaken: false,
+      plan: 'Return to routine screening'
+    }
+  },
+  {
+    id: 'COLPO-2025-003',
+    date: new Date('2025-03-20'),
+    indication: 'Abnormal cytology',
+    impression: 'High-grade lesion',
+    tzType: 'Type 3',
+    biopsy: 'Taken',
+    finalStatus: 'Referred to oncology',
+    performedBy: 'Dr. Sarah Johnson',
+    scjVisibility: 'Partially',
+    media: [
+      { id: '10', step: 'Native', timestamp: new Date('2025-03-20T11:00:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '11', step: 'Acetic Acid (1 min)', timestamp: new Date('2025-03-20T11:01:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '12', step: 'Acetic Acid (3 min)', timestamp: new Date('2025-03-20T11:03:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '13', step: 'Green Filter', timestamp: new Date('2025-03-20T11:05:00'), thumbnail: '/greenC87Aceto_(1).jpg', type: 'image' },
+      { id: '14', step: 'Lugol\'s Iodine', timestamp: new Date('2025-03-20T11:07:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' },
+      { id: '15', step: 'Biopsy Marking', timestamp: new Date('2025-03-20T11:10:00'), thumbnail: '/C87Aceto_(1).jpg', type: 'image' }
+    ],
+    findings: {
+      acetowhite: 'Dense, persistent',
+      borders: 'Irregular, jagged',
+      vascularPattern: 'Coarse mosaicism',
+      lugolsUptake: 'Negative staining'
+    },
+    outcome: {
+      impression: 'High-grade squamous intraepithelial lesion (HSIL)',
+      biopsyTaken: true,
+      plan: 'Referred to gynecologic oncology for further management'
+    }
+  }
+];
+
+type Props = {
+  goBack: () => void;
+};
+
+export function ExaminationRecordsPage({ goBack }: Props) {
+  const [selectedExam, setSelectedExam] = useState<ExamRecord | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+
+  const filteredExams = dummyExams.filter(exam => {
+    const matchesSearch = exam.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         exam.indication.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         exam.impression.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesFilter = filterStatus === 'all' || exam.finalStatus.toLowerCase().includes(filterStatus.toLowerCase());
+
+    return matchesSearch && matchesFilter;
+  });
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (selectedExam) {
+    return (
+      <div className="w-full bg-white/95 relative">
+        <div className="relative z-10 py-4 md:py-6 lg:py-8">
+          <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+
+            {/* Header */}
+            <div className="mb-6 flex items-center gap-4">
+              <button
+                onClick={() => setSelectedExam(null)}
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600"
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+              <div>
+                <h1 className="text-2xl md:text-3xl font-bold text-[#0A2540]">
+                  Examination Record: {selectedExam.id}
+                </h1>
+                <p className="text-gray-600 mt-1">
+                  {formatDate(selectedExam.date)} • Patient ID: PT-2025-8492
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+
+              {/* Examination Summary */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                <h2 className="text-xl font-bold text-[#0A2540] mb-4 flex items-center gap-2">
+                  <FileText className="w-5 h-5 text-[#05998c]" />
+                  Examination Summary
+                </h2>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Calendar className="w-4 h-4 text-gray-500" />
+                      <span className="font-medium text-gray-700">Date & Time:</span>
+                      <span>{formatDate(selectedExam.date)} at {formatTime(selectedExam.date)}</span>
+                    </div>
+                    {selectedExam.performedBy && (
+                      <div className="flex items-center gap-2 text-sm">
+                        <User className="w-4 h-4 text-gray-500" />
+                        <span className="font-medium text-gray-700">Performed by:</span>
+                        <span>{selectedExam.performedBy}</span>
+                      </div>
+                    )}
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className="font-medium text-gray-700">Indication:</span>
+                      <span>{selectedExam.indication}</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className="font-medium text-gray-700">SCJ Visibility:</span>
+                      <span>{selectedExam.scjVisibility}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className="font-medium text-gray-700">TZ Type:</span>
+                      <span>{selectedExam.tzType}</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className="font-medium text-gray-700">Impression:</span>
+                      <span className="font-semibold text-[#05998c]">{selectedExam.impression}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className="font-medium text-gray-700">Biopsy:</span>
+                      <span className={selectedExam.biopsy === 'Taken' ? 'text-red-600 font-semibold' : 'text-green-600'}>
+                        {selectedExam.biopsy}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Media Timeline */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                <h2 className="text-xl font-bold text-[#0A2540] mb-4 flex items-center gap-2">
+                  <Camera className="w-5 h-5 text-[#05998c]" />
+                  Media Timeline
+                </h2>
+
+                <div className="space-y-4">
+                  {selectedExam.media.map((item, index) => (
+                    <div key={item.id} className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
+                      <div className="relative">
+                        <img
+                          src={item.thumbnail}
+                          alt={item.step}
+                          className="w-16 h-16 object-cover rounded-lg border-2 border-gray-200"
+                        />
+                        <div className="absolute -top-2 -right-2 bg-[#05998c] text-white text-xs px-2 py-1 rounded-full font-semibold">
+                          {index + 1}
+                        </div>
+                      </div>
+
+                      <div className="flex-1">
+                        <h3 className="font-semibold text-[#0A2540]">{item.step}</h3>
+                        <div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
+                          <Clock className="w-4 h-4" />
+                          <span>{formatTime(item.timestamp)}</span>
+                          <span className="text-gray-400">•</span>
+                          <span className="capitalize">{item.type}</span>
+                        </div>
+                      </div>
+
+                      <button className="px-4 py-2 bg-[#05998c] text-white rounded-lg hover:bg-[#047569] transition-colors flex items-center gap-2">
+                        <Eye className="w-4 h-4" />
+                        View
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Key Findings */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                <h2 className="text-xl font-bold text-[#0A2540] mb-4">Key Findings</h2>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                      <span className="font-medium text-gray-700">Acetowhite:</span>
+                      <span className="text-gray-900">{selectedExam.findings.acetowhite}</span>
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                      <span className="font-medium text-gray-700">Borders:</span>
+                      <span className="text-gray-900">{selectedExam.findings.borders}</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                      <span className="font-medium text-gray-700">Vascular Pattern:</span>
+                      <span className="text-gray-900">{selectedExam.findings.vascularPattern}</span>
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-gray-100">
+                      <span className="font-medium text-gray-700">Lugol's Uptake:</span>
+                      <span className="text-gray-900">{selectedExam.findings.lugolsUptake}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Outcome & Plan */}
+              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                <h2 className="text-xl font-bold text-[#0A2540] mb-4">Outcome & Plan</h2>
+
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="font-semibold text-gray-700 mb-2">Colposcopic Impression</h3>
+                    <p className="text-[#0A2540] font-medium">{selectedExam.outcome.impression}</p>
+                  </div>
+
+                  <div>
+                    <h3 className="font-semibold text-gray-700 mb-2">Biopsy Status</h3>
+                    <p className={`font-medium ${selectedExam.outcome.biopsyTaken ? 'text-red-600' : 'text-green-600'}`}>
+                      {selectedExam.outcome.biopsyTaken ? 'Biopsy taken' : 'No biopsy taken'}
+                    </p>
+                  </div>
+
+                  <div>
+                    <h3 className="font-semibold text-gray-700 mb-2">Management Plan</h3>
+                    <p className="text-gray-900 bg-gray-50 p-3 rounded-lg">{selectedExam.outcome.plan}</p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full bg-white/95 relative">
+      <div className="relative z-10 py-4 md:py-6 lg:py-8">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+
+          {/* Header */}
+          <div className="mb-6 flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button
+                onClick={goBack}
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600"
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </button>
+              <div>
+                <h1 className="text-2xl md:text-3xl font-bold text-[#0A2540]">Examination Records</h1>
+                <p className="text-gray-600 mt-1">Patient ID: PT-2025-8492 • {dummyExams.length} examinations</p>
+              </div>
+            </div>
+
+            {/* Search and Filter */}
+            <div className="flex items-center gap-4">
+              <div className="relative">
+                <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Search exams..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent"
+                />
+              </div>
+
+              <div className="relative">
+                <Filter className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                <select
+                  value={filterStatus}
+                  onChange={(e) => setFilterStatus(e.target.value)}
+                  className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent"
+                >
+                  <option value="all">All Status</option>
+                  <option value="follow-up">Follow-up</option>
+                  <option value="discharged">Discharged</option>
+                  <option value="referred">Referred</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Examination List */}
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Exam ID</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Date</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Indication</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Impression</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">TZ Type</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Biopsy</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
+                    <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {filteredExams.map((exam) => (
+                    <tr key={exam.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="font-mono font-semibold text-[#0A2540]">{exam.id}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{formatDate(exam.date)}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{exam.indication}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{exam.impression}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{exam.tzType}</div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                          exam.biopsy === 'Taken'
+                            ? 'bg-red-100 text-red-800'
+                            : 'bg-green-100 text-green-800'
+                        }`}>
+                          {exam.biopsy}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                          exam.finalStatus.includes('Follow-up')
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : exam.finalStatus.includes('Discharged')
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        }`}>
+                          {exam.finalStatus}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <button
+                          onClick={() => setSelectedExam(exam)}
+                          className="text-[#05998c] hover:text-[#047569] font-medium text-sm flex items-center gap-1"
+                        >
+                          <Eye className="w-4 h-4" />
+                          View
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {filteredExams.length === 0 && (
+              <div className="text-center py-12">
+                <FileText className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+                <p className="text-gray-500">No examination records found</p>
+              </div>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/GreenFilterPage.tsx

@@ -0,0 +1,314 @@
+import { useState } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, Info, X, Save, ChevronRight } from 'lucide-react';
+import { ImageAnnotator } from '../components/ImageAnnotator';
+import { ImagingObservations } from '../components/ImagingObservations';
+
+type CapturedItem = {
+  id: string;
+  type: 'image' | 'video';
+  url: string;
+  timestamp: Date;
+  annotations?: any[];
+};
+
+type Props = {
+  goBack: () => void;
+  onNext: () => void;
+};
+
+export function GreenFilterPage({ goBack, onNext }: Props) {
+  const [capturedItems, setCapturedItems] = useState<CapturedItem[]>([]);
+  const [isRecording, setIsRecording] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [showExitWarning, setShowExitWarning] = useState(false);
+  const [greenApplied, setGreenApplied] = useState(false);
+  const baseImageUrl = "/C87Aceto_(1).jpg";
+  const greenImageUrl = "/greenC87Aceto_(1).jpg";
+  const liveFeedImage = greenApplied ? greenImageUrl : baseImageUrl;
+
+  const handleCaptureImage = () => {
+    const newCapture: CapturedItem = {
+      id: Date.now().toString(),
+      type: 'image',
+      url: liveFeedImage,
+      timestamp: new Date()
+    };
+    setCapturedItems(prev => [...prev, newCapture]);
+  };
+
+  const handleToggleRecording = () => {
+    if (!isRecording) {
+      setIsRecording(true);
+    } else {
+      setIsRecording(false);
+      const newCapture: CapturedItem = {
+        id: Date.now().toString(),
+        type: 'video',
+        url: liveFeedImage,
+        timestamp: new Date()
+      };
+      setCapturedItems(prev => [...prev, newCapture]);
+    }
+  };
+
+  const handleSelectImage = (item: CapturedItem) => {
+    setSelectedImage(item.url);
+  };
+
+  const handleAnnotationsChange = (newAnnotations: any[]) => {
+    if (selectedImage) {
+      setCapturedItems(prev => prev.map(item => 
+        item.url === selectedImage ? { ...item, annotations: newAnnotations } : item
+      ));
+    }
+  };
+
+  const handleDeleteImage = (id: string) => {
+    setCapturedItems(prev => prev.filter(item => item.id !== id));
+    if (selectedImage === capturedItems.find(item => item.id === id)?.url) {
+      setSelectedImage(null);
+    }
+  };
+
+  const handleConfirmExit = () => {
+    if (capturedItems.length > 0) {
+      setShowExitWarning(true);
+    } else {
+      goBack();
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-4 md:p-6">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <button
+          onClick={handleConfirmExit}
+          className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-200"
+        >
+          <ArrowLeft className="w-5 h-5 text-gray-600" />
+          <span className="font-medium text-gray-700">Back</span>
+        </button>
+        
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-200">
+            <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+            <span className="font-semibold text-gray-800">Green Filter Exam</span>
+          </div>
+          <button onClick={onNext} className="px-6 md:px-8 py-2 md:py-3 rounded-xl bg-gray-600 text-white font-bold shadow-lg shadow-gray-500/20 hover:bg-slate-700 hover:shadow-gray-500/30 transition-all flex items-center justify-center gap-2 text-sm md:text-base">
+            <Save className="w-4 h-4 md:w-5 md:h-5" />
+            <span className="hidden lg:inline">Next</span>
+            <span className="inline lg:hidden">Next</span>
+            <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        {/* Left Column: Live Feed / Selected Image */}
+        <div className="lg:col-span-2">
+          <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
+                <Info className="w-5 h-5 text-[#05998c]" />
+                {selectedImage ? 'Selected Image' : 'Live Feed'}
+              </h2>
+              <div className="flex items-center gap-2">
+                {selectedImage && (
+                  <button
+                    onClick={() => setSelectedImage(null)}
+                    className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
+                  >
+                    <X className="w-4 h-4" />
+                    <span className="text-sm font-medium">Clear Selection</span>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Image Display */}
+            <div className="relative bg-gray-900 rounded-xl overflow-hidden mb-6 border-2 border-gray-700">
+              <img 
+                src={selectedImage || liveFeedImage} 
+                alt="Cervix examination" 
+                className="w-full h-auto"
+              />
+            </div>
+
+            {/* Capture Controls */}
+            {!selectedImage && (
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-center gap-3">
+                  <button
+                    onClick={handleCaptureImage}
+                    className="flex items-center gap-2 px-6 py-3 bg-[#05998c] text-white rounded-lg hover:bg-[#048a7d] transition-colors shadow-md font-semibold"
+                  >
+                    <Camera className="w-5 h-5" />
+                    Capture Image
+                  </button>
+                  
+                  <button
+                    onClick={handleToggleRecording}
+                    className={`flex items-center gap-2 px-6 py-3 rounded-lg transition-colors shadow-md font-semibold ${
+                      isRecording 
+                        ? 'bg-red-600 hover:bg-red-700 text-white' 
+                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300'
+                    }`}
+                  >
+                    {isRecording ? (
+                      <>
+                        <div className="w-3 h-3 bg-white rounded-sm"></div>
+                        Stop Recording
+                      </>
+                    ) : (
+                      <>
+                        <Video className="w-5 h-5" />
+                        Record Video
+                      </>
+                    )}
+                  </button>
+                </div>
+                <button className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors">
+                  Next
+                  <ArrowRight className="w-4 h-4" />
+                </button>
+              </div>
+            )}
+
+            {/* Selected Image Tools */}
+            {selectedImage && (
+              <div className="space-y-4">
+                <div className="flex justify-end">
+                  <button className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
+                    Next
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+                <ImageAnnotator 
+                  imageUrl={selectedImage}
+                  onAnnotationsChange={handleAnnotationsChange}
+                />
+                <ImagingObservations />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Column: Captured Items */}
+        <div className="space-y-6">
+          <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+            {/* Green Filter Toggle */}
+            {!selectedImage && (
+              <div className="mb-6 flex items-center justify-between gap-4">
+                <div className="flex-1 bg-[#05998c] text-white px-6 py-2 rounded-lg">
+                  <span className="font-bold">Green Filter</span>
+                </div>
+                <button
+                  onClick={() => setGreenApplied(prev => !prev)}
+                  className={`relative inline-flex h-8 w-16 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                    greenApplied ? 'bg-blue-500' : 'bg-gray-300'
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform ${
+                      greenApplied ? 'translate-x-9' : 'translate-x-1'
+                    }`}
+                  />
+                  <span className={`absolute text-xs font-semibold ${
+                    greenApplied ? 'left-2 text-white' : 'right-2 text-gray-600'
+                  }`}>
+                    {greenApplied ? 'ON' : 'OFF'}
+                  </span>
+                </button>
+              </div>
+            )}
+
+            <h3 className="text-lg font-bold text-gray-800 mb-4">
+              Captured Items ({capturedItems.length})
+            </h3>
+            
+            {capturedItems.length === 0 ? (
+              <p className="text-gray-500 text-center py-8">No items captured yet</p>
+            ) : (
+              <div className="space-y-3 max-h-96 overflow-y-auto">
+                {capturedItems.map((item) => (
+                  <div
+                    key={item.id}
+                    className={`relative group border-2 rounded-lg overflow-hidden cursor-pointer transition-all ${
+                      selectedImage === item.url 
+                        ? 'border-[#05998c] ring-2 ring-[#05998c]/50' 
+                        : 'border-gray-200 hover:border-[#05998c]'
+                    }`}
+                    onClick={() => handleSelectImage(item)}
+                  >
+                    <img 
+                      src={item.url} 
+                      alt={`Captured ${item.type}`}
+                      className="w-full h-32 object-cover"
+                    />
+                    <div className="absolute top-2 left-2">
+                      <span className={`px-2 py-1 rounded text-xs font-semibold ${
+                        item.type === 'image' 
+                          ? 'bg-blue-500 text-white' 
+                          : 'bg-purple-500 text-white'
+                      }`}>
+                        {item.type === 'image' ? 'Image' : 'Video'}
+                      </span>
+                    </div>
+                    <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteImage(item.id);
+                        }}
+                        className="p-1.5 bg-red-500 hover:bg-red-600 text-white rounded-full transition-colors"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                    <div className="p-2 bg-gray-50">
+                      <p className="text-xs text-gray-600">
+                        {item.timestamp.toLocaleTimeString()}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Exit Warning Modal */}
+      {showExitWarning && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
+            <h3 className="text-xl font-bold text-gray-900 mb-3">Unsaved Changes</h3>
+            <p className="text-gray-600 mb-6">
+              You have captured items that haven't been saved. Are you sure you want to exit?
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowExitWarning(false)}
+                className="flex-1 px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg font-medium transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  setShowExitWarning(false);
+                  goBack();
+                }}
+                className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
+              >
+                Exit Anyway
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/GuidedCapturePage.tsx

@@ -0,0 +1,952 @@
+import { useState, useEffect, useRef } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, FileText, Sparkles } from 'lucide-react';
+import { ImageAnnotator, type ImageAnnotatorHandle } from '../components/ImageAnnotator';
+import { AceticAnnotator, type AceticAnnotatorHandle } from '../components/AceticAnnotator';
+import { ImagingObservations } from '../components/ImagingObservations';
+import { BiopsyMarking, type BiopsyCapturedImage } from './BiopsyMarking';
+import { Compare } from './Compare';
+
+// Simple UI Component replacements
+const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
+  const baseClass = 'inline-flex items-center justify-center font-medium rounded transition-colors';
+  const variantClass = variant === 'ghost' ? 'hover:bg-gray-200 text-gray-700' : variant === 'outline' ? 'border border-gray-300 hover:bg-gray-50' : 'bg-blue-600 text-white hover:bg-blue-700';
+  const sizeClass = size === 'sm' ? 'px-2 py-1 text-sm' : 'px-4 py-2';
+  return <button className={`${baseClass} ${variantClass} ${sizeClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`} onClick={onClick} disabled={disabled} {...props}>{children}</button>;
+};
+
+type ExamStep = 'native' | 'acetowhite' | 'greenFilter' | 'lugol' | 'biopsyMarking' | 'report';
+
+type CapturedItem = {
+  id: string;
+  type: 'image' | 'video';
+  url: string;
+  timestamp: Date;
+  annotations?: any[];
+  observations?: any;
+};
+
+type Props = {
+  onNext: () => void;
+  initialMode?: 'capture' | 'annotation' | 'compare' | 'report';
+  onCapturedImagesChange?: (images: any[]) => void;
+  onModeChange?: (mode: 'capture' | 'annotation' | 'compare' | 'report') => void;
+};
+
+export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange, onModeChange }: Props) {
+  const imageAnnotatorRef = useRef<ImageAnnotatorHandle>(null);
+  const aceticAnnotatorRef = useRef<AceticAnnotatorHandle>(null);
+  const [currentStep, setCurrentStep] = useState<ExamStep>('native');
+  const [capturedItems, setCapturedItems] = useState<Record<ExamStep, CapturedItem[]>>({
+    native: [],
+    acetowhite: [],
+    greenFilter: [],
+    lugol: [],
+    biopsyMarking: [],
+    report: []
+  });
+  const [isRecording, setIsRecording] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [_annotations, setAnnotations] = useState<any[]>([]);
+  const [_observations, setObservations] = useState({});
+  const [isAnnotatingMode, setIsAnnotatingMode] = useState(false);
+  const [isCompareMode, setIsCompareMode] = useState(false);
+  const [aiDemoImageUrl, setAiDemoImageUrl] = useState<string | null>(null);
+  const audibleAlert = true;
+  
+  // Timer states for Acetowhite step
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [aceticApplied, setAceticApplied] = useState(false);
+  const [showFlash, setShowFlash] = useState(false);
+  const [timerPaused, setTimerPaused] = useState(false);
+  // Green filter state
+  const [greenApplied, setGreenApplied] = useState(false);
+  
+  // Timer states for Lugol step
+  const [lugolTimerStarted, setLugolTimerStarted] = useState(false);
+  const [lugolSeconds, setLugolSeconds] = useState(0);
+  const [lugolApplied, setLugolApplied] = useState(false);
+  const [lugolShowFlash, setLugolShowFlash] = useState(false);
+  const [lugolTimerPaused, setLugolTimerPaused] = useState(false);
+
+  // Placeholder image URL for demo
+  const baseImageUrl = "/C87Aceto_(1).jpg";
+  const greenImageUrl = "/greenC87Aceto_(1).jpg";
+  const liveFeedImageUrl = currentStep === 'greenFilter' && greenApplied ? greenImageUrl : baseImageUrl;
+
+  // Timer effect for Acetowhite step
+  useEffect(() => {
+    if (!timerStarted || !aceticApplied || currentStep !== 'acetowhite' || timerPaused) return;
+
+    const interval = setInterval(() => {
+      setSeconds(prev => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timerStarted, aceticApplied, currentStep, timerPaused]);
+
+  // Timer effect for Lugol step
+  useEffect(() => {
+    if (!lugolTimerStarted || !lugolApplied || currentStep !== 'lugol' || lugolTimerPaused) return;
+
+    const interval = setInterval(() => {
+      setLugolSeconds(prev => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [lugolTimerStarted, lugolApplied, currentStep, lugolTimerPaused]);
+
+  // Check for 1 minute and 3 minute marks for Lugol
+  useEffect(() => {
+    if (currentStep !== 'lugol') return;
+    
+    if (lugolSeconds === 60) {
+      setLugolShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 1 minute mark');
+      }
+      setTimeout(() => setLugolShowFlash(false), 3000);
+    } else if (lugolSeconds === 180) {
+      setLugolShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 3 minute mark');
+      }
+      setTimeout(() => setLugolShowFlash(false), 3000);
+    }
+  }, [lugolSeconds, audibleAlert, currentStep]);
+
+  // Check for 1 minute and 3 minute marks for Acetowhite
+  useEffect(() => {
+    if (currentStep !== 'acetowhite') return;
+    
+    if (seconds === 60) {
+      setShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 1 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    } else if (seconds === 180) {
+      setShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 3 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    }
+  }, [seconds, audibleAlert, currentStep]);
+
+  const formatTime = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  // Reset annotation mode and clear selections when changing steps
+  useEffect(() => {
+    setSelectedImage(null);
+    setAnnotations([]);
+    setObservations({});
+    
+    // Reset timer when leaving acetowhite step
+    if (currentStep !== 'acetowhite') {
+      setTimerStarted(false);
+      setSeconds(0);
+      setAceticApplied(false);
+      setShowFlash(false);
+      setTimerPaused(false);
+    }
+    // Reset green filter when leaving greenFilter step
+    if (currentStep !== 'greenFilter') {
+      setGreenApplied(false);
+    }
+  }, [currentStep]);
+
+  // Set initial mode based on initialMode prop
+  useEffect(() => {
+    if (initialMode) {
+      switch (initialMode) {
+        case 'capture':
+          setIsAnnotatingMode(false);
+          setIsCompareMode(false);
+          setSelectedImage(null);
+          break;
+        case 'annotation':
+          setIsAnnotatingMode(true);
+          setIsCompareMode(false);
+          break;
+        case 'compare':
+          setIsCompareMode(true);
+          setIsAnnotatingMode(false);
+          break;
+        case 'report':
+          setCurrentStep('report');
+          break;
+      }
+    }
+  }, [initialMode]);
+
+  const handleAceticApplied = () => {
+    setAceticApplied(true);
+    setTimerStarted(true);
+    setSeconds(0);
+  };
+
+  const handleRestartTimer = () => {
+    setSeconds(0);
+    setTimerStarted(false);
+    setAceticApplied(false);
+    setShowFlash(false);
+    setTimerPaused(false);
+  };
+
+  const handleLugolApplied = () => {
+    setLugolApplied(true);
+    setLugolTimerStarted(true);
+    setLugolSeconds(0);
+  };
+
+  const handleLugolRestartTimer = () => {
+    setLugolSeconds(0);
+    setLugolTimerStarted(false);
+    setLugolApplied(false);
+    setLugolShowFlash(false);
+    setLugolTimerPaused(false);
+  };
+
+  const steps: { key: ExamStep; label: string; stepNum: number }[] = [
+    { key: 'native', label: 'Native', stepNum: 1 },
+    { key: 'acetowhite', label: 'Acetic Acid', stepNum: 2 },
+    { key: 'greenFilter', label: 'Green Filter', stepNum: 3 },
+    { key: 'lugol', label: 'Lugol', stepNum: 4 },
+    { key: 'biopsyMarking', label: 'Biopsy Marking', stepNum: 5 }
+  ];
+
+  
+
+  const handleCaptureImage = () => {
+    const newCapture: CapturedItem = {
+      id: Date.now().toString(),
+      type: 'image',
+      url: liveFeedImageUrl,
+      timestamp: new Date()
+    };
+    setCapturedItems(prev => ({
+      ...prev,
+      [currentStep]: [...prev[currentStep], newCapture]
+    }));
+  };
+
+  const handleToggleRecording = () => {
+    if (!isRecording) {
+      setIsRecording(true);
+    } else {
+      setIsRecording(false);
+      const newCapture: CapturedItem = {
+        id: Date.now().toString(),
+        type: 'video',
+        url: liveFeedImageUrl,
+        timestamp: new Date()
+      };
+      setCapturedItems(prev => ({
+        ...prev,
+        [currentStep]: [...prev[currentStep], newCapture]
+      }));
+    }
+  };
+
+  const handleAIAssist = () => {
+    // Set the AI demo image URL
+    setAiDemoImageUrl('/AI_Demo_img.png');
+    
+    // Enter annotation mode
+    setIsAnnotatingMode(true);
+
+    // Demo AI Annotations for the image
+    const demoAIAnnotations = [
+      {
+        id: 'ai-cervix-' + Date.now(),
+        type: 'rect' as const,
+        x: 72,
+        y: 160,
+        width: 910,
+        height: 760,
+        color: '#22c55e',
+        label: 'Cervix',
+        source: 'ai' as const,
+        identified: false
+      },
+      {
+        id: 'ai-scj-' + Date.now(),
+        type: 'circle' as const,
+        x: 275,
+        y: 310,
+        width: 280,
+        height: 280,
+        color: '#6366f1',
+        label: 'SCJ',
+        source: 'ai' as const,
+        identified: false
+      },
+      {
+        id: 'ai-os-' + Date.now(),
+        type: 'polygon' as const,
+        x: 350,
+        y: 380,
+        width: 150,
+        height: 100,
+        color: '#eab308',
+        label: 'OS',
+        source: 'ai' as const,
+        identified: false,
+        points: [
+          { x: 350, y: 380 },
+          { x: 500, y: 380 },
+          { x: 500, y: 480 },
+          { x: 350, y: 480 }
+        ]
+      }
+    ];
+
+    // Add AI annotations to ImageAnnotator after a brief delay to ensure component is ready
+    setTimeout(() => {
+      if (imageAnnotatorRef.current) {
+        imageAnnotatorRef.current.addAIAnnotations(demoAIAnnotations);
+      }
+    }, 100);
+  };
+
+  const handleDeleteCapture = (id: string) => {
+    const newItems = capturedItems[currentStep].filter(item => item.id !== id);
+    setCapturedItems(prev => ({
+      ...prev,
+      [currentStep]: newItems
+    }));
+    if (selectedImage === id) {
+      setSelectedImage(null);
+    }
+  };
+
+  const selectedItem = selectedImage
+    ? capturedItems[currentStep].find(item => item.id === selectedImage)
+    : null;
+
+  const totalCaptures = capturedItems[currentStep].length;
+  const imageCaptures = capturedItems[currentStep].filter(item => item.type === 'image');
+  const videoCaptures = capturedItems[currentStep].filter(item => item.type === 'video');
+  const biopsyCapturedImages: BiopsyCapturedImage[] = Object.entries(capturedItems).flatMap(([stepId, items]) =>
+    items.map(item => ({ id: item.id, src: item.url, stepId, type: item.type }))
+  );
+
+  // Notify parent component when captured images change
+  useEffect(() => {
+    if (onCapturedImagesChange) {
+      onCapturedImagesChange(biopsyCapturedImages);
+    }
+  }, [capturedItems, onCapturedImagesChange]);
+
+  // Notify parent component when mode changes
+  useEffect(() => {
+    if (onModeChange) {
+      if (isCompareMode) {
+        onModeChange('compare');
+      } else if (isAnnotatingMode) {
+        onModeChange('annotation');
+      } else {
+        onModeChange('capture');
+      }
+    }
+  }, [isCompareMode, isAnnotatingMode, onModeChange]);
+
+  return (
+    <div className="w-full bg-white/95 relative">
+      <div className="relative z-10 py-4 md:py-6 lg:py-8">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          
+          {/* Page Header */}
+          <div className="mb-4 md:mb-6">
+            {/* Progress Bar - Capture / Annotate / Compare / Report */}
+            <div className="mb-4 flex gap-1 md:gap-2">
+              {['Capture', 'Annotate', 'Compare', 'Report'].map((stage, idx) => (
+                <div key={stage} className="flex items-center flex-1">
+                  <div
+                    className={`flex-1 py-2 px-2 md:px-3 rounded-3xl font-medium text-sm md:text-base transition-all border-2 border-[#05998c] cursor-default pointer-events-none ${
+                      (stage === 'Capture' && !selectedImage && !isAnnotatingMode && !isCompareMode) ||
+                      (stage === 'Annotate' && (selectedImage || isAnnotatingMode) && !isCompareMode) ||
+                      (stage === 'Compare' && isCompareMode) ||
+                      (stage === 'Report' && currentStep === 'report')
+                        ? 'bg-[#05998c] text-white shadow-md'
+                        : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    <span className="flex items-center justify-center gap-2">
+                      {stage === 'Capture' && <Camera className="w-4 h-4" />}
+                      {stage === 'Annotate' && <Edit2 className="w-4 h-4" />}
+                      {stage === 'Compare' && <Info className="w-4 h-4" />}
+                      {stage === 'Report' && <FileText className="w-4 h-4" />}
+                      <span>{stage}</span>
+                    </span>
+                  </div>
+                  {idx < 3 && <div className="w-1.5 h-1.5 rounded-full bg-gray-300 mx-1" />}
+                </div>
+              ))}
+            </div>
+
+            {/* Step Navigation */}
+            {!isCompareMode && (
+            <div className="flex gap-2 flex-wrap">
+              {steps.map(step => (
+                <button
+                  key={step.key}
+                  onClick={() => setCurrentStep(step.key)}
+                  className={`relative px-5 py-3 rounded-lg font-medium text-base transition-all ${
+                    currentStep === step.key && !isCompareMode
+                      ? 'bg-[#05998c] text-white shadow-md'
+                      : 'bg-white text-gray-600 border border-gray-200 hover:border-[#05998c]'
+                  }`}
+                >
+                  <div className="flex items-center gap-1.5">
+                    {capturedItems[step.key].length > 0 && (
+                      <CheckCircle2 className="w-3 h-3" />
+                    )}
+                    <span>{step.label}</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+            )}
+          </div>
+
+          {/* Back and Next Navigation for Guided Capture Steps */}
+          {currentStep !== 'biopsyMarking' && !isAnnotatingMode && !isCompareMode && (
+            <div className="flex items-center gap-3 px-4 py-2.5 bg-white border-b border-slate-200 shadow-sm mb-4">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                className="h-8 px-2 text-slate-700" 
+                onClick={() => {
+                  const currentIndex = steps.findIndex(s => s.key === currentStep);
+                  if (currentIndex > 0) {
+                    setCurrentStep(steps[currentIndex - 1].key);
+                  }
+                }}
+                disabled={steps.findIndex(s => s.key === currentStep) === 0}
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back
+              </Button>
+              <h2 className="text-lg font-semibold text-slate-800 flex-1">
+                {steps.find(s => s.key === currentStep)?.label || 'Guided Capture'}
+              </h2>
+              <button 
+                onClick={() => {
+                  const currentIndex = steps.findIndex(s => s.key === currentStep);
+                  if (currentIndex < steps.length - 1) {
+                    setCurrentStep(steps[currentIndex + 1].key);
+                  }
+                }}
+                className="h-8 px-3 bg-gray-600 text-white hover:bg-slate-700 rounded transition-colors flex items-center gap-2"
+                disabled={steps.findIndex(s => s.key === currentStep) === steps.length - 1}
+              >
+                Next
+                <ArrowRight className="h-4 w-4" />
+              </button>
+            </div>
+          )}
+
+          {currentStep === 'biopsyMarking' && !isCompareMode && !isAnnotatingMode ? (
+            <BiopsyMarking
+              onBack={() => setCurrentStep('lugol')}
+              onNext={() => setCurrentStep('report')}
+              capturedImages={biopsyCapturedImages}
+            />
+          ) : isCompareMode ? (
+            <Compare
+              onBack={() => {
+                setIsCompareMode(false);
+                setIsAnnotatingMode(false);
+                setSelectedImage(null);
+              }}
+              capturedImages={biopsyCapturedImages}
+            />
+          ) : isAnnotatingMode ? (
+            // Multi-Image Annotation Mode
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <button
+                  onClick={() => {
+                    setIsAnnotatingMode(false);
+                    setAiDemoImageUrl(null);
+                  }}
+                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Live Feed
+                </button>
+                <button
+                  onClick={handleAIAssist}
+                  className="flex items-center gap-2 px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                >
+                  <Sparkles className="w-5 h-5" />
+                  AI Assist
+                </button>
+              </div>
+
+              <div>
+                {currentStep === 'acetowhite' ? (
+                  <AceticAnnotator 
+                    ref={aceticAnnotatorRef}
+                    imageUrls={aiDemoImageUrl ? [aiDemoImageUrl] : imageCaptures.map(item => item.url)}
+                    onAnnotationsChange={setAnnotations} 
+                  />
+                ) : (
+                  <ImageAnnotator 
+                    ref={imageAnnotatorRef}
+                    imageUrls={aiDemoImageUrl ? [aiDemoImageUrl] : imageCaptures.map(item => item.url)}
+                    onAnnotationsChange={setAnnotations} 
+                  />
+                )}
+              </div>
+            </div>
+          ) : !selectedImage ? (
+            // Live Feed View
+            <>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+              {/* Main Live Feed */}
+              <div className="lg:col-span-2 space-y-4">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  {/* Live Video Feed */}
+                  <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 mb-4">
+                    <div className="aspect-video flex items-center justify-center">
+                      <img src={liveFeedImageUrl} alt="Live Feed" className="w-full h-full object-cover" />
+                      <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
+                        <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-white animate-pulse' : 'bg-white/70'}`} />
+                        {isRecording ? 'Recording' : 'Live'}
+                      </div>
+                      
+
+                      {currentStep === 'acetowhite' && aceticApplied && (
+                        <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
+                          <p className="text-2xl font-mono font-bold">{formatTime(seconds)}</p>
+                        </div>
+                      )}
+
+                      {currentStep === 'lugol' && lugolApplied && (
+                        <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
+                          <p className="text-2xl font-mono font-bold">{formatTime(lugolSeconds)}</p>
+                        </div>
+                      )}
+
+                      {currentStep === 'acetowhite' && showFlash && (
+                        <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
+                          <div className="bg-white/90 px-6 py-4 rounded-lg">
+                            <p className="text-2xl font-bold text-[#0A2540]">
+                              {seconds >= 180 ? '3 Minutes!' : '1 Minute!'}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {currentStep === 'lugol' && lugolShowFlash && (
+                        <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
+                          <div className="bg-white/90 px-6 py-4 rounded-lg">
+                            <p className="text-2xl font-bold text-[#0A2540]">
+                              {lugolSeconds >= 180 ? '3 Minutes!' : '1 Minute!'}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+
+                  {totalCaptures === 0 && (
+                    <div className="mt-4 flex items-center gap-2 text-sm text-amber-600 bg-amber-50 px-4 py-2 rounded-lg">
+                      <Info className="w-4 h-4" />
+                      <span>{(currentStep === 'acetowhite' && !timerStarted) || (currentStep === 'lugol' && !lugolTimerStarted) ? (currentStep === 'acetowhite' ? 'Apply acetic acid to start' : 'Apply Lugol iodine to start') : 'Capture Required'}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Sidebar - Capture Controls and Media */}
+              <div className="lg:col-span-1">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  {/* Acetowhite Timer Section */}
+                  {currentStep === 'acetowhite' && !timerStarted && (
+                    <div className="mb-4">
+                      {/* Apply Acetic Acid Message Box */}
+                      <div className="bg-cyan-500 rounded-lg p-4 mb-4 shadow-md">
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
+                            <Info className="w-6 h-6 text-teal-600" />
+                          </div>
+                          <div>
+                            <p className="text-white font-bold text-lg">Apply Acetic Acid Now</p>
+                            <p className="text-teal-100 text-sm">Apply 3-5% acetic acid to the cervix</p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={handleAceticApplied}
+                        className="w-full px-6 py-3 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-all shadow-md hover:shadow-lg"
+                      >
+                        Acetic acid applied — Start timer
+                      </button>
+                    </div>
+                  )}
+
+                  {currentStep === 'acetowhite' && timerStarted && (
+                    <div className={`mb-4 rounded-lg p-4 border-2 transition-all ${
+                      seconds < 50 
+                        ? 'bg-gradient-to-r from-[#05998c]/10 to-[#0A2540]/10 border-[#05998c]'
+                        : seconds < 55
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 60
+                        ? 'bg-red-100 border-red-300'
+                        : seconds >= 60 && seconds <= 60
+                        ? 'bg-red-200 border-red-400'
+                        : seconds > 60 && seconds < 170
+                        ? 'bg-gradient-to-r from-green-50 to-green-50 border-green-300'
+                        : seconds < 175
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 180
+                        ? 'bg-red-100 border-red-300'
+                        : 'bg-red-200 border-red-400'
+                    }`}>
+                      <div className="flex flex-col gap-3">
+                        <div>
+                          <p className="text-sm text-gray-600 mb-1">Timer</p>
+                          <p className={`text-4xl font-bold font-mono ${
+                            seconds >= 180 ? 'text-red-600' : 
+                            seconds >= 60 ? 'text-amber-500' : 
+                            seconds >= 50 ? 'text-amber-400' : 
+                            'text-[#0A2540]'
+                          }`}>{formatTime(seconds)}</p>
+                          {seconds >= 60 && seconds < 180 && (
+                            <p className="text-sm text-amber-600 mt-1">Approaching 3-minute mark...</p>
+                          )}
+                          {seconds >= 180 && (
+                            <p className="text-sm text-green-600 mt-1">3-minute observation period complete</p>
+                          )}
+                        </div>
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => setTimerPaused(!timerPaused)}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            {timerPaused ? (
+                              <>
+                                <Video className="w-4 h-4" />
+                                <span className="text-sm font-medium">Play</span>
+                              </>
+                            ) : (
+                              <>
+                                <Pause className="w-4 h-4" />
+                                <span className="text-sm font-medium">Pause</span>
+                              </>
+                            )}
+                          </button>
+                          <button
+                            onClick={handleRestartTimer}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            <RotateCcw className="w-4 h-4" />
+                            <span className="text-sm font-medium">Restart</span>
+                          </button>
+                        </div>
+                      </div>
+                      {seconds === 60 && (
+                        <div className="mt-3 bg-amber-100 border border-amber-300 rounded-lg p-3">
+                          <p className="text-amber-800 font-semibold text-sm">⏰ 1-minute mark - Capture recommended!</p>
+                        </div>
+                      )}
+                      {seconds === 180 && (
+                        <div className="mt-3 bg-green-100 border border-green-300 rounded-lg p-3">
+                          <p className="text-green-800 font-semibold text-sm">⏰ 3-minute mark - Final capture recommended!</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Green Filter Toggle */}
+                  {currentStep === 'greenFilter' && (
+                    <div className="mb-4 flex items-center justify-between gap-4">
+                      <div className="flex-1 bg-[#05998c] text-white px-6 py-2 rounded-lg">
+                        <span className="font-bold">Green Filter</span>
+                      </div>
+                      <button
+                        onClick={() => setGreenApplied(prev => !prev)}
+                        className={`relative inline-flex h-8 w-16 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                          greenApplied ? 'bg-blue-500' : 'bg-gray-300'
+                        }`}
+                      >
+                        <span
+                          className={`inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform ${
+                            greenApplied ? 'translate-x-9' : 'translate-x-1'
+                          }`}
+                        />
+                        <span className={`absolute text-xs font-semibold ${
+                          greenApplied ? 'left-2 text-white' : 'right-2 text-gray-600'
+                        }`}>
+                          {greenApplied ? 'ON' : 'OFF'}
+                        </span>
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Lugol Timer Section */}
+                  {currentStep === 'lugol' && !lugolTimerStarted && (
+                    <div className="mb-4">
+                      {/* Apply Lugol Message Box */}
+                      <div className="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg p-4 mb-4 shadow-md">
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
+                            <Info className="w-6 h-6 text-yellow-600" />
+                          </div>
+                          <div>
+                            <p className="text-white font-bold text-lg">Apply Lugol Iodine Now</p>
+                            <p className="text-yellow-100 text-sm">Apply Lugol iodine solution to the cervix</p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={handleLugolApplied}
+                        className="w-full px-6 py-3 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-all shadow-md hover:shadow-lg"
+                      >
+                        Lugol applied — Start timer
+                      </button>
+                    </div>
+                  )}
+
+                  {currentStep === 'lugol' && lugolTimerStarted && (
+                    <div className={`mb-4 rounded-lg p-4 border-2 transition-all ${
+                      lugolSeconds < 50 
+                        ? 'bg-gradient-to-r from-[#05998c]/10 to-[#0A2540]/10 border-[#05998c]'
+                        : lugolSeconds < 55
+                        ? 'bg-red-50 border-red-200'
+                        : lugolSeconds < 60
+                        ? 'bg-red-100 border-red-300'
+                        : lugolSeconds >= 60 && lugolSeconds <= 60
+                        ? 'bg-red-200 border-red-400'
+                        : lugolSeconds > 60 && lugolSeconds < 170
+                        ? 'bg-gradient-to-r from-green-50 to-green-50 border-green-300'
+                        : lugolSeconds < 175
+                        ? 'bg-red-50 border-red-200'
+                        : lugolSeconds < 180
+                        ? 'bg-red-100 border-red-300'
+                        : 'bg-red-200 border-red-400'
+                    }`}>
+                      <div className="flex flex-col gap-3">
+                        <div>
+                          <p className="text-sm text-gray-600 mb-1">Timer</p>
+                          <p className={`text-4xl font-bold font-mono ${
+                            lugolSeconds >= 180 ? 'text-red-600' : 
+                            lugolSeconds >= 60 ? 'text-amber-500' : 
+                            lugolSeconds >= 50 ? 'text-amber-400' : 
+                            'text-[#0A2540]'
+                          }`}>{formatTime(lugolSeconds)}</p>
+                          {lugolSeconds >= 60 && lugolSeconds < 180 && (
+                            <p className="text-sm text-amber-600 mt-1">Approaching 3-minute mark...</p>
+                          )}
+                          {lugolSeconds >= 180 && (
+                            <p className="text-sm text-green-600 mt-1">3-minute observation period complete</p>
+                          )}
+                        </div>
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => setLugolTimerPaused(!lugolTimerPaused)}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            {lugolTimerPaused ? (
+                              <>
+                                <Video className="w-4 h-4" />
+                                <span className="text-sm font-medium">Play</span>
+                              </>
+                            ) : (
+                              <>
+                                <Pause className="w-4 h-4" />
+                                <span className="text-sm font-medium">Pause</span>
+                              </>
+                            )}
+                          </button>
+                          <button
+                            onClick={handleLugolRestartTimer}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            <RotateCcw className="w-4 h-4" />
+                            <span className="text-sm font-medium">Restart</span>
+                          </button>
+                        </div>
+                      </div>
+                      {lugolSeconds === 60 && (
+                        <div className="mt-3 bg-amber-100 border border-amber-300 rounded-lg p-3">
+                          <p className="text-amber-800 font-semibold text-sm">⏰ 1-minute mark - Capture recommended!</p>
+                        </div>
+                      )}
+                      {lugolSeconds === 180 && (
+                        <div className="mt-3 bg-green-100 border border-green-300 rounded-lg p-3">
+                          <p className="text-green-800 font-semibold text-sm">⏰ 3-minute mark - Final capture recommended!</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Capture Controls */}
+                  <div className="flex gap-2 mb-4">
+                    <button
+                      onClick={handleCaptureImage}
+                      disabled={(currentStep === 'acetowhite' && !timerStarted) || (currentStep === 'lugol' && !lugolTimerStarted)}
+                      className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                        (currentStep === 'acetowhite' && showFlash && (seconds === 60 || seconds === 180)) || 
+                        (currentStep === 'lugol' && lugolShowFlash && (lugolSeconds === 60 || lugolSeconds === 180))
+                          ? 'bg-[#05998c] text-white animate-pulse'
+                          : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                      } disabled:opacity-50 disabled:cursor-not-allowed`}
+                    >
+                      <Camera className="w-4 h-4" />
+                      Capture
+                    </button>
+                    <button
+                      onClick={handleToggleRecording}
+                      disabled={(currentStep === 'acetowhite' && !timerStarted) || (currentStep === 'lugol' && !lugolTimerStarted)}
+                      className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                        isRecording
+                          ? 'bg-red-500 text-white hover:bg-red-600'
+                          : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                      } disabled:opacity-50 disabled:cursor-not-allowed`}
+                    >
+                      {isRecording ? <Pause className="w-4 h-4" /> : <Video className="w-4 h-4" />}
+                      {isRecording ? 'Stop' : 'Record'}
+                    </button>
+                  </div>
+
+                  <h3 className="font-bold text-[#0A2540] mb-4">Captured Media</h3>
+                  
+                  {totalCaptures === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <Camera className="w-16 h-16 text-gray-300 mb-3" />
+                      <p className="text-gray-500 font-medium">No captures yet</p>
+                      <p className="text-sm text-gray-400 mt-1">Capture images or videos from live feed</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {/* Annotate Images Button */}
+                      <button
+                        onClick={() => setIsAnnotatingMode(true)}
+                        className="w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-[#05998c] text-white font-semibold hover:bg-[#047569] transition-colors text-base"
+                      >
+                        <Edit2 className="w-5 h-5" />
+                        Annotate Images
+                      </button>
+
+                      <div className="space-y-3">
+                        {/* Image Thumbnails */}
+                        {imageCaptures.length > 0 && (
+                          <div>
+                            <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Images ({imageCaptures.length})</h4>
+                            <div className="grid grid-cols-2 gap-2">
+                              {imageCaptures.map(item => (
+                                <div key={item.id} className="relative group">
+                                  <div 
+                                    className="aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200 transition-all"
+                                  >
+                                    <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
+                                    {item.annotations && item.annotations.length > 0 && (
+                                      <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
+                                        <CheckCircle2 className="w-3 h-3" />
+                                      </div>
+                                    )}
+                                  </div>
+                                  <button
+                                    onClick={() => handleDeleteCapture(item.id)}
+                                    className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                                  >
+                                    <X className="w-3 h-3" />
+                                  </button>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Video Items */}
+                        {videoCaptures.length > 0 && (
+                          <div className="mt-4">
+                            <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Videos ({videoCaptures.length})</h4>
+                            <div className="space-y-2">
+                              {videoCaptures.map(item => (
+                                <div key={item.id} className="relative group bg-gray-50 rounded-lg p-3 flex items-center gap-3">
+                                  <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
+                                    <Video className="w-6 h-6 text-gray-500" />
+                                  </div>
+                                  <div className="flex-1">
+                                    <p className="text-sm font-medium text-gray-700">Video Recording</p>
+                                    <p className="text-xs text-gray-500">{item.timestamp.toLocaleTimeString()}</p>
+                                  </div>
+                                  <button
+                                    onClick={() => handleDeleteCapture(item.id)}
+                                    className="p-1 hover:bg-red-50 rounded text-red-500"
+                                  >
+                                    <X className="w-4 h-4" />
+                                  </button>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Visual Observations - Full Width on Native Step */}
+            {currentStep === 'native' && (
+              <div className="w-full">
+                <ImagingObservations 
+                  onObservationsChange={setObservations}
+                  layout="horizontal"
+                />
+              </div>
+            )}
+            </>
+          ) : (
+            // Single Image Annotation View
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <button
+                  onClick={() => {
+                    setSelectedImage(null);
+                    setAnnotations([]);
+                    setObservations({});
+                  }}
+                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Live Feed
+                </button>
+                <button
+                  onClick={handleAIAssist}
+                  className="flex items-center gap-2 px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                >
+                  <Sparkles className="w-5 h-5" />
+                  AI Assist
+                </button>
+              </div>
+
+              <div>
+                <ImageAnnotator 
+                  ref={imageAnnotatorRef}
+                  imageUrl={selectedItem?.url || liveFeedImageUrl} 
+                  onAnnotationsChange={setAnnotations} 
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/HomePage.tsx

@@ -0,0 +1,45 @@
+import { Users, ArrowRight } from 'lucide-react';
+
+type Props = {
+  onNavigateToPatients: () => void;
+  onNext: () => void;
+};
+
+export function HomePage({ onNavigateToPatients, onNext }: Props) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center py-8 px-4">
+      <div className="w-full max-w-2xl mx-auto text-center space-y-8">
+        {/* Welcome Section */}
+        <div className="space-y-4">
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#0A2540]">
+            Welcome to Pathora
+          </h1>
+          <p className="text-base md:text-lg text-gray-600">
+            Manalife's AI-Powered Colposcopy Assistant
+          </p>
+        </div>
+
+        {/* Main CTA */}
+        <div className="mt-12">
+          <button
+            onClick={onNavigateToPatients}
+            className="inline-flex items-center gap-3 px-8 md:px-10 py-3 md:py-4 rounded-xl bg-[#05998c] text-white font-bold text-base md:text-lg shadow-lg shadow-teal-500/20 hover:bg-[#047569] hover:shadow-teal-500/30 transition-all"
+          >
+            <Users className="w-5 h-5 md:w-6 md:h-6" />
+            Manage Patients
+            <ArrowRight className="w-5 h-5 md:w-6 md:h-6" />
+          </button>
+        </div>
+
+        {/* Info Section */}
+        <div className="mt-16 pt-8 border-t border-gray-200">
+          <p className="text-sm md:text-base text-gray-600">
+            Select or create a patient to begin a colposcopy examination
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HomePage;

src/pages/LugolExamPage.tsx

@@ -0,0 +1,557 @@
+import { useState, useEffect } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight } from 'lucide-react';
+import { ImageAnnotator } from '../components/ImageAnnotator';
+
+type CapturedItem = {
+  id: string;
+  type: 'image' | 'video';
+  url: string;
+  timestamp: Date;
+  annotations?: any[];
+};
+
+type Props = {
+  goBack: () => void;
+  onNext: () => void;
+};
+
+export function LugolExamPage({ goBack, onNext }: Props) {
+  const [capturedItems, setCapturedItems] = useState<CapturedItem[]>([]);
+  const [isRecording, setIsRecording] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [annotations, setAnnotations] = useState<any[]>([]);
+  const [showExitWarning, setShowExitWarning] = useState(false);
+  
+  // Timer states
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [lugolApplied, setLugolApplied] = useState(false);
+  const [showFlash, setShowFlash] = useState(false);
+  const audibleAlert = true;
+  const [timerPaused, setTimerPaused] = useState(false);
+
+  const cervixImageUrl = "/C87Aceto_(1).jpg";
+
+  // Timer effect
+  useEffect(() => {
+    if (!timerStarted || !lugolApplied || timerPaused) return;
+
+    const interval = setInterval(() => {
+      setSeconds(prev => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timerStarted, lugolApplied, timerPaused]);
+
+  // Check for 1 minute and 3 minute marks
+  useEffect(() => {
+    if (seconds === 60) {
+      // 1 minute mark
+      setShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 1 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    } else if (seconds === 180) {
+      // 3 minute mark
+      setShowFlash(true);
+      if (audibleAlert) {
+        console.log('BEEP - 3 minute mark');
+      }
+      setTimeout(() => setShowFlash(false), 3000);
+    }
+  }, [seconds, audibleAlert]);
+
+  const formatTime = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleLugolApplied = () => {
+    setLugolApplied(true);
+    setTimerStarted(true);
+    setSeconds(0);
+  };
+
+  const handleRestartTimer = () => {
+    setSeconds(0);
+    setTimerStarted(false);
+    setLugolApplied(false);
+    setShowFlash(false);
+    setTimerPaused(false);
+  };
+
+  const handleCaptureImage = () => {
+    const newCapture: CapturedItem = {
+      id: Date.now().toString(),
+      type: 'image',
+      url: cervixImageUrl,
+      timestamp: new Date()
+    };
+    setCapturedItems(prev => [...prev, newCapture]);
+  };
+
+  const handleToggleRecording = () => {
+    if (!isRecording) {
+      setIsRecording(true);
+    } else {
+      setIsRecording(false);
+      const newCapture: CapturedItem = {
+        id: Date.now().toString(),
+        type: 'video',
+        url: cervixImageUrl,
+        timestamp: new Date()
+      };
+      setCapturedItems(prev => [...prev, newCapture]);
+    }
+  };
+
+  const handleSaveAnnotations = () => {
+    if (!selectedImage) return;
+    
+    setCapturedItems(prev => prev.map(item =>
+      item.id === selectedImage
+        ? { ...item, annotations }
+        : item
+    ));
+    setSelectedImage(null);
+    setAnnotations([]);
+  };
+
+  const handleDeleteCapture = (id: string) => {
+    setCapturedItems(prev => prev.filter(item => item.id !== id));
+    if (selectedImage === id) {
+      setSelectedImage(null);
+    }
+  };
+
+  const selectedItem = selectedImage
+    ? capturedItems.find(item => item.id === selectedImage)
+    : null;
+
+  const totalCaptures = capturedItems.length;
+  const imageCaptures = capturedItems.filter(item => item.type === 'image');
+  const videoCaptures = capturedItems.filter(item => item.type === 'video');
+  const hasRequiredCapture = imageCaptures.length > 0;
+
+  return (
+    <div className="w-full bg-white/95 relative">
+      <div className="relative z-10 py-4 md:py-6 lg:py-8">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          
+          {/* Page Header */}
+          <div className="mb-4 md:mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <button onClick={() => setShowExitWarning(true)} className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600">
+                  <ArrowLeft className="w-5 h-5" />
+                </button>
+                <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-[#0A2540]">Lugol Examination</h1>
+              </div>
+              <div className="flex items-center gap-3">
+              </div>
+            </div>
+
+            {/* Progress Bar - Capture / Annotation / Comparison View / Report */}
+            <div className="mb-4 flex gap-1 md:gap-2 items-center">
+              <div className="flex gap-1 md:gap-2 flex-1">
+                {['Capture', 'Annotation', 'Comparison View', 'Report'].map((stage, idx) => (
+                  <div key={stage} className="flex items-center flex-1">
+                    <button
+                      className={`flex-1 py-2 px-2 md:px-3 rounded-lg font-medium text-sm md:text-base transition-all border-2 border-[#0A2540] ${
+                        (stage === 'Capture' && !selectedImage) ||
+                        (stage === 'Annotation' && selectedImage)
+                          ? 'bg-[#05998c] text-white shadow-md'
+                          : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {stage}
+                    </button>
+                    {idx < 3 && <div className="w-1.5 h-1.5 rounded-full bg-gray-300 mx-1" />}
+                  </div>
+                ))}
+              </div>
+              <button onClick={onNext} className="ml-4 px-6 md:px-8 py-2 md:py-3 rounded-xl bg-gray-600 text-white font-bold shadow-lg shadow-gray-500/20 hover:bg-slate-700 hover:shadow-gray-500/30 transition-all flex items-center justify-center gap-2 text-sm md:text-base">
+                <Save className="w-4 h-4 md:w-5 md:h-5" />
+                <span className="hidden lg:inline">Next</span>
+                <span className="inline lg:hidden">Next</span>
+                <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
+              </button>
+            </div>
+          </div>
+
+          {!selectedImage ? (
+            // Live Feed View
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Main Live Feed */}
+              <div className="lg:col-span-2 space-y-4">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  <div className="mb-4">
+                    <h2 className="text-2xl md:text-3xl font-bold text-[#0A2540] mb-2">
+                      Lugol Iodine
+                    </h2>
+                    <p className="text-gray-600">
+                      Lugol iodine application and observation
+                    </p>
+                  </div>
+
+                  {/* Live Video Feed */}
+                  <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 mb-4">
+                    <div className="aspect-video flex items-center justify-center">
+                      <img src={cervixImageUrl} alt="Live Feed" className="w-full h-full object-cover" />
+                      
+                      {/* Live indicator */}
+                      <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
+                        <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-white animate-pulse' : 'bg-white/70'}`} />
+                        {isRecording ? 'Recording' : 'Live'}
+                      </div>
+
+                      {/* Timer overlay */}
+                      {lugolApplied && (
+                        <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
+                          <p className="text-2xl font-mono font-bold">{formatTime(seconds)}</p>
+                        </div>
+                      )}
+
+                      {/* Flash overlay at 1 and 3 minutes */}
+                      {showFlash && (
+                        <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
+                          <div className="bg-white/90 px-6 py-4 rounded-lg">
+                            <p className="text-2xl font-bold text-[#0A2540]">
+                              {seconds >= 180 ? '3 Minutes!' : '1 Minute!'}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="mt-4 flex items-center gap-2 text-sm text-gray-500">
+                    <Camera className="w-4 h-4" />
+                    <span>Captures: {totalCaptures} / 1 required (image)</span>
+                    {hasRequiredCapture && <CheckCircle2 className="w-4 h-4 text-green-500 ml-2" />}
+                  </div>
+
+                  {!hasRequiredCapture && timerStarted && (
+                    <div className="mt-4 flex items-center gap-2 text-sm text-amber-600 bg-amber-50 px-4 py-2 rounded-lg">
+                      <Info className="w-4 h-4" />
+                      <span>At least one image capture required</span>
+                    </div>
+                  )}
+
+                  {/* Captured Images Selection for Annotation */}
+                  {imageCaptures.length > 0 && (
+                    <div className="mt-6 pt-6 border-t border-gray-200">
+                      <h4 className="text-sm font-semibold text-gray-700 mb-3">Select Image to Annotate</h4>
+                      <div className="grid grid-cols-3 gap-3">
+                        {imageCaptures.map(item => (
+                          <div 
+                            key={item.id} 
+                            onClick={() => setSelectedImage(item.id)}
+                            className="relative group cursor-pointer"
+                          >
+                            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-[#05998c] transition-all">
+                              <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
+                              {item.annotations && item.annotations.length > 0 && (
+                                <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
+                                  <CheckCircle2 className="w-3 h-3" />
+                                </div>
+                              )}
+                            </div>
+                            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
+                              <span className="text-white text-xs font-semibold">Annotate</span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Captures Sidebar */}
+              <div className="lg:col-span-1">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                  {/* Lugol Timer Section */}
+                  {!timerStarted && (
+                    <div className="mb-6">
+                      {/* Apply Lugol Message Box */}
+                      <div className="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg p-4 mb-4 shadow-md">
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
+                            <Info className="w-6 h-6 text-yellow-600" />
+                          </div>
+                          <div>
+                            <p className="text-white font-bold text-lg">Apply Lugol Iodine Now</p>
+                            <p className="text-yellow-100 text-sm">Apply Lugol iodine solution to the cervix</p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={handleLugolApplied}
+                        className="w-full px-6 py-3 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-all shadow-md hover:shadow-lg"
+                      >
+                        Lugol applied — Start timer
+                      </button>
+                    </div>
+                  )}
+
+                  {timerStarted && (
+                    <div className={`mb-6 rounded-lg p-4 border-2 transition-all ${
+                      seconds < 50 
+                        ? 'bg-gradient-to-r from-[#05998c]/10 to-[#0A2540]/10 border-[#05998c]'
+                        : seconds < 55
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 60
+                        ? 'bg-red-100 border-red-300'
+                        : seconds >= 60 && seconds <= 60
+                        ? 'bg-red-200 border-red-400'
+                        : seconds > 60 && seconds < 170
+                        ? 'bg-gradient-to-r from-green-50 to-green-50 border-green-300'
+                        : seconds < 175
+                        ? 'bg-red-50 border-red-200'
+                        : seconds < 180
+                        ? 'bg-red-100 border-red-300'
+                        : 'bg-red-200 border-red-400'
+                    }`}>
+                      <div className="flex flex-col gap-3">
+                        <div>
+                          <p className="text-sm text-gray-600 mb-1">Timer</p>
+                          <p className={`text-4xl font-bold font-mono ${
+                            seconds >= 180 ? 'text-red-600' : 
+                            seconds >= 60 ? 'text-amber-500' : 
+                            seconds >= 50 ? 'text-amber-400' : 
+                            'text-[#0A2540]'
+                          }`}>{formatTime(seconds)}</p>
+                          {seconds >= 60 && seconds < 180 && (
+                            <p className="text-sm text-amber-600 mt-1">Approaching 3-minute mark...</p>
+                          )}
+                          {seconds >= 180 && (
+                            <p className="text-sm text-green-600 mt-1">3-minute observation period complete</p>
+                          )}
+                        </div>
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => setTimerPaused(!timerPaused)}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            {timerPaused ? (
+                              <>
+                                <Video className="w-4 h-4" />
+                                <span className="text-sm font-medium">Play</span>
+                              </>
+                            ) : (
+                              <>
+                                <Pause className="w-4 h-4" />
+                                <span className="text-sm font-medium">Pause</span>
+                              </>
+                            )}
+                          </button>
+                          <button
+                            onClick={handleRestartTimer}
+                            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                          >
+                            <RotateCcw className="w-4 h-4" />
+                            <span className="text-sm font-medium">Restart</span>
+                          </button>
+                        </div>
+                      </div>
+                      {seconds === 60 && (
+                        <div className="mt-3 bg-amber-100 border border-amber-300 rounded-lg p-3">
+                          <p className="text-amber-800 font-semibold text-sm">⏰ 1-minute mark - Capture recommended!</p>
+                        </div>
+                      )}
+                      {seconds === 180 && (
+                        <div className="mt-3 bg-green-100 border border-green-300 rounded-lg p-3">
+                          <p className="text-green-800 font-semibold text-sm">⏰ 3-minute mark - Final capture recommended!</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Capture Controls */}
+                  <div className="space-y-3 mb-6">
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleCaptureImage}
+                        disabled={!timerStarted}
+                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                          showFlash && (seconds === 60 || seconds === 180)
+                            ? 'bg-[#05998c] text-white animate-pulse'
+                            : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                        } disabled:opacity-50 disabled:cursor-not-allowed`}
+                      >
+                        <Camera className="w-4 h-4" />
+                        Capture
+                      </button>
+                      <button
+                        onClick={handleToggleRecording}
+                        disabled={!timerStarted}
+                        className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-semibold transition-colors text-sm ${
+                          isRecording
+                            ? 'bg-red-500 text-white hover:bg-red-600'
+                            : 'bg-[#05998c] text-white hover:bg-[#047569]'
+                        } disabled:opacity-50 disabled:cursor-not-allowed`}
+                      >
+                        {isRecording ? <Pause className="w-4 h-4" /> : <Video className="w-4 h-4" />}
+                        {isRecording ? 'Stop' : 'Record'}
+                      </button>
+                    </div>
+                    <button className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors">
+                      Next
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <h3 className="font-bold text-[#0A2540] mb-4">Captured Media</h3>
+                  
+                  {totalCaptures === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <Camera className="w-16 h-16 text-gray-300 mb-3" />
+                      <p className="text-gray-500 font-medium">No captures yet</p>
+                      <p className="text-sm text-gray-400 mt-1">Apply Lugol iodine and start capturing</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {/* Image Thumbnails */}
+                      {imageCaptures.length > 0 && (
+                        <div>
+                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Images ({imageCaptures.length})</h4>
+                          <div className="grid grid-cols-2 gap-2">
+                            {imageCaptures.map(item => (
+                              <div key={item.id} className="relative group">
+                                <div 
+                                  onClick={() => setSelectedImage(item.id)}
+                                  className="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-[#05998c] transition-all"
+                                >
+                                  <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
+                                  {item.annotations && item.annotations.length > 0 && (
+                                    <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
+                                      <CheckCircle2 className="w-3 h-3" />
+                                    </div>
+                                  )}
+                                </div>
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleDeleteCapture(item.id);
+                                  }}
+                                  className="absolute top-1 left-1 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                  <X className="w-3 h-3" />
+                                </button>
+                                <button
+                                  onClick={() => setSelectedImage(item.id)}
+                                  className="absolute bottom-1 right-1 bg-[#0A2540] text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                  <Edit2 className="w-3 h-3" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Video Items */}
+                      {videoCaptures.length > 0 && (
+                        <div className="mt-4">
+                          <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Videos ({videoCaptures.length})</h4>
+                          <div className="space-y-2">
+                            {videoCaptures.map(item => (
+                              <div key={item.id} className="relative group bg-gray-50 rounded-lg p-3 flex items-center gap-3">
+                                <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
+                                  <Video className="w-6 h-6 text-gray-500" />
+                                </div>
+                                <div className="flex-1">
+                                  <p className="text-sm font-medium text-gray-700">Video Recording</p>
+                                  <p className="text-xs text-gray-500">{item.timestamp.toLocaleTimeString()}</p>
+                                </div>
+                                <button
+                                  onClick={() => handleDeleteCapture(item.id)}
+                                  className="p-1 hover:bg-red-50 rounded text-red-500"
+                                >
+                                  <X className="w-4 h-4" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            // Annotation View
+            <div>
+              <div className="mb-4 flex items-center justify-between">
+                <button
+                  onClick={() => {
+                    setSelectedImage(null);
+                    setAnnotations([]);
+                  }}
+                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Live Feed
+                </button>
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={handleSaveAnnotations}
+                    className="px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                  >
+                    Save Annotations
+                  </button>
+                  <button className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
+                    Next
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2">
+                  <ImageAnnotator 
+                    imageUrl={selectedItem?.url || cervixImageUrl} 
+                    onAnnotationsChange={setAnnotations} 
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Exit Warning Dialog */}
+          {showExitWarning && (
+            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+              <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md mx-4">
+                <h3 className="text-xl font-bold text-[#0A2540] mb-3">Leave Examination?</h3>
+                <p className="text-gray-600 mb-6">
+                  If you go back now, all captures, timer data, and annotations will be lost. Are you sure you want to continue?
+                </p>
+                <div className="flex gap-3 justify-end">
+                  <button
+                    onClick={() => setShowExitWarning(false)}
+                    className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => {
+                      setShowExitWarning(false);
+                      goBack();
+                    }}
+                    className="px-6 py-2 bg-red-500 text-white rounded-lg font-semibold hover:bg-red-600 transition-colors"
+                  >
+                    Leave Anyway
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/PatientHistoryPage.tsx

@@ -0,0 +1,20 @@
+import { PatientHistoryForm } from '../components/PatientHistoryForm';
+type Props = {
+  goToImaging: () => void;
+  goBackToRegistry: () => void;
+  patientID?: string | undefined;
+  goToGuidedCapture?: () => void;
+};
+
+export function PatientHistoryPage({
+  goToImaging,
+  goBackToRegistry,
+  patientID,
+  goToGuidedCapture
+}: Props) {
+  return <div className="w-full bg-white/95 relative p-8 font-sans">
+      <div className="relative z-10">
+        <PatientHistoryForm onContinue={goToGuidedCapture || goToImaging} onBack={goBackToRegistry} patientID={patientID} />
+      </div>
+    </div>;
+}

src/pages/PatientRegistry.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { Eye, Edit2, ArrowLeft } from 'lucide-react';
+
+type Props = {
+  onNewPatient: () => void;
+  onSelectExisting: (id: string) => void;
+  onBackToHome: () => void;
+  onNext: () => void;
+};
+
+export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome, onNext }: Props) {
+  const [patientId, setPatientId] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [results, setResults] = useState<Array<{ id: string; name: string; examDate: string }>>([]);
+  const [searched, setSearched] = useState(false);
+
+  // Demo in-memory patients; replace with real API later
+  const mockPatients = [
+    { id: 'PT-2025-8492', name: 'Aisha Khan', examDate: '2025-01-10' },
+    { id: 'P-10234', name: 'Sarah Johnson', examDate: '2024-01-15' },
+    { id: 'P-10235', name: 'Emily Chen', examDate: '2024-01-15' }
+  ];
+
+  const handleSearch = () => {
+    const q = patientId.trim();
+    setSearched(true);
+    if (!q) {
+      setError('Please enter a Patient ID');
+      setResults([]);
+      return;
+    }
+    setError(null);
+    const found = mockPatients.filter(p => p.id.toLowerCase() === q.toLowerCase());
+    setResults(found);
+  };
+
+  return (
+    <div className="flex-1 flex flex-col items-stretch justify-start py-4 md:py-6 lg:py-8">
+      <div className="w-full px-4 py-2">
+      <button onClick={onBackToHome} className="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600">
+        <ArrowLeft className="w-5 h-5 md:w-6 md:h-6" />
+        <span className="text-sm md:text-base">Go to Homepage</span>
+      </button>
+    </div>
+    
+    <div className="w-full max-w-6xl mx-auto mb-4 md:mb-6 px-4">
+        <h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-[#0A2540]">Patient Records</h1>
+      </div>
+
+      <div className="w-full mx-auto p-4 md:p-8 lg:p-12 bg-white h-full min-h-[60vh]">
+        <div className="mb-6 md:mb-8">
+          <p className="text-sm md:text-base lg:text-lg text-gray-600 mb-4">Search by Patient ID or add a new patient.</p>
+          
+          <div className="space-y-4">
+            <label className="block text-sm md:text-base font-medium text-gray-600">Search by Patient ID</label>
+            <div className="flex flex-col lg:flex-row gap-3 md:gap-4 items-stretch lg:items-center">
+              <select onChange={e => {
+                const v = e.target.value;
+                if (v === 'all') {
+                  setResults(mockPatients);
+                  setSearched(true);
+                } else if (v === 'clear') {
+                  setResults([]);
+                  setSearched(true);
+                }
+              }} className="px-4 py-3 md:py-4 border border-gray-200 rounded-lg bg-white text-sm md:text-base">
+                <option value="">Demo data</option>
+                <option value="all">Show all demo patients</option>
+                <option value="clear">Clear results</option>
+              </select>
+
+              <div className="flex flex-col md:flex-row gap-3 md:gap-4 w-full lg:w-auto lg:max-w-2xl">
+                <input aria-label="Search by Patient ID" value={patientId} onChange={e => setPatientId(e.target.value)} placeholder="e.g. PT-2025-8492" className="px-3 py-2 md:py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] outline-none text-sm md:text-base flex-1 lg:flex-none lg:w-48" />
+                <button onClick={handleSearch} className="px-4 md:px-6 py-2 md:py-3 bg-[#0A2540] text-white rounded-lg text-sm md:text-base font-medium hover:bg-[#051B30] transition-colors whitespace-nowrap">Search</button>
+                <button onClick={onNewPatient} className="px-4 md:px-6 py-2 md:py-3 bg-[#05998c] text-white font-semibold rounded-lg text-sm md:text-base hover:bg-[#047569] transition-colors whitespace-nowrap">Add New Patient</button>
+              </div>
+            </div>
+            {error && <p className="text-sm md:text-base text-red-500 mt-2">{error}</p>}
+          </div>
+        </div>
+
+        <div>
+          {!searched && <p className="text-sm md:text-base text-gray-600">Enter a Patient ID and click Search.</p>}
+
+          {searched && results.length === 0 && <div className="py-8 text-center text-gray-600 text-sm md:text-base">No patient record found.</div>}
+
+          {results.length > 0 && (
+            <div className="mt-4 overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200 text-xs md:text-sm">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-gray-500 uppercase">Patient ID</th>
+                    <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-gray-500 uppercase">Patient Name</th>
+                    <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-gray-500 uppercase">Examination Date</th>
+                    <th className="px-3 md:px-4 py-2 md:py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-100">
+                  {results.map(r => (
+                    <tr key={r.id}>
+                      <td className="px-3 md:px-4 py-2 md:py-3 text-[#0A2540] font-mono text-xs md:text-sm">{r.id}</td>
+                      <td className="px-3 md:px-4 py-2 md:py-3 text-gray-700 font-medium text-xs md:text-sm">{r.name}</td>
+                      <td className="px-3 md:px-4 py-2 md:py-3 text-gray-600 text-xs md:text-sm">{r.examDate}</td>
+                      <td className="px-3 md:px-4 py-2 md:py-3 text-gray-600">
+                        <div className="flex items-center gap-2 md:gap-3">
+                          <button aria-label={`View ${r.id}`} title="View" onClick={() => onSelectExisting(r.id)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
+                            <Eye className="w-4 h-4 md:w-5 md:h-5 text-gray-600" />
+                          </button>
+                          <button aria-label={`Edit ${r.id}`} title="Edit" onClick={() => onSelectExisting(r.id)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
+                            <Edit2 className="w-4 h-4 md:w-5 md:h-5 text-gray-600" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PatientRegistry;

src/pages/ReportPage.tsx

@@ -0,0 +1,616 @@
+import { useEffect, useRef, useState } from 'react';
+import { ArrowLeft, Download, FileText, CheckCircle, Camera } from 'lucide-react';
+import html2pdf from 'html2pdf.js';
+
+type CapturedImage = {
+  id: string;
+  src: string;
+  stepId: string;
+  type: 'image' | 'video';
+};
+
+type Props = {
+  onBack: () => void;
+  onNext: () => void;
+  patientData?: any;
+  capturedImages?: CapturedImage[];
+  biopsyData?: any;
+  findings?: any;
+};
+
+export function ReportPage({
+  onBack,
+  onNext,
+  patientData = {},
+  capturedImages = [],
+  biopsyData = {},
+  findings = {}
+}: Props) {
+  type ImageBucket = 'native' | 'acetic' | 'lugol' | 'biopsy';
+  type ImageItem = {
+    id: string;
+    name: string;
+    url: string;
+    file: File;
+  };
+
+  // Form state with dummy data
+  const [formData, setFormData] = useState({
+    regNo: patientData.regNo || 'CP-2026-001',
+    name: patientData.name || 'Jane Doe',
+    opdNo: patientData.opdNo || 'OPD-45892',
+    age: patientData.age || '35',
+    parity: patientData.parity || 'P2L2',
+    wo: patientData.wo || 'Married',
+    indication: patientData.indication || 'VIA+ / PAP+ / HPV-DNA+',
+    complaint: patientData.reason || 'Abnormal bleeding, post-menopausal',
+    examQuality: 'Adequate',
+    transformationZone: 'II',
+    acetowL: 'Present',
+    diagnosis: findings.diagnosis || 'Cervical intraepithelial neoplasia (CIN) Grade II with acetowhite lesion',
+    treatmentPlan: findings.plan || 'LEEP procedure recommended, HPV testing, follow-up in 3 months',
+    followUp: findings.followUp || 'Return after 3 months for post-LEEP assessment',
+    biopsySites: biopsyData?.sites || '12 o\'clock position - CIN II',
+    biopsyNotes: biopsyData?.notes || 'Multiple biopsies taken from affected areas',
+    doctorSignature: '',
+    signatureDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+  });
+
+  const [imageBuckets, setImageBuckets] = useState<Record<ImageBucket, ImageItem[]>>({
+    native: [],
+    acetic: [],
+    lugol: [],
+    biopsy: []
+  });
+  const imageBucketsRef = useRef(imageBuckets);
+  const reportContentRef = useRef<HTMLDivElement>(null);
+
+  const handleFormChange = (field: keyof typeof formData, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleExportPDF = () => {
+    if (!reportContentRef.current) return;
+    
+    const element = reportContentRef.current;
+    const patientName = patientData?.name || 'Patient';
+    const reportDate = new Date().toISOString().split('T')[0];
+    
+    const options = {
+      margin: [10, 10, 10, 10],
+      filename: `Colposcopy_Report_${patientName}_${reportDate}.pdf`,
+      image: { type: 'jpeg', quality: 0.98 },
+      html2canvas: { scale: 2 },
+      jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
+    };
+    
+    html2pdf().set(options).from(element).save();
+  };
+
+  const addFilesToBucket = (bucket: ImageBucket, files: File[]) => {
+    const imageFiles = files.filter(file => file.type.startsWith('image/'));
+    if (!imageFiles.length) return;
+
+    const items: ImageItem[] = imageFiles.map((file, index) => ({
+      id: `${bucket}-${Date.now()}-${index}`,
+      name: file.name,
+      url: URL.createObjectURL(file),
+      file
+    }));
+
+    setImageBuckets(prev => ({
+      ...prev,
+      [bucket]: [...prev[bucket], ...items]
+    }));
+  };
+
+  const handleCapturedImageDragStart = (e: React.DragEvent, capturedImage: CapturedImage) => {
+    e.dataTransfer.setData('application/captured-image', JSON.stringify(capturedImage));
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+
+  const handleSectionDrop = async (e: React.DragEvent, targetBucket: ImageBucket) => {
+    e.preventDefault();
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const files = Array.from(e.dataTransfer.files || []);
+      addFilesToBucket(targetBucket, files);
+      return;
+    }
+
+    // Check for captured image from sidebar
+    const capturedImageData = e.dataTransfer.getData('application/captured-image');
+    if (capturedImageData) {
+      try {
+        const capturedImage = JSON.parse(capturedImageData) as CapturedImage;
+        const imageFile = await fetch(capturedImage.src)
+          .then(r => r.blob())
+          .then(blob => new File([blob], `captured-${capturedImage.id}.jpg`, { type: 'image/jpeg' }));
+        addFilesToBucket(targetBucket, [imageFile]);
+        return;
+      } catch {
+        // ignore invalid captured image data
+      }
+    }
+
+    const data = e.dataTransfer.getData('text/plain');
+    if (!data) return;
+
+    try {
+      const parsed = JSON.parse(data) as { bucket: ImageBucket; id: string };
+      if (!parsed?.bucket || !parsed?.id) return;
+      if (parsed.bucket === targetBucket) return;
+
+      setImageBuckets(prev => {
+        const sourceItems = prev[parsed.bucket];
+        const movedItem = sourceItems.find(item => item.id === parsed.id);
+        if (!movedItem) return prev;
+
+        return {
+          ...prev,
+          [parsed.bucket]: sourceItems.filter(item => item.id !== parsed.id),
+          [targetBucket]: [...prev[targetBucket], movedItem]
+        };
+      });
+    } catch {
+      // ignore invalid drag data
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const removeImage = (bucket: ImageBucket, id: string) => {
+    setImageBuckets(prev => ({
+      ...prev,
+      [bucket]: prev[bucket].filter(item => item.id !== id)
+    }));
+    const item = imageBuckets[bucket].find(entry => entry.id === id);
+    if (item) {
+      URL.revokeObjectURL(item.url);
+    }
+  };
+
+  useEffect(() => {
+    imageBucketsRef.current = imageBuckets;
+  }, [imageBuckets]);
+
+  useEffect(() => {
+    return () => {
+      Object.values(imageBucketsRef.current).flat().forEach((item: ImageItem) => URL.revokeObjectURL(item.url));
+    };
+  }, []);
+
+  return (
+    <div className="w-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-teal-50/20 print:bg-white">
+      <style>{`
+        @media print {
+          @page {
+            size: A4;
+            margin: 0;
+          }
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          html {
+            margin: 0;
+            padding: 0;
+          }
+        }
+      `}</style>
+      <div className="relative z-10 py-6 md:py-8 print:py-0">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-6 print:max-w-full print:mx-0 print:px-6">
+
+          {/* Page Header */}
+          <div className="mb-8 bg-white rounded-2xl shadow-lg border border-gray-200 p-6 no-print print:hidden">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div className="flex items-center gap-4">
+                <button 
+                  onClick={onBack} 
+                  className="p-3 hover:bg-gradient-to-br from-gray-100 to-gray-50 rounded-xl transition-all duration-200 text-gray-700 shadow-sm hover:shadow-md"
+                >
+                  <ArrowLeft className="w-5 h-5" />
+                </button>
+                <div>
+                  <h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-[#0A2540] to-[#05998c] bg-clip-text text-transparent flex items-center gap-3">
+                    <div className="bg-gradient-to-br from-[#05998c] to-[#047569] p-3 rounded-xl shadow-md">
+                      <FileText className="w-7 h-7 text-white" />
+                    </div>
+                    Colposcopy Examination Report
+                  </h2>
+                  <p className="text-sm text-gray-500 mt-1 ml-1">Professional Medical Documentation</p>
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <button 
+                  onClick={handleExportPDF}
+                  className="px-5 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
+                >
+                  <Download className="w-4 h-4" />
+                  Export PDF
+                </button>
+                <button 
+                  onClick={onNext} 
+                  className="px-5 py-3 bg-gradient-to-r from-[#05998c] to-[#047569] text-white rounded-xl hover:from-[#047569] hover:to-[#036356] transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
+                >
+                  Complete
+                  <CheckCircle className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 print:grid-cols-1">
+
+            {/* Report Content */}
+            <div className="lg:col-span-2 w-full" ref={reportContentRef}>
+              <div className="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden print:shadow-none print:border-0 print:rounded-none print:max-h-[297mm]">
+
+                {/* Report Header with Gradient */}
+                <div className="bg-white border-b-4 border-gray-800 p-6 text-center print:p-3 print:border-b-2">
+                  <h1 className="text-2xl font-bold text-gray-900 mb-1 print:text-lg">COLPOSCOPY EXAMINATION REPORT</h1>
+                  <p className="text-sm text-gray-600 print:text-xs">Medical Documentation</p>
+                  <div className="flex items-center justify-center gap-2 text-gray-600 text-sm mt-3 print:mt-1.5 print:text-xs">
+                    <span>Date: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                  </div>
+                </div>
+
+                <div className="p-8 space-y-6 print:p-3 print:space-y-2 overflow-y-auto print:overflow-visible">
+
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">PATIENT INFORMATION</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3 print:gap-1.5 text-sm">
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Reg. No.</span>
+                      <input 
+                        type="text" 
+                        value={formData.regNo}
+                        onChange={(e) => handleFormChange('regNo', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Name</span>
+                      <input 
+                        type="text" 
+                        value={formData.name}
+                        onChange={(e) => handleFormChange('name', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">OPD No.</span>
+                      <input 
+                        type="text" 
+                        value={formData.opdNo}
+                        onChange={(e) => handleFormChange('opdNo', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Age</span>
+                      <input 
+                        type="text" 
+                        value={formData.age}
+                        onChange={(e) => handleFormChange('age', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Parity</span>
+                      <input 
+                        type="text" 
+                        value={formData.parity}
+                        onChange={(e) => handleFormChange('parity', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">W/O</span>
+                      <input 
+                        type="text" 
+                        value={formData.wo}
+                        onChange={(e) => handleFormChange('wo', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Medical History */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">CLINICAL HISTORY</h3>
+                  <div className="space-y-3 print:space-y-1 text-sm">
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Indication for Colposcopy:</span>
+                      <input 
+                        type="text" 
+                        value={formData.indication}
+                        onChange={(e) => handleFormChange('indication', e.target.value)}
+                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Chief Complaint:</span>
+                      <textarea 
+                        value={formData.complaint}
+                        onChange={(e) => handleFormChange('complaint', e.target.value)}
+                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
+                        rows={2}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Examination Details */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">EXAMINATION FINDINGS</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3 print:gap-1.5 text-sm">
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Exam Quality</span>
+                      <select 
+                        value={formData.examQuality}
+                        onChange={(e) => handleFormChange('examQuality', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      >
+                        <option>Adequate</option>
+                        <option>Inadequate</option>
+                      </select>
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Transformation Zone</span>
+                      <select 
+                        value={formData.transformationZone}
+                        onChange={(e) => handleFormChange('transformationZone', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      >
+                        <option>I</option>
+                        <option>II</option>
+                        <option>III</option>
+                      </select>
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Acetowhite Lesion</span>
+                      <select 
+                        value={formData.acetowL}
+                        onChange={(e) => handleFormChange('acetowL', e.target.value)}
+                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+                      >
+                        <option>Present</option>
+                        <option>Absent</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Image Sections */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">EXAMINATION IMAGES</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-2">
+                    {(
+                      [
+                        { key: 'native', label: 'Native Image', color: 'from-blue-500 to-blue-600' },
+                        { key: 'acetic', label: 'Acetic Acid', color: 'from-purple-500 to-purple-600' },
+                        { key: 'lugol', label: 'Lugol\'s Iodine', color: 'from-amber-500 to-amber-600' },
+                        { key: 'biopsy', label: 'Biopsy Site', color: 'from-red-500 to-red-600' }
+                      ] as { key: ImageBucket; label: string; color: string }[]
+                    ).map(section => (
+                      <div
+                        key={section.key}
+                        onDrop={(e) => handleSectionDrop(e, section.key)}
+                        onDragOver={handleDragOver}
+                        className="bg-white border-2 border-dashed border-gray-300 hover:border-blue-500 p-3 print:border-solid print:border-gray-400 min-h-[140px] print:min-h-[80px]"
+                      >
+                        <div className="text-xs font-semibold text-gray-700 mb-2 print:mb-1 print:text-xs">{section.label}</div>
+                        {imageBuckets[section.key].length === 0 ? (
+                          <div className="text-center text-gray-400 text-xs py-6 print:py-2 border border-dashed border-gray-300 rounded print:text-xs">
+                            <p>Drag & drop</p>
+                          </div>
+                        ) : (
+                          <div className="grid grid-cols-2 gap-2 print:gap-1">
+                            {imageBuckets[section.key].map(item => (
+                              <div key={item.id} className="relative group">
+                                <img
+                                  src={item.url}
+                                  alt={item.name}
+                                  className="w-full h-16 print:h-12 object-cover border border-gray-300"
+                                />
+                                <button
+                                  onClick={() => removeImage(section.key, item.id)}
+                                  className="absolute top-0.5 right-0.5 text-xs px-1 py-0 bg-red-600 text-white opacity-0 group-hover:opacity-100 transition-all no-print"
+                                >
+                                  ×
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Biopsy Marking Section */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">BIOPSY MARKING</h3>
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 print:gap-2">
+                    {/* Biopsy Image */}
+                    <div className="border-2 border-dashed border-gray-300 hover:border-red-500 p-3 print:border-solid print:border-gray-400 min-h-[180px] print:min-h-[120px] bg-gray-50">
+                      <div className="text-xs font-semibold text-gray-700 mb-2 print:mb-1 print:text-xs">Biopsy Marking Image</div>
+                      {biopsyData?.markedImage ? (
+                        <div className="relative w-full h-full flex items-center justify-center bg-black rounded">
+                          <img
+                            src={biopsyData.markedImage}
+                            alt="Biopsy Marking"
+                            className="w-full h-40 print:h-24 object-contain"
+                          />
+                        </div>
+                      ) : (
+                        <div className="text-center text-gray-400 text-xs py-10 print:py-4">
+                          <p>No biopsy marking</p>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Biopsy Information */}
+                    <div className="space-y-3 print:space-y-1.5">
+                      <div>
+                        <span className="text-xs font-semibold text-gray-600">Biopsy Sites:</span>
+                        <textarea
+                          value={formData.biopsySites}
+                          onChange={(e) => handleFormChange('biopsySites', e.target.value)}
+                          className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-red-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none text-sm"
+                          rows={3}
+                        />
+                      </div>
+                      <div>
+                        <span className="text-xs font-semibold text-gray-600">Biopsy Notes:</span>
+                        <textarea
+                          value={formData.biopsyNotes}
+                          onChange={(e) => handleFormChange('biopsyNotes', e.target.value)}
+                          className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-red-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none text-sm"
+                          rows={3}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+    
+                {/* Diagnosis and Plan */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
+                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">DIAGNOSIS & PLAN</h3>
+                  <div className="space-y-2 text-sm print:space-y-0.5 print:text-xs">
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Colposcopic Diagnosis:</span>
+                      <textarea 
+                        value={formData.diagnosis}
+                        onChange={(e) => handleFormChange('diagnosis', e.target.value)}
+                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
+                        rows={2}
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Treatment Plan:</span>
+                      <textarea 
+                        value={formData.treatmentPlan}
+                        onChange={(e) => handleFormChange('treatmentPlan', e.target.value)}
+                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
+                        rows={2}
+                      />
+                    </div>
+                    <div>
+                      <span className="text-xs font-semibold text-gray-600">Follow-up Plan:</span>
+                      <textarea 
+                        value={formData.followUp}
+                        onChange={(e) => handleFormChange('followUp', e.target.value)}
+                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
+                        rows={2}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Signature Section */}
+                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200 mt-6 print:mt-2">
+                  <h3 className="text-sm font-bold text-gray-900 mb-4 pb-2 border-b border-gray-400 print:mb-2 print:pb-1 print:text-xs">SIGNATURES</h3>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 print:gap-2 text-sm print:text-xs">
+                    <div>
+                      <p className="text-xs font-semibold text-gray-600 mb-8 print:mb-3">Patient Signature</p>
+                      <div className="border-b-2 border-gray-700 w-full h-12 print:h-6"></div>
+                    </div>
+                    <div>
+                      <p className="text-xs font-semibold text-gray-600 mb-8 print:mb-3">Doctor Signature</p>
+                      <input 
+                        type="text" 
+                        value={formData.doctorSignature}
+                        onChange={(e) => handleFormChange('doctorSignature', e.target.value)}
+                        placeholder="Dr. Name"
+                        className="w-full border-b-2 border-gray-700 outline-none bg-transparent text-xs print:text-xs print:border-b-2 print:border-gray-700"
+                      />
+                    </div>
+                    <div>
+                      <p className="text-xs font-semibold text-gray-600 mb-2 print:mb-1">Date</p>
+                      <input 
+                        type="text" 
+                        value={formData.signatureDate}
+                        onChange={(e) => handleFormChange('signatureDate', e.target.value)}
+                        className="w-full border-b-2 border-gray-700 outline-none bg-transparent text-xs print:text-xs print:border-b-2 print:border-gray-700"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                </div>
+              </div>
+            </div>
+
+            {/* Image Library Sidebar */}
+            <div className="lg:col-span-1 print:hidden">
+              <div className="bg-white border border-gray-300 rounded-2xl shadow-lg p-4 sticky top-[829px]">
+                <h3 className="text-sm font-bold text-gray-900 mb-4 pb-2 border-b border-gray-400">IMAGE LIBRARY</h3>
+                {capturedImages.length > 0 ? (
+                  <div className="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
+                    {Object.entries(
+                      capturedImages.reduce((acc, img) => {
+                        const key = img.stepId;
+                        if (!acc[key]) acc[key] = [];
+                        acc[key].push(img);
+                        return acc;
+                      }, {} as Record<string, CapturedImage[]>)
+                    ).map(([stepId, images]) => (
+                      <div key={stepId} className="bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200 rounded-lg p-3 shadow-sm">
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className={`w-2 h-2 rounded-full ${
+                            stepId === 'native' ? 'bg-blue-500' :
+                            stepId === 'acetowhite' ? 'bg-purple-500' :
+                            stepId === 'greenFilter' ? 'bg-green-500' :
+                            stepId === 'lugol' ? 'bg-amber-500' : 'bg-gray-500'
+                          }`}></div>
+                          <span className="text-xs font-bold text-gray-700 uppercase">
+                            {stepId === 'native' ? 'Native' : 
+                             stepId === 'acetowhite' ? 'Acetic Acid' : 
+                             stepId === 'greenFilter' ? 'Green Filter' : 
+                             stepId === 'lugol' ? 'Lugol' : stepId}
+                          </span>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2">
+                          {images.map(img => (
+                            <div key={img.id} className="relative group">
+                              {img.type === 'video' ? (
+                                <div className="w-full h-20 bg-gray-100 border border-gray-200 flex items-center justify-center">
+                                  <Camera className="w-5 h-5 text-gray-400" />
+                                </div>
+                              ) : (
+                                <img
+                                  src={img.src}
+                                  alt={`Captured ${stepId}`}
+                                  draggable
+                                  onDragStart={(e) => handleCapturedImageDragStart(e, img)}
+                                  className="w-full h-20 object-cover border border-gray-200 cursor-grab hover:border-blue-500 hover:shadow-md transition-all"
+                                />
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-8 text-gray-400">
+                    <p className="text-sm font-medium">No captured images yet</p>
+                    <p className="text-xs mt-1">Images will appear here after capture</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

tailwind.config.js

@@ -0,0 +1,23 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      screens: {
+        'xs': '320px',
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
+        '2xl': '1536px',
+        'tablet': '768px',
+        'tablet-landscape': { 'raw': '(min-width: 768px) and (orientation: landscape)' },
+      },
+      spacing: {
+        'safe': 'max(1rem, env(safe-area-inset-bottom))',
+      }
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})