Add live video feed, Swede Score assessment, and UI improvements

.gitattributes

@@ -4,3 +4,4 @@
 *.gif filter=lfs diff=lfs merge=lfs -text
 *.bmp filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,3 +1,12 @@
+---
+title: Pathora Colposcopy Assistant
+emoji: 🔬
+colorFrom: green
+colorTo: blue
+sdk: docker
+pinned: false
+---
+
 # Pathora Colposcopy Assistant
 
 A React-based colposcopy assistant application with image annotation, patient history tracking, and AI-powered chatbot features.

public/live.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d1f8b3b576dbbd578cdeca6685699fc64ba76c4a69d32d28c5beb8f8fc9a74ac
+size 19704307

src/App.tsx

@@ -75,17 +75,17 @@ export function App() {
       case 'lugol':
         return <LugolExamPage goBack={goToGreenFilter} onNext={goToGuidedCapture} />;
       case 'guidedcapture':
-        return <GuidedCapturePage onNext={goToBiopsyMarking} onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} 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} />;
+        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="capture" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
       case 'annotation':
-        return <GuidedCapturePage onNext={goToBiopsyMarking} initialMode="annotation" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="annotation" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
       case 'compare':
-        return <GuidedCapturePage onNext={goToBiopsyMarking} initialMode="compare" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
+        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="compare" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
       case 'report':
-        return <ReportPage onBack={goToCompare} onNext={goToHome} capturedImages={capturedImages} />;
+        return <ReportPage onBack={goToCompare} onNext={goToHome} onGoToPatientRecords={goToPatientRegistry} capturedImages={capturedImages} />;
       default:
         return <div className="p-8">Page "{currentPage}" not implemented yet.</div>;
     }

src/components/AceticAnnotator.tsx

