Rebased the feature from latest dev

frontend/src/Components/RoadDetails/ImageClick.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ImageClickProps {
+  imageUrl: string;
+  onClose: () => void;
+  onNavigate: (direction: number) => void;
+  currentImageIndex: number;
+  totalImages: number;
+}
+
+const ImageClick: React.FC<ImageClickProps> = ({ imageUrl, onClose }) => {
+  return (
+    <div className="image-click-modal">
+      <div className="image-modal-content">
+        <img src={imageUrl} alt="Zoomed Image" />
+        <span className="close-icon" onClick={onClose}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="currentColor"
+            className="bi bi-x-circle"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ImageClick;

frontend/src/Components/RoadDetails/ImageGallery.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import ImageClick from './ImageClick';
 
 interface Image {
   id: number;
@@ -72,8 +73,14 @@ const ImageGallery: React.FC = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
   const galleryRef = useRef<HTMLDivElement>(null);
 
-  const openImageInNewTab = (imageUrl: string) => {
-    window.open(imageUrl, '_blank');
+  // Add feature for the pop-up of clicking and checking images
+  const [isImageClickOpen, setIsImageClickOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // Function to open the pop-up
+  const openImageInPopup = (imageId: number) => {
+    setCurrentImageIndex(imageId - 1); // Adjust for 0-based index
+    setIsImageClickOpen(true);
   };
 
   const handleScroll = (scrollOffset: number) => {
@@ -122,14 +129,32 @@ const ImageGallery: React.FC = () => {
               className="image-thumbnail"
               src={image.url}
               alt="Gallery Thumbnail"
-              onClick={() => openImageInNewTab(image.url)}
+              onClick={() => openImageInPopup(image.id)}
             />
           </div>
         ))}
       </div>
       <button className="arrow-button right-arrow" onClick={scrollRight}>
         &gt;
       </button>
+      {isImageClickOpen && (
+        <ImageClick
+          imageUrl={images[currentImageIndex].url}
+          onClose={() => setIsImageClickOpen(false)}
+          onNavigate={(direction) => {
+            // Handle navigation here if needed
+            if (direction === -1) {
+              // Navigate to the previous image
+              setCurrentImageIndex((prevIndex) => prevIndex - 1);
+            } else if (direction === 1) {
+              // Navigate to the next image
+              setCurrentImageIndex((prevIndex) => prevIndex + 1);
+            }
+          }}
+          currentImageIndex={currentImageIndex}
+          totalImages={images.length}
+        />
+      )}
     </div>
   );
 };

frontend/src/css/road_details.css

@@ -267,3 +267,42 @@ input[type='checkbox'] {
 .image-gallery-page.center-images {
   justify-content: center;
 }
+
+/* Css for click image pop-up */
+.image-click-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* Ensure the modal is displayed above other components */
+}
+.image-modal-content {
+  position: relative;
+  max-width: 60vw;
+  max-height: 50vw;
+  overflow: auto;
+  background-color: white;
+  z-index: 1100; /* Ensure content inside the modal is above the background */
+}
+.close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}
+
+.image-modal-content img {
+  height: 60vw;
+  width: auto;
+}
+
+.close-icon {
+  color: #333;
+  stroke: #333;
+  stroke-width: 0.5;
+}