added aspect ratio for image view in task comment

Reviewed-on: #234

deployed feature to production

src/components/Project/AboutProject.jsx

@@ -1,17 +1,50 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
 import { getProjectStatusName } from "../../utils/projectStatus";
-import {useProjectDetails} from "../../hooks/useProjects";
+import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
 import {useParams} from "react-router-dom";
-const AboutProject = () => {
+import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import {MANAGE_PROJECT} from "../../utils/constants";
+import GlobalModel from "../common/GlobalModel";
+import ManageProjectInfo from "./ManageProjectInfo";
+const AboutProject = () =>
+{
+  const [ IsOpenModal, setIsOpenModal ] = useState( false )
+  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
+    onSuccessCallback: () =>
+    {
+      setIsOpenModal(false)
+    }
+  })
   const {projectId} = useParams();
-  const {projects_Details,isLoading,error} = useProjectDetails(projectId)
+  const manageProject = useHasUserPermission(MANAGE_PROJECT);
+  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
+  const handleFormSubmit = ( updatedProject ) =>
+  {
+    if ( projects_Details?.id )
+    {
+    UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
+    } );
+      refetch()
+  }
+};
   return (
     <>
+      {IsOpenModal && (
+         <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
+          <ManageProjectInfo
+            project={projects_Details}
+            handleSubmitForm={handleFormSubmit}
+            onClose={() => setIsOpenModal( false )}
+            isPending={isPending}
+          />
+      </GlobalModel>
+     )}
       {projects_Details && (
+       <>
         <div className="card mb-6">
-          <div class="card-header text-start">
+          <div className="card-header text-start">
-            <h6 class="card-action-title mb-0">
+            <h6 className="card-action-title mb-0">
               {" "}
               <i className="fa fa-building rounded-circle text-primary"></i>
               <span className="ms-2">Project Profile</span>
@@ -50,8 +83,7 @@ const AboutProject = () => {
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-trophy"></i>
                 <span className="fw-medium mx-2">Status:</span>{" "}
-                <span>{projects_Details?.projectStatus?.status
+                <span>{getProjectStatusName(projects_Details.projectStatusId)}</span>
-}</span>
               </li>
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-user"></i>
@@ -70,10 +102,28 @@ const AboutProject = () => {
                   <div className="ms-4 text-start">{projects_Details.projectAddress}</div>
                 )}
               </li>
+
+              <li className="d-flex justify-content-center mb-3">
+                {manageProject && (
+                  <button
+                    type="button"
+                    className={`btn btn-sm btn-primary ${
+                      !manageProject && "d-none"
+                    }`}
+                    data-bs-toggle="modal"
+                    data-bs-target="#edit-project-modal"
+                    onClick={()=>setIsOpenModal(true)}
+                  >
+                    Modify Details
+                  </button>
+                )}
+              </li>
             </ul>
           </div>
-        </div>
+          </div>
-      )}
+          </>
+        )}
+    
 
       {isLoading && <span>loading...</span>}
     </>

src/components/Project/AssignTask.jsx

@@ -149,8 +149,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
       assignmentDate: new Date().toISOString(),
       workItemId: assignData?.workItem.id,
     };
-
+    assignTask({payload:formattedData,workAreaId:assignData?.workArea?.id});
-    assignTask(formattedData);
   };
 
   const closedModel = () => {

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -63,7 +63,9 @@ const { mutate: UpdateTask, isPending } = useManageTask({
     showToast( response?.message, "success" )
     onClose()
   }
-});
+} );
+
+
 
   const activityID = watch("activityID");
 