@@ -620,6 +620,9 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
                                     <>
                                       <button
                                         onClick={() => {
+                                          setAnnotations(prev => prev.map(ann =>
+                                            ann.id === a.id ? { ...ann, identified: true } : ann
+                                          ));
                                           setAnnotationAccepted(prev => ({
                                             ...prev,
                                             [a.id]: true

src/components/ImageAnnotator.tsx

@@ -551,6 +551,9 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
                                 <>
                                   <button
                                     onClick={() => {
+                                      setAnnotations(prev => prev.map(ann =>
+                                        ann.id === a.id ? { ...ann, identified: true } : ann
+                                      ));
                                       setAnnotationAccepted(prev => ({
                                         ...prev,
                                         [a.id]: true

src/components/Sidebar.tsx

@@ -9,13 +9,13 @@ type Props = {
 };
 
 export function Sidebar({ current, onNavigate }: Props) {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
   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: 'compare', label: 'Compare', icon: <img src="/arrow.png" alt="Compare" className="w-6 h-6 brightness-0 opacity-70" /> },
     { key: 'report', label: 'Report', icon: <FileText className="w-5 h-5" /> }
   ];
 

src/pages/BiopsyMarking.tsx

@@ -37,6 +37,14 @@ interface LesionMark {
   color: string;
 }
 
+interface SwedeScoreFeatures {
+  acetoUptake: number | null;
+  marginsAndSurface: number | null;
+  vessels: number | null;
+  lesionSize: number | null;
+  iodineStaining: number | null;
+}
+
 const LESION_TYPES = [
   { code: 'EC', name: 'Ectopy', color: '#22c55e' },
   { code: 'TTZ', name: 'T.Trans Zone', color: '#3b82f6' },
@@ -73,6 +81,13 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [searchQuery, setSearchQuery] = useState('');
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [swedeScores, setSwedeScores] = useState<SwedeScoreFeatures>({
+    acetoUptake: null,
+    marginsAndSurface: null,
+    vessels: null,
+    lesionSize: null,
+    iodineStaining: null
+  });
   const fileInputRef = useRef<HTMLInputElement>(null);
   const imageContainerRef = useRef<HTMLDivElement>(null);
 
@@ -184,6 +199,60 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
 
   const overlaySize = overlayScale * 2.5;
 
+  const swedeFeatures = [
+    {
+      id: 'acetoUptake',
+      label: 'Aceto Uptake',
+      scores: [
+        { value: 0, label: 'Zero or transparent' },
+        { value: 1, label: 'Shady, milky (not transparent not opaque)' },
+        { value: 2, label: 'Distinct, opaque white' }
+      ]
+    },
+    {
+      id: 'marginsAndSurface',
+      label: 'Margins & Surface',
+      scores: [
+        { value: 0, label: 'Diffuse' },
+        { value: 1, label: 'Sharp but irregular, jagged, "geographical" satellites' },
+        { value: 2, label: 'Sharp and even, difference in surface level "cuffing"' }
+      ]
+    },
+    {
+      id: 'vessels',
+      label: 'Vessels',
+      scores: [
+        { value: 0, label: 'Fine, regular' },
+        { value: 1, label: 'Absent' },
+        { value: 2, label: 'Coarse or atypical' }
+      ]
+    },
+    {
+      id: 'lesionSize',
+      label: 'Lesion Size',
+      scores: [
+        { value: 0, label: '<5mm' },
+        { value: 1, label: '5-15mm or 2 quadrants' },
+        { value: 2, label: '>15mm or 3-4 quadrants or endocervically undefined' }
+      ]
+    },
+    {
+      id: 'iodineStaining',
+      label: 'Iodine Staining',
+      scores: [
+        { value: 0, label: 'Brown' },
+        { value: 1, label: 'Faintly or patchy yellow' },
+        { value: 2, label: 'Distinct yellow' }
+      ]
+    }
+  ];
+
+  const totalSwedeScore = Object.values(swedeScores).reduce((sum, score) => {
+    return score !== null ? sum + score : sum;
+  }, 0);
+
+  const scoredFeatures = Object.values(swedeScores).filter(score => score !== null).length;
+
   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">
@@ -216,6 +285,7 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
           <Button
             size="sm"
             className="h-8 px-3 bg-gray-600 text-white hover:bg-slate-700"
+            onClick={onNext}
           >
             Next
             <ArrowRight className="h-4 w-4 ml-1" />
@@ -569,6 +639,107 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
           </div>
         </div>
       </div>
+
+      {/* Swede Score Section */}
+      <div className="border-t border-slate-200 bg-white p-4">
+        <div className="max-w-full mx-auto">
+          <h3 className="text-lg font-bold text-[#0A2540] mb-4">Swede Score Assessment</h3>
+          
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Score Input Section */}
+            <div className="space-y-4">
+              {swedeFeatures.map(feature => (
+                <div key={feature.id} className="bg-gray-50 rounded-lg border border-gray-200 p-4">
+                  <label className="text-sm font-semibold text-gray-700 mb-3 block">{feature.label}</label>
+                  <div className="space-y-2">
+                    {feature.scores.map(score => (
+                      <button
+                        key={`${feature.id}-${score.value}`}
+                        onClick={() => setSwedeScores(prev => ({
+                          ...prev,
+                          [feature.id]: swedeScores[feature.id as keyof SwedeScoreFeatures] === score.value ? null : score.value
+                        }))}
+                        className={`w-full text-left p-3 rounded-lg border-2 transition-all ${
+                          swedeScores[feature.id as keyof SwedeScoreFeatures] === score.value
+                            ? 'border-[#05998c] bg-[#05998c]/10'
+                            : 'border-gray-300 hover:border-[#05998c] bg-white'
+                        }`}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-0.5 ${
+                            swedeScores[feature.id as keyof SwedeScoreFeatures] === score.value
+                              ? 'border-[#05998c] bg-[#05998c]'
+                              : 'border-gray-400'
+                          }`}>
+                            {swedeScores[feature.id as keyof SwedeScoreFeatures] === score.value && (
+                              <span className="text-white text-sm font-bold">✓</span>
+                            )}
+                          </div>
+                          <div className="flex-1">
+                            <p className="text-sm font-semibold text-gray-800">Score {score.value}</p>
+                            <p className="text-xs text-gray-600">{score.label}</p>
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Score Summary Section */}
+            <div className="space-y-4">
+              {/* Score Breakdown */}
+              <div className="bg-gradient-to-br from-[#05998c]/10 to-[#0A2540]/10 rounded-lg border-2 border-[#05998c] p-4">
+                <h4 className="text-sm font-bold text-[#0A2540] mb-4">Score Breakdown</h4>
+                <div className="space-y-3">
+                  {swedeFeatures.map(feature => {
+                    const score = swedeScores[feature.id as keyof SwedeScoreFeatures];
+                    return (
+                      <div key={feature.id} className="flex items-center justify-between p-2 bg-white rounded border border-gray-200">
+                        <span className="text-sm font-medium text-gray-700">{feature.label}</span>
+                        <span className={`text-sm font-bold px-3 py-1 rounded ${
+                          score !== null
+                            ? 'bg-[#05998c] text-white'
+                            : 'bg-gray-200 text-gray-500'
+                        }`}>
+                          {score !== null ? score : '-'}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Total Score Card */}
+              <div className="bg-gradient-to-br from-[#05998c] to-[#047569] rounded-lg p-6 text-white shadow-lg">
+                <p className="text-sm font-semibold opacity-90 mb-2">Total Swede Score</p>
+                <div className="text-5xl font-bold mb-2">
+                  {totalSwedeScore}/10
+                </div>
+                <p className="text-xs opacity-75">
+                  {scoredFeatures} of {swedeFeatures.length} features scored
+                </p>
+
+                {scoredFeatures === swedeFeatures.length && (
+                  <div className="mt-4 pt-4 border-t border-white/30">
+                    <p className="text-xs font-semibold mb-2">Risk Assessment:</p>
+                    <div className="text-sm">
+                      {totalSwedeScore <= 4 ? (
+                        <span>✓ Low Risk - Recommend routine follow-up</span>
+                      ) : totalSwedeScore <= 7 ? (
+                        <span>⚠ Intermediate Risk - Consider colposcopy</span>
+                      ) : (
+                        <span>⚠ High Risk - Recommend biopsy</span>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/Compare.tsx

@@ -17,6 +17,7 @@ type CompareImage = {
 
 type Props = {
   onBack: () => void;
+  onNext: () => void;
   capturedImages: CapturedImage[];
 };
 
@@ -34,7 +35,7 @@ const stepColors: Record<string, string> = {
   lugol: 'from-amber-500 to-amber-600'
 };
 
-export function Compare({ onBack, capturedImages }: Props) {
+export function Compare({ onBack, onNext, capturedImages }: Props) {
   const [leftImage, setLeftImage] = useState<CompareImage | null>(null);
   const [rightImage, setRightImage] = useState<CompareImage | null>(null);
   const [zoomLevel, setZoomLevel] = useState(1);
@@ -193,14 +194,23 @@ export function Compare({ onBack, capturedImages }: Props) {
               </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 className="flex items-center gap-3">
+              <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>
+              <button
+                onClick={onNext}
+                className="flex items-center gap-2 px-6 py-3 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors"
+              >
+                Next
+                <ArrowLeft className="w-4 h-4 transform rotate-180" />
+              </button>
+            </div>
           </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

src/pages/GuidedCapturePage.tsx

@@ -5,6 +5,7 @@ import { AceticAnnotator, type AceticAnnotatorHandle } from '../components/Aceti
 import { ImagingObservations } from '../components/ImagingObservations';
 import { BiopsyMarking, type BiopsyCapturedImage } from './BiopsyMarking';
 import { Compare } from './Compare';
+import { ReportPage } from './ReportPage';
 
 // Simple UI Component replacements
 const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
@@ -27,12 +28,13 @@ type CapturedItem = {
 
 type Props = {
   onNext: () => void;
+  onGoToPatientRecords?: () => 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) {
+export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, onCapturedImagesChange, onModeChange }: Props) {
   const imageAnnotatorRef = useRef<ImageAnnotatorHandle>(null);
   const aceticAnnotatorRef = useRef<AceticAnnotatorHandle>(null);
   const [currentStep, setCurrentStep] = useState<ExamStep>('native');
@@ -170,6 +172,10 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
           setSelectedImage(null);
           break;
         case 'annotation':
+          // Don't allow annotation mode for biopsy marking - switch to native step
+          if (currentStep === 'biopsyMarking') {
+            setCurrentStep('native');
+          }
           setIsAnnotatingMode(true);
           setIsCompareMode(false);
           break;
@@ -369,9 +375,9 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
                 <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 === 'Capture' && !selectedImage && !isAnnotatingMode && !isCompareMode && currentStep !== 'report') ||
+                      (stage === 'Annotate' && (selectedImage || isAnnotatingMode) && !isCompareMode && currentStep !== 'report') ||
+                      (stage === 'Compare' && isCompareMode && currentStep !== 'report') ||
                       (stage === 'Report' && currentStep === 'report')
                         ? 'bg-[#05998c] text-white shadow-md'
                         : 'bg-gray-100 text-gray-600'
@@ -380,7 +386,7 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
                     <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 === 'Compare' && <img src="/arrow.png" alt="Compare" className="w-6 h-6 brightness-0 opacity-70" />}
                       {stage === 'Report' && <FileText className="w-4 h-4" />}
                       <span>{stage}</span>
                     </span>
@@ -396,7 +402,15 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
               {steps.map(step => (
                 <button
                   key={step.key}
-                  onClick={() => setCurrentStep(step.key)}
+                  onClick={() => {
+                    setCurrentStep(step.key);
+                    // Exit annotation/compare modes when clicking Biopsy Marking
+                    if (step.key === 'biopsyMarking') {
+                      setIsAnnotatingMode(false);
+                      setIsCompareMode(false);
+                      setSelectedImage(null);
+                    }
+                  }}
                   className={`relative px-5 py-3 rounded-lg font-medium text-base transition-all ${
                     currentStep === step.key && !isCompareMode
                       ? 'bg-[#05998c] text-white shadow-md'
@@ -452,10 +466,24 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
             </div>
           )}
 
-          {currentStep === 'biopsyMarking' && !isCompareMode && !isAnnotatingMode ? (
+          {currentStep === 'report' ? (
+            <ReportPage
+              onBack={() => {
+                setCurrentStep('biopsyMarking');
+                setIsCompareMode(true);
+              }}
+              onNext={onNext}
+              onGoToPatientRecords={onGoToPatientRecords}
+              capturedImages={biopsyCapturedImages}
+            />
+          ) : currentStep === 'biopsyMarking' && !isCompareMode && !isAnnotatingMode ? (
             <BiopsyMarking
               onBack={() => setCurrentStep('lugol')}
-              onNext={() => setCurrentStep('report')}
+              onNext={() => {
+                setIsCompareMode(true);
+                setIsAnnotatingMode(false);
+                setSelectedImage(null);
+              }}
               capturedImages={biopsyCapturedImages}
             />
           ) : isCompareMode ? (
@@ -465,6 +493,12 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
                 setIsAnnotatingMode(false);
                 setSelectedImage(null);
               }}
+              onNext={() => {
+                setCurrentStep('report');
+                setIsCompareMode(false);
+                setIsAnnotatingMode(false);
+                setSelectedImage(null);
+              }}
               capturedImages={biopsyCapturedImages}
             />
           ) : isAnnotatingMode ? (
@@ -516,7 +550,7 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
                   {/* 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" />
+                      <video src="/live.mp4" autoPlay loop muted 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'}
@@ -833,7 +867,13 @@ export function GuidedCapturePage({ onNext, initialMode, onCapturedImagesChange,
                     <div className="space-y-4">
                       {/* Annotate Images Button */}
                       <button
-                        onClick={() => setIsAnnotatingMode(true)}
+                        onClick={() => {
+                          // Don't allow annotation mode for biopsy marking - switch to native step
+                          if (currentStep === 'biopsyMarking') {
+                            setCurrentStep('native');
+                          }
+                          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" />

src/pages/ReportPage.tsx

@@ -12,6 +12,7 @@ type CapturedImage = {
 type Props = {
   onBack: () => void;
   onNext: () => void;
+  onGoToPatientRecords?: () => void;
   patientData?: any;
   capturedImages?: CapturedImage[];
   biopsyData?: any;
@@ -21,6 +22,7 @@ type Props = {
 export function ReportPage({
   onBack,
   onNext,
+  onGoToPatientRecords,
   patientData = {},
   capturedImages = [],
   biopsyData = {},
@@ -62,6 +64,7 @@ export function ReportPage({
     lugol: [],
     biopsy: []
   });
+  const [showCompletionModal, setShowCompletionModal] = useState(false);
   const imageBucketsRef = useRef(imageBuckets);
   const reportContentRef = useRef<HTMLDivElement>(null);
 
@@ -80,11 +83,11 @@ export function ReportPage({
     const reportDate = new Date().toISOString().split('T')[0];
     
     const options = {
-      margin: [10, 10, 10, 10],
+      margin: [10, 10, 10, 10] as [number, number, number, number],
       filename: `Colposcopy_Report_${patientName}_${reportDate}.pdf`,
-      image: { type: 'jpeg', quality: 0.98 },
+      image: { type: 'jpeg' as const, quality: 0.98 },
       html2canvas: { scale: 2 },
-      jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
+      jsPDF: { orientation: 'portrait' as const, unit: 'mm', format: 'a4' }
     };
     
     html2pdf().set(options).from(element).save();
@@ -235,7 +238,7 @@ export function ReportPage({
                   Export PDF
                 </button>
                 <button 
-                  onClick={onNext} 
+                  onClick={() => setShowCompletionModal(true)} 
                   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
@@ -611,6 +614,44 @@ export function ReportPage({
           </div>
         </div>
       </div>
+
+      {/* Completion Confirmation Modal */}
+      {showCompletionModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-2xl shadow-2xl p-6 md:p-8 max-w-md mx-4 animate-in">
+            <div className="flex items-center justify-center mb-4">
+              <div className="bg-gradient-to-br from-green-500 to-green-600 p-3 rounded-full">
+                <CheckCircle className="w-8 h-8 text-white" />
+              </div>
+            </div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-2 text-center">Save Report</h3>
+            <p className="text-gray-600 text-center mb-6">
+              Your colposcopy examination report is ready. Click "Save & Continue" to export the PDF and proceed to the patient registry.
+            </p>
+            <div className="space-y-3">
+              <button
+                onClick={() => {
+                  handleExportPDF();
+                  setTimeout(() => {
+                    setShowCompletionModal(false);
+                    (onGoToPatientRecords || onNext)();
+                  }, 1000);
+                }}
+                className="w-full px-6 py-3 bg-gradient-to-r from-[#05998c] to-[#047569] text-white rounded-xl hover:from-[#047569] hover:to-[#036356] transition-all duration-200 font-semibold shadow-md hover:shadow-lg flex items-center justify-center gap-2"
+              >
+                <Download className="w-4 h-4" />
+                Save & Continue
+              </button>
+              <button
+                onClick={() => setShowCompletionModal(false)}
+                className="w-full px-6 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-all duration-200 font-semibold"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }