Add interactive progress bar for slide navigation with previews

Implement a slider component for precise slide navigation, including click-to-jump functionality and hover-based preview display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/6ZMblp5

client/src/pages/Report.tsx

@@ -56,6 +56,23 @@ function MohamedSalahSlides() {
     }
   };
 
+  const handleSliderCommit = (value: number[]) => {
+    if (numPages > 0) {
+      setCurrentSlide(value[0]);
+    }
+  };
+
+  const handleSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (numPages === 0) return;
+    
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = x / rect.width;
+    const slideNumber = Math.max(1, Math.min(numPages, Math.round(percentage * numPages)));
+    
+    setCurrentSlide(slideNumber);
+  };
+
   const handleSliderHover = (e: React.MouseEvent<HTMLDivElement>) => {
     if (numPages === 0) return;
     
@@ -107,6 +124,7 @@ function MohamedSalahSlides() {
         <div className="relative px-2" data-testid="slide-progress-container">
           <div 
             className="relative py-2"
+            onClick={handleSliderClick}
             onMouseMove={handleSliderHover}
             onMouseLeave={handleSliderLeave}
             data-testid="slider-hover-area"
@@ -114,6 +132,7 @@ function MohamedSalahSlides() {
             <Slider
               value={[currentSlide]}
               onValueChange={handleSliderChange}
+              onValueCommit={handleSliderCommit}
               min={1}
               max={numPages || 1}
               step={1}