@@ -82,13 +84,13 @@ const { mutate: UpdateTask, isPending } = useManageTask({
 
 useEffect(() => {
   if (!workItem) return;
-
+ console.log(workItem)
   reset({
     activityID: String(
-      workItem?.workItem?.activityId || workItem?.activityId || ""
+      workItem?.workItem?.activityId || workItem?.activityMaster?.id
     ),
     workCategoryId: String(
-      workItem?.workItem?.workCategoryId || workItem?.workCategoryId || ""
+      workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
     ),
     plannedWork:
       workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
@@ -96,12 +98,13 @@ useEffect(() => {
       workItem?.workItem?.completedWork || workItem?.completedWork || 0,
     comment: workItem?.workItem?.description || workItem?.description || "",
   });
-}, [workItem?.id]);
+}, [workItem?.id,selectedActivity]);
+
 
 
   useEffect(() => {
     const selected = activities?.find((a) => a.id === activityID);
-    setSelectedActivity(selected || null);
+    setSelectedActivity( selected || null );
   }, [activityID, activities]);
 
   const onSubmitForm = (data) =>

src/components/Project/ManageProjectInfo.jsx

@@ -14,9 +14,8 @@ const formatDate = (date) => {
   }
   return d.toLocaleDateString('en-CA');
 };
-const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
+const ManageProjectInfo = ({ project, handleSubmitForm, onClose,isPending }) => {
   const [CurrentProject, setCurrentProject] = useState();
-  const [isloading, setLoading] = useState(false);
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
 
@@ -116,9 +115,10 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
  */
 
-  const onSubmitForm = (updatedProject) => {
+  const onSubmitForm = ( updatedProject ) =>
-    setLoading(true);
+  {
-    handleSubmitForm(updatedProject, setLoading, reset);
+    
+    handleSubmitForm(updatedProject);
   };
 
   const handleCancel = () => {
@@ -313,14 +313,15 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
               )}
             </div>
             <div className="col-12 text-center">
-              <button type="submit" className="btn btn-sm btn-primary me-3" disabled={isloading}>
+              <button type="submit" className="btn btn-sm btn-primary me-3" disabled={isPending}>
-                {isloading ? "Please Wait..." : project?.id ? "Update" : "Submit"}
+                {isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
               </button>
               <button
                 type="button"
                 className="btn btn-sm btn-label-secondary"
                 onClick={handleCancel}
                 aria-label="Close"
+                disabled={isPending}
               >
                 Cancel
               </button>

src/components/Project/ProjectCard.jsx

@@ -78,6 +78,7 @@ const ProjectCard = ({ projectData, recall }) => {
             project={projects_Details}
             handleSubmitForm={handleFormSubmit}
             onClose={handleClose}
+            isPending={isPending}
           />
         </GlobalModel>
       )}

src/components/common/ImagePreviewstyle.css

@@ -48,9 +48,8 @@
 }
 
 .img-preview img {
-  max-width: 100%;
+  width: 100%;
-  max-height: 80vh;
+  height: auto;
-  object-fit: contain;
+  aspect-ratio: 16 / 10;
-  display: block;
+  object-fit: cover;
-  margin: 0 auto;
+}
-}

src/data/menuData.json

@@ -50,7 +50,7 @@
                     {
                         "text": "Daily Expenses",
                         "available": true,
-                        "link": "/activities/gallary"
+                        "link": "/activities/reports"
                     }
                 ]
             },

src/hooks/useProjects.js

@@ -390,14 +390,15 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
     isSuccess,
     isError,
   } = useMutation({
-    mutationFn: async ({ projectId, updatedData }) => {
+    mutationFn: async ( {projectId, updatedData} ) =>
+    {
       return await ProjectRepository.updateProject(projectId, updatedData);
     },
 
     onSuccess: ( data, variables ) =>
     {
       const { projectId } = variables;
-
+   
       queryClient.invalidateQueries({queryKey:["ProjectsList"]});
       queryClient.invalidateQueries( {queryKey: [ "projectinfo", projectId ]} );
       queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
@@ -414,7 +415,9 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
       }
     },
 
-    onError: (error) => {
+    onError: ( error ) =>
+    {
+      console.log(error)
       showToast(error?.message || "Error while updating project", "error");
     },
   });

src/hooks/useTasks.js

@@ -173,12 +173,13 @@ export const useCreateTask = ( {onSuccessCallback, onErrorCallback} = {} ) =>
 {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (payload) => {
+    mutationFn: async ({payload,workAreaId}) => {
       return await TasksRepository.assignTask(payload);
     },
     onSuccess: ( _, variables ) =>
     {
-      queryClient.invalidateQueries({queryKey:["taskList"]});
+      queryClient.invalidateQueries( {queryKey: [ "taskList" ]} );
+      queryClient.invalidateQueries( {queryKey: [ "WorkItems", variables?.workAreaId ]} );
       showToast( "Task Assigned Successfully.", "success" );
       if (onSuccessCallback) onSuccessCallback(variables);
     },

src/pages/Gallary/ImageGallary.jsx

@@ -1,4 +1,3 @@
-// ImageGallery.js
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
 import { ImageGalleryAPI } from "./ImageGalleryAPI";
@@ -7,10 +6,19 @@ import { useSelector } from "react-redux";
 import { useModal } from "./ModalContext";
 import ImagePop from "./ImagePop";
 import Avatar from "../../components/common/Avatar";
-import DateRangePicker from "../../components/common/DateRangePicker"; // Assuming this is the path to your DateRangePicker
+import DateRangePicker from "../../components/common/DateRangePicker";
+import eventBus from "../../services/eventBus";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import {formatUTCToLocalTime} from "../../utils/dateUtils";
+
+const PAGE_SIZE = 10;
+const SCROLL_THRESHOLD = 5;
 
 const ImageGallery = () => {
   const [images, setImages] = useState([]);
+  const [allImagesData, setAllImagesData] = useState([]);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
   const { openModal } = useModal();
 
@@ -51,8 +59,10 @@ const ImageGallery = () => {
   const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
   const [hoveredImage, setHoveredImage] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
 
   const imageGroupRefs = useRef({});
+  const loaderRef = useRef(null);
   const filterPanelRef = useRef(null);
   const filterButtonRef = useRef(null);
 
@@ -68,61 +78,159 @@ const ImageGallery = () => {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    if (isFilterPanelOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [isFilterPanelOpen]);
 
   useEffect(() => {
     if (!selectedProjectId) {
       setImages([]);
+      setAllImagesData([]);
       setLoading(false);
+      setHasMore(false);
       return;
     }
 
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
     setLoading(true);
 
-    ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
+    setAllImagesData([]);
-      .then((res) => {
+    fetchImages(1, appliedFilters, true);
-        setImages(res.data);
-      })
-      .catch((err) => {
-        console.error("Error fetching images:", err);
-        setImages([]);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
   }, [selectedProjectId, appliedFilters]);
 
-  const getUniqueValuesWithIds = useCallback(
+  const fetchImages = useCallback(async (page, filters) => {
-    (idKey, nameKey) => {
+    if (!selectedProjectId) return;
-      const uniqueMap = new Map();
+
-      images.forEach((img) => {
+    try {
-        if (img[idKey] && img[nameKey]) {
+      if (page === 1) {
-          uniqueMap.set(img[idKey], img[nameKey]);
+        setLoading(true);
-        }
+      } else {
+        setLoadingMore(true);
+      }
+
+      const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
+      const newBatches = res.data || [];
+      const receivedCount = newBatches.length;
+
+      setImages((prevImages) => {
+        const uniqueNewBatches = newBatches.filter(
+          (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevImages, ...uniqueNewBatches];
       });
-      return Array.from(uniqueMap.entries());
+
-    },
+      setAllImagesData((prevAllImages) => {
-    [images]
+        const uniqueAllImages = newBatches.filter(
-  );
+          (newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevAllImages, ...uniqueAllImages];
+      });
+
+      setHasMore(receivedCount === PAGE_SIZE);
+    } catch (err) {
+      console.error("Error fetching images:", err);
+      if (page === 1) {
+        setImages([]);
+        setAllImagesData([]);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
+  useEffect(() => {
+    const handleExternalEvent = (data) => {
+      if (selectedProjectId === data.projectId) {
+        setImages([]);
+        setAllImagesData([]);
+        setPageNumber(1);
+        setHasMore(true);
+        fetchImages(1, appliedFilters, true);
+      }
+    };
+
+    eventBus.on("image_gallery", handleExternalEvent);
+
+    return () => {
+      eventBus.off("image_gallery", handleExternalEvent);
+    };
+  }, [appliedFilters, fetchImages, selectedProjectId]);
+
+  useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
+          setPageNumber((prevPageNumber) => prevPageNumber + 1);
+        }
+      },
+      {
+        root: null,
+        rootMargin: "200px",
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(loaderRef.current);
+
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [hasMore, loadingMore, loading]);
+
+  useEffect(() => {
+    if (pageNumber > 1) {
+      fetchImages(pageNumber, appliedFilters);
+    }
+  }, [pageNumber, fetchImages, appliedFilters]);
+
+  const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
+    const map = new Map();
+    allImagesData.forEach(batch => {
+      let id;
+      if (idKey === "floorIds") {
+        id = batch.floorIds;
+      } else {
+        id = batch[idKey];
+      }
+      
+      const name = batch[nameKey];
+      
+      if (id && name && !map.has(id)) {
+        map.set(id, name);
+      }
+    });
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [allImagesData]);
 
   const getUniqueUploadedByUsers = useCallback(() => {
     const uniqueUsersMap = new Map();
-    images.forEach((img) => {
+    allImagesData.forEach(batch => {
-      if (img.uploadedBy && img.uploadedBy.id) {
+      batch.documents.forEach(doc => {
-        const fullName = `${img.uploadedBy.firstName || ""} ${
+        if (doc.uploadedBy && doc.uploadedBy.id) {
-          img.uploadedBy.lastName || ""
+          const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim();
-        }`.trim();
+          if (fullName) {
-        if (fullName) {
+            uniqueUsersMap.set(doc.uploadedBy.id, fullName);
-          uniqueUsersMap.set(img.uploadedBy.id, fullName);
+          }
         }
-      }
+      });
     });
-    return Array.from(uniqueUsersMap.entries());
+   return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
-  }, [images]);
+  }, [allImagesData]);
 
   const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
   const floors = getUniqueValuesWithIds("floorIds", "floorName");
@@ -191,9 +299,35 @@ const ImageGallery = () => {
       startDate: selectedFilters.startDate || null,
       endDate: selectedFilters.endDate || null,
     };
-    setAppliedFilters(payload);
+
-    setIsFilterPanelOpen(false);
+    const areFiltersChanged = Object.keys(payload).some(key => {
-  }, [selectedFilters]);
+      const oldVal = appliedFilters[key];
+      const newVal = payload[key];
+
+      if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+        if (oldVal.length !== newVal.length) return true;
+        const oldSet = new Set(oldVal);
+        const newSet = new Set(newVal);
+        if (oldSet.size !== newSet.size) return true;
+        for (const item of newSet) {
+          if (!oldSet.has(item)) return true;
+        }
+        return false;
+      }
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+          return false;
+      }
+      return oldVal !== newVal;
+    });
+
+    if (areFiltersChanged) {
+      setAppliedFilters(payload);
+      setImages([]);
+      setPageNumber(1);
+      setHasMore(true);
+    }
+    // Removed setIsFilterPanelOpen(false); to keep the drawer open
+  }, [selectedFilters, appliedFilters]);
 
   const handleClearAllFilters = useCallback(() => {
     const initialStateSelected = {
@@ -219,49 +353,11 @@ const ImageGallery = () => {
       endDate: null,
     };
     setAppliedFilters(initialStateApplied);
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
   }, []);
 
-  const filteredImages = images.filter((img) => {
-    const uploadedAtMoment = moment(img.uploadedAt);
-    const startDateMoment = appliedFilters.startDate
-      ? moment(appliedFilters.startDate)
-      : null;
-    const endDateMoment = appliedFilters.endDate
-      ? moment(appliedFilters.endDate)
-      : null;
-
-    const isWithinDateRange =
-      (!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, "day")) &&
-      (!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, "day"));
-
-    const passesCategoryFilters =
-      (appliedFilters.buildingIds === null ||
-        appliedFilters.buildingIds.includes(img.buildingId)) &&
-      (appliedFilters.floorIds === null ||
-        appliedFilters.floorIds.includes(img.floorIds)) &&
-      (appliedFilters.activityIds === null ||
-        appliedFilters.activityIds.includes(img.activityId)) &&
-      (appliedFilters.workAreaIds === null ||
-        appliedFilters.workAreaIds.includes(img.workAreaId)) &&
-      (appliedFilters.uploadedByIds === null ||
-        appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
-      (appliedFilters.workCategoryIds === null ||
-        appliedFilters.workCategoryIds.includes(img.workCategoryId));
-
-    return isWithinDateRange && passesCategoryFilters;
-  });
-
-  const imagesByActivityUser = {};
-  filteredImages.forEach((img) => {
-    const userName = `${img.uploadedBy?.firstName || ""} ${
-      img.uploadedBy?.lastName || ""
-    }`.trim();
-    const workArea = img.workAreaName || "Unknown";
-    const key = `${img.activityName}__${userName}__${workArea}`;
-    if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
-    imagesByActivityUser[key].push(img);
-  });
-
   const scrollLeft = useCallback((key) => {
     imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
   }, []);
@@ -271,8 +367,8 @@ const ImageGallery = () => {
   }, []);
 
   const renderFilterCategory = (label, items, type) => (
-    <div className={`dropdown ${collapsedFilters[type] ? "collapsed" : ""}`}>
+    <div className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}>
-      <div className="dropdown-header" onClick={() => toggleCollapse(type)}>
+      <div className="dropdown-header bg-label-primary" onClick={() => toggleCollapse(type)}>
         <strong>{label}</strong>
         <div className="header-controls">
           {type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
@@ -307,7 +403,15 @@ const ImageGallery = () => {
       {!collapsedFilters[type] && (
         <div className="dropdown-content">
           {type === "dateRange" ? (
-            null
+            <div className="date-range-inputs">
+              <DateRangePicker
+                onRangeChange={setDateRange}
+                defaultStartDate={selectedFilters.startDate || yesterday}
+                defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
+                startDate={selectedFilters.startDate}
+                endDate={selectedFilters.endDate}
+              />
+            </div>
           ) : (
             items.map((item) => {
               const itemId = item[0];
@@ -334,38 +438,59 @@ const ImageGallery = () => {
   );
 
   return (
-    <div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open" : ""}`}>
+    <div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
+       <Breadcrumb
+          data={[
+            { label: "Home", link: "/" },
+            { label: "Gallary", link: null },
+          ]}
+      ></Breadcrumb>
       <div className="main-content">
+        <button
+          className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
+          onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
+          ref={filterButtonRef}
+        >
+          {isFilterPanelOpen ? (
+            <i className="fa-solid fa-times fs-5"></i>
+          ) : (
+            <><i className="fa-solid fa-filter ms-1 fs-5"></i></>
+          )}
+        </button>
+
         <div className="activity-section">
-          {loading ? (
+          {loading && pageNumber === 1 ? (
             <div className="spinner-container">
               <div className="spinner" />
             </div>
-          ) : Object.entries(imagesByActivityUser).length > 0 ? (
+          ) : images.length > 0 ? (
-            Object.entries(imagesByActivityUser).map(([key, imgs]) => {
+            images.map((batch) => {
-              const [activity, userName, workArea] = key.split("__");
+              const firstDoc = batch.documents[0];
-              const { buildingName, floorName, uploadedAt, workCategoryName } = imgs[0];
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
-              const date = moment(uploadedAt).format("YYYY-MM-DD");
+                }`.trim();
-              const time = moment(uploadedAt).format("hh:mm A");
+              const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
+              
+              
+
+              const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
 
               return (
-                <div key={key} className="grouped-section">
+                <div key={batch.batchId} className="grouped-section">
                   <div className="group-heading">
                     <div className="d-flex flex-column">
                       <div className="d-flex align-items-center mb-1">
                         <Avatar
-                          size="xxs"
+                          size="xs"
-                          firstName={imgs[0].uploadedBy?.firstName}
+                          firstName={firstDoc?.uploadedBy?.firstName}
-                          lastName={imgs[0].uploadedBy?.lastName}
+                          lastName={firstDoc?.uploadedBy?.lastName}
                           className="me-2"
                         />
                         <div className="d-flex flex-column align-items-start">
                           <strong className="user-name-text">
-                            {imgs[0].uploadedBy?.firstName}{" "}
+                            {userName}
-                            {imgs[0].uploadedBy?.lastName}
                           </strong>
                           <span className="me-2">
-                            {date} {time}
+                            {date} 
                           </span>
                         </div>
                       </div>
@@ -373,13 +498,14 @@ const ImageGallery = () => {
 
                     <div className="location-line">
                       <div>
-                        {buildingName} &gt; {floorName} &gt; <strong> {workArea} &gt;{" "}
+                        {batch.buildingName} &gt; {batch.floorName} &gt;{" "}
-                        {activity}</strong>
+                        <strong>{batch.workAreaName || "Unknown"} &gt;{" "}
+                          {batch.activityName}</strong>
                       </div>
-                      {workCategoryName && (
+                      {batch.workCategoryName && (
                         <div className="work-category-display ms-2">
                           <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
-                            {workCategoryName}
+                            {batch.workCategoryName}
                           </span>
                         </div>
                       )}
@@ -387,34 +513,36 @@ const ImageGallery = () => {
                   </div>
 
                   <div className="image-group-wrapper">
-                    <button
+                    {showScrollButtons && (
-                      className="scroll-arrow left-arrow"
+                      <button
-                      onClick={() => scrollLeft(key)}
+                        className="scroll-arrow left-arrow"
-                    >
+                        onClick={() => scrollLeft(batch.batchId)}
-                      &#8249;
+                      >
-                    </button>
+                        &#8249;
+                      </button>
+                    )}
                     <div
                       className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[key] = el)}
+                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
                     >
-                      {imgs.map((img, idx) => {
+                      {batch.documents.map((doc, idx) => {
-                        const hoverDate = moment(img.uploadedAt).format("YYYY-MM-DD");
+                        const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
-                        const hoverTime = moment(img.uploadedAt).format("hh:mm A");
+                        const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
 
                         return (
                           <div
-                            key={img.imageUrl}
+                            key={doc.id}
                             className="image-card"
                             onClick={() =>
-                              openModal(<ImagePop images={imgs} initialIndex={idx} />)
+                              openModal(<ImagePop batch={batch} initialIndex={idx} />)
                             }
-                            onMouseEnter={() => setHoveredImage(img)}
+                            onMouseEnter={() => setHoveredImage(doc)}
                             onMouseLeave={() => setHoveredImage(null)}
                           >
                             <div className="image-wrapper">
-                              <img src={img.imageUrl} alt={`Image ${idx + 1}`} />
+                              <img src={doc.url} alt={`Image ${idx + 1}`} />
                             </div>
-                            {hoveredImage === img && (
+                            {hoveredImage === doc && (
                               <div className="image-hover-description">
                                 <p>
                                   <strong>Date:</strong> {hoverDate}
@@ -423,7 +551,7 @@ const ImageGallery = () => {
                                   <strong>Time:</strong> {hoverTime}
                                 </p>
                                 <p>
-                                  <strong>Activity:</strong> {img.activityName}
+                                  <strong>Activity:</strong> {batch.activityName}
                                 </p>
                               </div>
                             )}
@@ -431,69 +559,52 @@ const ImageGallery = () => {
                         );
                       })}
                     </div>
-                    <button
+                    {showScrollButtons && (
-                      className="scroll-arrow right-arrow"
+                      <button
-                      onClick={() => scrollRight(key)}
+                        className="scroll-arrow right-arrow"
-                    >
+                        onClick={() => scrollRight(batch.batchId)}
-                      &#8250;
+                      >
-                    </button>
+                        &#8250;
+                      </button>
+                    )}
                   </div>
                 </div>
               );
             })
           ) : (
-            <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
               No images match the selected filters.
             </p>
           )}
+
+          <div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            {loadingMore && hasMore && <div className="spinner" />}
+            {!hasMore && !loading && images.length > 0 && (
+              <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
+            )}
+          </div>
         </div>
       </div>
 
-      <div className="filter-drawer-wrapper">
+      <div
-        <button
+        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
-          className={`filter-button btn-primary ${isFilterPanelOpen ? "" : "closed-icon"}`}
+        tabIndex="-1"
-          onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
+        id="filterOffcanvas"
-          ref={filterButtonRef}
+        aria-labelledby="filterOffcanvasLabel"
-        >
+        ref={filterPanelRef}
-          {isFilterPanelOpen ? (
+      >
-            <>
+        <div className="offcanvas-header">
-              Filter <span className="ms-1">&#10006;</span> {/* Added ms-1 for spacing */}
+          <h5 className="offcanvas-title" id="filterOffcanvasLabel">
-            </>
+            Filters
-          ) : (
+          </h5>
-            <>
+          <button
-              <i className="fa-solid fa-filter ms-1 fs-5"></i>
+            type="button"
-            </>
+            className="btn-close"
-          )}
+            onClick={() => setIsFilterPanelOpen(false)}
-        </button>
+            aria-label="Close"
-        <div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
+          ></button>
-          <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
+        </div>
-            <div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
+        <div className="filter-actions mt-auto mx-2">
-              <strong>Date Range</strong>
-
-              <span className="collapse-icon">
-                {collapsedFilters.dateRange ? '+' : '-'}
-              </span>
-            </div>
-            {!collapsedFilters.dateRange && (
-              <div className="datepicker" >
-                <DateRangePicker
-                  onRangeChange={setDateRange}
-                  defaultStartDate={selectedFilters.startDate || yesterday}
-                  defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
-                  startDate={selectedFilters.startDate}
-                  endDate={selectedFilters.endDate}
-                />
-              </div>
-            )}
-          </div>
-          {renderFilterCategory("Building", buildings, "building")}
-          {renderFilterCategory("Floor", floors, "floor")}
-          {renderFilterCategory("Work Area", workAreas, "workArea")}
-          {renderFilterCategory("Activity", activities, "activity")}
-          {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
-          {renderFilterCategory("Work Category", workCategories, "workCategory")}
-
-          <div className="filter-actions">
             <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
               Clear All
             </button>
@@ -501,6 +612,16 @@ const ImageGallery = () => {
               Apply Filters
             </button>
           </div>
+        <div className="offcanvas-body d-flex flex-column">
+          {renderFilterCategory("Date Range", [], "dateRange")}
+          {renderFilterCategory("Building", buildings, "building")}
+          {renderFilterCategory("Floor", floors, "floor")}
+          {renderFilterCategory("Work Area", workAreas, "workArea")}
+          {renderFilterCategory("Activity", activities, "activity")}
+          {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
+          {renderFilterCategory("Work Category", workCategories, "workCategory")}
+
+        
         </div>
       </div>
     </div>

src/pages/Gallary/ImageGallery.css

@@ -1,13 +1,9 @@
-/* ImageGallery.css */
 .gallery-container {
   display: grid;
-  grid-template-columns: 1fr 50px;
   gap: 4px;
-  padding: 25px;
+  /* padding: 25px; */
   font-family: sans-serif;
-  height: calc(100vh - 20px);
   box-sizing: border-box;
-  background-color: #f7f9fc;
   transition: grid-template-columns 0.3s ease-in-out;
 }
 
@@ -69,8 +65,9 @@
   transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease-in-out,
     height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out;
   position: absolute;
-  top: 0;
+  top: 150px;
   right: 0;
+  position: fixed;
   height: 40px;
   width: 40px;
   z-index: 100;
@@ -140,7 +137,7 @@
   border-radius: 0 0 4px 4px;
   max-height: 150px;
   /* Default max-height for scrollable dropdowns */
-  overflow-y: auto;
+
   /* Default overflow for scrollable dropdowns */
   transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
 }
@@ -197,9 +194,6 @@
   transition: background 0.2s;
 }
 
-.dropdown-content label:hover {
-  background-color: #eef2ff;
-}
 
 .dropdown-content input[type="checkbox"] {
   -webkit-appearance: none;
@@ -400,6 +394,7 @@
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
   width: 100%;
+  margin-left: 34px;
 }
 
 .scroll-arrow {
@@ -543,4 +538,4 @@ hr {
 .datepicker {
   margin-right: 135px;
   margin-top: 6px;
-}
+}

src/pages/Gallary/ImageGalleryAPI.jsx

@@ -1,9 +1,9 @@
 import { api } from "../../utils/axiosClient";
 
 export const ImageGalleryAPI = {
-
+    ImagesGet: (projectId, filter, pageNumber, pageSize) => {
-    ImagesGet: (projectId, filter) => {
         const payloadJsonString = JSON.stringify(filter);
-        return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}`)
+        // Corrected API endpoint with pagination parameters
+        return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}&pageNumber=${pageNumber}&pageSize=${pageSize}`);
     },
-}
+};

src/pages/Gallary/ImagePop.jsx

@@ -2,32 +2,38 @@ import React, { useState, useEffect } from "react";
 import "./ImagePop.css";
 import { useModal } from "./ModalContext";
 import moment from "moment";
+import {formatUTCToLocalTime} from "../../utils/dateUtils";
 
-const ImagePop = ({ images, initialIndex = 0 }) => {
+const ImagePop = ({ batch, initialIndex = 0 }) => {
   const { closeModal } = useModal();
-  // State to keep track of the currently displayed image's index
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
 
-  // Effect to update currentIndex if the initialIndex prop changes (e.g., if the modal is reused)
+  // Effect to update currentIndex if the initialIndex prop changes
   useEffect(() => {
     setCurrentIndex(initialIndex);
-  }, [initialIndex, images]);
+  }, [initialIndex, batch]);
 
-  // If no images are provided or the array is empty, don't render
+  // If no batch or documents are provided, don't render
-  if (!images || images.length === 0) return null;
+  if (!batch || !batch.documents || batch.documents.length === 0) return null;
 
-  // Get the current image based on currentIndex
+  // Get the current image document from the batch's documents array
-  const image = images[currentIndex];
+  const image = batch.documents[currentIndex];
 
   // Fallback if for some reason the image at the current index doesn't exist
   if (!image) return null;
 
-  // Format details for display
+  // Format details for display from the individual image document
   const fullName = `${image.uploadedBy?.firstName || ""} ${
     image.uploadedBy?.lastName || ""
   }`.trim();
-  const date = moment(image.uploadedAt).format("YYYY-MM-DD");
+  const date = formatUTCToLocalTime(image.uploadedAt);
-  const time = moment(image.uploadedAt).format("hh:mm A");
+   
+  // Location and category details from the 'batch' object (as previously corrected)
+  const buildingName = batch.buildingName;
+  const floorName = batch.floorName;
+  const workAreaName = batch.workAreaName;
+  const activityName = batch.activityName;  
+  const batchComment = batch.comment;
 
   // Handler for navigating to the previous image
   const handlePrev = () => {
@@ -37,13 +43,13 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
   // Handler for navigating to the next image
   const handleNext = () => {
     setCurrentIndex((prevIndex) =>
-      Math.min(images.length - 1, prevIndex + 1)
+      Math.min(batch.documents.length - 1, prevIndex + 1)
     );
   };
 
   // Determine if previous/next buttons should be enabled/visible
   const hasPrev = currentIndex > 0;
-  const hasNext = currentIndex < images.length - 1;
+  const hasNext = currentIndex < batch.documents.length - 1;
 
   return (
     <div className="image-modal-overlay">
@@ -61,7 +67,7 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
         )}
 
         {/* The main image display */}
-        <img src={image.imageUrl} alt="Preview" className="modal-image" />
+        <img src={image.url} alt="Preview" className="modal-image" />
 
         {/* Next button, only shown if there's a next image */}
         {hasNext && (
@@ -76,14 +82,15 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
             <strong>👤 Uploaded By:</strong> {fullName}
           </p>
           <p>
-            <strong>📅 Date:</strong> {date} {time}
+            <strong>📅 Date:</strong> {date}
           </p>
           <p>
-            <strong>🏢 Location:</strong> {image.buildingName} &gt;{" "}
+            <strong>🏢 Location:</strong> {buildingName} &gt; {floorName} &gt;{" "}
-            {image.floorName} &gt; {image.activityName}
+            {workAreaName || "Unknown"} &gt; {activityName}
           </p>
           <p>
-            <strong>📝 Comments:</strong> {image.comment}
+            {/* Display the comment from the batch object */}
+            <strong>📝 Comments:</strong> {batchComment || "N/A"}
           </p>
         </div>
       </div>

src/pages/project/ProjectDetails.jsx

@@ -141,11 +141,11 @@ const ProjectDetails = () => {
 
   const handler = useCallback(
     (msg) => {
-      if (msg.keyword === "Update_Project" && project.id === msg.response.id) {
+      if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
          refetch()
       }
     },
-    [project, handleDataChange]
+    [projects_Details, handleDataChange]
   );
   useEffect(() => {
     eventBus.on("project", handler);

src/pages/project/ProjectList.jsx

@@ -25,12 +25,13 @@ const ProjectList = () => {
   const { profile: loginUser } = useProfile();
   const [listView, setListView] = useState(false);
   const [showModal, setShowModal] = useState(false);
+
   const { projects, loading, error, refetch } = useProjects();
   const [projectList, setProjectList] = useState([]);
+
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const [HasManageProject, setHasManageProject] = useState(
+  const [HasManageProject, setHasManageProject] = useState(HasManageProjectPermission);
-    HasManageProjectPermission
+
-  );
   const { mutate: createProject } = useCreateProject({
     onSuccessCallback: () => {
       setShowModal(false);
@@ -43,7 +44,7 @@ const ProjectList = () => {
     "603e994b-a27f-4e5d-a251-f3d69b0498ba",
     "ef1c356e-0fe0-42df-a5d3-8daee355492d",
     "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-    "33deaef9-9af1-4f2a-b443-681ea0d04f81",  
+    "33deaef9-9af1-4f2a-b443-681ea0d04f81",
   ]);
 
   const handleShow = () => setShowModal(true);
@@ -62,32 +63,32 @@ const ProjectList = () => {
         .filter((statusId) => grouped[statusId])
         .flatMap((statusId) =>
           grouped[statusId].sort((a, b) =>
-            a.name.toLowerCase()?.localeCompare(b.name.toLowerCase())
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
           )
         );
-      setProjectList(sortedGrouped);
+
+      setProjectList((prev) => {
+        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
+        return isSame ? prev : sortedGrouped;
+      });
     }
   };
 
   useEffect(() => {
-    sortingProject(projects);
+    if (!loading && projects) {
-  }, [projects, loginUser?.projects, loading]);
+      sortingProject(projects);
+    }
+  }, [projects, loading, selectedStatuses]); // Include selectedStatuses if it changes filtering
 
   useEffect(() => {
-    if (loginUser) {
+    setHasManageProject(loginUser ? HasManageProjectPermission : false);
-      setHasManageProject(HasManageProjectPermission);
-    } else {
-      setHasManageProject(false);
-    }
   }, [loginUser, HasManageProjectPermission]);
 
-
+  const handleSubmitForm = (newProject, setLoading, reset) => {
-
+    setLoading(true);
-  const handleSubmitForm = (newProject, setloading, reset) => {
-    setloading(true);
     createProject(newProject, {
       onSettled: () => {
-        setloading(false);
+        setLoading(false);
         reset();
       },
     });
@@ -114,11 +115,15 @@ const ProjectList = () => {
     return matchesStatus && matchesSearch;
   });
 
+  const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
 
-  const totalPages = Math.ceil( filteredProjects.length / ITEMS_PER_PAGE );
+  const {
+    currentItems,
+    currentPage,
+    paginate,
+    setCurrentPage,
+  } = usePagination(filteredProjects, ITEMS_PER_PAGE);
 
-  const {currentItems,currentPage,paginate,setCurrentPage} = usePagination(filteredProjects, ITEMS_PER_PAGE)
-  
   useEffect(() => {
     const tooltipTriggerList = Array.from(
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -126,8 +131,6 @@ const ProjectList = () => {
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
-
-
   return (
     <>
     

src/pages/project/ProjectListView.jsx

@@ -80,7 +80,8 @@ const ProjectListView = ({ projectData, recall }) => {
         <GlobalModel isOpen={showModal} closeModal={handleClose}>   <ManageProjectInfo
               project={projects_Details}
               handleSubmitForm={handleFormSubmit}
-              onClose={handleClose}
+             onClose={handleClose}
+             isPending={isPending}
             /></GlobalModel>
       )}
 

src/services/signalRService.js

@@ -103,6 +103,17 @@ export function startSignalR(loggedUser) {
         queryClient
         eventBus.emit("employee", data);
       }
+
+      if (data.keyword == "Task_Report") {
+        if(data.numberOfImages > 0){
+        eventBus.emit("image_gallery", data);
+        }
+      }
+      if (data.keyword == "Task_Comment") {
+        if(data.numberOfImages > 0){
+        eventBus.emit("image_gallery", data);
+        }
+      }
     }
   });
 

src/utils/dateUtils.jsx

@@ -1,4 +1,5 @@
-// utils/dateUtils.js
+import moment from "moment";
+
 export const getDateDifferenceInDays = (startDate, endDate) => {
   if (!startDate || !endDate) {
     throw new Error("Both startDate and endDate must be provided");
@@ -59,10 +60,13 @@ export const checkIfCurrentDate = (dateString) => {
   currentDate.setHours(0, 0, 0, 0);
   inputDate.setHours(0, 0, 0, 0);
 
-  return currentDate.getTime() === inputDate.getTime();
+  return currentDate?.getTime() === inputDate?.getTime();
 };
 
 export  const formatNumber = (num) => {
   if (num == null || isNaN(num)) return "NA";
   return Number.isInteger(num) ? num : num.toFixed(2);
-};
+};
+export const formatUTCToLocalTime = (datetime) =>{
+  return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
+}