Merge branch 'Collection_Management'

Reviewed-on: #487
Merged

public/assets/css/core-extend.css

@@ -10,3 +10,287 @@
 .table_header_border {
  border-bottom:2px solid var(--bs-table-border-color) ;
 }
+.text-gary-80 {
+color:var(--bs-gray-500)
+}
+
+.text-royalblue{
+color: #1796e3;
+}
+
+.text-md {
+font-size: 2rem;
+}
+
+.text-md-b {
+font-weight: normal;
+}
+
+.text-xxs { font-size: 0.55rem; }       /* 8px */
+.text-xs { font-size: 0.75rem; }       /* 12px */
+.text-sm { font-size: 0.875rem; }      /* 14px */
+.text-base { font-size: 1rem; }        /* 16px */
+.text-lg { font-size: 1.125rem; }      /* 18px */
+.text-xl { font-size: 1.25rem; }       /* 20px */
+.text-2xl { font-size: 1.5rem; }       /* 24px */
+.text-3xl { font-size: 1.875rem; }     /* 30px */
+.text-4xl { font-size: 2.25rem; }      /* 36px */
+.text-5xl { font-size: 3rem; }         /* 48px */
+.text-6xl { font-size: 3.75rem; }      /* 60px */
+.text-7xl { font-size: 4.5rem; }       /* 72px */
+.text-8xl { font-size: 6rem; }         /* 96px */
+.text-9xl { font-size: 8rem; }         /* 128px */
+
+
+/*  */
+
+.w-0     { width: 0px; }
+.w-px    { width: 1px; }
+.w-1     { width: 0.25rem; }  /* 4px */
+.w-2     { width: 0.5rem; }   /* 8px */
+.w-3     { width: 0.75rem; }  /* 12px */
+.w-4     { width: 1rem; }     /* 16px */
+.w-5     { width: 1.25rem; }  /* 20px */
+.w-6     { width: 1.5rem; }   /* 24px */
+.w-8     { width: 2rem; }     /* 32px */
+.w-10    { width: 2.5rem; }   /* 40px */
+.w-12    { width: 3rem; }     /* 48px */
+.w-16    { width: 4rem; }     /* 64px */
+.w-20    { width: 5rem; }     /* 80px */
+.w-24    { width: 6rem; }     /* 96px */
+.w-32    { width: 8rem; }     /* 128px */
+.w-40    { width: 10rem; }    /* 160px */
+.w-48    { width: 12rem; }    /* 192px */
+.w-56    { width: 14rem; }    /* 224px */
+.w-64    { width: 16rem; }    /* 256px */
+.w-auto  { width: auto; }
+.w-full  { width: 100%; }
+.w-screen{ width: 100vw; }
+.w-min   { width: min-content; }
+.w-max   { width: max-content; }
+
+
+
+.h-0     { height: 0px; }
+.h-px    { height: 1px; }
+.h-1     { height: 0.25rem; }  /* 4px */
+.h-2     { height: 0.5rem; }   /* 8px */
+.h-3     { height: 0.75rem; }  /* 12px */
+.h-4     { height: 1rem; }     /* 16px */
+.h-5     { height: 1.25rem; }  /* 20px */
+.h-6     { height: 1.5rem; }   /* 24px */
+.h-8     { height: 2rem; }     /* 32px */
+.h-10    { height: 2.5rem; }   /* 40px */
+.h-12    { height: 3rem; }     /* 48px */
+.h-16    { height: 4rem; }     /* 64px */
+.h-20    { height: 5rem; }     /* 80px */
+.h-24    { height: 6rem; }     /* 96px */
+.h-32    { height: 8rem; }     /* 128px */
+.h-40    { height: 10rem; }    /* 160px */
+.h-48    { height: 12rem; }    /* 192px */
+.h-56    { height: 14rem; }    /* 224px */
+.h-64    { height: 16rem; }    /* 256px */
+.h-auto  { height: auto; }
+.h-full  { height: 100%; }
+.h-screen{ height: 100vh; }
+.h-min   { height: min-content; }
+.h-max   { height: max-content; }
+
+
+
+
+
+/* ==========================
+   Base Font Sizes (mobile first)
+   ========================== */
+.text-xxs { font-size: 0.55rem; }   /* 8px */
+.text-xs  { font-size: 0.75rem; }   /* 12px */
+.text-sm  { font-size: 0.875rem; }  /* 14px */
+.text-base{ font-size: 1rem; }      /* 16px */
+.text-lg  { font-size: 1.125rem; }  /* 18px */
+.text-xl  { font-size: 1.25rem; }   /* 20px */
+.text-2xl { font-size: 1.5rem; }    /* 24px */
+.text-3xl { font-size: 1.875rem; }  /* 30px */
+.text-4xl { font-size: 2.25rem; }   /* 36px */
+.text-5xl { font-size: 3rem; }      /* 48px */
+.text-6xl { font-size: 3.75rem; }   /* 60px */
+.text-7xl { font-size: 4.5rem; }    /* 72px */
+.text-8xl { font-size: 6rem; }      /* 96px */
+.text-9xl { font-size: 8rem; }      /* 128px */
+
+/* ==========================
+   Base Heights
+   ========================== */
+.h-0     { height: 0; }
+.h-px    { height: 1px; }
+.h-1     { height: 0.25rem; }  /* 4px */
+.h-2     { height: 0.5rem; }   /* 8px */
+.h-3     { height: 0.75rem; }  /* 12px */
+.h-4     { height: 1rem; }     /* 16px */
+.h-5     { height: 1.25rem; }  /* 20px */
+.h-6     { height: 1.5rem; }   /* 24px */
+.h-8     { height: 2rem; }     /* 32px */
+.h-10    { height: 2.5rem; }   /* 40px */
+.h-12    { height: 3rem; }     /* 48px */
+.h-16    { height: 4rem; }     /* 64px */
+.h-20    { height: 5rem; }     /* 80px */
+.h-24    { height: 6rem; }     /* 96px */
+.h-32    { height: 8rem; }     /* 128px */
+.h-40    { height: 10rem; }    /* 160px */
+.h-48    { height: 12rem; }    /* 192px */
+.h-56    { height: 14rem; }    /* 224px */
+.h-64    { height: 16rem; }    /* 256px */
+.h-full  { height: 100%; }
+.h-screen{ height: 100vh; }
+
+/* ==========================
+   Base Widths
+   ========================== */
+.w-0     { width: 0; }
+.w-px    { width: 1px; }
+.w-1     { width: 0.25rem; }
+.w-2     { width: 0.5rem; }
+.w-3     { width: 0.75rem; }
+.w-4     { width: 1rem; }
+.w-5     { width: 1.25rem; }
+.w-6     { width: 1.5rem; }
+.w-8     { width: 2rem; }
+.w-10    { width: 2.5rem; }
+.w-12    { width: 3rem; }
+.w-16    { width: 4rem; }
+.w-20    { width: 5rem; }
+.w-24    { width: 6rem; }
+.w-32    { width: 8rem; }
+.w-40    { width: 10rem; }
+.w-48    { width: 12rem; }
+.w-56    { width: 14rem; }
+.w-64    { width: 16rem; }
+.w-full  { width: 100%; }
+.w-screen{ width: 100vw; }
+
+/* ==========================
+   Responsive Variants
+   ========================== */
+@media (min-width: 576px) { /* sm */
+  /* Font */
+  .text-xxs-sm { font-size: 0.55rem; }
+  .text-xs-sm  { font-size: 0.75rem; }
+  .text-sm-sm  { font-size: 0.875rem; }
+  .text-base-sm{ font-size: 1rem; }
+  .text-lg-sm  { font-size: 1.125rem; }
+  .text-xl-sm  { font-size: 1.25rem; }
+  .text-2xl-sm{ font-size: 1.5rem; }
+
+  /* Height */
+  .h-1-sm{ height: 0.25rem; }
+  .h-2-sm{ height: 0.5rem; }
+  .h-3-sm{ height: 0.75rem; }
+  .h-4-sm{ height: 1rem; }
+  .h-5-sm{ height: 1.25rem; }
+  .h-6-sm{ height: 1.5rem; }
+  .h-8-sm{ height: 2rem; }
+  .h-10-sm{ height: 2.5rem; }
+
+  /* Width */
+  .w-1-sm{ width: 0.25rem; }
+  .w-2-sm{ width: 0.5rem; }
+  .w-3-sm{ width: 0.75rem; }
+  .w-4-sm{ width: 1rem; }
+  .w-5-sm{ width: 1.25rem; }
+  .w-6-sm{ width: 1.5rem; }
+  .w-8-sm{ width: 2rem; }
+  .w-10-sm{ width: 2.5rem; }
+}
+
+@media (min-width: 768px) { /* md */
+  /* Font */
+  .text-xxs-md { font-size: 0.55rem; }
+  .text-xs-md  { font-size: 0.75rem; }
+  .text-sm-md  { font-size: 0.875rem; }
+  .text-base-md{ font-size: 1rem; }
+  .text-lg-md  { font-size: 1.125rem; }
+  .text-xl-md  { font-size: 1.25rem; }
+  .text-2xl-md{ font-size: 1.5rem; }
+
+  /* Height */
+  .h-1-md{ height: 0.25rem; }
+  .h-2-md{ height: 0.5rem; }
+  .h-3-md{ height: 0.75rem; }
+  .h-4-md{ height: 1rem; }
+  .h-5-md{ height: 1.25rem; }
+  .h-6-md{ height: 1.5rem; }
+  .h-8-md{ height: 2rem; }
+  .h-10-md{ height: 2.5rem; }
+
+  /* Width */
+  .w-1-md{ width: 0.25rem; }
+  .w-2-md{ width: 0.5rem; }
+  .w-3-md{ width: 0.75rem; }
+  .w-4-md{ width: 1rem; }
+  .w-5-md{ width: 1.25rem; }
+  .w-6-md{ width: 1.5rem; }
+  .w-8-md{ width: 2rem; }
+  .w-10-md{ width: 2.5rem; }
+}
+
+@media (min-width: 992px) { /* lg */
+  /* Font */
+  .text-xxs-lg { font-size: 0.55rem; }
+  .text-xs-lg  { font-size: 0.75rem; }
+  .text-sm-lg  { font-size: 0.875rem; }
+  .text-base-lg{ font-size: 1rem; }
+  .text-lg-lg  { font-size: 1.125rem; }
+  .text-xl-lg  { font-size: 1.25rem; }
+  .text-2xl-lg{ font-size: 1.5rem; }
+
+  /* Height */
+  .h-1-lg{ height: 0.25rem; }
+  .h-2-lg{ height: 0.5rem; }
+  .h-3-lg{ height: 0.75rem; }
+  .h-4-lg{ height: 1rem; }
+  .h-5-lg{ height: 1.25rem; }
+  .h-6-lg{ height: 1.5rem; }
+  .h-8-lg{ height: 2rem; }
+  .h-10-lg{ height: 2.5rem; }
+
+  /* Width */
+  .w-1-lg{ width: 0.25rem; }
+  .w-2-lg{ width: 0.5rem; }
+  .w-3-lg{ width: 0.75rem; }
+  .w-4-lg{ width: 1rem; }
+  .w-5-lg{ width: 1.25rem; }
+  .w-6-lg{ width: 1.5rem; }
+  .w-8-lg{ width: 2rem; }
+  .w-10-lg{ width: 2.5rem; }
+}
+
+@media (min-width: 1200px) { /* xl */
+  /* Font */
+  .text-xxs-xl { font-size: 0.55rem; }
+  .text-xs-xl  { font-size: 0.75rem; }
+  .text-sm-xl  { font-size: 0.875rem; }
+  .text-base-xl{ font-size: 1rem; }
+  .text-lg-xl  { font-size: 1.125rem; }
+  .text-xl-xl  { font-size: 1.25rem; }
+  .text-2xl-xl{ font-size: 1.5rem; }
+
+  /* Height */
+  .h-1-xl{ height: 0.25rem; }
+  .h-2-xl{ height: 0.5rem; }
+  .h-3-xl{ height: 0.75rem; }
+  .h-4-xl{ height: 1rem; }
+  .h-5-xl{ height: 1.25rem; }
+  .h-6-xl{ height: 1.5rem; }
+  .h-8-xl{ height: 2rem; }
+  .h-10-xl{ height: 2.5rem; }
+
+  /* Width */
+  .w-1-xl{ width: 0.25rem; }
+  .w-2-xl{ width: 0.5rem; }
+  .w-3-xl{ width: 0.75rem; }
+  .w-4-xl{ width: 1rem; }
+  .w-5-xl{ width: 1.25rem; }
+  .w-6-xl{ width: 1.5rem; }
+  .w-8-xl{ width: 2rem; }
+  .w-10-xl{ width: 2.5rem; }
+}

src/ModalProvider.jsx

@@ -1,17 +1,23 @@
 import React, { useEffect } from "react";
 import { useOrganizationModal } from "./hooks/useOrganization";
 import OrganizationModal from "./components/Organization/OrganizationModal";
-import { useAuthModal } from "./hooks/useAuth";
+import { useAuthModal, useModal } from "./hooks/useAuth";
 import SwitchTenant from "./pages/authentication/SwitchTenant";
+import ChangePasswordPage from "./pages/authentication/ChangePassword";
+import NewCollection from "./components/collections/ManageCollection";
 
 const ModalProvider = () => {
   const { isOpen, onClose } = useOrganizationModal();
   const { isOpen: isAuthOpen } = useAuthModal();
+  const {isOpen:isChangePass}  = useModal("ChangePassword")
+  const {isOpen:isCollectionNew}  = useModal("newCollection");
 
   return (
     <>
       {isOpen && <OrganizationModal />}
       {isAuthOpen && <SwitchTenant />}
+      {isChangePass && <ChangePasswordPage /> }
+      {isCollectionNew && <NewCollection/>}
     </>
   );
 };

src/components/Activities/Attendance.jsx

@@ -12,7 +12,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 import { useSelectedProject } from "../../slices/apiDataManager";
 
-const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
+const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, }) => {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -24,7 +24,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     loading: attLoading,
     recall: attrecall,
     isFetching
-  } = useAttendance(selectedProject, organizationId, includeInactive, date);
+  } = useAttendance(selectedProject, organizationId);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
       (att) => att?.checkInTime !== null && att?.checkOutTime === null

src/components/Activities/AttendcesLogs.jsx

@@ -5,7 +5,11 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
 import DateRangePicker from "../common/DateRangePicker";
-import { clearCacheKey, getCachedData, useSelectedProject } from "../../slices/apiDataManager";
+import {
+  clearCacheKey,
+  getCachedData,
+  useSelectedProject,
+} from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
@@ -33,91 +37,61 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
+const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-  // const selectedProject = useSelector(
+const selectedProject = useSelectedProject();
-  //   (store) => store.localVariables.projectId
+const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-  // );
+const dispatch = useDispatch();
-  const selectedProject = useSelectedProject();
+const [loading, setLoading] = useState(false);
-  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+const [showPending, setShowPending] = useState(false);
-  const dispatch = useDispatch();
+const [isRefreshing, setIsRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [showPending, setShowPending] = useState(false)
 
-  const [isRefreshing, setIsRefreshing] = useState(false);
+const today = new Date();
-  const [processedData, setProcessedData] = useState([]);
+today.setHours(0, 0, 0, 0);
 
-  const today = new Date();
+const yesterday = new Date();
-  today.setHours(0, 0, 0, 0);
+yesterday.setDate(yesterday.getDate() - 1);
 
-  const yesterday = new Date();
+const isSameDay = (dateStr) => {
-  yesterday.setDate(yesterday.getDate() - 1);
-
-  const isSameDay = (dateStr) => {
   if (!dateStr) return false;
   const d = new Date(dateStr);
   d.setHours(0, 0, 0, 0);
   return d.getTime() === today.getTime();
-  };
+};
 
-  const isBeforeToday = (dateStr) => {
+const isBeforeToday = (dateStr) => {
   if (!dateStr) return false;
   const d = new Date(dateStr);
   d.setHours(0, 0, 0, 0);
   return d.getTime() < today.getTime();
-  };
+};
 
-  const sortByName = (a, b) => {
+const sortByName = (a, b) => {
-    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+  const nameA = (a.firstName + a.lastName).toLowerCase();
-    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+  const nameB = (b.firstName + b.lastName).toLowerCase();
-    return nameA?.localeCompare(nameB);
+  return nameA.localeCompare(nameB);
-  };
+};
 
-  const {
+const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
-    data = [],
-    isLoading,
-    error,
-    refetch,
-    isFetching,
-  } = useAttendancesLogs(
   selectedProject,
   dateRange.startDate,
   dateRange.endDate,
   organizationId
-  );
+);
-  const filtering = (data) => {
+
+const processedData = useMemo(() => {
   const filteredData = showPending
     ? data.filter((item) => item.checkOutTime === null)
     : data;
 
-    const group1 = filteredData
+  const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
-      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+  const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
-      .sort(sortByName);
+  const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
-    const group2 = filteredData
+  const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
-      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+  const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
-      .sort(sortByName);
+  const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
-    const group3 = filteredData
-      .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-      .sort(sortByName);
-    const group4 = filteredData.filter(
-      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
-    );
-    const group5 = filteredData
-      .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-      .sort(sortByName);
-    const group6 = filteredData
-      .filter((d) => d.activity === 5)
-      .sort(sortByName);
 
-    const sortedList = [
+  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-      ...group1,
-      ...group2,
-      ...group3,
-      ...group4,
-      ...group5,
-      ...group6,
-    ];
 
-    // Group by date
   const groupedByDate = sortedList.reduce((acc, item) => {
     const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
     if (date) {
@@ -127,129 +101,78 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
     return acc;
   }, {});
 
-    const sortedDates = Object.keys(groupedByDate).sort(
+  const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-      (a, b) => new Date(b) - new Date(a)
+  return sortedDates.flatMap((date) => groupedByDate[date]);
+}, [data, showPending]);
+
+const filteredSearchData = useMemo(() => {
+  if (!searchTerm) return processedData;
+
+  const lowercased = searchTerm.toLowerCase();
+  return processedData.filter((item) =>
+    `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
   );
+}, [processedData, searchTerm]);
 
-    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
+const {
-    setProcessedData(finalData);
-  };
-
-  useEffect(() => {
-    filtering(data);
-  }, [data, showPending]);
-
-  // New useEffect to handle search filtering
-  const filteredSearchData = useMemo(() => {
-    if (!searchTerm) {
-      return processedData;
-    }
-    const lowercasedSearchTerm = searchTerm.toLowerCase();
-    return processedData.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-      return fullName.includes(lowercasedSearchTerm);
-    });
-  }, [processedData, searchTerm]);
-
-//   const filteredSearchData = useMemo(() => {
-//   let tempData = processedData;
-
-//   if (searchTerm) {
-//     const lowercasedSearchTerm = searchTerm.toLowerCase();
-//     tempData = tempData.filter((item) => {
-//       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-//       return fullName.includes(lowercasedSearchTerm);
-//     });
-//   }
-
-//   if (filters?.selectedOrganization) {
-//     tempData = tempData.filter(
-//       (item) => item.organization?.name === filters.selectedOrganization
-//     );
-//   }
-
-//   if (filters?.selectedServices?.length > 0) {
-//     tempData = tempData.filter((item) =>
-//       filters.selectedServices.includes(item.service?.name)
-//     );
-//   }
-
-//   return tempData;
-// }, [processedData, searchTerm, filters]);
-
-
-  const {
   currentPage,
   totalPages,
   currentItems: paginatedAttendances,
   paginate,
   resetPage,
-  } = usePagination(filteredSearchData, 20);
+} = usePagination(filteredSearchData, 20);
 
-  useEffect(() => {
+useEffect(() => {
   resetPage();
-  }, [filteredSearchData, resetPage]);
+}, [filteredSearchData]);
 
-  const handler = useCallback(
+const handler = useCallback(
   (msg) => {
     const { startDate, endDate } = dateRange;
     const checkIn = msg.response.checkInTime.substring(0, 10);
-      if (
+
-        selectedProject === msg.projectId &&
+    if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
-        startDate <= checkIn &&
-        checkIn <= endDate
-      ) {
       queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
         if (!oldData) {
           queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
           return;
         }
-          const updatedAttendance = oldData.map((record) =>
+        return oldData.map((record) =>
-            record.id === msg.response.id
+          record.id === msg.response.id ? { ...record, ...msg.response } : record
-              ? { ...record, ...msg.response }
-              : record
         );
-          filtering(updatedAttendance);
-          return updatedAttendance;
       });
       resetPage();
     }
   },
-    [selectedProject, dateRange, filtering, resetPage]
+  [selectedProject, dateRange, resetPage]
-  );
+);
 
-  useEffect(() => {
+useEffect(() => {
   eventBus.on("attendance_log", handler);
   return () => eventBus.off("attendance_log", handler);
-  }, [handler]);
+}, [handler]);
 
-  const employeeHandler = useCallback(
+const employeeHandler = useCallback(
   (msg) => {
     const { startDate, endDate } = dateRange;
     if (data.some((item) => item.employeeId == msg.employeeId)) {
-        // dispatch(
+      refetch();
-        //   fetchAttendanceData({
-        //     ,
-        //     fromDate: startDate,
-        //     toDate: endDate,
-        //   })
-        // );
-
-        refetch()
     }
   },
-    [selectedProject, dateRange, data, refetch]
+  [data, refetch]
-  );
+);
 
-  useEffect(() => {
+useEffect(() => {
   eventBus.on("employee", employeeHandler);
   return () => eventBus.off("employee", employeeHandler);
-  }, [employeeHandler]);
+}, [employeeHandler]);
+
+
 
   return (
     <>
       <div
-        className="dataTables_length text-start py-2 d-flex justify-content-between"
+        className="dataTables_length text-start py-2 d-flex justify-content-between "
         id="DataTables_Table_0_length"
       >
         <div className="d-flex align-items-center my-0 ">
@@ -257,7 +180,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start m-0 ms-5">
+          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
             <input
               type="checkbox"
               className="form-check-input"
@@ -270,11 +193,16 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-       
       </div>
-      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
+      <div
+        className="table-responsive text-nowrap"
+        style={{ minHeight: "200px" }}
+      >
         {isLoading ? (
-          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: "200px" }}
+          >
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -287,7 +215,8 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
                 <th className="border-top-1">Date</th>
                 <th>Organization</th>
                 <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
+                  <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
+                  Check-In
                 </th>
                 <th>
                   <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@@ -366,7 +295,12 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
+          <div className="my-12">
+            <span className="text-secondary">
+              No data available for the selected date range. Please Select
+              another date.
+            </span>
+          </div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
@@ -392,7 +326,8 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${currentPage === pageNumber ? "active" : ""
+                  className={`page-item ${
+                    currentPage === pageNumber ? "active" : ""
                   }`}
                 >
                   <button
@@ -405,7 +340,8 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
               )
             )}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
               }`}
             >
               <button

src/components/Activities/CheckCheckOutForm.jsx

@@ -33,7 +33,7 @@ const createSchema = (modeldata) => {
         const checkOut = new Date(checkIn);
         checkOut.setHours(hour, minute, 0, 0);
 
-        return checkOut > checkIn;
+        return checkOut >= checkIn;
       }
       return true;
     }, {
@@ -96,12 +96,12 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 d-flex justify-content-center">
+      <div className="col-12 d-flex justify-content-center mb-4">
-        <label className="fs-5 text-dark text-center">
+        <label className="fs-5 tex-semibold text-center">
           {modeldata?.checkInTime && !modeldata?.checkOutTime
-            ? "Check-out :"
+            ? "Check-Out "
-            : "Check-in :"}
+            : "Check-In "}
         </label>
       </div>
 

src/components/Activities/Regularization.jsx

@@ -1,25 +1,43 @@
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import Avatar from "../common/Avatar";
-import { convertShortTime } from "../../utils/dateUtils";
+import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
 import RegularizationActions from "./RegularizationActions";
 import { useSelector } from "react-redux";
 import { useRegularizationRequests } from "../../hooks/useAttendance";
 import moment from "moment";
 import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
-import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
+import {
+  cacheData,
+  clearCacheKey,
+  useSelectedProject,
+} from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
+import Pagination from "../../components/common/Pagination";
 
-const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
+const Regularization = ({
+  handleRequest,
+  searchTerm,
+  projectId,
+  organizationId,
+  IncludeInActive,
+}) => {
   const queryClient = useQueryClient();
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
-  const { regularizes, loading, error, refetch } =
+  const { regularizes, loading, error, refetch } = useRegularizationRequests(
-    useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
+    selectedProject,
+    organizationId,
+    IncludeInActive
+  );
 
   useEffect(() => {
+    if(!regularizes) return
+    if(regularizes?.length) {
     setregularizedList(regularizes);
+
+    }
   }, [regularizes]);
 
   const sortByName = (a, b) => {
@@ -54,48 +72,15 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
     }
     const lowercasedSearchTerm = searchTerm.toLowerCase();
     return sortedList.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
       return fullName.includes(lowercasedSearchTerm);
     });
   }, [regularizesList, searchTerm]);
 
-  // const filteredSearchData = useMemo(() => {
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-  //   let sortedList = [...regularizesList].sort(sortByName);
+    filteredSearchData,
-
+    20
-  //   // Search filter
+  );
-  //   if (searchTerm) {
-  //     const lowercasedSearchTerm = searchTerm.toLowerCase();
-  //     sortedList = sortedList.filter((item) => {
-  //       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-  //       return fullName.includes(lowercasedSearchTerm);
-  //     });
-  //   }
-
-  //   // Organization filter
-  //   if (filters?.selectedOrganization) {
-  //     sortedList = sortedList.filter(
-  //       (item) => item.organization?.name === filters.selectedOrganization
-  //     );
-  //   }
-
-  //   // Services filter
-  //   if (filters?.selectedServices?.length > 0) {
-  //     sortedList = sortedList.filter((item) =>
-  //       filters.selectedServices.includes(item.service?.name)
-  //     );
-  //   }
-
-  //   return sortedList;
-  // }, [regularizesList, searchTerm, filters]);
-
-
-  const { currentPage, totalPages, currentItems, paginate } =
-    usePagination(filteredSearchData, 20);
-
-  // Reset pagination when the search term or data changes
-  useEffect(() => {
-
-  }, [filteredSearchData]);
 
   useEffect(() => {
     eventBus.on("regularization", handler);
@@ -117,9 +102,15 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
   }, [employeeHandler]);
 
   return (
-    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
+    <div
+      className="table-responsive text-nowrap pb-4"
+      style={{ minHeight: "200px" }}
+    >
       {loading ? (
-        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ height: "200px" }}
+        >
           <p className="text-secondary">Loading...</p>
         </div>
       ) : currentItems?.length > 0 ? (
@@ -135,6 +126,12 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
               <th>
                 <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
               </th>
+              <th colSpan={2}>
+                Requested By
+              </th>
+               <th >
+                Requested At
+              </th>
               <th>Action</th>
             </tr>
           </thead>
@@ -143,10 +140,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
               <tr key={index}>
                    <td colSpan={2}>
                   <div className="d-flex justify-content-start align-items-center">
-                    <Avatar
+                    <Avatar firstName={att.firstName} lastName={att.lastName} />
-                      firstName={att.firstName}
-                      lastName={att.lastName}
-                    />
                     <div className="d-flex flex-column">
                       <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
@@ -162,7 +156,23 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
 
                 <td>{convertShortTime(att.checkInTime)}</td>
                 <td>
-                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
+                  {att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
+                </td>
+             
+                  <td colSpan={2}>
+                     {att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
+                    <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
+                    <div className="d-flex flex-column">
+                      <a href="#" className="text-heading text-truncate">
+                        <span className="fw-normal">
+                          {att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
+                        </span>
+                      </a>
+                    </div>
+                  </div>):(<small>--</small>)}
+                </td>
+                  <td>
+                  {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
                 </td>
                 <td className="text-center ">
                   <RegularizationActions
@@ -175,7 +185,6 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             ))}
           </tbody>
         </table>
-
       ) : (
         <div
           className="d-flex justify-content-center align-items-center"
@@ -188,7 +197,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
           </span>
         </div>
       )}
-      {!loading && totalPages > 1 && (
+      {/* {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
             <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
@@ -226,6 +235,14 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             </li>
           </ul>
         </nav>
+      )} */}
+
+      {totalPages > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={paginate}
+        />
       )}
     </div>
   );

src/components/Activities/ReportTask.jsx

@@ -77,7 +77,7 @@ export const ReportTask = ({ report, closeModal }) => {
   return (
     <div className="container  m-0">
       <div className="text-center">
-        <p className="fs-6 fw-semibold">Report Task</p>
+        <p className="fs-5 fw-semibold">Report Task</p>
       </div>
       <div className="mb-1 row text-start">
         <label htmlFor="html5-text-input" className="col-md-4 col-form-label">
@@ -101,16 +101,14 @@ export const ReportTask = ({ report, closeModal }) => {
         <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
           Wrok Area :
         </label>
-        <div className="col-md-8 text-start text-wrap">
+        <div className="col-md-8 text-start">
-          <label className=" col-form-label">
+  <div className="text-wrap">
-            {" "}
+    {report?.workItem?.workArea?.floor?.building?.name} <i className="bx bx-chevron-right"></i>
-            {report?.workItem?.workArea?.floor?.building?.name}{" "}
+    {report?.workItem?.workArea?.floor?.floorName} <i className="bx bx-chevron-right"></i>
-            <i className="bx bx-chevron-right"></i>{" "}
-            {report?.workItem?.workArea?.floor?.floorName}{" "}
-            <i className="bx bx-chevron-right"> </i>
     {report?.workItem?.workArea?.areaName}
-          </label>
   </div>
+</div>
+
       </div>
       <div className="mb-1 row text-start">
         <label htmlFor="html5-email-input" className="col-md-4 col-form-label">

src/components/Activities/ReportTaskComments.jsx

@@ -110,6 +110,8 @@ const ReportTaskComments = ({
       approvedTask: defaultCompletedTask || 0,
     });
   }, [defaultCompletedTask]);
+
+  const completed_Task = watch("approvedTask")
   return (
     <div className="p-2 p-sm-1">
       <div className="modal-body p-sm-4 p-0">
@@ -339,13 +341,13 @@ const ReportTaskComments = ({
           <div
             className={` ${
               actionAllow && !commentsData.approvedBy
-                ? " d-flex justify-content-between"
+                ? " d-flex justify-content-between align-items-center"
                 : "text-end"
             } mt-2`}
           >
             <div
               className={`form-check ${
-                !(actionAllow && !commentsData.approvedBy) && "d-none"
+                !(actionAllow && !commentsData.approvedBy && defaultCompletedTask > completed_Task ) && "d-none"
               } `}
             >
               <input

src/components/Activities/SubTask.jsx

@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { string, z } from "zod";
 import {
   useActivitiesMaster,
+  useServices,
   useWorkCategoriesMaster,
 } from "../../hooks/masterHook/useMaster";
 import showToast from "../../services/toastService";
@@ -25,6 +26,8 @@ const SubTask = ({ activity, onClose }) => {
   const { activities, loading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
   const { Task, loading: TaskLoading } = useTaskById(activity?.id);
+  const {data,isError,isLoading,error}  = useServices();
+
   const {
     register,
     handleSubmit,
@@ -97,8 +100,8 @@ const SubTask = ({ activity, onClose }) => {
   };
   return (
     <div className="container-xxl my-1">
-      <p className="fw-semibold">Create Sub Task</p>
+      <p className="fw-semibold fs-5">Create Sub Task</p>
-      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
+      <form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
         <div className="col-6">
           <label className="form-label">Building</label>
           <input
@@ -128,26 +131,14 @@ const SubTask = ({ activity, onClose }) => {
             disabled
           />
         </div>
-
           <div className="col-12">
-          <label className="form-label">Work Category</label>
+          <label className="form-label">Service</label>
-          <select
+          <input
-            className="form-select form-select-sm"
+            type="text"
-            {...register("workCategoryId")}
+            className="form-control form-control-sm"
-            onChange={handleCategoryChange}
+            value={activity?.workItem?.activityMaster?.activityGroup?.service?.name || ""}
-          >
+            disabled
-            <option value="">
+          />
-              {categoryLoading ? "Loading..." : "-- Select Category --"}
-            </option>
-            {categoryData.map((category) => (
-              <option key={category.id} value={category.id}>
-                {category.name}
-              </option>
-            ))}
-          </select>
-          {errors.workCategoryId && (
-            <div className="danger-text">{errors.workCategoryId.message}</div>
-          )}
         </div>        
         <div className="col-12">
           <label className="form-label">Select Activity</label>
@@ -172,6 +163,27 @@ const SubTask = ({ activity, onClose }) => {
           )}
         </div>
 
+        <div className="col-12">
+          <label className="form-label">Work Category</label>
+          <select
+            className="form-select form-select-sm"
+            {...register("workCategoryId")}
+            onChange={handleCategoryChange}
+          >
+            <option value="">
+              {categoryLoading ? "Loading..." : "-- Select Category --"}
+            </option>
+            {categoryData.map((category) => (
+              <option key={category.id} value={category.id}>
+                {category.name}
+              </option>
+            ))}
+          </select>
+          {errors.workCategoryId && (
+            <div className="danger-text">{errors.workCategoryId.message}</div>
+          )}
+        </div>
+
         <div className="col-4">
           <label className="form-label">Planned Work</label>
           <input
@@ -219,7 +231,15 @@ const SubTask = ({ activity, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 text-center">
+        <div className="d-flex flex-row gap-3 justify-content-end  py-2">
+           <button
+            type="button"
+            className="btn btn-sm btn-label-secondary"
+            onClick={() => onClose()}
+            disabled={isPending}
+          >
+            Cancel
+          </button>
           <button
             type="submit"
             className="btn btn-sm btn-primary me-2"
@@ -227,14 +247,7 @@ const SubTask = ({ activity, onClose }) => {
           >
             {isPending ? "Please wait..." : "Submit"}
           </button>
-          <button
+         
-            type="button"
-            className="btn btn-sm btn-secondary"
-            onClick={() => onClose()}
-            disabled={isPending}
-          >
-            Cancel
-          </button>
         </div>
       </form>
     </div>

src/components/Context/ChangePasswordContext.jsx

@@ -1,42 +0,0 @@
-import React, { createContext, useState, useContext } from "react";
-import ChangePasswordPage from "../../pages/authentication/ChangePassword";
-
-const ChangePasswordContext = createContext();
-
-export const ChangePasswordProvider = ({ children }) => {
-  const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
-
-  const openChangePassword = () => setIsChangePasswordOpen(true);
-  const closeChangePassword = () => setIsChangePasswordOpen(false);
-
-  return (
-    <ChangePasswordContext.Provider
-      value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
-    >
-      {children}
-
-      {isChangePasswordOpen && (
-        <>
-          {/* This is the main Bootstrap modal container */}
-          {/* It provides the fixed positioning and high z-index */}
-          <div
-            className="modal fade show" // 'fade' for animation, 'show' to make it visible
-            style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
-            tabIndex="-1" // Makes the modal focusable
-            role="dialog" // ARIA role for accessibility
-            aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
-            aria-modal="true" // Indicate it's a modal dialog
-          >
-            {/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
-            <ChangePasswordPage onClose={closeChangePassword} />
-          </div>
-
-          {/* The modal backdrop */}
-          <div className="modal-backdrop fade show"></div>
-        </>
-      )}
-    </ChangePasswordContext.Provider>
-  );
-};
-
-export const useChangePassword = () => useContext(ChangePasswordContext);

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useCurrentService, useProjectInfra } from "../../hooks/useProjects";
+import { useCurrentService } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -10,15 +10,14 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
+import { useTaskFilter } from "../../hooks/useTasks";
 
 const TaskReportFilterPanel = ({ handleFilter }) => {
   const [resetKey, setResetKey] = useState(0);
-  const selectedProjec = useSelectedProject();
+  const selectedProject = useSelectedProject();
   const selectedService = useCurrentService();
-  const { projectInfra, isLoading, error, isFetched } = useProjectInfra(
+  const { data } = useTaskFilter(selectedProject);
-    selectedProjec,
+
-    selectedService
-  );
   const methods = useForm({
     resolver: zodResolver(TaskReportFilterSchema),
     defaultValues: TaskReportDefaultValue,
@@ -32,21 +31,19 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
   } = methods;
 
   const onSubmit = (formData) => {
-  console.log(formData)
     const filterPayload = {
-      startDate:localToUtc(formData.startDate),
+      ...formData,
-      endDate:localToUtc(formData.endDate)
+      dateFrom: localToUtc(formData.dateFrom),
-      
+      dateTo: localToUtc(formData.dateTo),
-     }
+    };
     handleFilter(filterPayload);
   };
 
-  const onClear =()=>{
+  const onClear = () => {
     setResetKey((prev) => prev + 1);
-    handleFilter(TaskReportDefaultValue)
+    handleFilter(TaskReportDefaultValue);
-    reset(TaskReportDefaultValue)
+    reset(TaskReportDefaultValue);
-  }
+  };
-  
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
@@ -54,34 +51,48 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
           <label className="fw-semibold">Choose Date Range:</label>
           <DateRangePicker1
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="startDate"
+            startField="dateFrom"
-            endField="endDate"
+            endField="dateTo"
             resetSignal={resetKey}
-            defaultRange={true}
+            defaultRange={false}
+            maxDate={new Date()}
           />
         </div>
 
-        {/* <div className="row g-2">
+        <div className="row mb-2">
           <SelectMultiple
             name="buildingIds"
-              label="Projects"
+            label="Building"
-              options={projectInfra}
+            options={data?.buildings}
-              labelKey="buildingName"
+            labelKey="name"
             valueKey="id"
           />
         </div>
-          <div className="row g-2">
+        <div className="row mb-2">
           <SelectMultiple
             name="floorIds"
             label="Floor"
-              options={projectInfra}
+            options={data?.floors}
-              labelKey="floorName"
+            labelKey="name"
             valueKey="id"
           />
-          </div> */}
+        </div>
+        <div className="row mb-2">
+          <SelectMultiple
+            name="activityIds"
+            label="Activities"
+            options={data?.activities}
+            labelKey="name"
+            valueKey="id"
+          />
+        </div>
 
         <div className="d-flex justify-content-end py-3 gap-2">
-          <button type="button" className="btn btn-label-secondary btn-sm" onClick={onClear}>
+          <button
+            type="button"
+            className="btn btn-label-secondary btn-sm"
+            onClick={onClear}
+          >
             Clear
           </button>
           <button type="submit" className="btn btn-primary btn-sm">

src/components/DailyProgressRport/TaskReportList.jsx

@@ -192,7 +192,7 @@ const TaskReportList = () => {
   if (isLoading) return <TaskReportListSkeleton />;
   if (isError) return <div>Loading....</div>;
   return (
-    <div className="mt-2">
+    <div className="mt-2 table-responsive text-nowrap">
       <table className="table">
         <thead>
           <tr>

src/components/DailyProgressRport/TaskRportScheam.jsx

@@ -1,15 +1,17 @@
 import { z } from "zod";
 
 export const TaskReportFilterSchema = z.object({
-  // buildingIds: z.array(z.string()).optional(),
+  buildingIds: z.array(z.string()).optional(),
-  // floorIds: z.array(z.string()).optional(),
+  floorIds: z.array(z.string()).optional(),
-  startDate: z.string().optional(),
+  activityIds: z.array(z.string()).optional(),
-  endDate: z.string().optional(),
+  dateFrom: z.string().optional(),
+  dateTo: z.string().optional(),
 });
 
 export const TaskReportDefaultValue = {
-    // buildingIds:[],
+    buildingIds:[],
-    // floorIds:[],
+    floorIds:[],
-    startDate:null,
+    activityIds:[],
-    endDate:null
+    dateFrom:null,
+    dateTo:null
 }

src/components/Directory/ListViewContact.jsx

@@ -179,7 +179,7 @@ const ListViewContact = ({ data, Pagination }) => {
                   <tr style={{ height: "200px" }}>
                     <td
                       colSpan={contactList.length + 1}
-                      className="text-center align-middle"
+                      className="text-center border-0 align-middle"
                     >
                       No contacts found
                     </td>

src/components/Directory/ManageContact.jsx

@@ -23,7 +23,7 @@ import Label from "../common/Label";
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
   const { buckets, loading: bucketsLoaging } = useBuckets();
-  const { projects, loading: projectLoading } = useProjects();
+  const { data:projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { organizationList } = useOrganization();

src/components/Employee/EmpAttendance.jsx

@@ -14,28 +14,24 @@ import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { localToUtc } from "../../utils/appUtils";
+import { useParams } from "react-router-dom";
 
-const EmpAttendance = ({ employee }) => {
+const EmpAttendance = () => {
+  const { employeeId } = useParams();
   const [attendances, setAttendnaces] = useState([]);
   const [selectedDate, setSelectedDate] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
 
   const methods = useForm({
-    resolver: zodResolver(
-      z.object({
-        startDate: z.string(),
-        endDate: z.string(),
-      })
-    ),
     defaultValues: {
-      startDate: "",
+      startDate: moment().subtract(6, "days").format("DD-MM-YYYY"),
-      endDate: "",
+      endDate: moment().format("DD-MM-YYYY"),
     },
   });
-  const { control, register, handleSubmit, reset, watch } = methods;
+  const { watch } = methods;
-  const startDate = watch("startDate");
+
-  const endDate = watch("endDate");
+  const [startDate, endDate] = watch(["startDate", "endDate"]);
   const {
     data = [],
     isLoading: loading,
@@ -44,76 +40,21 @@ const EmpAttendance = ({ employee }) => {
     error,
     refetch,
   } = useAttendanceByEmployee(
-    employee,
+    employeeId,
-    localToUtc(startDate),
+    startDate ? localToUtc(startDate) : null,
-    localToUtc(endDate)
+    endDate ? localToUtc(endDate) : null
   );
+
   const dispatch = useDispatch();
-
+  const sorted = [...data].sort(
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  const isSameDay = (dateStr) => {
-    if (!dateStr) return false;
-    const d = new Date(dateStr);
-    d.setHours(0, 0, 0, 0);
-    return d.getTime() === today.getTime();
-  };
-
-  const isBeforeToday = (dateStr) => {
-    if (!dateStr) return false;
-    const d = new Date(dateStr);
-    d.setHours(0, 0, 0, 0);
-    return d.getTime() < today.getTime();
-  };
-
-  const sortByName = (a, b) => {
-    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
-    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
-  };
-
-  const group1 = data
-    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-    .sort(sortByName);
-  const group2 = data
-    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-    .sort(sortByName);
-  const group3 = data
-    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-    .sort(sortByName);
-  const group4 = data
-    .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
-    .sort(sortByName);
-  const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
-
-
-  const uniqueMap = new Map();
-
-  [...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
-    const date = moment(rec.checkInTime || rec.checkOutTime).format(
-      "YYYY-MM-DD"
-    );
-    const key = `${rec.employeeId}-${date}`;
-    const existing = uniqueMap.get(key);
-    if (
-      !existing ||
-      new Date(rec.checkInTime || rec.checkOutTime) >
-        new Date(existing.checkInTime || existing.checkOutTime)
-    ) {
-      uniqueMap.set(key, rec);
-    }
-  });
-
-  const sortedFinalList = [...uniqueMap.values()].sort(
     (a, b) =>
-      new Date(b.checkInTime || b.checkOutTime) -
+      new Date(b?.checkInTime).getTime() - new Date(a?.checkInTime).getTime()
-      new Date(a.checkInTime || a.checkOutTime)
   );
 
-  const currentDate = new Date().toLocaleDateString("en-CA");
+  console.log(sorted);
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    sortedFinalList,
+    sorted,
     ITEMS_PER_PAGE
   );
 
@@ -123,7 +64,6 @@ const EmpAttendance = ({ employee }) => {
   };
   const closeModal = () => setIsModalOpen(false);
 
-  const onSubmit = (formData) => {};
   return (
     <>
       {isModalOpen && (
@@ -136,20 +76,10 @@ const EmpAttendance = ({ employee }) => {
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
-          <div className="col-3 my-0 ">
+          <div className="col-4 col-md-3 my-0 ">
             <>
               <FormProvider {...methods}>
-                <form
+                <DateRangePicker1 />
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="p-2 text-start"
-                >
-                  <DateRangePicker1
-                    placeholder="DD-MM-YYYY To DD-MM-YYYY"
-                    startField="startDate"
-                    endField="endDate"
-                    defaultRange={true}
-                  />
-                </form>
               </FormProvider>
             </>
           </div>
@@ -234,7 +164,7 @@ const EmpAttendance = ({ employee }) => {
             </table>
           )}
         </div>
-        {!loading && sortedFinalList.length > 20 && (
+        {!loading && data.length > 20 && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/components/Employee/EmpBanner.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
 
-import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+
 import GlobalModel from "../common/GlobalModel";
 import ManageEmployee from "./ManageEmployee";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useModal } from "../../hooks/useAuth";
 
 const EmpBanner = ({ profile, loggedInUser }) => {
-  const { openChangePassword } = useChangePassword();
+  const {onOpen}  = useModal("ChangePassword")
   const [showModal, setShowModal] = useState(false);
 
   return (
@@ -86,7 +87,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
                 </li>
               </ul>
               <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
-                {profile?.isActive && (   // ✅ show only if active
+                {profile?.isActive && (   
                   <li className="list-inline-item">
                     <button
                       className="btn btn-sm btn-primary btn-block"
@@ -101,7 +102,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
                   {profile?.id === loggedInUser?.employeeInfo?.id && (
                     <button
                       className="btn btn-sm btn-outline-primary btn-block"
-                      onClick={() => openChangePassword()}
+                      onClick={onOpen}
                     >
                       Change Password
                     </button>

src/components/Employee/ManageEmployee.jsx

@@ -18,7 +18,7 @@ import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
 import { useOrganizationsList } from "../../hooks/useOrganization";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
+const ManageEmployee = ({ employeeId, onClosed }) => {
   const dispatch = useDispatch();
   const { mutate: updateEmployee, isPending } = useUpdateEmployee();
   const {
@@ -72,7 +72,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
       data.email = null;
     }
 
-    const payload = { ...data, IsAllEmployee };
+    const payload = { ...data };
 
     if (employeeId) {
       payload.id = employeeId;
@@ -427,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
                 aria-label=""
               >
                 <option disabled value="">
-                  Select Role
+                  Select Organization
                 </option>
                 {organzationList?.data
                   .sort((a, b) => a?.name?.localeCompare(b?.name))

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -117,6 +117,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
+              maxDate={new Date()}
             />
           </div>
 

src/components/Expenses/ManageExpense.jsx

@@ -28,6 +28,7 @@ import moment from "moment";
 import DatePicker from "../common/DatePicker";
 import ErrorPage from "../../pages/ErrorPage";
 import Label from "../common/Label";
+import EmployeeSearchInput from "../common/EmployeeSearchInput";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -142,8 +143,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   };
 
   useEffect(() => {
-    if (expenseToEdit && data ) {
+    if (expenseToEdit && data) {
-   
       reset({
         projectId: data.project.id || "",
         expensesTypeId: data.expensesType.id || "",
@@ -156,7 +156,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         supplerName: data.supplerName || "",
         amount: data.amount || "",
         noOfPersons: data.noOfPersons || "",
-        gstNumber:data.gstNumber || "",
+        gstNumber: data.gstNumber || "",
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
               fileName: doc.fileName,
@@ -183,8 +183,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const onSubmit = (fromdata) => {
     let payload = {
       ...fromdata,
-      transactionDate: localToUtc(fromdata.transactionDate)
+      transactionDate: localToUtc(fromdata.transactionDate),
-
     };
     if (expenseToEdit) {
       const editPayload = { ...payload, id: data.id };
@@ -206,7 +205,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
     return <ExpenseSkeleton />;
 
-
   return (
     <div className="container p-3">
       <h5 className="m-0">
@@ -215,7 +213,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>Select Project</Label>
+            <Label className="form-label" required>
+              Select Project
+            </Label>
             <select
               className="form-select form-select-sm"
               {...register("projectId")}
@@ -296,11 +296,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
 
-          <div className="col-md-6">
+          <div className="col-12 col-md-6 text-start">
             <Label htmlFor="paidById" className="form-label" required>
               Paid By
             </Label>
-            <select
+            {/* <select
               className="form-select form-select-sm"
               id="paymentModeId"
               {...register("paidById")}
@@ -321,7 +321,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             </select>
             {errors.paidById && (
               <small className="danger-text">{errors.paidById.message}</small>
-            )}
+            )} */}
+
+            <EmployeeSearchInput
+              control={control}
+              name="paidById"
+              projectId={null}
+              forAll={expenseToEdit ? true : false}
+            />
           </div>
         </div>
 
@@ -330,7 +337,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="transactionDate" className="form-label" required>
               Transaction Date
             </Label>
-            <DatePicker name="transactionDate" control={control} maxDate={new Date()}/>
+            <DatePicker
+              name="transactionDate"
+              control={control}
+              maxDate={new Date()}
+            />
 
             {errors.transactionDate && (
               <small className="danger-text">
@@ -421,9 +432,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               {...register("gstNumber")}
             />
             {errors.gstNumber && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.gstNumber.message}</small>
-                {errors.gstNumber.message}
-              </small>
             )}
           </div>
 
@@ -448,7 +457,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
 
         <div className="row my-2 text-start">
           <div className="col-md-12">
-            <Label htmlFor="description" className="form-label" required>Description</Label>
+            <Label htmlFor="description" className="form-label" required>
+              Description
+            </Label>
             <textarea
               id="description"
               className="form-control form-control-sm"
@@ -465,7 +476,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
 
         <div className="row my-2 text-start">
           <div className="col-md-12">
-            <Label className="form-label" required>Upload Bill </Label>
+            <Label className="form-label" required>
+              Upload Bill{" "}
+            </Label>
 
             <div
               className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
@@ -568,7 +581,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               ? "Update"
               : "Submit"}
           </button>
-         
         </div>
       </form>
     </div>

src/components/Expenses/PreviewDocument.jsx

@@ -1,27 +1,53 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
+  const [rotation, setRotation] = useState(0);
 
   return (
-    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
+   <>
-      {loading && (
+    <div className="d-flex justify-content-start">
-        <div className="text-secondary text-center mb-2">
+        <i
-          Loading...
+          className="bx bx-rotate-right cursor-pointer"
+          onClick={() => setRotation((prev) => prev + 90)}
+        ></i>
       </div>
+    <div
+      className="d-flex flex-column justify-content-center align-items-center"
+      style={{ minHeight: "60%" }}
+    >
+      
+      {loading && (
+        <div className="text-secondary text-center mb-2">Loading...</div>
       )}
+
+      <div className="mb-3 d-flex justify-content-center align-items-center">
         <img
           src={imageUrl}
           alt="Full View"
           className="img-fluid"
           style={{
-          maxHeight: "100vh",
+            maxHeight: "80vh",
             objectFit: "contain",
             display: loading ? "none" : "block",
+            transform: `rotate(${rotation}deg)`,
+            transition: "transform 0.3s ease",
           }}
           onLoad={() => setLoading(false)}
         />
       </div>
+
+      <div className="d-flex justify-content-center gap-2">
+        <button
+          className="btn btn-outline-secondary"
+          onClick={() => setRotation(0)}
+          title="Reset Rotation"
+        >
+          <i className="bx bx-reset"></i> Reset
+        </button>
+      </div>
+    </div>
+   </>
   );
 };
 

src/components/Expenses/ViewExpense.jsx

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
+import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -91,9 +91,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate: moment
+      reimburseDate: localToUtc(formData.reimburseDate),
-        .utc(formData.reimburseDate, "DD-MM-YYYY")
-        .toISOString(),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -398,6 +396,7 @@ const ViewExpense = ({ ExpenseId }) => {
                   name="reimburseDate"
                   control={control}
                   minDate={data?.transactionDate}
+                  maxDate={new Date()}
                 />
                 {errors.reimburseDate && (
                   <small className="danger-text">

src/components/Layout/Header.jsx

@@ -12,14 +12,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
 import { useProfile } from "../../hooks/useProfile";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
-import { useChangePassword } from "../Context/ChangePasswordContext";
 import { useProjects } from "../../hooks/useProjects";
 import { useCallback, useEffect, useState } from "react";
 import { useProjectName } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT } from "../../utils/constants";
-import { useAuthModal, useLogout } from "../../hooks/useAuth";
+import { useAuthModal, useLogout, useModal } from "../../hooks/useAuth";
 
 const Header = () => {
   const { profile } = useProfile();
@@ -28,12 +27,15 @@ const Header = () => {
   const { data, loading } = useMaster();
   const navigate = useNavigate();
   const {onOpen} = useAuthModal()
+  const { onOpen:changePass } = useModal("ChangePassword");
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
   const { mutate : logout,isPending:logouting} = useLogout()
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
   const isProjectPath = /^\/projects$/.test(location.pathname);
+    const isCollectionPath =
+    /^\/collection$/.test(location.pathname) || /^\/$/.test(location.pathname);
 
   const showProjectDropdown = (pathname) => {
     const isDirectoryPath = /^\/directory$/.test(pathname);
@@ -97,7 +99,7 @@ const Header = () => {
     }
   }
 
-  const { openChangePassword } = useChangePassword();
+
 
   useEffect(() => {
     if (
@@ -189,6 +191,7 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
+        <div className="d-flex align-items-center">
           {showProjectDropdown(location.pathname) && (
           <div className="align-items-center">
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
@@ -215,7 +218,7 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                    {isDashboardPath && (
+                    {(isDashboardPath|| isCollectionPath) &&(
                       <li>
                         <button
                           className="dropdown-item"
@@ -247,6 +250,7 @@ const Header = () => {
             </div>
           </div>
         )}
+        </div>
 
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
@@ -422,7 +426,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              <li onClick={openChangePassword}>
+              <li onClick={changePass}>
                 {" "}
                 <a
                   aria-label="go to profile"

src/components/Organization/OrgPickerFromSPId.jsx

@@ -10,13 +10,15 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { spridSchema } from "./OrganizationSchema";
 import { OrgCardSkeleton } from "./OrganizationSkeleton";
+import { useQueryClient } from "@tanstack/react-query";
+
 
 // Zod schema: only allow exactly 4 digits
 
 const OrgPickerFromSPId = ({ title, placeholder }) => {
-  const { onClose, startStep, flowType, onOpen, prevStep } =
+  const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
     useOrganizationModal();
-
+ const clientQuery = useQueryClient()
   const {
     register,
     handleSubmit,
@@ -36,7 +38,10 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
     setSPRID(formdata.spridSearchText);
   };
   
-  const handleOrg = (orgId) => {};
+  const handleCrateOrg = () => {
+     clientQuery.removeQueries({queryKey:["organization"]})
+    onOpen({ startStep: 4,orgData:null })
+  };
   const SP = watch("spridSearchText");
   return (
     <div className="d-block">
@@ -126,7 +131,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <button
           type="button"
           className="btn btn-sm btn-primary mt-3"
-          onClick={() => onOpen({ startStep: 4 })}
+          onClick={handleCrateOrg}
         >
           <i className="bx bx-plus-circle me-2"></i>
           Create New Organization

src/components/Organization/OrganizationSchema.js

@@ -14,7 +14,7 @@ export const organizationSchema = z.object({
   contactPerson: z.string().min(1, { message: "Person name required" }),
   address: z.string().min(1, { message: "Address is required!" }),
   email: z
-    .string()
+    .string().trim()
     .min(1, { message: "Email is required" })
     .email("Invalid email address"),
   serviceIds: z

src/components/Organization/OrganizationsList.jsx

@@ -23,7 +23,7 @@ const OrganizationsList = ({searchText}) => {
       label: "Organization Name",
       getValue: (org) => (
         <div className="d-flex gap-2 py-1 ">
-          <i class="bx bx-buildings"></i>
+          <i className="bx bx-buildings"></i>
           <span
             className="text-truncate d-inline-block "
             style={{ maxWidth: "150px" }}
@@ -142,7 +142,7 @@ const OrganizationsList = ({searchText}) => {
                     colSpan={organizationsColumns.length + 1}
                     className="text-center"
                   >
-                    <p className="fw-semibold">Not Found</p>
+                    <p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
                   </td>
                 </tr>
               )}

src/components/Organization/ViewOrganization.jsx

@@ -4,7 +4,7 @@ import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
 
 const VieworgDataanization = ({ orgId }) => {
   const { data, isLoading, isError, error } = useOrganization(orgId);
-  if (isLoading) return <OrgDetailsSkeleton/>;
+  if (isLoading) return <OrgDetailsSkeleton />;
   if (isError) return <div>{error.message}</div>;
   return (
     <div className="row text-black  text-black text-start ">
@@ -17,14 +17,24 @@ const VieworgDataanization = ({ orgId }) => {
               alt="logo"
               width={40}
               height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{data?.data?.name}</p>
+            />{" "}
+            <p className="fw-semibold fs-6 m-0">{data?.name}</p>
           </div>
           <div className="text-end">
-           <span className={`badge bg-label-${data?.data.isActive ? "primary":"secondary"} `}>{data?.data.isActive ? "Active":"In-Active"} </span>
+            <span
+              className={`badge bg-label-${
+                data?.isActive ? "primary" : "secondary"
+              } `}
+            >
+              {data?.isActive ? "Active" : "In-Active"}{" "}
+            </span>
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      <div className="d-flex text-secondary mb-2">
+        {" "}
+        <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
+      </div>
       {/* Contact Info */}
       <div className="col-md-6 mb-3">
         <div className="d-flex">
@@ -34,7 +44,7 @@ const VieworgDataanization = ({ orgId }) => {
           >
             <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
-          <div className="text-muted">{data?.data?.contactPerson}</div>
+          <div className="text-muted">{data?.contactPerson}</div>
         </div>
       </div>
       <div className="col-md-6 mb-3">
@@ -43,9 +53,9 @@ const VieworgDataanization = ({ orgId }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+            <i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
           </label>
-          <div className="text-muted">{data?.data?.contactNumber}</div>
+          <div className="text-muted">{data?.contactNumber}</div>
         </div>
       </div>
       <div className="col-md-12 mb-3">
@@ -54,9 +64,9 @@ const VieworgDataanization = ({ orgId }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+            <i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
           </label>
-          <div className="text-muted">{data?.data?.email}</div>
+          <div className="text-muted">{data?.email}</div>
         </div>
       </div>
       <div className="col-6 mb-3">
@@ -68,7 +78,7 @@ const VieworgDataanization = ({ orgId }) => {
             <i className="bx bx-sm me-1 bx-barcode"></i>
             Service Provider Id (SPRID) :
           </label>
-          <div className="text-muted">{data?.data?.sprid}</div>
+          <div className="text-muted">{data?.sprid}</div>
         </div>
       </div>
 
@@ -81,7 +91,7 @@ const VieworgDataanization = ({ orgId }) => {
             <i className="bx bx-sm me-1 bx-group"></i>
             Employees :
           </label>
-          <div className="text-muted">{data?.data?.activeEmployeeCount}</div>
+          <div className="text-muted">{data?.activeEmployeeCount}</div>
         </div>
       </div>
       <div className="col-12 mb-3">
@@ -90,14 +100,17 @@ const VieworgDataanization = ({ orgId }) => {
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            <i className="bx bx-sm me-1 bx-map"></i> Address :
           </label>
-          <div className="text-muted text-start">{data?.data?.address}</div>
+          <div className="text-muted text-start">{data?.address}</div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services</div>
+      <div className="d-flex text-secondary mb-2">
+        {" "}
+        <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
       </div>
-  )
+    </div>
+  );
 };
 
 export default VieworgDataanization;

src/components/Project/AboutProject.jsx

@@ -42,7 +42,7 @@ const AboutProject = () => {
       {IsOpenModal && (
         <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
           <ManageProjectInfo
-            project={projects_Details}
+            project={projects_Details?.id}
             handleSubmitForm={handleFormSubmit}
             onClose={() => setIsOpenModal(false)}
             isPending={isPending}

src/components/Project/AssignTask.jsx

@@ -11,7 +11,8 @@ import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
 import {
   useEmployeeForTaskAssign,
-  useProjectAssignedOrganizations,
+  useProjectAssignedOrganizationsName,
+  useProjectAssignedServices,
   useProjectDetails,
 } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
@@ -95,9 +96,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   }, []);
 
   const selectedProject = useSelectedProject();
-  const { data: serviceList, isLoading: isServiceLoading } = useServices();
+  const { data: serviceList, isLoading: isServiceLoading } = useProjectAssignedServices(selectedProject);
   const { data: organizationList, isLoading: isOrgLoading } =
-    useProjectAssignedOrganizations(selectedProject);
+    useProjectAssignedOrganizationsName(selectedProject);
   const { data: employees, isLoading: isEmployeeLoading } =
     useEmployeeForTaskAssign(
       selectedProject,
@@ -274,7 +275,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           ) : (
                             <>
                               <option value="">--Select Service--</option>
-                              {serviceList?.data?.map((service,index) => (
+                              {serviceList?.map((service,index) => (
                                 <option key={`${service.id}-${index}`}  value={service.id}>
                                   {service.name}
                                 </option>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -8,7 +8,7 @@ import {
   useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask, useProjectAssignedOrganizations, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
@@ -47,7 +47,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const projectId = useSelectedProject();
 
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
-  const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizations(projectId);
+  const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizationsName(projectId);
 
 
 
@@ -112,7 +112,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      // onClose?.();
+      setValue("activityID",""),
+      setValue("plannedWork",0),
+      setValue("completedWork",0)
+      setValue("comment","")
     },
   });
   useEffect(() => {
@@ -276,7 +279,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
-      {selectedWorkArea && (
+      {watchActivityId && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>
           <select

src/components/Project/Infrastructure/WorkArea.jsx

@@ -108,7 +108,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <ProgressBar
                         completedWork={formatNumber(workArea?.completedWork)}
                         plannedWork={formatNumber(workArea?.plannedWork)}
-                        className="m-0 my-2 me-6 text-info"
+                        className="m-0 my-2 " height="6px"rounded showLabel={true}
                       />
                     </div>
                   </div>
@@ -130,6 +130,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <thead>
                         <tr>
                           <th className="infra-activity-table-header-first">Activity</th>
+                          <th className="infra-activity-table-header-second">Service</th>
                           <th className="infra-activity-table-header d-sm-table-cell d-md-none">
                             Status
                           </th>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -157,7 +157,17 @@ const WorkItem = ({
               : "NA"}
           </span>
         </td>
-
+           <td className="text-center d-sm-table-cell ">
+             {hasWorkItem
+            ? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name ??
+              workItem?.activityMaster?.activityGroupMaster?.service?.name ??
+              "NA"
+            : "NA"}
+          {" "}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name
+            : "NA"}
+        </td>
         {/* Status - visible only on small screens */}
         <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem

src/components/Project/ManageProjectInfo.jsx

@@ -43,7 +43,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
     true
   );
   const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
-  const {mutate:CeateProject,isPending:isCreating}= useCreateProject(()=>onClose?.())
+  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
 
   const {
     register,
@@ -70,11 +70,11 @@ const ManageProjectInfo = ({ project, onClose }) => {
         projectStatusId:
           String(projects_Details?.projectStatus?.id) ||
           DEFAULT_EMPTY_STATUS_IDF,
-        promoterId: projects_Details.promoter.id || "",
+        promoterId: projects_Details?.promoter?.id || "",
-        pmcId: projects_Details.pmc.id || "",
+        pmcId: projects_Details?.pmc?.id || "",
       });
     setAddressLength(projects_Details?.projectAddress?.length || 0);
-  }, [project, projects_Details, reset]);
+  }, [project, projects_Details, reset,data]);
 
   const onSubmitForm = (formData) => {
     if (project) {
@@ -84,7 +84,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
         endDate: localToUtc(formData.endDate),
         id: project,
       };
-      console.log(payload);
       UpdateProject({ projectId: project, payload: payload });
     }else{
        let payload = {
@@ -328,7 +327,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             <i className="bx bx-sm bx-info-circle"></i> Not found PMC and
             Pomoter, find through SPRID or create new
           </span>
-          <small className="cursor-pointer" onClick={handleOrganizaioFinder}>
+          <small className="cursor-pointer" onClick={handleOrganizaioFinder} >
             <i className="bx  bx-plus-circle text-primary"></i>
           </small>
         </div>
@@ -368,14 +367,14 @@ const ManageProjectInfo = ({ project, onClose }) => {
             className="btn btn-label-secondary btn-sm me-2"
             onClick={handleCancel}
             aria-label="Close"
-            disabled={isPending || isCreating}
+            disabled={isPending || isCreating || loading}
           >
             Cancel
           </button>
           <button
             type="submit"
             className="btn btn-primary btn-sm"
-            disabled={isPending || isCreating}
+            disabled={isPending || isCreating || loading}
           >
             {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
           </button>

src/components/Project/ProjectCard.jsx

@@ -41,7 +41,6 @@ const ProjectCard = ({ project }) => {
     dispatch(setProjectId(project.id));
     navigate(`/activities/records?project=${project.id}`);
   };
-
   return (
     <>
       <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
@@ -63,7 +62,7 @@ const ProjectCard = ({ project }) => {
                     {project?.shortName ? project?.shortName : project?.name}
                   </h5>
                   <div className="client-info text-body">
-                    <span>{project.shortName ? project.name : ""}</span>
+                    <span>{project?.shortName ? project?.name : ""}</span>
                   </div>
                 </div>
               </div>
@@ -125,22 +124,22 @@ const ProjectCard = ({ project }) => {
                   <span className="text-heading fw-medium">
                     Contact Person:{" "}
                   </span>
-                  {project.contactPerson ? project.contactPerson : "NA"}
+                  {project?.contactPerson ? project.contactPerson : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Start Date: </span>
                   {project.startDate
-                    ? moment(project.startDate).format("DD-MMM-YYYY")
+                    ? moment(project?.startDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Deadline: </span>
 
-                  {project.endDate
+                  {project?.endDate
-                    ? moment(project.endDate).format("DD-MMM-YYYY")
+                    ? moment(project?.endDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
-                <p className="mb-0">{project.projectAddress}</p>
+                <p className="mb-0">{project?.projectAddress}</p>
               </div>
             </div>
           </div>
@@ -150,37 +149,37 @@ const ProjectCard = ({ project }) => {
                 <span
                   className={
                     `badge rounded-pill ` +
-                    getProjectStatusColor(project.projectStatusId)
+                    getProjectStatusColor(project?.projectStatusId)
                   }
                 >
-                  {getProjectStatusName(project.projectStatusId)}
+                  {getProjectStatusName(project?.projectStatusId)}
                 </span>
               </p>{" "}
-              {getDateDifferenceInDays(project.endDate, Date()) >= 0 && (
+              {getDateDifferenceInDays(project?.endDate,new Date() ) >= 0 && (
                 <span className="badge bg-label-success ms-auto">
-                  {project.endDate &&
+                  {project?.endDate &&
-                    getDateDifferenceInDays(project.endDate, Date())}{" "}
+                    getDateDifferenceInDays(project?.endDate, new Date())}{" "}
                   Days left
                 </span>
               )}
-              {getDateDifferenceInDays(project.endDate, Date()) < 0 && (
+              {getDateDifferenceInDays(project?.endDate, new Date()) < 0 && (
                 <span className="badge bg-label-danger ms-auto">
-                  {project.endDate &&
+                  {project?.endDate &&
-                    getDateDifferenceInDays(project.endDate, Date())}{" "}
+                    getDateDifferenceInDays(project?.endDate, new  Date())}{" "}
                   Days overdue
                 </span>
               )}
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-body">
-                Task: {formatNumber(project.completedWork)} /{" "}
+                Task: {formatNumber(project?.completedWork)} /{" "}
-                {formatNumber(project.plannedWork)}
+                {formatNumber(project?.plannedWork)}
               </small>
               <small className="text-body">
                 {Math.floor(
                   getProgressInNumber(
-                    project.plannedWork,
+                    project?.plannedWork,
-                    project.completedWork
+                    project?.completedWork
                   )
                 ) || 0}{" "}
                 % Completed
@@ -192,13 +191,13 @@ const ProjectCard = ({ project }) => {
                 role="progressbar"
                 style={{
                   width: getProgress(
-                    project.plannedWork,
+                    project?.plannedWork,
-                    project.completedWork
+                    project?.completedWork
                   ),
                 }}
-                aria-valuenow={project.completedWork}
+                aria-valuenow={project?.completedWork}
                 aria-valuemin="0"
-                aria-valuemax={project.plannedWork}
+                aria-valuemax={project?.plannedWork}
               ></div>
             </div>
             <div className="d-flex align-items-center justify-content-between">

src/components/Project/ProjectListView.jsx

@@ -132,11 +132,15 @@ const ProjectListView = ({
 
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
+
+      <div
+        className="table-responsive text-nowrap page-min-h"
+      >
       <table className="table  table-hover align-middle m-0">
-        <thead className="border-bottom">
+        <thead className="border-bottom ">
           <tr>
             {projectColumns.map((col) => (
-              <th key={col.key} colSpan={col.colSpan} className={col.className}>
+              <th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
                 {col.label}
               </th>
             ))}
@@ -217,6 +221,7 @@ const ProjectListView = ({
           ))}
         </tbody>
       </table>
+      </div>
 
       {isLoading && (
         <div className="py-4">

src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
+import { formatUTCToLocalTime } from "../../../utils/dateUtils";
 
 const ProjectAssignedOrgs = () => {
   const selectedProject = useSelectedProject();
@@ -47,18 +48,33 @@ const ProjectAssignedOrgs = () => {
       ),
       align: "text-center",
     },
+
      {
-      key: "isActive",
+      key: "organizationType",
-      label: "Status",
+      label: "Organization Type",
       getValue: (org) => (
         <span
-          className={`text-truncate d-inline-block badge bg-label-${org.isActive ? "primary" :"secondary"}`}
+          className="text-truncate d-inline-block"
-          style={{ maxWidth: "80px" }}
+          style={{ maxWidth: "200px" }}
         >
-          {org?.isActive ? "Active" : "Inactive"}
+          {org?.organizationType || "N/A"}
         </span>
       ),
-      align: "text-start",
+      align: "text-center",
+    },
+   {
+      key: "assignedDate",
+      label: "Assigned Date",
+      getValue: (org) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {/* {org?.assignedDate || "N/A"} */}
+          {formatUTCToLocalTime(org?.assignedDate)}
+        </span>
+      ),
+      align: "text-center",
     },
   ];
 

src/components/Project/ProjectOrganization/ProjectServices.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ProjectServices = () => {
+  return (
+    <div className='row'>
+         
+    </div>
+  )
+}
+
+export default ProjectServices

src/components/Project/Team/TeamAssignToProject.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import TeamEmployeeList from "./TeamEmployeeList";
 import { useOrganization } from "../../../hooks/useDirectory";
 import { useOrganizationsList } from "../../../hooks/useOrganization";
-import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
+import {  useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
 
 const TeamAssignToProject = ({ closeModal }) => {
@@ -10,13 +10,13 @@ const TeamAssignToProject = ({ closeModal }) => {
   const [selectedOrg, setSelectedOrg] = useState(null);
   const project = useSelectedProject();
   const { data, isLoading, isError, error } =
-    useProjectAssignedOrganizations(project);
+    useProjectAssignedOrganizationsName(project);
   return (
     <div className="container">
       <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
 
-      <div class="row align-items-center gx-5">
+      <div className="row align-items-center gx-5">
-        <div class="col">
+        <div className="col">
           <div className="d-flex flex-grow-1 align-items-center gap-2">
             {isLoading ? (
               <select className="form-select form-select-sm w-100" disabled>
@@ -49,7 +49,7 @@ const TeamAssignToProject = ({ closeModal }) => {
             )}
           </div>
         </div>
-        <div class="col">
+        <div className="col">
           <div className="d-flex flex-grow-1 align-items-center gap-2">
             <label htmlFor="search" className="form-label mb-0 text-nowrap">
               Search Employee

src/components/Project/Team/TeamEmployeeList.jsx

@@ -2,13 +2,14 @@ import React, { useState, useEffect } from "react";
 import Avatar from "../../common/Avatar";
 import { useDebounce } from "../../../utils/appUtils";
 import { useSelectedProject } from "../../../slices/apiDataManager";
-import { useOrganizationEmployees } from "../../../hooks/useOrganization";
 import {
   useEmployeesByProjectAllocated,
   useManageProjectAllocation,
+  useProjectAssignedServices,
 } from "../../../hooks/useProjects";
 import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
 import showToast from "../../../services/toastService";
+import { useOrganizationEmployees } from "../../../hooks/useOrganization";
 
 const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
   const selectedProject = useSelectedProject();
@@ -29,7 +30,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     useEmployeesByProjectAllocated(selectedProject, null);
 
   const { data: jobRoles } = useMaster();
-  const { data: services } = useServices();
+  const { data: services } = useProjectAssignedServices(selectedProject);
 
   const [employees, setEmployees] = useState([]);
 
@@ -187,7 +188,7 @@ if (employees.length === 0) {
                   }`}
                 >
                   <option value="">Select Service</option>
-                  {services?.data?.map((s) => (
+                  {services?.map((s) => (
                     <option key={s.id} value={s.id}>
                       {s.name}
                     </option>

src/components/Project/Team/Teams.jsx

@@ -93,20 +93,26 @@ const Teams = () => {
   };
 
   const filteredEmployees = useMemo(() => {
-    if (!projectEmployees || !searchTerm?.trim()) return projectEmployees;
+    if (!projectEmployees) return [];
 
+    let filtered = projectEmployees;
+
+    if (activeEmployee) {
+      filtered = projectEmployees.filter((emp) => !emp.isActive);
+    }
+
+    // Apply search filter if present
+    if (searchTerm?.trim()) {
       const lower = searchTerm.toLowerCase();
-
+      filtered = filtered.filter((emp) => {
-    return projectEmployees?.filter((emp) => {
+        const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-      const fullName = `${emp.firstName ?? ""} ${
+        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-        emp.lastName ?? ""
+        return fullName.includes(lower) || jobRole.includes(lower);
-      }`.toLowerCase();
-
-      const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-
-      return fullName?.includes(lower) || joberole?.includes(lower);
       });
-  }, [projectEmployees, searchTerm]);
+    }
+
+    return filtered;
+  }, [projectEmployees, searchTerm, activeEmployee]);
   const handleSearch = (e) => setSearchTerm(e.target.value);
   const employeeHandler = useCallback(
     (msg) => {
@@ -266,7 +272,7 @@ const Teams = () => {
                                   className="text-heading text-truncate cursor-pointer"
                                 >
                                   <span className="fw-normal">
-                                    {emp.firstName}
+                                    {emp.firstName}{"  "}
                                     {emp.lastName}
                                   </span>
                                 </a>
@@ -317,7 +323,7 @@ const Teams = () => {
             {!employeeLodaing && filteredEmployees.length === 0 && (
               <div className="text-center text-muted py-3  d-flex justify-content-center align-items-center py-12">
                 <p>
-                  {!activeEmployee
+                  {activeEmployee
                     ? "No active employees assigned to the project"
                     : "No inactive employees assigned to the project"}
                 </p>

src/components/Tenant/TenanatSkeleton.jsx

@@ -14,7 +14,7 @@ const SkeletonCell = ({ width = "100%", height = 20, style = {} }) => (
 
 export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
   return (
-    <div className="card p-2 mt-3">
+    <div className="p-2 mt-3">
       <div className="card-datatable text-nowrap table-responsive">
         <table className="table border-top dataTable text-nowrap">
           <thead>

src/components/Tenant/TenantsList.jsx

@@ -137,7 +137,7 @@ const TenantsList = ({
   return (
     <>
       <div className="p-2 mt-3">
-        <div className="card-datatable text-nowrap table-responsive">
+        <div className=" text-nowrap table-responsive">
           <table className="table border-top dataTable text-nowrap">
             <thead>
               <tr className="shadow-sm">

src/components/collections/AddPayment.jsx

@@ -0,0 +1,266 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { defaultPayment, paymentSchema } from "./collectionSchema";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import { formatDate } from "date-fns";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+import { useAddPayment, useCollection } from "../../hooks/useCollections";
+import { formatFigure, localToUtc } from "../../utils/appUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Avatar from "../common/Avatar";
+import { PaymentHistorySkeleton } from "./CollectionSkeleton";
+import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
+
+const AddPayment = ({ onClose }) => {
+  const { addPayment } = useCollectionContext();
+  const { data, isLoading, isError, error } = useCollection(
+    addPayment?.invoiceId
+  );
+  const {
+    data: paymentTypes,
+    isLoading: isPaymentTypeLoading,
+    isError: isPaymentTypeError,
+    error: paymentError,
+  } = usePaymentAjustmentHead(true);
+  const methods = useForm({
+    resolver: zodResolver(paymentSchema),
+    defaultValues: defaultPayment,
+  });
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+  const { mutate: AddPayment, isPending } = useAddPayment(() => {
+    handleClose();
+  });
+  const onSubmit = (formData) => {
+    const payload = {
+      ...formData,
+      paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
+      invoiceId: addPayment.invoiceId,
+    };
+    AddPayment(payload);
+  };
+  const handleClose = (formData) => {
+    reset(defaultPayment);
+  };
+
+  return (
+    <div className="container pb-3">
+      <div className="text-black fs-5 mb-2">Add Payment</div>
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
+          <div className="row px-md-1 px-0">
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>TransanctionId</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("transactionId")}
+              />
+              {errors.transactionId && (
+                <small className="danger-text">
+                  {errors.transactionId.message}
+                </small>
+              )}
+            </div>
+
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Transaction Date </Label>
+              <DatePicker
+                name="paymentReceivedDate"
+                control={control}
+                minDate={
+                  data?.clientSubmitedDate
+                    ? new Date(
+                        new Date(data?.clientSubmitedDate).setDate(
+                          new Date(data?.clientSubmitedDate).getDate() + 1
+                        )
+                      )
+                    : null
+                }
+                maxDate={new Date()}
+              />
+              {errors.paymentReceivedDate && (
+                <small className="danger-text">
+                  {errors.paymentReceivedDate.message}
+                </small>
+              )}
+            </div>
+
+            <div className="col-12 col-md-6  mb-2">
+              <Label
+                htmlFor="paymentAdjustmentHeadId"
+                className="form-label"
+                required
+              >
+                Payment Adjustment Head
+              </Label>
+              <select
+                className="form-select form-select-sm "
+                {...register("paymentAdjustmentHeadId")}
+              >
+                {isPaymentTypeLoading ? (
+                  <option>Loading..</option>
+                ) : (
+                  <>
+                    <option value="">Select Payment Head</option>
+                    {paymentTypes?.data
+                      ?.sort((a, b) => a.name.localeCompare(b.name))
+                      ?.map((type) => (
+                        <option key={type.id} value={type.id}>
+                          {type.name}
+                        </option>
+                      ))}
+                  </>
+                )}
+              </select>
+              {errors.paymentAdjustmentHeadId && (
+                <small className="danger-text">
+                  {errors.paymentAdjustmentHeadId.message}
+                </small>
+              )}
+            </div>
+
+            <div className="col-12 col-md-6  mb-2">
+              <Label htmlFor="amount" className="form-label" required>
+                Amount
+              </Label>
+              <input
+                type="number"
+                id="amount"
+                className="form-control form-control-sm"
+                min="1"
+                step="0.01"
+                inputMode="decimal"
+                {...register("amount", { valueAsNumber: true })}
+              />
+              {errors.amount && (
+                <small className="danger-text">{errors.amount.message}</small>
+              )}
+            </div>
+            <div className="col-12   mb-2">
+              <Label htmlFor="comment" className="form-label" required>
+                Comment
+              </Label>
+              <textarea
+                id="comment"
+                className="form-control form-control-sm"
+                {...register("comment")}
+              />
+              {errors.comment && (
+                <small className="danger-text">{errors.comment.message}</small>
+              )}
+            </div>
+
+            <div className="d-flex justify-content-end gap-3">
+              {" "}
+              <button
+                type="reset"
+                className="btn btn-label-secondary btn-sm mt-3"
+                onClick={() => {
+                  handleClose();
+                  onClose();
+                }}
+                disabled={isPending}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm mt-3"
+                disabled={isPending}
+              >
+                {isPending ? "Please Wait..." : "Submit"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+
+      {isLoading ? (
+        <PaymentHistorySkeleton />
+      ) : (
+        data?.receivedInvoicePayments?.length > 0 && (
+          <div className="mt-1 text-start">
+            <div className="mb-2 text-secondry fs-6">
+              <i className="bx bx-history bx-sm me-1"></i>History
+            </div>
+
+            <div className="row text-start mx-2">
+              {data.receivedInvoicePayments
+                .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+                .map((payment, index) => (
+                  <div className="col-12 mb-2" key={payment.id}>
+                    <div className=" p-2 border-start border-warning">
+                      <div className="row">
+                        <div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
+                          <div>
+                            <small className="fw-semibold me-1">
+                              Transaction Date:
+                            </small>{" "}
+                            {formatUTCToLocalTime(payment.paymentReceivedDate)}
+                          </div>
+                          <span className="fs-semibold d-block d-md-none">
+                            {formatFigure(payment.amount, {
+                              type: "currency",
+                              currency: "INR",
+                            })}
+                          </span>
+                        </div>
+
+                        <div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
+                          <small className="fw-semibold me-2">
+                            Updated By:
+                          </small>{" "}
+                          <Avatar
+                            size="xs"
+                            firstName={payment?.createdBy?.firstName}
+                            lastName={payment?.createdBy?.lastName}
+                          />{" "}
+                          {payment?.createdBy?.firstName}{" "}
+                          {payment.createdBy?.lastName}
+                        </div>
+                      </div>
+
+                      <div className="row">
+                        <div className="col-12 col-md-6">
+                          <p className="mb-1">
+                            <small className="fw-semibold">
+                              Transaction ID:
+                            </small>{" "}
+                            {payment.transactionId}
+                          </p>
+                        </div>
+                        <div className="col-12 ">
+                          <div className="d-flex justify-content-between">
+                            <span>{payment?.paymentAdjustmentHead?.name}</span>
+                            <span className="fs-semibold d-none d-md-block">
+                              {formatFigure(payment.amount, {
+                                type: "currency",
+                                currency: "INR",
+                              })}
+                            </span>
+                          </div>
+                          <p className="text-tiny m-0 mt-1">
+                            {payment?.comment}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default AddPayment;

src/components/collections/CollectionList.jsx

@@ -0,0 +1,296 @@
+import React, { useState } from "react";
+import { useCollections } from "../../hooks/useCollections";
+import {
+  ADDPAYMENT_COLLECTION,
+  ADMIN_COLLECTION,
+  CREATE_COLLECTION,
+  EDIT_COLLECTION,
+  ITEMS_PER_PAGE,
+  VIEW_COLLECTION,
+} from "../../utils/constants";
+import { formatFigure, localToUtc, useDebounce } from "../../utils/appUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Pagination from "../common/Pagination";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+import { CollectionTableSkeleton } from "./CollectionSkeleton";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+
+const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
+  const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
+  const canCreate = useHasUserPermission(CREATE_COLLECTION);
+
+  const selectedProject = useSelectedProject();
+  const searchDebounce = useDebounce(searchString, 500);
+
+  const { data, isLoading, isError, error } = useCollections(
+    ITEMS_PER_PAGE,
+    currentPage,
+    localToUtc(fromDate),
+    localToUtc(toDate),
+    isPending,
+    true,
+    selectedProject,
+    searchDebounce
+  );
+  const { setProcessedPayment, setAddPayment, setViewCollection } =
+    useCollectionContext();
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  const collectionColumns = [
+    {
+      key: "invoiceDate",
+      label: "Invoice Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.invoiceDate)}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "invoiceId",
+      label: "Invoice No",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {col?.invoiceNumber ?? "-"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "project",
+      label: "Project",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {col?.project?.name ?? "-"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "submittedDate",
+      label: "Submission Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.createdAt)}
+        </span>
+      ),
+      align: "text-center",
+    },
+    {
+      key: "expectedSubmittedDate",
+      label: "Expected Payment Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.exceptedPaymentDate) ?? "-"}
+        </span>
+      ),
+      align: "text-center",
+    },
+    {
+      key: "amount",
+      label: "Total Amount",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatFigure(col?.basicAmount + col?.taxAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
+        </span>
+      ),
+      align: "text-end",
+    },
+    {
+      key: "balance",
+      label: "Balance",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block py-3"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatFigure(col?.balanceAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
+        </span>
+      ),
+      align: "text-end",
+    },
+  ];
+
+  if (isLoading) return <CollectionTableSkeleton />;
+  if (isError) return <p>{error.message}</p>;
+
+  return (
+    <div className="card ">
+      <div
+        className="card-datatable table-responsive page-min-h"
+        id="horizontal-example"
+      >
+        <div className="dataTables_wrapper no-footer mx-5 pb-2">
+          <table className="table dataTable text-nowrap">
+            <thead>
+              <tr className="table_header_border">
+                {collectionColumns.map((col) => (
+                  <th key={col.key} className={col.align}>
+                    {col.label}
+                  </th>
+                ))}
+                {(isAdmin ||
+                  canAddPayment ||
+                  canViewCollection ||
+                  canEditCollection ||
+                  canCreate) && <th>Action</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.isArray(data?.data) && data.data.length > 0 ? (
+                data.data.map((row, i) => (
+                  <tr key={i}>
+                    {collectionColumns.map((col) => (
+                      <td key={col.key} className={col.align}>
+                        {col.getValue(row)}
+                      </td>
+                    ))}
+                    {(isAdmin ||
+                      canAddPayment ||
+                      canViewCollection ||
+                      canEditCollection ||
+                      canCreate) && (
+                      <td
+                        className="sticky-action-column text-center"
+                        style={{ padding: "12px 8px" }}
+                      >
+                        <div className="dropdown z-2">
+                          <button
+                            type="button"
+                            className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                          >
+                            <i
+                              className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                              data-bs-toggle="tooltip"
+                              data-bs-offset="0,8"
+                              data-bs-placement="top"
+                              data-bs-custom-class="tooltip-dark"
+                              title="More Action"
+                            ></i>
+                          </button>
+
+                          <ul className="dropdown-menu dropdown-menu-end">
+                            {/* View */}
+
+                            <li>
+                              <a
+                                className="dropdown-item cursor-pointer"
+                                onClick={() => setViewCollection(row.id)}
+                              >
+                                <i className="bx bx-show me-2 text-primary"></i>
+                                <span>View</span>
+                              </a>
+                            </li>
+
+                            {/* Only if not completed */}
+                            {!row?.markAsCompleted && (
+                              <>
+                                {/* Add Payment */}
+                                {(isAdmin || canAddPayment) && (
+                                  <li>
+                                    <a
+                                      className="dropdown-item cursor-pointer"
+                                      onClick={() =>
+                                        setAddPayment({
+                                          isOpen: true,
+                                          invoiceId: row.id,
+                                        })
+                                      }
+                                    >
+                                      <i className="bx bx-wallet me-2 text-warning"></i>
+                                      <span>Add Payment</span>
+                                    </a>
+                                  </li>
+                                )}
+
+                                {/* Mark Payment */}
+                                {isAdmin && (
+                                  <li>
+                                    <a
+                                      className="dropdown-item cursor-pointer"
+                                      onClick={() =>
+                                        setProcessedPayment({
+                                          isOpen: true,
+                                          invoiceId: row.id,
+                                        })
+                                      }
+                                    >
+                                      <i className="bx bx-check-circle me-2 text-success"></i>
+                                      <span>Mark Payment</span>
+                                    </a>
+                                  </li>
+                                )}
+                              </>
+                            )}
+                          </ul>
+                        </div>
+                      </td>
+                    )}
+                  </tr>
+                ))
+              ) : (
+                <tr style={{ height: "200px" }}>
+                  <td
+                    colSpan={collectionColumns.length + 1}
+                    className="text-center border-0 align-middle"
+                  >
+                    No Collections Found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          {data?.data?.length > 0 && (
+            <div className="d-flex justify-content-start mt-2">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={data?.totalPages}
+                onPageChange={paginate}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CollectionList;

src/components/collections/CollectionSkeleton.jsx

@@ -0,0 +1,211 @@
+import React from "react";
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+
+export const PaymentHistorySkeleton = ({ count = 2 }) => {
+  return (
+    <div className="row text-start">
+      {[...Array(count)].map((_, idx) => (
+        <div className="col-12 mb-2" key={idx}>
+          <div className="p-2 border-start border-warning">
+            {/* Top Row: Date + Amount */}
+            <div className="d-flex justify-content-between align-items-center">
+              <SkeletonLine width="150px" height={18} /> {/* Date */}
+              <SkeletonLine width="100px" height={18} /> {/* Amount */}
+            </div>
+
+            <div className="row mt-1">
+              {/* Transaction ID */}
+              <div className="col-12 col-md-6">
+                <SkeletonLine width="80%" height={16} />
+              </div>
+
+              {/* Received By (Avatar + Name) */}
+              <div className="col-12 col-md-6 d-flex align-items-center gap-2">
+                <SkeletonLine
+                  width="30px"
+                  height={30}
+                  className="rounded-circle"
+                />{" "}
+                {/* Avatar */}
+                <SkeletonLine width="120px" height={16} /> {/* Name */}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const CollectionDetailsSkeleton = () => {
+  return (
+    <div className="container p-3">
+      {/* Title */}
+      <SkeletonLine height={24} width="200px" className="mx-auto" />
+
+      {/* Header Row */}
+      <div className="row mb-3 px-1">
+        <div className="col-10">
+          <SkeletonLine height={20} />
+        </div>
+        <div className="col-2 d-flex justify-content-end">
+          <SkeletonLine height={20} width="60px" />
+        </div>
+      </div>
+
+      {/* Project */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine width="60%" />
+        </div>
+      </div>
+
+      {/* Invoice & E-Invoice */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+      </div>
+
+      {/* Invoice Date & Client Submitted */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+      </div>
+
+      {/* Expected Payment & Mark as Completed */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+        <div className="col-md-6">
+          <SkeletonLine width="40%" />
+        </div>
+      </div>
+
+      {/* Basic & Tax Amount */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+      </div>
+
+      {/* Balance & Created At */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+        <div className="col-md-6">
+          <SkeletonLine />
+        </div>
+      </div>
+
+      {/* Created By */}
+      <div className="row mb-3">
+        <div className="col-md-6 d-flex align-items-center">
+          <SkeletonLine
+            width="40px"
+            height={40}
+            className="me-2 rounded-circle"
+          />
+          <SkeletonLine width="100px" />
+        </div>
+      </div>
+
+      {/* Description */}
+      <div className="row mb-3">
+        <div className="col-12">
+          <SkeletonLine height={50} />
+        </div>
+      </div>
+
+      {/* Attachments */}
+      <div className="row mb-3">
+        <div className="col-12 d-flex gap-2 flex-wrap">
+          {[...Array(3)].map((_, idx) => (
+            <SkeletonLine key={idx} height={60} width="80px" />
+          ))}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="row mb-2">
+        <div className="col-12 d-flex gap-2">
+          <SkeletonLine height={35} width="120px" />
+          <SkeletonLine height={35} width="150px" />
+        </div>
+      </div>
+
+      {/* Tab Content (Comments / Payments) */}
+      <SkeletonLine height={200} />
+    </div>
+  );
+};
+
+export const CollectionTableSkeleton = () => {
+  const columnCount = 8;
+
+  return (
+    <div className="card ">
+      <div
+        className="card-datatable table-responsive page-min-h"
+        id="horizontal-example"
+      >
+        <div className="dataTables_wrapper no-footer mx-5 pb-2">
+          <table className="table dataTable text-nowrap">
+            <thead>
+              <tr >
+                {[...Array(columnCount - 1)].map((_, i) => (
+                  <th key={i}>
+                    <SkeletonLine height={15} width="80px" />
+                  </th>
+                ))}
+                <th className="d-flex justify-content-center">
+                  <SkeletonLine height={16} width="40px" />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {[...Array(8)].map((_, rowIdx) => (
+                <tr key={rowIdx}>
+                  {[...Array(columnCount - 1)].map((_, colIdx) => (
+                    <td key={colIdx}>
+                      <SkeletonLine height={33} />
+                    </td>
+                  ))}
+                  <td className="d-flex justify-content-center">
+                    <SkeletonLine height={16} width="20px" />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          {/* Pagination Skeleton */}
+          <div className="d-flex justify-content-end mt-2">
+            <SkeletonLine height={30} width="200px" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/collections/Comment.jsx

@@ -0,0 +1,85 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { CommentSchema } from "./collectionSchema";
+import { useAddComment } from "../../hooks/useCollections";
+import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import moment from "moment";
+
+const Comment = ({ invoice }) => {
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(CommentSchema),
+    defaultValues: { comment: "" },
+  });
+
+  const { mutate: AddComment, isPending } = useAddComment(() => {
+    reset();
+  });
+
+  const onSubmit = (formData) => {
+    const payload = { ...formData, invoiceId: invoice?.id };
+    AddComment(payload);
+  };
+  return (
+    <div className="row pt-1 px-2">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="col-12">
+          <textarea
+            className="form-control "
+            rows={3}
+            {...register("comment")}
+          />
+          {errors.comment && (
+            <small className="danger-text">{errors.comment.message}</small>
+          )}
+        </div>
+        <div className="d-flex justify-content-end p-2">
+          <button
+            className="btn btn-sm btn-primary"
+            type="submit"
+            disabled={isPending}
+          >
+            {isPending ? "Please wait..." : "Submit"}
+          </button>
+        </div>
+      </form>
+      {invoice?.comments?.length > 0 ? (
+        invoice.comments.map((comment, index) => (
+          <div
+            className="border-start border-primary ps-1 py-2 mb-3"
+            key={comment.id || index}
+          >
+            <div className="d-flex justify-content-between align-items-center mb-1">
+              <div className="d-flex align-items-center">
+                <Avatar
+                  size="xs"
+                  firstName={comment?.createdBy?.firstName}
+                  lastName={comment?.createdBy?.lastName}
+                />
+                <span className="ms-1 fw-semibold">
+                  {comment?.createdBy?.firstName} {comment?.createdBy?.lastName}
+                </span>
+              </div>
+
+              <small className="text-secondary">
+                {moment.utc(comment?.createdAt).local().fromNow()}
+              </small>
+            </div>
+
+           <div className="ms-9"> <p className="mb-1">{comment?.comment}</p></div>
+          </div>
+        ))
+      ) : (
+       <div className="text-center py-2"> <p className="text-muted">No comments yet.</p></div>
+      )}
+    </div>
+  );
+};
+
+export default Comment;

src/components/collections/ManageCollection.jsx

@@ -0,0 +1,445 @@
+import React, { useEffect } from "react";
+import { useModal } from "../../hooks/useAuth";
+import Modal from "../common/Modal";
+import { FormProvider, useForm } from "react-hook-form";
+import Label from "../common/Label";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultCollection, newCollection } from "./collectionSchema";
+import SelectMultiple from "../common/SelectMultiple";
+import { useProjectName } from "../../hooks/useProjects";
+import DatePicker from "../common/DatePicker";
+import {
+  useCollection,
+  useCreateCollection,
+  useUpdateCollection,
+} from "../../hooks/useCollections";
+import { formatFileSize, localToUtc } from "../../utils/appUtils";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+import { formatDate } from "../../utils/dateUtils";
+
+const ManageCollection = ({ collectionId, onClose }) => {
+  const { data, isError, isLoading, error } = useCollection(collectionId);
+  const { projectNames, projectLoading } = useProjectName(true);
+  const methods = useForm({
+    resolver: zodResolver(newCollection),
+    defaultValues: defaultCollection,
+  });
+  const {
+    control,
+    watch,
+    register,
+    setValue,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const { mutate: createNewCollection, isPending } = useCreateCollection(() => {
+    handleClose();
+  });
+  const { mutate: UpdateCollection } = useUpdateCollection(() => {
+    handleClose();
+  });
+
+  const files = watch("attachments");
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
+
+    const existingFiles = watch("attachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+          isActive: true,
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("attachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const removeFile = (index) => {
+    if (collectionId) {
+      const newFiles = files.map((file, i) => {
+        if (file.documentId !== index) return file;
+        return {
+          ...file,
+          isActive: false,
+        };
+      });
+      setValue("attachments", newFiles, { shouldValidate: true });
+    } else {
+      const newFiles = files.filter((_, i) => i !== index);
+      setValue("attachments", newFiles, { shouldValidate: true });
+    }
+  };
+
+  const onSubmit = (formData) => {
+    const payload = {
+      ...formData,
+      clientSubmitedDate: localToUtc(formData.clientSubmitedDate),
+      invoiceDate: localToUtc(formData.invoiceDate),
+      exceptedPaymentDate: localToUtc(formData.exceptedPaymentDate),
+    };
+
+    if (collectionId) {
+      UpdateCollection({
+        collectionId,
+        payload: { ...payload, id: collectionId },
+      });
+    } else {
+      createNewCollection(payload);
+    }
+  };
+
+  const handleClose = () => {
+    reset(defaultCollection);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (data && collectionId) {
+      reset({
+        projectId: data?.project?.id,
+        invoiceNumber: data?.invoiceNumber,
+        eInvoiceNumber: data?.eInvoiceNumber,
+        title: data?.title,
+        clientSubmitedDate: formatDate(data?.clientSubmitedDate),
+        invoiceDate: formatDate(data?.invoiceDate),
+        exceptedPaymentDate: formatDate(data?.exceptedPaymentDate),
+        taxAmount: data?.taxAmount,
+        basicAmount: data?.basicAmount,
+        description: data?.description,
+        attachments: data.attachments
+          ? data.attachments.map((doc) => ({
+              fileName: doc.fileName,
+              base64Data: null,
+              contentType: doc.contentType,
+              documentId: doc.documentId,
+              fileSize: 0,
+              description: "",
+              preSignedUrl: doc.preSignedUrl,
+              isActive: doc.isActive ?? true,
+            }))
+          : [],
+      });
+    }
+  }, [data]);
+  if (isLoading) return <div>Loading....</div>;
+  if (isError) return <div>{error.message}</div>;
+  return (
+    <div className="container pb-3">
+      <div className="text-black fs-5 mb-2">
+        {collectionId ? "Update" : "New"} Collection
+      </div>
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
+          <div className="row px-md-1 px-0">
+            <div className="col-12 col-md-6  mb-2">
+              <Label className="form-label" required>
+                Select Project
+              </Label>
+              <select
+                className="form-select form-select-sm"
+                {...register("projectId")}
+              >
+                <option value="">Select Project</option>
+                {projectLoading ? (
+                  <option>Loading...</option>
+                ) : (
+                  projectNames?.map((project) => (
+                    <option key={project.id} value={project.id}>
+                      {project.name}
+                    </option>
+                  ))
+                )}
+              </select>
+              {errors.projectId && (
+                <small className="danger-text">
+                  {errors.projectId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6 mb-2">
+              <Label required>Title</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("title")}
+              />
+              {errors.title && (
+                <small className="danger-text">{errors.title.message}</small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Invoice Number</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("invoiceNumber")}
+              />
+              {errors.invoiceId && (
+                <small className="danger-text">
+                  {errors.invoiceId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>E-Invoice Number</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("eInvoiceNumber")}
+              />
+              {errors.invoiceId && (
+                <small className="danger-text">
+                  {errors.invoiceId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Invoice Date</Label>
+              <DatePicker
+                name="invoiceDate"
+                control={control}
+                maxDate={new Date()}
+              />
+              {errors.invoiceDate && (
+                <small className="danger-text">
+                  {errors.invoiceDate.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Expected Payment Date</Label>
+              <DatePicker
+                name="exceptedPaymentDate"
+                control={control}
+                minDate={watch("invoiceDate")}
+              />
+              {errors.exceptedPaymentDate && (
+                <small className="danger-text">
+                  {errors.exceptedPaymentDate.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Submission Date (Client)</Label>
+              <DatePicker
+                name="clientSubmitedDate"
+                control={control}
+                maxDate={new Date()}
+              />
+              {errors.exceptedPaymentDate && (
+                <small className="danger-text">
+                  {errors.exceptedPaymentDate.message}
+                </small>
+              )}
+            </div>
+
+            <div className="col-12 col-md-6  mb-2">
+              <Label htmlFor="basicAmount" className="form-label" required>
+                Basic Amount
+              </Label>
+              <input
+                type="number"
+                id="basicAmount"
+                className="form-control form-control-sm"
+                min="1"
+                step="0.01"
+                inputMode="decimal"
+                {...register("basicAmount", { valueAsNumber: true })}
+              />
+              {errors.basicAmount && (
+                <small className="danger-text">
+                  {errors.basicAmount.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label htmlFor="taxAmount" className="form-label" required>
+                Tax Amount
+              </Label>
+              <input
+                type="number"
+                id="taxAmount"
+                className="form-control form-control-sm"
+                min="1"
+                step="0.01"
+                inputMode="decimal"
+                {...register("taxAmount", { valueAsNumber: true })}
+              />
+              {errors.taxAmount && (
+                <small className="danger-text">
+                  {errors.taxAmount.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 my-2 text-start  mb-2">
+              <div className="col-md-12">
+                <Label htmlFor="description" className="form-label" required>
+                  Description
+                </Label>
+                <textarea
+                  id="description"
+                  className="form-control form-control-sm"
+                  {...register("description")}
+                  rows="2"
+                ></textarea>
+                {errors.description && (
+                  <small className="danger-text">
+                    {errors.description.message}
+                  </small>
+                )}
+              </div>
+            </div>
+
+            <div className="col-12">
+              <Label className="form-label" required>
+                Upload Bill{" "}
+              </Label>
+
+              <div
+                className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative text-black"
+                style={{ cursor: "pointer" }}
+                onClick={() => document.getElementById("attachments").click()}
+              >
+                <i className="bx bx-cloud-upload d-block bx-lg "> </i>
+                <span className="text-muted d-block">
+                  Click to select or click here to browse
+                </span>
+                <small className="text-muted">
+                  (PDF, JPG, PNG,Doc,docx,xls,xlsx max 5MB)
+                </small>
+
+                <input
+                  type="file"
+                  id="attachments"
+                  accept="
+    .pdf,
+    .doc,
+    .docx,
+    .xls,
+    .xlsx,
+    .jpg,
+    .jpeg,
+    .png
+  "
+                  multiple
+                  style={{ display: "none" }}
+                  {...register("attachments")}
+                  onChange={(e) => {
+                    onFileChange(e);
+                    e.target.value = "";
+                  }}
+                />
+              </div>
+              {errors.attachments && (
+                <small className="danger-text">
+                  {errors.attachments.message}
+                </small>
+              )}
+              {files.length > 0 && (
+                <div className="d-block">
+                  {files
+                    .filter((file) => {
+                      if (collectionId) {
+                        return file.isActive;
+                      }
+                      return true;
+                    })
+                    .map((file, idx) => (
+                      <a
+                        key={idx}
+                        className="d-flex justify-content-between text-start p-1"
+                        href={file.preSignedUrl || "#"}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <div>
+                          <span className="mb-0 text-secondary small d-block">
+                            {file.fileName}
+                          </span>
+                          <span className="text-body-secondary small d-block">
+                            {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                          </span>
+                        </div>
+                        <i
+                          className="bx bx-trash bx-sm cursor-pointer text-danger"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            removeFile(collectionId ? file.documentId : idx);
+                          }}
+                        ></i>
+                      </a>
+                    ))}
+                </div>
+              )}
+
+              {Array.isArray(errors.attachments) &&
+                errors.attachments.map((fileError, index) => (
+                  <div key={index} className="danger-text small mt-1">
+                    {
+                      (fileError?.fileSize?.message ||
+                        fileError?.contentType?.message ||
+                        fileError?.base64Data?.message,
+                      fileError?.documentId?.message)
+                    }
+                  </div>
+                ))}
+            </div>
+
+            <div className="d-flex justify-content-end gap-3">
+              {" "}
+              <button
+                type="reset"
+                className="btn btn-label-secondary btn-sm mt-3"
+                onClick={handleClose}
+                disabled={isPending}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm mt-3"
+                disabled={isPending}
+              >
+                {isPending ? "Please Wait..." : "Submit"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};
+
+export default ManageCollection;

src/components/collections/PaymentHistoryTable.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { formatUTCToLocalTime } from '../../utils/dateUtils'
+import { formatFigure } from '../../utils/appUtils'
+import Avatar from '../common/Avatar'
+
+const PaymentHistoryTable = ({data}) => {
+  return (
+    <div>
+      
+        {data?.receivedInvoicePayments?.length > 0 ? (
+          <div className="pt-1 data-tabe table-responsive">
+            <table className="table table-bordered table-responsive mt-2">
+              <thead className="table-light">
+                <tr>
+                  <th className="text-center">Sr.No</th>
+                  <th className="text-center">Transaction ID</th>
+                  <th className="text-center"> Received Date</th>
+                  <th className="text-center"> Payment Adjustment-Head</th>
+                  <th className="text-center">Amount</th>
+                  <th className="text-center">Updated By</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.receivedInvoicePayments.map((payment, index) => (
+                  <tr key={payment.id}>
+                    <td className="text-center">{index + 1}</td>
+                    <td ><span className="mx-2">{payment.transactionId}</span></td>
+                    <td className="text-center">{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
+                    <td className="text-start">{payment?.paymentAdjustmentHead?.name ?? "--"}</td>
+                    <td className="text-end">
+                      <span className="px-1">{formatFigure(payment.amount, {
+                        type: "currency",
+                        currency: "INR",
+                      })}</span>
+                    </td>
+                    <td>
+                      <div className="d-flex align-items-center mx-2 py-1">
+                       
+                        {payment.createdBy?.firstName}{" "}
+                        {payment.createdBy?.lastName}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ):(<div className='text-center py-2'><p>No History</p></div>)}
+    </div>
+  )
+}
+
+export default PaymentHistoryTable

src/components/collections/ViewCollection.jsx

@@ -0,0 +1,258 @@
+import React, { useState } from "react";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+import { useCollection } from "../../hooks/useCollections";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { formatFigure, getIconByFileType } from "../../utils/appUtils";
+import Avatar from "../common/Avatar";
+import PaymentHistoryTable from "./PaymentHistoryTable";
+import Comment from "./Comment";
+import { CollectionDetailsSkeleton } from "./CollectionSkeleton";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { ADMIN_COLLECTION, EDIT_COLLECTION } from "../../utils/constants";
+
+const ViewCollection = ({ onClose }) => {
+  const [activeTab, setActiveTab] = useState("payments");
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
+  const { viewCollection, setCollection, setDocumentView } =
+    useCollectionContext();
+  const { data, isLoading, isError, error } = useCollection(viewCollection);
+
+  const handleEdit = () => {
+    setCollection({ isOpen: true, invoiceId: viewCollection });
+    onClose();
+  };
+
+  if (isLoading) return <CollectionDetailsSkeleton />;
+  if (isError) return <div>{error.message}</div>;
+
+  return (
+    <div className="container p-3">
+      <p className="fs-5 fw-semibold">Collection Details</p>
+      <div className="row text-start  ">
+        <div className="col-12 mb-3 d-flex justify-content-between">
+          <div className="d-flex">
+            <label
+              className=" me-2 mb-0 fw-semibold"
+              style={{ minWidth: "130px" }}
+            >
+              Project :
+            </label>
+            <div className="text-muted">{data?.project?.name}</div>
+          </div>
+          <div>
+            {" "}
+            <span
+              className={`badge bg-label-${
+                data?.isActive ? "primary" : "danger"
+              }`}
+            >
+              {data?.isActive ? "Active" : "Inactive"}
+            </span>
+            {(isAdmin || canEditCollection) &&
+              !data?.receivedInvoicePayments && (
+                <span onClick={handleEdit} className="ms-2 cursor-pointer">
+                  <i className="bx bx-edit text-primary bx-sm"></i>
+                </span>
+              )}
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="row mb-2  text-wrap">
+            <div className="col-4 fw-semibold">Title :</div>
+            <div className="col-8 text-wrap">{data?.title}</div>
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Invoice Number:</div>
+            <div className="col-8">{data?.invoiceNumber}</div>
+          </div>
+        </div>
+        {/* Row 2: E-Invoice Number + Project */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">E-Invoice Number:</div>
+            <div className="col-8">{data?.eInvoiceNumber}</div>
+          </div>
+        </div>
+
+        {/* Row 3: Invoice Date + Client Submitted Date */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Invoice Date:</div>
+            <div className="col-8">
+              {formatUTCToLocalTime(data?.invoiceDate)}
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Client Submission Date:</div>
+            <div className="col-8">
+              {formatUTCToLocalTime(data?.clientSubmitedDate)}
+            </div>
+          </div>
+        </div>
+        {/* Row 4: Expected Payment Date + Mark as Completed */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Expected Payment Date:</div>
+            <div className="col-8">
+              {formatUTCToLocalTime(data?.exceptedPaymentDate)}
+            </div>
+          </div>
+        </div>
+
+        {/* Row 5: Basic Amount + Tax Amount */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Basic Amount :</div>
+            <div className="col-8">
+              {formatFigure(data?.basicAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Tax Amount :</div>
+            <div className="col-8">
+              {formatFigure(data?.taxAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </div>
+          </div>
+        </div>
+        {/* Row 6: Balance Amount + Created At */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Balance Amount :</div>
+            <div className="col-8">
+              {formatFigure(data?.balanceAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-end">
+            <div className="col-4 fw-semibold">Created At :</div>
+            <div className="col-8">{formatUTCToLocalTime(data?.createdAt)}</div>
+          </div>
+        </div>
+        {/* Row 7: Created By */}
+        <div className="col-md-6">
+          <div className="row mb-4 align-items-center">
+            <div className="col-4 fw-semibold">Created By :</div>
+            <div className="col-8 d-flex align-items-center">
+              <Avatar
+                size="xs"
+                firstName={data.createdBy?.firstName}
+                lastName={data.createdBy?.lastName}
+              />
+              <span className="ms-1 text-muted">
+                {data?.createdBy?.firstName} {data?.createdBy?.lastName}
+              </span>
+            </div>
+          </div>
+        </div>
+        {/* Description */}
+        <div className="col-12 my-1 mb-2">
+          <div className=" me-2 mb-0 fw-semibold">Description :</div>
+          <div className="text-muted">{data?.description}</div>
+        </div>
+
+        <div className="col-12 text-start">
+          <label className=" me-2 mb-2 fw-semibold">Attachment :</label>
+
+          <div className="d-flex flex-wrap gap-2">
+            {data?.attachments?.map((doc) => {
+              const isImage = doc.contentType?.includes("image");
+
+              return (
+                <div
+                  key={doc.documentId}
+                  className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                  style={{
+                    width: "80px",
+                    cursor: isImage ? "pointer" : "default",
+                  }}
+                  onClick={() => {
+                    if (isImage) {
+                      setDocumentView({
+                        IsOpen: true,
+                        Image: doc.preSignedUrl,
+                      });
+                    }
+                  }}
+                >
+                  <i
+                    className={`bx ${getIconByFileType(doc.contentType)}`}
+                    style={{ fontSize: "30px" }}
+                  ></i>
+                  <small
+                    className="text-center text-tiny text-truncate w-100"
+                    title={doc.fileName}
+                  >
+                    {doc.fileName}
+                  </small>
+                </div>
+              );
+            }) ?? "No Attachment"}
+          </div>
+        </div>
+
+        <div className="container px-1">
+          {/* Tabs Navigation */}
+          <ul className="nav nav-tabs" role="tablist">
+            <li className="nav-item">
+              <button
+                className={`nav-link ${
+                  activeTab === "payments" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("payments")}
+                type="button"
+              >
+                <i className="bx bx-history bx-sm me-1"></i> Payments History
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                className={`nav-link ${
+                  activeTab === "details" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("details")}
+                type="button"
+              >
+                <i className="bx bx-message-dots bx-sm me-2"></i> Comments (
+                {data?.comments?.length ?? "0"})
+              </button>
+            </li>
+          </ul>
+
+          {/* Tab Content */}
+          <div className="tab-content px-1 py-0 border-top-0">
+            {activeTab === "payments" && (
+              <div className="tab-pane fade show active">
+                <PaymentHistoryTable data={data} />
+              </div>
+            )}
+
+            {activeTab === "details" && (
+              <div className="tab-pane fade show active">
+                <Comment invoice={data} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewCollection;

src/components/collections/collectionSchema.jsx

@@ -0,0 +1,101 @@
+import { z } from "zod";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "application/doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document", 
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+  "application/vnd.ms-excel", 
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
+];
+
+
+export const newCollection = z.object({
+  title: z.string().trim().min(1, { message: "Title is required" }),
+  projectId: z.string().trim().min(1, { message: "Project is required" }),
+  invoiceDate: z.string().min(1, { message: "Date is required" }),
+  description: z.string().trim().optional(),
+  clientSubmitedDate: z.string().min(1, { message: "Date is required" }),
+  exceptedPaymentDate: z.string().min(1, { message: "Date is required" }),
+  invoiceNumber: z
+    .string()
+    .trim()
+    .min(1, { message: "Invoice is required" })
+    .max(17, { message: "Invalid Number" }),
+  eInvoiceNumber: z
+    .string()
+    .trim()
+    .min(1, { message: "E-Invoice No is required" }),
+  taxAmount: z.coerce
+    .number({
+      invalid_type_error: "Amount is required and must be a number",
+    })
+    .min(1, "Amount must be Enter")
+    .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+      message: "Amount must have at most 2 decimal places",
+    }),
+  basicAmount: z.coerce
+    .number({
+      invalid_type_error: "Amount is required and must be a number",
+    })
+    .min(1, "Amount must be Enter")
+    .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+      message: "Amount must have at most 2 decimal places",
+    }),
+  attachments: z
+    .array(
+      z.object({
+        fileName: z.string().min(1, { message: "Filename is required" }),
+        base64Data: z.string().nullable(),
+        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+        }),
+        documentId: z.string().optional(),
+        fileSize: z.number().max(MAX_FILE_SIZE, {
+          message: "File size must be less than or equal to 5MB",
+        }),
+        description: z.string().optional(),
+        isActive: z.boolean().default(true),
+      })
+    )
+    .nonempty({ message: "At least one file attachment is required" }),
+});
+
+export const defaultCollection = {
+  projectId: "",
+  invoiceNumber: " ",
+  eInvoiceNumber: "",
+  title: "",
+  clientSubmitedDate: null,
+  invoiceDate: null,
+  exceptedPaymentDate: null,
+  taxAmount: "",
+  basicAmount: "",
+  description: "",
+  attachments: [],
+};
+
+export const paymentSchema = z.object({
+  paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
+  transactionId: z.string().min(1, "Transaction ID is required"),
+  amount: z.number().min(1, "Amount must be greater than zero"),
+  comment:z.string().min(1,{message:"Comment required"}),
+  paymentAdjustmentHeadId:z.string().min(1,{message:"Payment Type required"})
+});
+
+// Default Value
+export const defaultPayment = {
+  paymentReceivedDate: null,
+  transactionId: "",
+  amount: 0,
+  comment:"",
+  paymentAdjustmentHeadId:""
+};
+
+
+export const CommentSchema = z.object({
+  comment:z.string().min(1,{message:"Comment required"})
+})

src/components/common/AccessDenied.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Breadcrumb from "./Breadcrumb";
+
+const AccessDenied = ({data}) => {
+  return (
+    <div className="container-fluid">
+      <Breadcrumb
+        data={data}
+      />
+
+        <div className="card text-center py-1">
+          <i className="fa-solid fa-triangle-exclamation fs-5" />
+          <p>
+            Access Denied: You don't have permission to perform this action !
+          </p>
+        </div>
+
+    </div>
+  );
+};
+
+export default AccessDenied;

src/components/common/Avatar.jsx

@@ -51,7 +51,7 @@ const Avatar = ({ firstName, lastName, size = "sm", classAvatar }) => {
 
   return (
     <div className="avatar-wrapper p-1">
-     <div className={`avatar avatar-${size} me-2 ${classAvatar}`}>
+     <div className={`avatar avatar-${size}  ${classAvatar}`}>
         <span className={`avatar-initial rounded-circle ${bgClass}`}>
           {generateAvatarText(firstName, lastName)}
         </span>

src/components/common/ConfirmModal.jsx

@@ -13,19 +13,18 @@ const ConfirmModal = ({
   if (!isOpen) return null;
 
   const TypeofIcon = () => {
-    if (type === "delete") {
+    switch (type) {
-      return (
+      case "delete":
-        <i
+        return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
-          className="bx bx-x-circle text-danger"
+      case "success":
-          style={{ fontSize: "60px" }}
+        return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
-        ></i>
+      case "warning":
-      );
+        return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
-    }
+      default:
         return null;
+    }
   };
 
-  const modalSize = type === "delete" ? "sm" : "md";
-
   return (
     <div
       className="modal fade show"
@@ -33,22 +32,24 @@ const ConfirmModal = ({
       role="dialog"
       aria-modal="true"
     >
-      <div className={`modal-dialog modal-${modalSize} modal-dialog-top`}>
+      <div className="modal-dialog modal-sm modal-dialog-top">
         <div className="modal-content">
           <div className="modal-body py-1 px-2">
             <div className="d-flex justify-content-between mb-4 pt-2">
               {header && <strong className="mb-0">{header}</strong>}
               <button
                 type="button"
-                className="btn-close "
+                className="btn-close"
                 aria-label="Close"
                 onClick={onClose}
               />
             </div>
 
             <div className="row">
-              <div className="col-4 col-sm-2">{TypeofIcon()}</div>
+              <div className="col-4 col-sm-3 d-flex justify-content-center align-items-start">
-              <div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
+                {TypeofIcon()}
+              </div>
+              <div className="col-8 col-sm-9 py-sm-2 py-1 text-sm-start">
                 <span className="fs-6">{message}</span>
                 <div className="d-flex justify-content-end mt-4">
                   <button
@@ -59,7 +60,7 @@ const ConfirmModal = ({
                     {loading ? "Please Wait..." : "Yes"}
                   </button>
                   <button
-                    className="btn btn-secondary ms-4 btn-sm"
+                    className="btn btn-secondary ms-3 btn-sm"
                     onClick={onClose}
                     disabled={loading}
                   >
@@ -68,6 +69,7 @@ const ConfirmModal = ({
                 </div>
               </div>
             </div>
+
           </div>
         </div>
       </div>

src/components/common/DateRangePicker.jsx

@@ -1,25 +1,37 @@
 import React, { useEffect, useRef } from "react";
 import { useController, useFormContext, useWatch } from "react-hook-form";
+import { useSelector } from "react-redux";
+
 const DateRangePicker = ({
-  md,
+  md=12,
-  sm,
+  sm=6,
   onRangeChange,
   DateDifference = 7,
   endDateMode = "yesterday",
 }) => {
   const inputRef = useRef(null);
 
+  const persistedRange = useSelector(
+    (store) => store.localVariables.attendance.defaultDateRange
+  );
+
   useEffect(() => {
-    const endDate = new Date();
+    let startDate, endDate;
+
+    if (persistedRange?.startDate && persistedRange?.endDate) {
+      startDate = new Date(persistedRange.startDate);
+      endDate = new Date(persistedRange.endDate);
+    } else {
+      endDate = new Date();
       if (endDateMode === "yesterday") {
         endDate.setDate(endDate.getDate() - 1);
       }
-
       endDate.setHours(0, 0, 0, 0);
 
-    const startDate = new Date(endDate);
+      startDate = new Date(endDate);
       startDate.setDate(endDate.getDate() - (DateDifference - 1));
       startDate.setHours(0, 0, 0, 0);
+    }
 
     const fp = flatpickr(inputRef.current, { 
       mode: "range",
@@ -41,32 +53,32 @@ const DateRangePicker = ({
       endDate: endDate.toLocaleDateString("en-CA"),
     });
 
-    return () => {
+    return () => fp.destroy();
-      fp.destroy();
+  }, [onRangeChange, DateDifference, endDateMode, persistedRange]);
-    };
-  }, [onRangeChange, DateDifference, endDateMode]);
 
   const handleIconClick = () => {
-    if (inputRef.current) {
+    if (inputRef.current?._flatpickr) {
-      inputRef.current._flatpickr.open(); // directly opens flatpickr
+      inputRef.current._flatpickr.open();
     }
   };
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1`}>
+<div className={`position-relative w-auto justify-content-center`}>
   <input
     type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4"
+    className="form-control form-control-sm w-100 pe-8  " 
     placeholder="From to End"
     id="flatpickr-range"
     ref={inputRef}
   />
 
   <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y " onClick={handleIconClick}
+    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
-        style={{ right: "22px", bottom: "-8px" }}
+    onClick={handleIconClick}
-      ></i>
+  />
-    </div>
+</div>
+
+
   );
 };
 
@@ -85,6 +97,7 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
+  howManyDay = 6,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -94,12 +107,13 @@ export const DateRangePicker1 = ({
     field: { ref },
   } = useController({ name: startField, control });
 
+  // Apply default range
   const applyDefaultDates = () => {
     const today = new Date();
-    const past = new Date();
+    const past = new Date(today.getTime());
-    past.setDate(today.getDate() - 6);
+    past.setDate(today.getDate() - howManyDay);
 
-    const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+    const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
     const formattedStart = format(past);
     const formattedEnd = format(today);
 
@@ -114,15 +128,19 @@ export const DateRangePicker1 = ({
   useEffect(() => {
     if (!inputRef.current || inputRef.current._flatpickr) return;
 
-    const instance = flatpickr(inputRef.current, {
+    if (defaultRange && !getValues(startField) && !getValues(endField)) {
+      applyDefaultDates();
+    }
+
+    const instance = window.flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
-          const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+          const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
           setValue(startField, format(start), { shouldValidate: true });
           setValue(endField, format(end), { shouldValidate: true });
         } else {
@@ -135,12 +153,10 @@ export const DateRangePicker1 = ({
 
     const currentStart = getValues(startField);
     const currentEnd = getValues(endField);
-    if (defaultRange && !currentStart && !currentEnd) {
+    if (currentStart && currentEnd) {
-      applyDefaultDates();
-    } else if (currentStart && currentEnd) {
       instance.setDate([
-        flatpickr.parseDate(currentStart, "d-m-Y"),
+        window.flatpickr.parseDate(currentStart, "d-m-Y"),
-        flatpickr.parseDate(currentEnd, "d-m-Y"),
+        window.flatpickr.parseDate(currentEnd, "d-m-Y"),
       ]);
     }
 
@@ -160,8 +176,7 @@ export const DateRangePicker1 = ({
         }
       }
     }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
-
 
   const start = getValues(startField);
   const end = getValues(endField);
@@ -173,7 +188,7 @@ export const DateRangePicker1 = ({
         type="text"
         className="form-control form-control-sm"
         placeholder={placeholder}
-        defaultValue={formattedValue}
+        value={formattedValue}
         ref={(el) => {
           inputRef.current = el;
           ref(el);

src/components/common/EmployeeSearchInput.jsx

@@ -4,10 +4,13 @@ import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
 
-
+const EmployeeSearchInput = ({
-
+  control,
-
+  name,
-const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
+  projectId,
+  placeholder,
+  forAll,
+}) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -17,17 +20,20 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const debouncedSearch = useDebounce(search, 500);
 
-  const {
+  const { data: employees, isLoading } = useEmployeesName(
-    data: employees,
+    projectId,
-    isLoading,
+    debouncedSearch,
-  } = useEmployeesName(projectId, debouncedSearch);
+    forAll
+  );
 
   useEffect(() => {
-    if (value && !search) {
+    if (value && employees?.data) {
-      const found = employees?.data?.find((emp) => emp.id === value);
+      const found = employees.data.find((emp) => emp.id === value);
-      if (found) setSearch(found.firstName + " " + found.lastName);
+      if (found && forAll) {
+        setSearch(found.firstName + " " + found.lastName);
       }
-  }, [value, employees]);
+    }
+  }, [value, employees?.data]);
 
   const handleSelect = (employee) => {
     onChange(employee.id);
@@ -61,7 +67,6 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
           {isLoading ? (
             <li className="list-group-item">
               <a>Searching...</a>
-              
             </li>
           ) : (
             employees?.data?.map((emp) => (

src/components/common/ProgressBar.jsx

@@ -3,35 +3,65 @@ import React from "react";
 const ProgressBar = ({
   plannedWork = 100,
   completedWork = 0,
-  height = "8px",
+  height = "6px",
   className = "mb-4",
   rounded = true,
+  showLabel = true,
 }) => {
   const getProgress = (planned, completed) => {
-    if (!planned || planned === 0) return "0%";
+    if (!planned || planned === 0) return 0;
-    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
+    return Math.min((completed / planned) * 100, 100);
   };
 
-  const progressStyle = {
+  const percentage = getProgress(plannedWork, completedWork);
-    width: getProgress(plannedWork, completedWork),
+
+  const progressBarStyle = {
+    width: ` ${percentage.toFixed(2)}%`,
+    transition: "width 0.4s ease",
+  };
+
+  const containerStyle = {
+    height,
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
   };
 
   return (
     <div
-      className={`progress ${className} ${rounded ? "rounded" : ""}`}
+      className={`d-flex align-items-center ${className}`}
-      style={{ height }}
+      style={containerStyle}
+    >
+      <div className="flex-grow-1">
+        <div
+          className={`progress ${rounded ? "rounded" : ""}`}
+          style={{ height, backgroundColor: "#f0f0f0" }}
         >
           <div
             className={`progress-bar ${rounded ? "rounded" : ""}`}
             role="progressbar"
-        style={progressStyle}
+            style={progressBarStyle}
             aria-valuenow={completedWork}
             aria-valuemin="0"
             aria-valuemax={plannedWork}
-      ></div>
+          />
+        </div>
+      </div>
+
+      {showLabel && (
+        <span
+          className="fw-semibold text-secondary"
+          style={{
+            minWidth: "45px",
+            textAlign: "right",
+            fontSize: "0.8rem",
+          }}
+        >
+          {percentage.toFixed(2)}%
+        </span>
+      )}
     </div>
   );
 };
 
 export default ProgressBar;
-

src/components/gallary/GalleryFilterPanel.jsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { useImageGalleryFilter } from "../../hooks/useImageGallery";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { FormProvider, useForm } from "react-hook-form";
+import Label from "../common/Label";
+import { DateRangePicker1 } from "../common/DateRangePicker";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultGalleryFilterValue, gallerySchema } from "./GallerySchema";
+import SelectMultiple from "../common/SelectMultiple";
+import { localToUtc } from "../../utils/appUtils";
+
+const GalleryFilterPanel = ({ onApply }) => {
+  const selectedProject = useSelectedProject();
+  const [resetKey, setResetKey] = useState(0);
+
+  const { data, isLoading, isError, error } =
+    useImageGalleryFilter(selectedProject);
+
+  const closePanel = () => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
+  };
+  const methods = useForm({
+    resolver: zodResolver(gallerySchema),
+    defaultValues: defaultGalleryFilterValue,
+  });
+
+  const {
+    handleSubmit,
+    register,
+    setValue,reset,
+    formState: { errors },
+  } = methods;
+
+  const onSubmit = (formData) => {
+    onApply({
+      ...formData,
+      startDate: localToUtc(formData.startDate),
+      endDate: localToUtc(formData.endDate),
+    });
+    closePanel()
+  };
+
+  const onClear=()=>{
+    reset(defaultGalleryFilterValue);
+     setResetKey((prev) => prev + 1);
+    closePanel()
+  }
+
+  if (isLoading) return <div>Loading....</div>;
+  if (isError) return <div>{error.message}</div>;
+  return (
+    <div className="d-block text-start">
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="mb-2">
+            <Label>Select Date:</Label>
+            <DateRangePicker1
+              placeholder="DD-MM-YYYY To DD-MM-YYYY"
+              startField="startDate"
+              endField="endDate"
+              resetSignal={resetKey}
+              defaultRange={false}
+              maxDate={new Date()}
+            />
+          </div>
+          <div className="mb-2">
+            <SelectMultiple
+              name="buildingIds"
+              label="Select building:"
+              options={data?.buildings}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+
+          <div className="mb-2">
+            <SelectMultiple
+              name="floorIds"
+              label="Select Floor:"
+              options={data?.floors}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+          <div className="mb-2">
+            <SelectMultiple
+              name="workAreaIds"
+              label="Select Work Area:"
+              options={data?.workAreas}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+          <div className="mb-2">
+            <SelectMultiple
+              name="workCategoryIds"
+              label="Select Work Category:"
+              options={data?.workCategories}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+
+          <div className="mb-2">
+            <SelectMultiple
+              name="activityIds"
+              label="Select Activity:"
+              options={data?.activities}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+          <div className="mb-2">
+            <SelectMultiple
+              name="uploadedByIds"
+              label="Select Uploaded By:"
+              options={data?.UploadedBys}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+          <div className="mb-2">
+            <SelectMultiple
+              name="serviceIds"
+              label="Select Service:"
+              options={data?.services}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+          <div className="d-flex flex-row gap-3 justify-content-end">
+            <button className="btn btn-sm btn-label-secondary" onClick={onClear}>Cancel</button>
+            <button type="submit" className="btn btn-sm btn-primary">
+              Apply
+            </button>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};
+
+export default GalleryFilterPanel;

src/components/gallary/GallerySchema.jsx

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const gallerySchema = z.object({
+  buildingIds: z.array(z.string()).optional(),
+  floorIds: z.array(z.string()).optional(),
+  workAreaIds: z.array(z.string()).optional(),
+  activityIds: z.array(z.string()).optional(),
+  workCategoryIds: z.array(z.string()).optional(),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+  uploadedByIds: z.array(z.string()).optional(),
+  serviceIds:  z.array(z.string()).optional(),
+});
+
+export const defaultGalleryFilterValue = {
+  buildingIds: [],
+  floorIds: [],
+  workAreaIds: [],
+  activityIds: [],
+  workCategoryIds:[],
+  startDate: null,
+  endDate: null,
+  uploadedByIds:[],
+  serviceIds: [],
+};

src/components/gallary/ImageGalleryListView.jsx

@@ -0,0 +1,169 @@
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import moment from "moment";
+import Avatar from "../../components/common/Avatar";
+import { useGalleryContext } from "../../pages/Gallary/ImageGallaryPage";
+import useImageGallery from "../../hooks/useImageGallery";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Pagination from "../common/Pagination";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Loader from "../common/Loader";
+
+const ImageGalleryListView = ({filter}) => {
+  const [hoveredImage, setHoveredImage] = useState(null);
+  const selectedProject = useSelectedProject();
+  const [currentPage, setCurrentPage] = useState(1);
+  const { setOpenGallery } = useGalleryContext();
+
+  const { data, isLoading, isError, error } = useImageGallery(
+    selectedProject,
+    currentPage,
+    10,
+    filter
+  );
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  if (!data?.data?.length && !isLoading) {
+    return (
+      <p className="text-center text-muted mt-5">
+       {selectedProject ? " No images match the selected filters.":"Please Select Project!"}
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="page-min-h d-flex justify-content-center align-items-center">
+        <Loader />
+      </div>
+    );
+  }
+
+  return (
+    <div className="main-content">
+      <div className="activity-section">
+        {data?.data?.map((batch) => {
+          if (!batch.documents?.length) return null; 
+
+          const doc = batch.documents[0];
+          const userName = `${doc.uploadedBy?.firstName || ""} ${
+            doc.uploadedBy?.lastName || ""
+          }`.trim();
+          const date = formatUTCToLocalTime(doc.uploadedAt);
+          //   const hasArrows = batch.documents.length > scrollThreshold;
+
+          return (
+            <div key={batch.batchId} className="grouped-section">
+              <div className="group-heading">
+                <div className="d-flex align-items-center mb-1">
+                  <Avatar
+                    size="xs"
+                    firstName={doc.uploadedBy?.firstName}
+                    lastName={doc.uploadedBy?.lastName}
+                    className="me-2"
+                  />
+                  <div className="d-flex flex-column align-items-start">
+                    <strong className="user-name-text">{userName}</strong>
+                    <span className="text-muted small">{date}</span>
+                  </div>
+                </div>
+
+                <div className="location-line text-secondary">
+                  <div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
+                    <span className="d-flex align-items-center">
+                      <span>{batch.buildingName}</span>
+                      <i className="bx bx-chevron-right " />
+                    </span>
+                    <span className="d-flex align-items-center">
+                      <span>{batch.floorName}</span>
+                      <i className="bx bx-chevron-right m" />
+                    </span>
+                    <span className="d-flex align-items-center ">
+                      <span>{batch.workAreaName || "Unknown"}</span>
+                      <i className="bx bx-chevron-right " />
+                      <span>{batch.activityName}</span>
+                    </span>
+                  </div>
+                  {batch.workCategoryName && (
+                    <span className="badge bg-label-primary ms-2">
+                      {batch.workCategoryName}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="image-group-wrapper">
+                {/* {hasArrows && (
+                  <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>
+                    ‹
+                  </button>
+                )} */}
+                <div
+                  className="image-group-horizontal"
+                  //   ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
+                >
+                  {batch.documents.map((d, i) => {
+                    const hoverDate = moment().format("DD MMMM, YYYY");
+                    const hoverTime = moment(d.uploadedAt).format("hh:mm A");
+
+                    return (
+                      <div
+                        key={d.id}
+                        className="image-card"
+                        onMouseEnter={() => setHoveredImage(d)}
+                        onMouseLeave={() => setHoveredImage(null)}
+                        onClick={() =>
+                          setOpenGallery({
+                            isOpen: true,
+                            data: { data: batch, index: i },
+                          })
+                        }
+                      >
+                        <div className="image-wrapper">
+                          <img src={d.url} alt={`Image ${i + 1}`} />
+                        </div>
+                        {hoveredImage === d && (
+                          <div className="image-hover-description">
+                            <p>
+                              <strong>Date:</strong> {hoverDate}
+                            </p>
+                            <p>
+                              <strong>Time:</strong> {hoverTime}
+                            </p>
+                            <p>
+                              <strong>Activity:</strong> {batch.activityName}
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+                {/* {hasArrows && (
+                  <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>
+                    ‹
+                  </button>
+                )} */}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {data?.data?.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          onPageChange={paginate}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ImageGalleryListView;

src/components/gallary/ViewGallery.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from "react";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const ViewGallery = ({ batch, index }) => {
+      const [loading, setLoading] = useState(true);
+  const [currentIndex, setCurrentIndex] = useState(index);
+  console.log(batch);
+  useEffect(() => {
+    setCurrentIndex(index);
+  }, [index, batch]);
+
+  if (!batch || !batch.documents || batch.documents.length === 0) return null;
+
+  const image = batch.documents[currentIndex];
+  if (!image) return null;
+
+  const fullName = `${image.uploadedBy?.firstName || ""} ${
+    image.uploadedBy?.lastName || ""
+  }`.trim();
+  const date = formatUTCToLocalTime(image.uploadedAt);
+
+  const buildingName = batch.buildingName;
+  const floorName = batch.floorName;
+  const workAreaName = batch.workAreaName;
+  const activityName = batch.activityName;
+  const batchComment = batch.comment;
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      Math.min(batch.documents.length - 1, prevIndex + 1)
+    );
+  };
+
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < batch.documents.length - 1;
+
+  return (
+    <div>
+
+        {loading && <p>Loading...</p>}
+      <div className="position-relative d-flex justify-content-center align-items-center">
+        {hasPrev && (
+          <button
+            className="btn btn-icon btn-outline-primary rounded-circle position-absolute start-0 top-50 translate-middle-y shadow"
+            onClick={handlePrev}
+          >
+            <i className="bx bx-chevron-left fs-4"></i>
+          </button>
+        )}
+
+        <img
+          src={image.url}
+          alt="Preview"
+          className="img-fluid rounded"
+          style={{
+            maxHeight: "500px",
+            width: "100%",
+            objectFit: "contain",
+          }}
+            onLoad={() => setLoading(false)}
+        />
+
+        {hasNext && (
+          <button
+            className="btn btn-icon btn-outline-primary  position-absolute end-0 top-50 translate-middle-y  rounded-circle  shadow"
+            onClick={handleNext}
+          >
+            <i className="bx bx-chevron-right fs-4"></i>
+          </button>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="mt-3 text-start small">
+        <p className="mb-1">
+          <i className="bx bxs-user me-2"></i>
+          <span className="text-muted">Uploaded By: </span>
+          <span className="fw-semibold">{fullName}</span>
+        </p>
+
+        <p className="mb-1">
+          <i className="bx bxs-calendar me-2"></i>
+          <span className="text-muted">Date: </span>
+          <span className="fw-semibold">{date}</span>
+        </p>
+
+        <p className="mb-1">
+          <i className="bx bx-map me-2"></i>
+          <span className="text-muted">Location: </span>
+          <span className="fw-semibold">
+            {buildingName} <i className="bx bx-chevron-right"></i> {floorName}{" "}
+            <i className="bx bx-chevron-right"></i> {workAreaName || "Unknown"}{" "}
+            <i className="bx bx-chevron-right"></i> {activityName}
+          </span>
+        </p>
+
+        <p className="mb-0">
+          <i className="bx bx-comment-dots me-2"></i>
+          <span className="text-muted">Comment: </span>
+          <span className="fw-semibold">{batchComment}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ViewGallery;

src/components/master/EditContactTag.jsx

@@ -41,7 +41,6 @@ const EditContactTag = ({ data, onClose }) => {
       name: formData.name,
       description: formData.description,
     };
-    debugger
     updateContactTag({ id: data?.id, payload });
   }
   // const onSubmit = (formdata) => {

src/components/master/ManageDocumentCategory.jsx

@@ -8,6 +8,7 @@ import {
   useCreateDocumentCatgory,
   useUpdateDocumentCategory,
 } from "../../hooks/masterHook/useMaster";
+import Label from "../common/Label";
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
   ([key, value]) => ({ key, value })
@@ -74,9 +75,9 @@ const ManageDocumentCategory = ({ data, onClose }) => {
       ) : (
         <div>
           <div>
-            <p className="fw-semibold">
+            {/* <p className="fw-semibold">
               {data ? "Update Document Category" : "Add Document Category"}
-            </p>
+            </p> */}
           </div>
 
           <form
@@ -84,7 +85,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className="col-12">
-              <label className="form-label">Category Name</label>
+              <Label required >Category Name</Label>
               <input
                 type="text"
                 {...register("name")}
@@ -96,7 +97,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
             </div>
 
             <div className="col-12">
-              <label className="form-label">Select Entity</label>
+              <Label required >Select Entity</Label>
               <select
                 className="form-select form-select-sm"
                 {...register("entityTypeId")}
@@ -114,7 +115,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
             </div>
 
             <div className="col-12">
-              <label className="form-label">Description</label>
+              <Label required >Description</Label>
               <textarea
                 rows="3"
                 {...register("description")}
@@ -125,7 +126,15 @@ const ManageDocumentCategory = ({ data, onClose }) => {
               )}
             </div>
 
-            <div className="col-12 text-center">
+            <div className="d-flex flex-row justify-content-end gap-3 ">
+              <button
+                type="button"
+                className="btn btn-sm btn-label-secondary"
+                onClick={onClose}
+                disabled={isPending || Updating}
+              >
+                Cancel
+              </button>
               <button
                 type="submit"
                 className="btn btn-sm btn-primary me-3"
@@ -137,14 +146,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
                   ? "Update"
                   : "Submit"}
               </button>
-              <button
+              
-                type="button"
-                className="btn btn-sm btn-secondary"
-                onClick={onClose}
-                disabled={isPending || Updating}
-              >
-                Cancel
-              </button>
             </div>
           </form>
         </div>

src/components/master/ManageDocumentType.jsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
+import Label from "../common/Label";
 
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
@@ -84,14 +85,14 @@ const onSubmit = (payload) => {
     <FormProvider {...methods}>
       <form className="row g-2 text-start" onSubmit={handleSubmit(onSubmit)}>
         <div className="text-center">
-          <p className="fw-semibold">
+          {/* <p className="fw-semibold">
             {data ? "Edit Document Type" : "Add Document Type"}
-          </p>
+          </p> */}
         </div>
 
         {/* Name */}
         <div className="col-12">
-          <label className="form-label">Name</label>
+          <Label required>Name</Label>
           <input
             type="text"
             {...register("name")}
@@ -112,7 +113,7 @@ const onSubmit = (payload) => {
 
         {/* Allowed Content Type */}
         <div className="col-12">
-          <label className="form-label">Allowed Content Type</label>
+          <Label required>Allowed Content Type</Label>
           <input
             type="text"
             {...register("allowedContentType")}
@@ -174,7 +175,7 @@ const onSubmit = (payload) => {
         </div>
         {/* Category */}
         <div className="col-12">
-          <label className="form-label">Document Category</label>
+          <Label required> Document Category</Label>
           <select
             {...register("documentCategoryId")}
             className={`form-select form-select-sm`}
@@ -194,7 +195,15 @@ const onSubmit = (payload) => {
         </div>
 
         {/* Buttons */}
-        <div className="col-12 text-center">
+        <div className="d-flex flex-row justify-content-end gap-3 ">
+           <button
+            type="button"
+            className="btn btn-sm btn-label-secondary"
+            onClick={onClose}
+            disabled={creating || updating}
+          >
+            Cancel
+          </button>
           <button
             type="submit"
             className="btn btn-sm btn-primary me-3"
@@ -206,14 +215,7 @@ const onSubmit = (payload) => {
               ? "Update"
               : "Submit"}
           </button>
-          <button
+         
-            type="button"
-            className="btn btn-sm btn-secondary"
-            onClick={onClose}
-            disabled={creating || updating}
-          >
-            Cancel
-          </button>
         </div>
       </form>
     </FormProvider>

src/components/master/MasterModal.jsx

@@ -16,10 +16,10 @@ import ManageDocumentCategory from "./ManageDocumentCategory";
 import ManageDocumentType from "./ManageDocumentType";
 import ManageServices from "./Services/ManageServices";
 import ServiceGroups from "./Services/ServicesGroups";
+import ManagePaymentHead from "./paymentAdjustmentHead/ManagePaymentHead";
 
 const MasterModal = ({ modaldata, closeModal }) => {
   if (!modaldata?.modalType || modaldata.modalType === "delete") {
-  
     return null;
   }
 
@@ -58,18 +58,21 @@ const MasterModal = ({ modaldata, closeModal }) => {
     "Edit-Document Type": (
       <ManageDocumentType data={item} onClose={closeModal} />
     ),
-    "Services": (
+    Services: <ManageServices onClose={closeModal} />,
-      <ManageServices onClose={closeModal} />
+    "Edit-Services": <ManageServices data={item} onClose={closeModal} />,
-    ),
+    "Manage-Services": <ServiceGroups service={item} onClose={closeModal} />,
-    "Edit-Services": (
+    "Payment Adjustment Head": <ManagePaymentHead onClose={closeModal} />,
-      <ManageServices data={item} onClose={closeModal} />
+    "Edit-Payment Adjustment Head": <ManagePaymentHead data={item} onClose={closeModal} />
-    ),
-    "Manage-Services": (
-      <ServiceGroups service={item} onClose={closeModal}/>
-    ),
   };
 
-  return modalComponents[modalType] || null;
+  return (
+    <div className="p-2 p-md-1">
+      <div className="text-center">
+        <p className="fs-5 fw-semibold">{`${(masterType, " ", modalType)}`}</p>
+      </div>
+      {modalComponents[modalType] || null}
+    </div>
+  );
 };
 
 export default MasterModal;

src/components/master/Services/ServicesGroups.jsx

@@ -37,7 +37,6 @@ const ServiceGroups = ({ service }) => {
 
     <div className="w-100 my-2">
       
-      <p className="fs-5 fw-semibold">Manage Service</p>
       <div className="accordion" id="accordionExample">
         <div className="accordion-item active shadow-none">
           {/* Service Header */}
@@ -82,8 +81,8 @@ const ServiceGroups = ({ service }) => {
             ) : (
               <div className="accordion-body text-start m-0 p-0">
                 <div className="dropdown-divider border"></div>
-
+              {!isLoading && groups?.data?.length === 0 && (<div className="text-center py-2"><p>No Group available.</p></div>)}
-                {groups?.data?.map((group) => {
+                {groups && groups?.data?.map((group) => {
                   const isOpen = activeGroupId === group.id;
 
                   return (

src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Label from "../../common/Label";
+import { useCreatePaymentAjustmentHead, useUpdatePaymentAjustmentHead } from "../../../hooks/masterHook/useMaster";
+
+export const simpleFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string().min(1, "Description is required"),
+});
+
+const ManagePaymentHead = ({ data, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(simpleFormSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  });
+
+  const {mutate:CreateAjustmentHead,isPending} = useCreatePaymentAjustmentHead(()=>{
+  handleClose?.()
+  });
+  const {mutate:UpdateAjustmentHead,isPending:isUpdating} = useUpdatePaymentAjustmentHead(()=>{
+   handleClose?.()
+  })
+  const onSubmit = (formData) => {
+    if(data){
+        let id = data?.id;
+      const payload = {
+        ...formData,
+        id:id,
+      }
+      UpdateAjustmentHead({id:id,payload:payload})
+    }else{
+     let payload={
+        ...formData
+     }
+     CreateAjustmentHead(payload)
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+        description: data.description,
+      });
+    }
+  }, [data]);
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+  return (
+    <div className="row text-start">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-4">
+        <div className="mb-3">
+          <Label htmlFor="name" required>
+            Name
+          </Label>
+          <input
+            type="text"
+            {...register("name")}
+            className={`form-control ${errors.name ? "is-invalid" : ""}`}
+          />
+          {errors.name && (
+            <div className="invalid-feedback">{errors.name.message}</div>
+          )}
+        </div>
+
+        <div className="mb-3">
+          <Label htmlFor="description" required>
+            Description
+          </Label>
+          <textarea
+            {...register("description")}
+            className={`form-control ${errors.description ? "is-invalid" : ""}`}
+          />
+          {errors.description && (
+            <div className="invalid-feedback">{errors.description.message}</div>
+          )}
+        </div>
+
+        <div className="d-flex flex-row justify-content-end gap-2">
+          <button
+            className="btn btn-sm btn-label-secondary"
+            onClick={handleClose} disabled={isUpdating || isPending}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary" disabled={isUpdating || isPending}>
+            {isPending || isUpdating ? "Please Wait" :data ? "Update":"Submit"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ManagePaymentHead;

src/hooks/masterHook/useMaster.js

@@ -10,6 +10,14 @@ import {
 } from "@tanstack/react-query";
 import showToast from "../../services/toastService";
 
+export const usePaymentAjustmentHead = (isActive) => {
+ return useQuery({
+    queryKey: ["paymentType",isActive],
+    queryFn: async () =>  await MasterRespository.getPaymentAdjustmentHead(isActive),
+   
+  });
+};
+
 export const useServices = () => {
   return useQuery({
     queryKey: ["services"],
@@ -30,7 +38,6 @@ export const useActivitiesByGroups = (groupId) => {
     queryFn: async () => await MasterRespository.getActivitesByGroup(groupId),
 
     enabled: !!groupId,
-   
   });
 };
 export const useGlobalServices = () => {
@@ -296,6 +303,8 @@ const fetchMasterData = async (masterType) => {
       return (await MasterRespository.getDocumentTypes()).data;
     case "Document Category":
       return (await MasterRespository.getDocumentCategories()).data;
+    case "Payment Adjustment Head":
+      return (await MasterRespository.getPaymentAdjustmentHead(true)).data;
     case "Status":
       return [
         {
@@ -448,8 +457,6 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
   });
 };
 
-
-
 //-----Create work Category-------------------------------
 export const useCreateWorkCategory = (onSuccessCallback) => {
   const queryClient = useQueryClient();
@@ -570,7 +577,6 @@ export const useUpdateContactTag = (onSuccessCallback) => {
 
   return useMutation({
     mutationFn: async ({ id, payload }) => {
-      debugger;
       const response = await MasterRespository.updateContactTag(id, payload);
       return response.data;
     },
@@ -704,13 +710,11 @@ export const useCreateService = (onSuccessCallback) => {
 
   return useMutation({
     mutationFn: async (payload) => {
-      debugger;
       const resp = await MasterRespository.createService(payload);
-      debugger;
+
       return resp.data;
     },
     onSuccess: (data) => {
-      debugger;
       queryClient.invalidateQueries({ queryKey: ["masterData", "Services"] });
 
       showToast(data?.message || "Service added successfully", "success");
@@ -718,8 +722,12 @@ export const useCreateService = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data?.data);
     },
     onError: (error) => {
-      debugger;
+      showToast(
-      showToast( error?.response?.data?.message || error?.message  || "Something went wrong", "error");
+        error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong",
+        "error"
+      );
     },
   });
 };
@@ -742,7 +750,12 @@ export const useUpdateService = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
+      showToast(
+        error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong",
+        "error"
+      );
     },
   });
 };
@@ -759,16 +772,23 @@ export const useCreateActivityGroup = (onSuccessCallback) => {
       queryClient.invalidateQueries({
         queryKey: ["groups"],
       });
-  debugger
+
-      showToast( data?.message ||
+      showToast(
-        data?.response?.data?.message || "Activity Group created successfully.",
+        data?.message ||
+          data?.response?.data?.message ||
+          "Activity Group created successfully.",
         "success"
       );
 
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(error?.response?.data?.message || error?.message  || "Something went wrong", "error");
+      showToast(
+        error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong",
+        "error"
+      );
     },
   });
 };
@@ -776,8 +796,8 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({id,payload}) => {
+    mutationFn: async ({ id, payload }) => {
-      const response = await MasterRespository.updateActivityGrop(id,payload);
+      const response = await MasterRespository.updateActivityGrop(id, payload);
       return response;
     },
     onSuccess: (data, variables) => {
@@ -787,7 +807,8 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
 
       showToast(
         data?.message ||
-        data?.response?.data?.message|| "Activity Group Updated successfully.",
+          data?.response?.data?.message ||
+          "Activity Group Updated successfully.",
         "success"
       );
 
@@ -813,7 +834,12 @@ export const useCreateActivity = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
+      showToast(
+        error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong",
+        "error"
+      );
     },
   });
 };
@@ -835,7 +861,12 @@ export const useUpdateActivity = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
+      showToast(
+        error?.response?.data?.message ||
+          error?.message ||
+          "Something went wrong",
+        "error"
+      );
     },
   });
 };
@@ -969,7 +1000,52 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
     },
   });
 };
-// -Delete Master --------
+// ------------------------------x-x--------x-x------------------------------------
+
+// ==============================Payment Adjustment Head =============================
+export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) => {
+      const resp = await MasterRespository.createPaymentAjustmentHead(payload);
+      return resp.data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["masterData", "Payment Adjustment Head"],
+      });
+      showToast("Payment Ajustment Head successfully", "success");
+      if (onSuccessCallback) onSuccessCallback(data);
+    },
+    onError: (error) => {
+      showToast(error.message || "Something went wrong", "error");
+    },
+  });
+};
+export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, payload }) => {
+      const resp = await MasterRespository.updatePaymentAjustmentHead(id, payload);
+      return resp.data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["masterData", "Payment Adjustment Head"],
+      });
+      showToast("Payment Ajustment Head Updated successfully", "success");
+      if (onSuccessCallback) onSuccessCallback(data);
+    },
+    onError: (error) => {
+      showToast(error.message || "Something went wrong", "error");
+    },
+  });
+};
+// ====================x=x====================x=x==================================
+
+// --------Delete Master --------
 export const useDeleteMasterItem = () => {
   const queryClient = useQueryClient();
 
@@ -1002,14 +1078,12 @@ export const useDeleteMasterItem = () => {
   });
 };
 
-
+export const useDeleteServiceGroup = () => {
-export const useDeleteServiceGroup =()=>{
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (id)=>await MasterRespository.deleteActivityGroup(id),
+    mutationFn: async (id) => await MasterRespository.deleteActivityGroup(id),
-    onSuccess: ({_,variable}) => {
+    onSuccess: ({ _, variable }) => {
-    
       queryClient.invalidateQueries({ queryKey: ["groups"] });
 
       showToast(`Group deleted successfully.`, "success");
@@ -1023,15 +1097,13 @@ export const useDeleteServiceGroup =()=>{
       showToast(message, "error");
     },
   });
-}
+};
-export const useDeleteActivity =()=>{
+export const useDeleteActivity = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (id)=>await MasterRespository.deleteActivity(id),
+    mutationFn: async (id) => await MasterRespository.deleteActivity(id),
-    onSuccess: ({_,variable}) => {
+    onSuccess: ({ _, variable }) => {
-
-    
       queryClient.invalidateQueries({ queryKey: ["activties"] });
 
       showToast(`Acivity deleted successfully.`, "success");
@@ -1045,4 +1117,4 @@ export const useDeleteActivity =()=>{
       showToast(message, "error");
     },
   });
-}
+};

src/hooks/useAttendance.js

@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
-import { cacheData, getCachedData, useSelectedProject } from "../slices/apiDataManager";
+import {
+  cacheData,
+  getCachedData,
+  useSelectedProject,
+} from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import showToast from "../services/toastService";
@@ -7,11 +11,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { store } from "../store/store";
 import { setDefaultDateRange } from "../slices/localVariablesSlice";
 
-
-
 // ----------------------------Query-----------------------------
 
-
 // export const useAttendance = (projectId) => {
 //   const dispatch = useDispatch()
 //   const {
@@ -41,7 +42,10 @@ import { setDefaultDateRange } from "../slices/localVariablesSlice";
 //   };
 // };
 
-export const useAttendance = (projectId, organizationId, includeInactive = false, date = null) => {
+export const useAttendance = (
+  projectId,
+  organizationId,
+) => {
   const dispatch = useDispatch();
 
   const {
@@ -51,13 +55,11 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
     refetch: recall,
     isFetching,
   } = useQuery({
-    queryKey: ["attendance", projectId, organizationId, includeInactive, date], // include filters in cache key
+    queryKey: ["attendance", projectId, organizationId], // include filters in cache key
     queryFn: async () => {
       const response = await AttendanceRepository.getAttendance(
         projectId,
         organizationId,
-        includeInactive,
-        date
       );
       return response.data;
     },
@@ -70,12 +72,17 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
   return { attendance, loading, error, recall, isFetching };
 };
 
-export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) => {
+export const useAttendancesLogs = (
+  projectId,
+  fromDate,
+  toDate,
+  organizationId
+) => {
   const dispatch = useDispatch();
   const enabled = !!projectId && !!fromDate && !!toDate;
 
   const query = useQuery({
-    queryKey: ['attendanceLogs', projectId, fromDate, toDate,organizationId],
+    queryKey: ["attendanceLogs", projectId, fromDate, toDate, organizationId],
     queryFn: async () => {
       const res = await AttendanceRepository.getAttendanceFilteredByDate(
         projectId,
@@ -101,8 +108,6 @@ export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) =
   return query;
 };
 
-
-
 export const useEmployeeAttendacesLog = (id) => {
   const {
     data: logs = [],
@@ -117,7 +122,10 @@ export const useEmployeeAttendacesLog = (id) => {
     },
     enabled: !!id,
     onError: (error) => {
-      showToast(error.message || "Error while fetching Attendance Logs", "error");
+      showToast(
+        error.message || "Error while fetching Attendance Logs",
+        "error"
+      );
     },
   });
 
@@ -135,40 +143,22 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
   return useQuery({
     queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
     queryFn: async () => {
-      const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
+      const res = await AttendanceRepository.getAttendanceByEmployee(
+        employeeId,
+        fromDate,
+        toDate
+      );
       return res.data;
     },
-    enabled: !!fromDate && !! toDate,
+    enabled,
   });
 };
 
-// export const useRegularizationRequests = (projectId) => {
+export const useRegularizationRequests = (
-//   const {
+  projectId,
-//     data: regularizes = [],
+  organizationId,
-//     isLoading: loading,
+  IncludeInActive = false
-//     error,
+) => {
-//     refetch,
-//   } = useQuery({
-//     queryKey: ["regularizedList", projectId],
-//     queryFn: async () => {
-//       const response = await AttendanceRepository.getRegularizeList(projectId);
-//       return response.data;
-//     },
-//     enabled: !!projectId,
-//     onError: (error) => {
-//       showToast(error.message || "Error while fetching Regularization Requests", "error");
-//     },
-//   });
-
-//   return {
-//     regularizes,
-//     loading,
-//     error,
-//     refetch,
-//   };
-// };
-
-export const useRegularizationRequests = (projectId, organizationId, IncludeInActive = false) => {
   const dispatch = useDispatch();
 
   const {
@@ -183,7 +173,7 @@ export const useRegularizationRequests = (projectId, organizationId, IncludeInAc
       const response = await AttendanceRepository.getRegularizeList(
         projectId,
         organizationId,
-        IncludeInActive,      
+        IncludeInActive
       );
       return response.data;
     },
@@ -196,48 +186,60 @@ export const useRegularizationRequests = (projectId, organizationId, IncludeInAc
   return { regularizes, loading, error, recall, isFetching };
 };
 
-
 // -------------------Mutation--------------------------------------
 
 export const useMarkAttendance = () => {
   const queryClient = useQueryClient();
   const selectedProject = useSelectedProject();
-  const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)
+  const selectedDateRange = useSelector(
+    (store) => store.localVariables.attendance.defaultDateRange
+  );
+  const selectedOrganization = useSelector(
+    (store) => store.localVariables.attendance.SelectedOrg 
+  );
 
   return useMutation({
-    mutationFn: async ({payload,forWhichTab}) => {
+    mutationFn: async ({ payload, forWhichTab }) => {
       const res = await AttendanceRepository.markAttendance(payload);
       return res.data;
     },
 
-    onSuccess: (data,variables) => {
+    onSuccess: (data, variables) => {
-      if(variables.forWhichTab == 1){
+      if (variables.forWhichTab == 1) {
-      queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
+        queryClient.setQueryData(["attendance", selectedProject,selectedOrganization], (oldData) => {
           if (!oldData) return oldData;
           return oldData.map((emp) =>
             emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
           );
         });
-    }else if(variables.forWhichTab == 2){
+      } else if (variables.forWhichTab == 2) {
-    //   queryClient.invalidateQueries({
+        queryClient.setQueryData(
-    //     queryKey: ["attendanceLogs"], 
+          [
-    //  });
+            "attendanceLogs",
-     queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
+            selectedProject,
+            selectedDateRange.startDate,
+            selectedDateRange.endDate,selectedOrganization
+          ],
+          (oldData) => {
             if (!oldData) return oldData;
             return oldData.map((record) =>
               record.id === data.id ? { ...record, ...data } : record
             );
-      });
+          }
-       queryClient.invalidateQueries({queryKey:["regularizedList"]})
+        );
-    }else(
+        queryClient.invalidateQueries({ queryKey: ["regularizedList"] });
-       queryClient.setQueryData(["regularizedList",selectedProject], (oldData) => {
+      } else
+        queryClient.setQueryData(
+          ["regularizedList", selectedProject],
+          (oldData) => {
             if (!oldData) return oldData;
-        return oldData.filter((record) => record.id !== data.id)
+            return oldData.filter((record) => record.id !== data.id);
-      }),
+          }
-      queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+        ),
-    )
+          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
 
-     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
+      if (variables.forWhichTab !== 3)
+        showToast("Attendance marked successfully", "success");
     },
     onError: (error) => {
       showToast(error.message || "Failed to mark attendance", "error");

src/hooks/useAuth.jsx

@@ -10,9 +10,40 @@ import AuthRepository from "../repositories/AuthRepository.jsx";
 import { useDispatch, useSelector } from "react-redux";
 import {
   closeAuthModal,
+  closeModal,
   openAuthModal,
+  openModal,
+  toggleModal,
 } from "../slices/localVariablesSlice.jsx";
 import { removeSession } from "../utils/authUtils.js";
+import { cacheProfileData } from "../slices/apiDataManager.jsx";
+
+// ----------------------------Modal--------------------------
+
+export const useModal = (modalType) => {
+  const dispatch = useDispatch();
+  const isOpen = useSelector(
+    (state) => state.localVariables.modals[modalType]?.isOpen
+  );
+
+  const onOpen = (data = {}) => dispatch(openModal({ modalType, data }));
+  const onClose = () => dispatch(closeModal({ modalType }));
+  const onToggle = () => dispatch(toggleModal({ modalType }));
+
+  return { isOpen, onOpen, onClose, onToggle };
+};
+export const useSubscription = (frequency) => {
+  return useQuery({
+    queryKey: ["subscriptionPlans", frequency],
+    queryFn: async () => {
+      debugger
+      const resp = await AuthRepository.getSubscription(frequency);
+      return resp.data;
+    },
+  });
+};
+
+// -------------------APIHook-------------------------------------
 
 export const useTenants = () => {
   return useQuery({
@@ -62,26 +93,34 @@ export const useAuthModal = () => {
   };
 };
 
-
 export const useLogout = () => {
   const queryClient = useQueryClient();
+  const naviget = useNavigate();
+  const dispatch = useDispatch();
 
   return useMutation({
     mutationFn: async () => {
-      let payload = { refreshToken: localStorage.getItem("refreshToken") || sessionStorage.getItem("refreshToken") };
+      let payload = {
+        refreshToken:
+          localStorage.getItem("refreshToken") ||
+          sessionStorage.getItem("refreshToken"),
+      };
       return await AuthRepository.logout(payload);
     },
 
     onSuccess: (data) => {
-      removeSession()
+      queryClient.clear();
+      removeSession();
+      dispatch(cacheProfileData(null));
 
-      window.location.href = "/auth/login";
+      // window.location.href = "/auth/login";
+      naviget("/auth/login", { replace: true });
       if (onSuccessCallBack) onSuccessCallBack();
     },
 
     onError: (error) => {
       showToast(error.message || "Error while creating project", "error");
-      removeSession()
+      removeSession();
     },
   });
 };

src/hooks/useCollections.jsx

@@ -0,0 +1,152 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CollectionRepository } from "../repositories/ColllectionRepository";
+import showToast from "../services/toastService";
+
+export const useCollections = (
+  pageSize,
+  pageNumber,
+  fromDate,
+  toDate,
+  isPending,
+  isActive,
+  projectId,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "collections",
+      pageSize,
+      pageNumber,
+      fromDate,
+      toDate,
+      isPending,
+      isActive,
+      projectId,
+      searchString,
+    ],
+
+    queryFn: async () => {
+      const response = await CollectionRepository.getCollections(
+        pageSize,
+        pageNumber,
+        fromDate,
+        toDate,
+        isPending,
+        isActive,
+        projectId,
+        searchString
+      );
+      return response.data;
+    },
+
+    keepPreviousData: true,
+    staleTime: 1000 * 60 * 1,
+  });
+};
+
+
+export const useCollection =(collectionId)=>{
+  return useQuery({
+    queryKey:["collection",collectionId],
+    queryFn:async()=> {
+      const resp = await CollectionRepository.getCollection(collectionId);
+      return resp.data
+    },
+    enabled:!!collectionId
+  })
+}
+
+
+// =========================Mutation======================
+
+export const useCreateCollection = (onSuccessCallBack) => {
+  const clinent = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) =>
+      await CollectionRepository.createNewCollection(payload),
+    onSuccess: (_, variables) => {
+      showToast("New Collection created Successfully", "success");
+      clinent.invalidateQueries({ queryKey: ["collections"] });
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};
+
+export const useMarkedPaymentReceived = (onSuccessCallBack) => {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) =>
+      await CollectionRepository.markPaymentReceived(payload),
+    onSuccess: async () => {
+      client.invalidateQueries({ queryKey: ["collections"] });
+      showToast("Payment Received marked Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};
+
+export const useAddPayment = (onSuccessCallBack) => {
+  const client = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload) => CollectionRepository.makeReceivePayment(payload),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["collections"] });
+      client.invalidateQueries({ queryKey: ["collection"] });
+      showToast("Payment Received marked Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};
+
+export const useAddComment = (onSuccessCallBack) => {
+  const client = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload) => CollectionRepository.addComment(payload),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["collections"] });
+      client.invalidateQueries({ queryKey: ["collection"] });
+      showToast("Comment Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};
+
+export const useUpdateCollection =(onSuccessCallBack)=>{
+   const client = useQueryClient();
+  return useMutation({
+    mutationFn:async({collectionId,payload})=> await CollectionRepository.updateCollection(collectionId,payload),
+     onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["collections"] });
+      client.invalidateQueries({ queryKey: ["collection"] });
+      showToast("Collection Updated Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message || error.message || "Something Went wrong"
+      );
+    },
+  })
+}

src/hooks/useDirectory.js

@@ -548,6 +548,7 @@ export const useUpdateNote = (onSuccessCallBack) => {
     mutationFn: async ({ noteId, notePayload }) =>
       await DirectoryRepository.UpdateNote(noteId, notePayload),
     onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["Contact"] });
       queryClient.invalidateQueries({ queryKey: ["Notes"] });
       queryClient.invalidateQueries({ queryKey: ["ContactNotes"] });
       showToast("Note updated Successfully", "success");

src/hooks/useEmployees.js

@@ -15,10 +15,10 @@ export const useEmployee = (employeeId) => {
   return useQuery({
     queryKey: ["employeeProfile", employeeId],
     queryFn: async () => {
-      const res = await EmployeeRepository.getEmployeeProfile(employeeId)
+      const res = await EmployeeRepository.getEmployeeProfile(employeeId);
       return res.data;
     },
-    enabled:!!employeeId
+    enabled: !!employeeId,
   });
 };
 
@@ -137,7 +137,6 @@ export const useEmployeesAllOrByProjectId = (
       return res.data;
     }
   };
-
   const {
     data: employees = [],
     isLoading,
@@ -158,6 +157,18 @@ export const useEmployeesAllOrByProjectId = (
   };
 };
 
+// New Employee get list by CureentOrganization
+
+export const useEmployeesByOrganization = (showInactive) => {
+  return useQuery({
+    queryKey: ["employeesByOrganization", showInactive],
+    queryFn: async () => {
+      const res = await EmployeeRepository.getAllEmployeeList(showInactive);
+      return res.data;
+    },
+  });
+};
+
 //  ManageEmployee.jsx
 export const useEmployeeProfile = (employeeId) => {
   const isEnabled = !!employeeId;
@@ -184,11 +195,11 @@ export const useEmployeeProfile = (employeeId) => {
   };
 };
 
-export const useEmployeesName = (projectId, search) => {
+export const useEmployeesName = (projectId, search, allEmployee) => {
   return useQuery({
-    queryKey: ["employees", projectId, search],
+    queryKey: ["employees", projectId, search, allEmployee],
     queryFn: async () =>
-      await EmployeeRepository.getEmployeeName(projectId, search),
+      await EmployeeRepository.getEmployeeName(projectId, search, allEmployee),
 
     staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
   });
@@ -208,9 +219,6 @@ export const useEmployeesNameByProject = (projectId) => {
 
 // Mutation------------------------------------------------------------------
 
-
-
-
 export const useUpdateEmployee = () => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -225,7 +233,7 @@ export const useUpdateEmployee = () => {
       const isAllEmployee = variables.IsAllEmployee;
 
       // Cache invalidation
-      queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
+      queryClient.invalidateQueries({ queryKey: ["employeeProfile", id] });
       queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
       // queryClient.invalidateQueries(['employeeProfile', id]);
       queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
@@ -247,7 +255,6 @@ export const useUpdateEmployee = () => {
   });
 };
 
-
 export const useSuspendEmployee = ({
   setIsDeleteModalOpen,
   setemployeeLodaing,
@@ -300,7 +307,6 @@ export const useSuspendEmployee = ({
   });
 };
 
-
 export const useUpdateEmployeeRoles = ({
   onClose,
   resetForm,

src/hooks/useImageGallery.js

@@ -1,116 +1,52 @@
 import { useState, useCallback } from "react";
 // import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
-import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
+import { ImageGalleryRepository } from "../repositories/ImageGalleryAPI";
-
-// const PAGE_SIZE = 10;
-
-// const useImageGallery = (selectedProjectId) => {
-//   const [images, setImages] = useState([]);
-//   const [allImagesData, setAllImagesData] = useState([]);
-//   const [pageNumber, setPageNumber] = useState(1);
-//   const [hasMore, setHasMore] = useState(true);
-//   const [loading, setLoading] = useState(false);
-//   const [loadingMore, setLoadingMore] = useState(false);
-
-//   const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
-//     if (!selectedProjectId) return;
-
-//     try {
-//       if (page === 1) {
-//         setLoading(true);
-//       } else {
-//         setLoadingMore(true);
-//       }
-
-//       const res = await ImageGalleryAPI.ImagesGet(
-//         selectedProjectId,
-//         filters,
-//         page,
-//         PAGE_SIZE
-//       );
-
-//       const newBatches = res.data || [];
-//       const receivedCount = newBatches.length;
-
-//       setImages((prev) => {
-//         if (page === 1 || reset) return newBatches;
-//         const uniqueNew = newBatches.filter(
-//           (batch) => !prev.some((b) => b.batchId === batch.batchId)
-//         );
-//         return [...prev, ...uniqueNew];
-//       });
-
-//       setAllImagesData((prev) => {
-//         if (page === 1 || reset) return newBatches;
-//         const uniqueAll = newBatches.filter(
-//           (batch) => !prev.some((b) => b.batchId === batch.batchId)
-//         );
-//         return [...prev, ...uniqueAll];
-//       });
-
-//       setHasMore(receivedCount === PAGE_SIZE);
-//     } catch (error) {
-//       console.error("Error fetching images:", error);
-//       if (page === 1) {
-//         setImages([]);
-//         setAllImagesData([]);
-//       }
-//       setHasMore(false);
-//     } finally {
-//       setLoading(false);
-//       setLoadingMore(false);
-//     }
-//   }, [selectedProjectId]);
-
-//   const resetGallery = useCallback(() => {
-//     setImages([]);
-//     setAllImagesData([]);
-//     setPageNumber(1);
-//     setHasMore(true);
-//   }, []);
-
-//   return {
-//     images,
-//     allImagesData,
-//     pageNumber,
-//     setPageNumber,
-//     hasMore,
-//     loading,
-//     loadingMore,
-//     fetchImages,
-//     resetGallery,
-//   };
-// };
-
-// export default useImageGallery;
-import { useInfiniteQuery } from "@tanstack/react-query";
 
 
-const PAGE_SIZE = 10;
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 
-const useImageGallery = (selectedProjectId, filters) => {
-  const hasFilters = filters && Object.values(filters).some(
-    value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
-  );
 
-  return useInfiniteQuery({
+const cleanFilter = (filter) => {
-    queryKey: ["imageGallery", selectedProjectId, hasFilters ? filters : null],
+  const cleaned = { ...filter };
+
+  ["buildingIds", "floorIds", "workAreaIds", "activityIds","workCategoryIds","uploadedByIds","serviceIds"].forEach((key) => {
+    if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
+      delete cleaned[key];
+    }
+  });
+  return cleaned;
+};;
+
+const useImageGallery = (selectedProjectId,pageNumber, pageSize, filters) => {
+ 
+  return useQuery({
+    queryKey: ["imageGallery", selectedProjectId, pageNumber, pageSize,filters],
     enabled: !!selectedProjectId,
-    getNextPageParam: (lastPage, allPages) => {
+  
-      if (!lastPage?.data?.length) return undefined;
+    queryFn: async () => {
-      return allPages.length + 1;
+       const cleanedFilter =  cleanFilter(filters)
-    },
+      const res = await ImageGalleryRepository.ImagesGet(
-    queryFn: async ({ pageParam = 1 }) => {
-      const res = await ImageGalleryAPI.ImagesGet(
         selectedProjectId,
-        hasFilters ? filters : undefined,
+        pageNumber,
-        pageParam,
+        pageSize,
-        PAGE_SIZE
+        cleanedFilter
       );
-      return res;
+      return res.data;
     },
   });
 };
 
 export default useImageGallery;
 
+
+
+export const useImageGalleryFilter  = (project)=>{
+  return useQuery({
+    queryKey:["imageGalleryFlter",project],
+    queryFn:async() => {
+      const response = await ImageGalleryRepository.getImageGalleryFilter(project);
+      return response.data;
+    },
+  })
+}
+

src/hooks/useOrganization.js

@@ -24,7 +24,7 @@ export const useOrganizationModal = () => {
       dispatch(
         openOrgModal({
           isOpen: true,
-          orgData: options.orgData ?? orgData ?? null,
+          orgData: options.hasOwnProperty("orgData") ? options.orgData : orgData,
           startStep: options.startStep ?? startStep ?? 1,
           prevStep: options.prevStep ?? prevStep ?? 1,
           flowType: options.flowType ?? flowType ?? "default",
@@ -139,7 +139,11 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
         queryKey: ["projectAssignedOrganiztions"],
       });
          useClient.invalidateQueries({
-        queryKey: ["projectAssignedOrganization", projectId],
+        queryKey: ["projectAssignedOrganiztionsName"],
+      });
+     
+      useClient.invalidateQueries({
+        queryKey: ["projectAssignedServices", projectId],
       });
       showToast("Organization  successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
@@ -181,6 +185,8 @@ export const useUpdateOrganization = (onSuccessCallback) => {
       await OrganizationRepository.updateOrganizaion(orgId,payload),
     onSuccess: (_, variables) => {
       useClient.invalidateQueries({ queryKey: ["organizationList"] });
+      useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] });
+       
       showToast("Organization Updated successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },

src/hooks/useProjectAccess.js

@@ -14,7 +14,6 @@ export const useProjectAccess = (projectId) => {
   const canView = useHasUserPermission(VIEW_PROJECTS); 
 
   const loading = isLoading || !isFetched;
-
   useEffect(() => {
     if (projectId && !loading && !canView) {
       showToast("You don't have permission to view project details", "warning");

src/hooks/useProjects.js

@@ -153,7 +153,7 @@ export const useProjectsAllocationByEmployee = (employeeId) => {
   return { projectList, loading: isLoading, error, refetch };
 };
 
-export const useProjectName = () => {
+export const useProjectName = (provideAll=false) => {
   const {
     data = [],
     isLoading,
@@ -161,9 +161,9 @@ export const useProjectName = () => {
     refetch,
     isError,
   } = useQuery({
-    queryKey: ["basicProjectNameList"],
+    queryKey: ["basicProjectNameList",provideAll],
     queryFn: async () => {
-      const res = await ProjectRepository.projectNameList();
+      const res = await ProjectRepository.projectNameList(provideAll);
       return res.data || res;
     },
     onError: (error) => {
@@ -294,9 +294,21 @@ export const useProjectAssignedOrganizations = (projectId) => {
     enabled: !!projectId,
   });
 };
+export const useProjectAssignedOrganizationsName = (projectId) => {
+  return useQuery({
+    queryKey: ["projectAssignedOrganiztionsName", projectId],
+    queryFn: async () => {
+      const resp = await ProjectRepository.getProjectAssignedOrganizationsName(
+        projectId
+      );
+      return resp.data;
+    },
+    enabled: !!projectId,
+  });
+};
 export const useProjectAssignedServices = (projectId) => {
   return useQuery({
-    queryKey: ["projectAssignedOrganization", projectId],
+    queryKey: ["projectAssignedServices", projectId],
     queryFn: async () => {
       const resp = await ProjectRepository.getProjectAssignedServices(
         projectId
@@ -325,7 +337,7 @@ export const useEmployeeForTaskAssign = (
 
 // -- -------------Mutation-------------------------------
 
-export const useCreateProject = ({ onSuccessCallback }) => {
+export const useCreateProject = ( onSuccessCallback ) => {
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -429,6 +441,7 @@ export const useManageProjectAllocation = ({
         queryKey: ["empListByProjectAllocated"],
       });
       queryClient.removeQueries({ queryKey: ["projectEmployees"] });
+      queryClient.removeQueries({ queryKey: ["EmployeeForTaskAssign"] });
       if (variables.actionType === "assign") {
         showToast("Employee Assigned Successfully", "success");
       } else {

src/hooks/useTasks.js

@@ -8,11 +8,30 @@ import { useSelector } from "react-redux";
 
 // ---------Query---------------------------------
 
-export const useTaskList = (projectId, pageSize, pageNumber, serviceId, filter) => {
 
+
+const cleanFilter = (filter) => {
+  const cleaned = { ...filter };
+
+  ["buildingIds", "floorIds", "activityIds"].forEach((key) => {
+    if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
+      delete cleaned[key];
+    }
+  });
+  return cleaned;
+};
+
+export const useTaskList = (
+  projectId,
+  pageSize,
+  pageNumber,
+  serviceId,
+  filter
+) => {
   return useQuery({
     queryKey: ["taskList", projectId, pageSize, pageNumber, serviceId, filter],
     queryFn: async () => {
+      const cleanedFilter  = cleanFilter(filter)
       const response = await TasksRepository.getTaskList(
         projectId,
         pageSize,
@@ -22,10 +41,20 @@ export const useTaskList = (projectId, pageSize, pageNumber, serviceId, filter)
       );
       return response.data;
     },
-    enabled:!!projectId
+    enabled: !!projectId,
   });
 };
 
+export const useTaskFilter = (projectId) => {
+  return useQuery({
+    queryKey: ["taskFilter", projectId],
+    queryFn: async () => {
+      const resp = await TasksRepository.getTaskListFilter(projectId);
+      return resp.data;
+    },
+    enabled:!!projectId
+  });
+};
 
 export const useTaskById = (TaskId) => {
   const {

src/main.tsx

@@ -5,19 +5,13 @@ import App from './App.tsx'
 
 import { Provider } from 'react-redux';
 import { store } from './store/store';
-import { ChangePasswordProvider } from './components/Context/ChangePasswordContext.jsx';
-import { ModalProvider1 } from './pages/Gallary/ModalContext.jsx';
 
 
 createRoot(document.getElementById('root')!).render(
   // <StrictMode>
     // <MasterDataProvider>
   <Provider store={ store }>
-      <ChangePasswordProvider >
-         <ModalProvider1>
      <App />
-     </ModalProvider1>
-     </ChangePasswordProvider>
     </Provider>
 
  // </StrictMode>,

src/pages/Activities/AttendancePage.jsx

@@ -12,11 +12,14 @@ import Attendance from "../../components/Activities/Attendance";
 import Regularization from "../../components/Activities/Regularization";
 import { useAttendance } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
+import { setOrganization, setProjectId } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
-import { useProjectAssignedOrganizations, useProjectName } from "../../hooks/useProjects";
+import {
+  useProjectAssignedOrganizationsName,
+  useProjectName,
+} from "../../hooks/useProjects";
 import GlobalModel from "../../components/common/GlobalModel";
 import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
 import AttendLogs from "../../components/Activities/AttendLogs";
@@ -44,7 +47,7 @@ const AttendancePage = () => {
   });
 
   const { data: organizations = [], isLoading: orgLoading } =
-    useProjectAssignedOrganizations(selectedProject);
+    useProjectAssignedOrganizationsName(selectedProject);
 
   const [formData, setFormData] = useState({
     markTime: "",
@@ -56,7 +59,8 @@ const AttendancePage = () => {
     if (selectedProject == null) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
-  }, []);
+    dispatch(setOrganization(appliedFilters?.selectedOrganization))
+  }, [appliedFilters?.selectedOrganization]);
 
   const getRole = (roleId) => {
     if (!empRoles) return "Unassigned";
@@ -127,14 +131,15 @@ const AttendancePage = () => {
         <div className="nav-align-top nav-tabs-shadow ">
           {/* Tabs */}
           <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
-            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
+            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
               {/* Tabs */}
               <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">
                   <li className="nav-item">
                     <button
                       type="button"
-                      className={`nav-link ${activeTab === "all" ? "active" : ""
+                      className={`nav-link ${
+                        activeTab === "all" ? "active" : ""
                       } fs-6`}
                       onClick={() => handleTabChange("all")}
                       data-bs-toggle="tab"
@@ -146,7 +151,8 @@ const AttendancePage = () => {
                   <li className="nav-item">
                     <button
                       type="button"
-                      className={`nav-link ${activeTab === "logs" ? "active" : ""
+                      className={`nav-link ${
+                        activeTab === "logs" ? "active" : ""
                       } fs-6`}
                       onClick={() => handleTabChange("logs")}
                       data-bs-toggle="tab"
@@ -159,7 +165,8 @@ const AttendancePage = () => {
                   <li className={`nav-item ${!DoRegularized ? "d-none" : ""}`}>
                     <button
                       type="button"
-                      className={`nav-link ${activeTab === "regularization" ? "active" : ""
+                      className={`nav-link ${
+                        activeTab === "regularization" ? "active" : ""
                       } fs-6`}
                       onClick={() => handleTabChange("regularization")}
                       data-bs-toggle="tab"
@@ -174,9 +181,10 @@ const AttendancePage = () => {
               {/* Search + Organization filter */}
               <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
                 {/* Organization Dropdown */}
+                <div className="row">
+                  <div className="col-12 col-sm-6 mb-2 mb-sm-0">
                      <select
                   className="form-select form-select-sm"
-                  style={{ minWidth: "180px" }}
                   value={appliedFilters.selectedOrganization}
                   onChange={(e) =>
                     setAppliedFilters((prev) => ({
@@ -187,13 +195,14 @@ const AttendancePage = () => {
                   disabled={orgLoading}
                 >
                   <option value="">All Organizations</option>
-                  {organizations?.map((org) => (
+                  {organizations?.map((org, ind) => (
-                    <option key={org.id} value={org.id}>
+                    <option key={`${org.id}-${ind}`} value={org.id}>
                       {org.name}
                     </option>
                   ))}
                 </select>
-
+                  </div>
+                  <div className="col-12 col-sm-6">
                     {/* Search Input */}
                 <input
                   type="text"
@@ -201,11 +210,13 @@ const AttendancePage = () => {
                   placeholder="Search Employee..."
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
-                  style={{ minWidth: "200px" }}
                 />
                   </div>
+                </div>
                
 
+                
+              </div>
             </div>
           </div>
 

src/pages/DailyProgressReport/DailyProgrssReport.jsx

@@ -7,6 +7,9 @@ import ReportTaskComments from "../../components/Activities/ReportTaskComments";
 import ReportTask from "../../components/Activities/ReportTask";
 import TaskReportFilterPanel from "../../components/DailyProgressRport/TaskReportFilterPanel";
 import { useFab } from "../../Context/FabContext";
+import SubTask from "../../components/Activities/SubTask";
+import { useProjectAssignedServices } from "../../hooks/useProjects";
+import { useSelectedProject } from "../../slices/apiDataManager";
 
 const DailyProgrssContext = createContext();
 export const useDailyProgrssContext = () => {
@@ -20,10 +23,11 @@ export const useDailyProgrssContext = () => {
 };
 
 const DailyProgrssReport = () => {
+  const  selectedProject =  useSelectedProject()
   const [service, setService] = useState("");
   const [filter,setFilter] = useState('')
   const { setOffcanvasContent, setShowTrigger } = useFab();
-  const { data, isLoading, isError, error } = useServices();
+  const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
 
   const [modal, setModal] = useState({ type: null, data: null });
 
@@ -85,7 +89,7 @@ const DailyProgrssReport = () => {
         />
 
         <div className="card card-fullscreen p-5">
-          <div className="col-sm-4 col-md-3 col-12">
+            {data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
             <select
               className="form-select form-select-sm"
               value={service ?? ""}
@@ -98,7 +102,7 @@ const DailyProgrssReport = () => {
                   <option value="">
                     All Services
                   </option>
-                  {data?.data?.map((service) => (
+                  {data?.map((service) => (
                     <option key={service.id} value={service.id}>
                       {service.name}
                     </option>
@@ -106,7 +110,7 @@ const DailyProgrssReport = () => {
                 </>
               )}
             </select>
-          </div>
+          </div>)}
           <div>
             <TaskReportList />
           </div>

src/pages/Directory/ContactFilterPanel.jsx

@@ -60,12 +60,12 @@ const ContactFilterPanel = ({ onApply, clearFilter }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={handleClose}
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs">
+          <button type="submit" className="btn btn-primary btn-sm">
             Apply
           </button>
         </div>

src/pages/Directory/DirectoryPage.jsx

@@ -162,10 +162,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 </ul>
               </div>
 
-              <div className="mb-1 px-2 py-3">
+              <div className="mb-1 px-md-2 px-0 py-3">
-                <div className="d-flex align-items-center justify-content-between">
+                <div className="row">
-                  <div className="d-flex align-items-center gap-3">
+                  <div className="col-12 col-md-10 mb-2">
                     {activeTab === "notes" && (
+                      <div className="col-8 col-md-3">
                         <input
                         type="search"
                         className="form-control form-control-sm"
@@ -173,11 +174,13 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         value={searchNote}
                         onChange={(e) => setSearchNote(e.target.value)}
                       />
+                      </div>
                     )}
 
                     {activeTab === "contacts" && (
                       <div className="d-flex align-items-center gap-3">
-                        <div className="d-flex gap-2 align-items-center">
+                        <div className="col-12 col-md-8 d-flex flex-row gap-2">
+                         <div className="col-7 col-md-4">
                            <input
                             type="search"
                             className="form-control form-control-sm"
@@ -185,6 +188,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                             value={searchContact}
                             onChange={(e) => setsearchContact(e.target.value)}
                           />
+                         </div>
                           <button
                             className={`btn btn-sm p-1 ${
                               !gridView ? "btn-primary" : "btn-outline-primary"
@@ -202,9 +206,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           >
                             <i className="bx bx-grid-alt"></i>
                           </button>
-                        </div>
+                          <div className="form-check form-switch d-flex align-items-center d-none d-md-flex">
-
-                        <div className="form-check form-switch d-flex align-items-center">
                           <input
                             type="checkbox"
                             className="form-check-input"
@@ -221,10 +223,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           </label>
                         </div>
                         </div>
+
+                        
+                      </div>
                     )}
                   </div>
-
+                   <div className="col-12 col-md-2 d-flex justify-content-end align-items-center gap-2">
-                  <div className="btn-group">
+                    <div className={`form-check form-switch d-flex align-items-center  ${activeTab === "contacts" ? " d-flex d-md-none m-0":"d-none" }`}>
+                          <input
+                            type="checkbox"
+                            className="form-check-input"
+                            role="switch"
+                            id="inactiveEmployeesCheckbox"
+                            checked={showActive}
+                            onChange={(e) => setShowActive(e.target.checked)}
+                          />
+                          <label
+                            className="form-check-label ms-2"
+                            htmlFor="inactiveEmployeesCheckbox"
+                          >
+                            {showActive ? "Active" : "Inactive"} Contacts
+                          </label>
+                        </div>
+                        <div className="  btn-group">
                     <button
                       className="btn btn-sm btn-label-secondary dropdown-toggle"
                       type="button"
@@ -245,6 +266,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                     </ul>
                   </div>
                    </div>
+                  
+                </div>
               </div>
             </div>
           </div>

src/pages/Directory/NoteFilterPanel.jsx

@@ -60,12 +60,12 @@ const NoteFilterPanel = ({ onApply, clearFilter }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={handleClose}
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs">
+          <button type="submit" className="btn btn-primary btn-sm">
             Apply
           </button>
         </div>

src/pages/Gallary/ImageGallary.jsx

@@ -1,499 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import "./ImageGallery.css";
-import moment from "moment";
-import { useDispatch, useSelector } from "react-redux";
-import { useModal } from "./ModalContext";
-import ImagePop from "./ImagePop";
-import Avatar from "../../components/common/Avatar";
-import DateRangePicker from "../../components/common/DateRangePicker";
-import eventBus from "../../services/eventBus";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import useImageGallery from "../../hooks/useImageGallery";
-import { useProjectName } from "../../hooks/useProjects";
-import { setProjectId } from "../../slices/localVariablesSlice";
-
-const SCROLL_THRESHOLD = 5;
-
-const ImageGallery = () => {
-  const selectedProjectId = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const dispatch = useDispatch();
-  const { projectNames } = useProjectName();
-
-  // Auto-select a project on mount
-  useEffect(() => {
-    if (!selectedProjectId && projectNames?.length) {
-      dispatch(setProjectId(projectNames[0].id));
-    }
-  }, [selectedProjectId, projectNames, dispatch]);
-
-  // Filter states
-  const [selectedFilters, setSelectedFilters] = useState({
-    building: [],
-    floor: [],
-    activity: [],
-    uploadedBy: [],
-    workCategory: [],
-    workArea: [],
-    startDate: "",
-    endDate: "",
-  });
-  const [appliedFilters, setAppliedFilters] = useState({
-    buildingIds: null,
-    floorIds: null,
-    activityIds: null,
-    uploadedByIds: null,
-    workCategoryIds: null,
-    workAreaIds: null,
-    startDate: null,
-    endDate: null,
-  });
-  const [collapsedFilters, setCollapsedFilters] = useState({
-    dateRange: false,
-    building: false,
-    floor: false,
-    activity: false,
-    uploadedBy: false,
-    workCategory: false,
-    workArea: false,
-  });
-  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
-  const [hoveredImage, setHoveredImage] = useState(null);
-
-  const imageGroupRefs = useRef({});
-  const loaderRef = useRef(null);
-  const filterPanelRef = useRef(null);
-  const filterButtonRef = useRef(null);
-  const { openModal } = useModal();
-
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isFetchingNextPage,
-    refetch,
-  } = useImageGallery(selectedProjectId, appliedFilters);
-
-  const images = data?.pages.flatMap((page) => page.data) || [];
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (
-        filterPanelRef.current &&
-        !filterPanelRef.current.contains(e.target) &&
-        filterButtonRef.current &&
-        !filterButtonRef.current.contains(e.target)
-      ) {
-        setIsFilterPanelOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  useEffect(() => {
-    if (selectedProjectId) refetch();
-  }, [selectedProjectId, appliedFilters, refetch]);
-
-  useEffect(() => {
-    const handler = (data) => {
-      if (data.projectId === selectedProjectId) refetch();
-    };
-    eventBus.on("image_gallery", handler);
-    return () => eventBus.off("image_gallery", handler);
-  }, [selectedProjectId, refetch]);
-
-useEffect(() => {
-  if (!loaderRef.current) return;
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting && hasNextPage && !isFetchingNextPage && !isLoading) {
-        fetchNextPage();
-      }
-    },
-    { rootMargin: "200px", threshold: 0.1 }
-  );
-
-  observer.observe(loaderRef.current);
-
-  return () => {
-    if (loaderRef.current) {
-      observer.unobserve(loaderRef.current); 
-    }
-  };
-}, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]);
-
-
-  // Utility: derive filter options
-  const getUniqueValues = useCallback(
-    (idKey, nameKey) => {
-      const m = new Map();
-      images.forEach((batch) => {
-        const id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
-        if (id && batch[nameKey] && !m.has(id)) {
-          m.set(id, batch[nameKey]);
-        }
-      });
-      return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
-    },
-    [images]
-  );
-
-  const getUploadedBy = useCallback(() => {
-    const m = new Map();
-    images.forEach((batch) => {
-      batch.documents.forEach((doc) => {
-        const name = `${doc.uploadedBy?.firstName || ""} ${
-          doc.uploadedBy?.lastName || ""
-        }`.trim();
-        if (doc.uploadedBy?.id && name && !m.has(doc.uploadedBy.id)) {
-          m.set(doc.uploadedBy.id, name);
-        }
-      });
-    });
-    return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
-  }, [images]);
-
-  const buildings = getUniqueValues("buildingId", "buildingName");
-  const floors = getUniqueValues("floorIds", "floorName");
-  const activities = getUniqueValues("activityId", "activityName");
-  const workAreas = getUniqueValues("workAreaId", "workAreaName");
-  const workCategories = getUniqueValues("workCategoryId", "workCategoryName");
-  const uploadedByUsers = getUploadedBy();
-
-  const toggleFilter = useCallback((type, id, name) => {
-    setSelectedFilters((prev) => {
-      const arr = prev[type];
-      const exists = arr.some(([x]) => x === id);
-      const updated = exists
-        ? arr.filter(([x]) => x !== id)
-        : [...arr, [id, name]];
-      return { ...prev, [type]: updated };
-    });
-  }, []);
-
-  const setDateRange = useCallback(({ startDate, endDate }) => {
-    setSelectedFilters((prev) => ({
-      ...prev,
-      startDate: startDate || "",
-      endDate: endDate || "",
-    }));
-  }, []);
-
-  const toggleCollapse = useCallback((type) => {
-    setCollapsedFilters((prev) => ({ ...prev, [type]: !prev[type] }));
-  }, []);
-
-  const handleApplyFilters = useCallback(() => {
-    const payload = {
-      buildingIds: selectedFilters.building.map(([x]) => x) || null,
-      floorIds: selectedFilters.floor.map(([x]) => x) || null,
-      activityIds: selectedFilters.activity.map(([x]) => x) || null,
-      uploadedByIds: selectedFilters.uploadedBy.map(([x]) => x) || null,
-      workCategoryIds: selectedFilters.workCategory.map(([x]) => x) || null,
-      workAreaIds: selectedFilters.workArea.map(([x]) => x) || null,
-      startDate: selectedFilters.startDate || null,
-      endDate: selectedFilters.endDate || null,
-    };
-    const changed = Object.keys(payload).some((key) => {
-      const oldVal = appliedFilters[key],
-        newVal = payload[key];
-      return Array.isArray(oldVal)
-        ? oldVal.length !== newVal.length ||
-            oldVal.some((x) => !newVal.includes(x))
-        : oldVal !== newVal;
-    });
-    if (changed) setAppliedFilters(payload);
-  }, [selectedFilters, appliedFilters]);
-
-  const handleClear = useCallback(() => {
-    setSelectedFilters({
-      building: [],
-      floor: [],
-      activity: [],
-      uploadedBy: [],
-      workCategory: [],
-      workArea: [],
-      startDate: "",
-      endDate: "",
-    });
-    setAppliedFilters({
-      buildingIds: null,
-      floorIds: null,
-      activityIds: null,
-      uploadedByIds: null,
-      workCategoryIds: null,
-      workAreaIds: null,
-      startDate: null,
-      endDate: null,
-    });
-  }, []);
-
-  const scrollLeft = useCallback(
-    (key) =>
-      imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }),
-    []
-  );
-  const scrollRight = useCallback(
-    (key) =>
-      imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" }),
-    []
-  );
-
-  const renderCategory = (label, items, type) => (
-    <div
-      className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}
-    >
-      <div
-        className="dropdown-header bg-label-primary"
-        onClick={() => toggleCollapse(type)}
-      >
-        <strong>{label}</strong>
-        <div className="header-controls">
-          {((type === "dateRange" &&
-            (selectedFilters.startDate || selectedFilters.endDate)) ||
-            (type !== "dateRange" && selectedFilters[type]?.length > 0)) && (
-            <button
-              className="clear-button"
-              onClick={(e) => {
-                e.stopPropagation();
-                setSelectedFilters((prev) => ({
-                  ...prev,
-                  [type]: type === "dateRange" ? "" : [],
-                  ...(type === "dateRange" && { startDate: "", endDate: "" }),
-                }));
-              }}
-            >
-              Clear
-            </button>
-          )}
-          <span className="collapse-icon">
-            {collapsedFilters[type] ? "+" : "-"}
-          </span>
-        </div>
-      </div>
-      {!collapsedFilters[type] && (
-        <div className="dropdown-content">
-          {type === "dateRange" ? (
-            <DateRangePicker
-              onRangeChange={setDateRange}
-              endDateMode="today"
-              startDate={selectedFilters.startDate}
-              endDate={selectedFilters.endDate}
-            />
-          ) : (
-            items.map(([id, name]) => (
-              <label key={id}>
-                <input
-                  type="checkbox"
-                  checked={selectedFilters[type].some(([x]) => x === id)}
-                  onChange={() => toggleFilter(type, id, name)}
-                />
-                {name}
-              </label>
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <div
-      className={`gallery-container container-fluid ${
-        isFilterPanelOpen ? "filter-panel-open-end" : ""
-      }`}
-    >
-      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallery" }]} />
-      <div className="main-content">
-        <button
-          className={`filter-button btn-primary ${
-            isFilterPanelOpen ? "closed-icon" : ""
-          }`}
-          onClick={() => setIsFilterPanelOpen((p) => !p)}
-          ref={filterButtonRef}
-        >
-          {isFilterPanelOpen ? (
-            <i className="fa-solid fa-times fs-5" />
-          ) : (
-            <i className="bx bx-slider-alt ms-1" />
-          )}
-        </button>
-        <div className="activity-section">
-          {isLoading ? (
-            <div className="text-center">
-              <p>Loading...</p>
-            </div>
-          ) : images.length ? (
-            images.map((batch) => {
-              const doc = batch.documents[0];
-              const userName = `${doc.uploadedBy?.firstName || ""} ${
-                doc.uploadedBy?.lastName || ""
-              }`.trim();
-              const date = formatUTCToLocalTime(doc.uploadedAt);
-              const hasArrows = batch.documents.length > SCROLL_THRESHOLD;
-              return (
-                <div key={batch.batchId} className="grouped-section">
-                  <div className="group-heading">
-                    {/* Uploader Info */}
-                    <div className="d-flex align-items-center mb-1">
-                      <Avatar
-                        size="xs"
-                        firstName={doc.uploadedBy?.firstName}
-                        lastName={doc.uploadedBy?.lastName}
-                        className="me-2"
-                      />
-                      <div className="d-flex flex-column align-items-start">
-                        <strong className="user-name-text">{userName}</strong>
-                        <span className="text-muted small">{date}</span>
-                      </div>
-                    </div>
-
-                    {/* Location Info */}
-                    <div className="location-line text-secondary">
-                      <div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
-                        {" "}
-                        <span className="d-flex align-items-center">
-                          <span>{batch.buildingName}</span>
-                          <i className="bx bx-chevron-right " />
-                        </span>
-                        <span className="d-flex align-items-center">
-                          <span>{batch.floorName}</span>
-                          <i className="bx bx-chevron-right m" />
-                        </span>
-                        <span className="d-flex align-items-center ">
-                          <span>{batch.workAreaName || "Unknown"}</span>
-                          <i className="bx bx-chevron-right " />
-                          <span>{batch.activityName}</span>
-                        </span>
-                      </div>
-                      {batch.workCategoryName && (
-                        <span className="badge bg-label-primary ms-2">
-                          {batch.workCategoryName}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="image-group-wrapper">
-                    {hasArrows && (
-                      <button
-                        className="scroll-arrow left-arrow"
-                        onClick={() => scrollLeft(batch.batchId)}
-                      >
-                        ‹
-                      </button>
-                    )}
-                    <div
-                      className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
-                    >
-                      {batch.documents.map((d, i) => {
-                        const hoverDate = moment(d.uploadedAt).format(
-                          "DD MMMM, YYYY"
-                        );
-                        const hoverTime = moment(d.uploadedAt).format(
-                          "hh:mm A"
-                        );
-                        return (
-                          <div
-                            key={d.id}
-                            className="image-card"
-                            onClick={() =>
-                              openModal(
-                                <ImagePop batch={batch} initialIndex={i} />
-                              )
-                            }
-                            onMouseEnter={() => setHoveredImage(d)}
-                            onMouseLeave={() => setHoveredImage(null)}
-                          >
-                            <div className="image-wrapper">
-                              <img src={d.url} alt={`Image ${i + 1}`} />
-                            </div>
-                            {hoveredImage === d && (
-                              <div className="image-hover-description">
-                                <p>
-                                  <strong>Date:</strong> {hoverDate}
-                                </p>
-                                <p>
-                                  <strong>Time:</strong> {hoverTime}
-                                </p>
-                                <p>
-                                  <strong>Activity:</strong>{" "}
-                                  {batch.activityName}
-                                </p>
-                              </div>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                    {hasArrows && (
-                      <button
-                        className="scroll-arrow right-arrow"
-                        onClick={() => scrollRight(batch.batchId)}
-                      >
-                        <i className="bx bx-chevron-right"></i>
-                      </button>
-                    )}
-                  </div>
-                </div>
-              );
-            })
-          ) : (
-            <p className="text-center text-muted mt-5">
-              No images match the selected filters.
-            </p>
-          )}
-          <div ref={loaderRef}>
-            {isFetchingNextPage && hasNextPage && <p>Loading...</p>}
-            {!hasNextPage && !isLoading && images.length > 0 && (
-              <p className="text-muted">
-                You've reached the end of the images.
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div
-        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
-        ref={filterPanelRef}
-      >
-        <div className="offcanvas-header">
-          <h5>Filters</h5>
-          <button
-            className="btn-close"
-            onClick={() => setIsFilterPanelOpen(false)}
-          />
-        </div>
-        <div className="filter-actions mt-auto mx-2">
-          <button className="btn btn-secondary btn-xs" onClick={handleClear}>
-            Clear All
-          </button>
-          <button
-            className="btn btn-primary btn-xs"
-            onClick={handleApplyFilters}
-          >
-            Apply Filters
-          </button>
-        </div>
-        <div className="offcanvas-body d-flex flex-column">
-          {renderCategory("Date Range", [], "dateRange")}
-          {renderCategory("Building", buildings, "building")}
-          {renderCategory("Floor", floors, "floor")}
-          {renderCategory("Work Area", workAreas, "workArea")}
-          {renderCategory("Activity", activities, "activity")}
-          {renderCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
-          {renderCategory("Work Category", workCategories, "workCategory")}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImageGallery;

src/pages/Gallary/ImageGallaryPage.jsx

@@ -0,0 +1,126 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useContext,
+  createContext,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import moment from "moment";
+import eventBus from "../../services/eventBus";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import useImageGallery from "../../hooks/useImageGallery";
+import {
+  useProjectAssignedServices,
+  useProjectName,
+} from "../../hooks/useProjects";
+import { setProjectId } from "../../slices/localVariablesSlice";
+import ImageGalleryListView from "../../components/gallary/ImageGalleryListView";
+import "../../components/gallary/ImageGallery.css";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import GlobalModel from "../../components/common/GlobalModel";
+import ViewGallery from "../../components/gallary/ViewGallery";
+import { useFab } from "../../Context/FabContext";
+import GalleryFilterPanel from "../../components/gallary/GalleryFilterPanel";
+
+const GalleryContext = createContext();
+
+export const useGalleryContext = () => {
+  let context = useContext(GalleryContext);
+
+  if (!context) {
+    throw new Error("Error");
+  }
+  return context;
+};
+
+const ImageGalleryPage = () => {
+   const [filter,setFilter]  = useState()
+  const selectedProjectId = useSelectedProject();
+  const { projectNames } = useProjectName();
+  
+
+  const [openGallery, setOpenGallery] = useState({ isOpen: false, data: null });
+
+  const { data: assignedServices = [], isLoading } =
+    useProjectAssignedServices(selectedProjectId);
+
+  const [selectedService, setSelectedService] = useState("");
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
+
+  const contextMessager = {
+    setOpenGallery,
+  };
+
+   const { setOffcanvasContent, setShowTrigger } = useFab();
+
+   useEffect(()=>{
+    setShowTrigger(true);
+    setOffcanvasContent("Gallery Filter",<GalleryFilterPanel  onApply={setFilter}/>);
+
+    return ()=>{
+        setOffcanvasContent("",null)
+        setShowTrigger(false);
+    }
+   },[])
+
+
+  return (
+    <GalleryContext.Provider value={contextMessager}>
+      <div className="container-fluid">
+        <Breadcrumb
+          data={[{ label: "Home", link: "/" }, { label: "Gallery" }]}
+        />
+
+        <div className="card page-min-h p-2">
+          {/* {selectedProjectId && (
+            <div className="d-flex flex-row w-20 pb-2">
+            {!isLoading && assignedServices?.length === 0 ? (
+              <span className="badge bg-label-secondary">
+                Not service assiged yet
+              </span>
+            ) : (
+              <select className="form-select form-select-sm">
+                <option>Select Service</option>
+                {isLoading ? (
+                  <option>Loading...</option>
+                ) : assignedServices.length === 1 ? (
+                  <span className="badge bg-label-secondary">
+                    {assignedServices[0].name}
+                  </span>
+                ) : (
+                  assignedServices?.map((service) => (
+                    <option key={service.id} value={service?.id}>
+                      {service?.name}
+                    </option>
+                  ))
+                )}
+              </select>
+            )}
+          </div>
+          )} */}
+
+          <ImageGalleryListView filter={filter}/>
+        </div>
+
+        {openGallery?.isOpen && (
+          <GlobalModel
+            isOpen={openGallery?.isOpen}
+            closeModal={() => setOpenGallery({ isOpen: false, data: null })}
+          >
+            <ViewGallery
+              batch={openGallery?.data?.data}
+              index={openGallery?.data?.index}
+            />
+          </GlobalModel>
+        )}
+      </div>
+    </GalleryContext.Provider>
+  );
+};
+
+export default ImageGalleryPage;

src/pages/Gallary/ImagePop.jsx

@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./ImagePop.css";
-import { useModal } from "./ModalContext";
-import moment from "moment";
-import { formatUTCToLocalTime } from "../../utils/dateUtils";
-
-const ImagePop = ({ batch, initialIndex = 0 }) => {
-  const { closeModal } = useModal();
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-
-  // Effect to update currentIndex if the initialIndex prop changes
-  useEffect(() => {
-    setCurrentIndex(initialIndex);
-  }, [initialIndex, batch]);
-
-  // If no batch or documents are provided, don't render
-  if (!batch || !batch.documents || batch.documents.length === 0) return null;
-
-  // Get the current image document from the batch's documents array
-  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 from the individual image document
-  const fullName = `${image.uploadedBy?.firstName || ""} ${
-    image.uploadedBy?.lastName || ""
-  }`.trim();
-  const date = formatUTCToLocalTime(image.uploadedAt);
-
-  // 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 = () => {
-    setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
-  };
-
-  // Handler for navigating to the next image
-  const handleNext = () => {
-    setCurrentIndex((prevIndex) =>
-      Math.min(batch.documents.length - 1, prevIndex + 1)
-    );
-  };
-
-  // Determine if previous/next buttons should be enabled/visible
-  const hasPrev = currentIndex > 0;
-  const hasNext = currentIndex < batch.documents.length - 1;
-
-  return (
-    <div className="image-modal-overlay">
-      <div className="image-modal-content">
-        <i className="bx bx-x close-button" onClick={closeModal}></i>
-
-        {hasPrev && (
-          <button className="nav-button prev-button" onClick={handlePrev}>
-            <i className="bx bx-chevron-left"></i>
-          </button>
-        )}
-
-        <div className="image-container">
-          <img src={image.url} alt="Preview" className="modal-image" />
-        </div>
-
-        {hasNext && (
-          <button className="nav-button next-button" onClick={handleNext}>
-            <i className="bx bx-chevron-right"></i>
-          </button>
-        )}
-
-        <div className="image-details">
-          <div className="flex alig-items-center">
-            {" "}
-            <i className="bx bxs-user"></i>{" "}
-            <span className="text-muted">Uploaded By : </span>{" "}
-            <span className="text-secondary">{fullName}</span>
-          </div>
-          <div className="flex alig-items-center">
-            {" "}
-            <i className="bx bxs-calendar"></i>{" "}
-            <span className="text-muted">Date : </span>{" "}
-            <span className="text-secondary"> {date}</span>
-          </div>
-          <div className="flex alig-items-center">
-            {" "}
-            <i className="bx bx-map"></i>{" "}
-            <span className="text-muted">Uploaded By : </span>{" "}
-            <span className="text-secondary">
-              {buildingName} <i className="bx bx-chevron-right"></i> {floorName}{" "}
-              <i className="bx bx-chevron-right"></i>
-              {workAreaName || "Unknown"}{" "}
-              <i className="bx bx-chevron-right"></i> {activityName}
-            </span>
-          </div>
-          <div className="flex alig-items-center">
-            {" "}
-            <i className="bx bx-comment-dots"></i>{" "}
-            <span className="text-muted">comment : </span>{" "}
-            <span className="text-secondary">{batchComment}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImagePop;

src/pages/Gallary/ModalContext.jsx

@@ -1,23 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-const ModalContext = createContext();
-
-export const ModalProvider1 = ({ children }) => {
-  const [modalContent, setModalContent] = useState(null);
-
-  const openModal = (content) => setModalContent(content);
-  const closeModal = () => setModalContent(null);
-
-  return (
-    <ModalContext.Provider value={{ openModal, closeModal }}>
-      {children}
-      {modalContent && (
-        <div className="global-modal-wrapper">
-          {modalContent}
-        </div>
-      )}
-    </ModalContext.Provider>
-  );
-};
-
-export const useModal = () => useContext(ModalContext);

src/pages/Home/LandingPage.jsx

@@ -206,8 +206,8 @@ const LandingPage = () => {
                     navigation={false}
                     modules={[EffectFlip, Autoplay, Pagination, Navigation]}
                     className="mySwiper"
-                    onSlideChange={() => console.log("slide change")}
+                    onSlideChange={() => {}}
-                    onSwiper={(swiper) => console.log(swiper)}
+                    onSwiper={(swiper) => {}}
                   >
                     <SwiperSlide>
                       <SwaperSlideContent

src/pages/Home/SubscriptionPlans.jsx

@@ -2,37 +2,28 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import PlanCardSkeleton from "./PlanCardSkeleton";
+import { useSubscription } from "../../hooks/useAuth";
 
 const SubscriptionPlans = () => {
   const [plans, setPlans] = useState([]);
   const [frequency, setFrequency] = useState(1);
+  const { data, isLoading, isError, error } = useSubscription(frequency);
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
+
-    const fetchPlans = async () => {
-      try {
-        setLoading(true);
-        const res = await axios.get(
-          `http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`,
-          { headers: { "Content-Type": "application/json" } }
-        );
-        setPlans(res.data?.data || []);
-      } catch (err) {
-        console.error("Error fetching plans:", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchPlans();
-  }, [frequency]);
 
   const frequencyLabel = (freq) => {
     switch (freq) {
-      case 0: return "1 mo";
+      case 0:
-      case 1: return "3 mo";
+        return "1 mo";
-      case 2: return "6 mo";
+      case 1:
-      case 3: return "1 yr";
+        return "3 mo";
-      default: return "mo";
+      case 2:
+        return "6 mo";
+      case 3:
+        return "1 yr";
+      default:
+        return "mo";
     }
   };
 
@@ -41,38 +32,49 @@ const SubscriptionPlans = () => {
       {/* Frequency Switcher */}
       <div className="text-center mb-4">
         <div className="btn-group" role="group" aria-label="Plan frequency">
-          {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => (
+          {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map(
+            (label, idx) => (
               <button
                 key={idx}
                 type="button"
-              className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"}`}
+                className={`btn btn-${
+                  frequency === idx ? "primary" : "outline-secondary"
+                }`}
                 onClick={() => setFrequency(idx)}
               >
                 {label}
               </button>
-          ))}
+            )
+          )}
         </div>
       </div>
 
       {/* Cards */}
       <div className="row g-4 mt-10">
-        {loading ? (
+        {isLoading ? (
           // Show 3 skeletons
           <>
             <PlanCardSkeleton />
             <PlanCardSkeleton />
             <PlanCardSkeleton />
           </>
-        ) : plans.length === 0 ? (
+        ) : data.length === 0 ? (
           <div className="text-center">No plans found</div>
+        ) : isError ? (
+          <div className="text-start bg-light">
+            <p>{error.message}</p>
+            <p>{error.name}</p>
+          </div>
         ) : (
-          plans.map((plan) => (
+          data.map((plan) => (
             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
               <div className="card h-100 shadow-lg border-0 p-3 text-center p-10">
                 {/* Header */}
                 <div className="mb-3">
                   <i className="bx bxs-package text-primary fs-1 mb-2"></i>
-                  <p className="card-title fs-3 fw-bold mb-1">{plan.planName}</p>
+                  <p className="card-title fs-3 fw-bold mb-1">
+                    {plan.planName}
+                  </p>
                   <p className="text-muted mb-0 fs-5">{plan.description}</p>
                 </div>
 
@@ -80,7 +82,9 @@ const SubscriptionPlans = () => {
                 <div className="mb-3">
                   <h4 className="fw-semibold mt-auto mb-0 fs-3">
                     {plan.currency?.symbol} {plan.price}
-                    <small className="text-muted ms-1">/ {frequencyLabel(frequency)}</small>
+                    <small className="text-muted ms-1">
+                      / {frequencyLabel(frequency)}
+                    </small>
                   </h4>
                 </div>
 
@@ -133,7 +137,6 @@ const SubscriptionPlans = () => {
           ))
         )}
       </div>
-
     </div>
   );
 };

src/pages/authentication/ChangePassword.jsx

@@ -6,6 +6,8 @@ import showToast from "../../services/toastService";
 import AuthRepository from "../../repositories/AuthRepository";
 import "./page-auth.css";
 import { useSelector } from "react-redux";
+import Modal from "../../components/common/Modal";
+import { useModal } from "../../hooks/useAuth";
 
 // --- Zod Schema for validation ---
 const ChangePasswordSchema = z
@@ -28,13 +30,15 @@ const ChangePasswordSchema = z
     path: ["confirmPassword"],
   });
 
-const ChangePasswordPage = ({ onClose }) => {
+const ChangePasswordPage = () => {
   const [loading, setLoading] = useState(false);
   const [hideOldPass, setHideOldPass] = useState(true);
   const [hideNewPass, setHideNewPass] = useState(true);
   const [hideConfirmPass, setHideConfirmPass] = useState(true);
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
 
+  const { isOpen, onClose } = useModal("ChangePassword");
+
   const {
     register,
     handleSubmit,
@@ -64,25 +68,14 @@ const ChangePasswordPage = ({ onClose }) => {
     }
   };
 
-  return (
+  const bodyContxt = (
-    <div
+ 
-      className="modal d-flex align-items-center justify-content-center show"
+   
-      tabIndex="-1"
+        <div className="row">
-      role="dialog"
+     
-      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-    >
-      <div className="modal-dialog" role="document">
-        <div className="modal-content p-10 rounded shadow bg-white position-relative">
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal" aria-label="Close"
-            onClick={onClose} // Use onClick to trigger onClose function
-            style={{ position: "absolute", top: "15px", right: "15px" }} // Example positioning
-          ></button>
 
           <h5 className="mb-2">Change Password</h5>
-          <p className="mb-4" style={{ fontSize: "14px" }}>
+          <p className="mb-4 text-black">
             Enter old and new password to update.
           </p>
 
@@ -175,7 +168,7 @@ const ChangePasswordPage = ({ onClose }) => {
               )}
             </div>
 
-            <div className="d-flex justify-content-center pt-2 text-muted small">
+            <div className="d-flex justify-content-center pt-2 text-muted small text-black">
               Your password must have at least 8 characters and include a lower
               case letter, an uppercase letter, a number, and a special
               character.
@@ -200,9 +193,11 @@ const ChangePasswordPage = ({ onClose }) => {
             </div>
           </form>
         </div>
-      </div>
+
-    </div>
+ 
   );
+
+  return <Modal isOpen={isOpen} onClose={onClose} body={bodyContxt} />;
 };
 
 export default ChangePasswordPage;

src/pages/authentication/LoginPage.jsx

@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { AuthWrapper } from "./AuthWrapper";
+import { removeSession } from "../../utils/authUtils";
 
 const LoginPage = () => {
   const navigate = useNavigate();
@@ -44,9 +45,11 @@ const LoginPage = () => {
         if (data.rememberMe) {
           localStorage.setItem("jwtToken", response.data.token);
           localStorage.setItem("refreshToken", response.data.refreshToken);
+          removeSession("session")
         } else {
           sessionStorage.setItem("jwtToken", response.data.token);
           sessionStorage.setItem("refreshToken", response.data.refreshToken);
+           removeSession("local")
         }
         setLoading(false);
         navigate("/auth/switch/org");

src/pages/authentication/SwitchTenant.jsx

@@ -86,7 +86,7 @@ const SwitchTenant = () => {
                 <button
                   className={` ${currentTenant === tenant.id ? "badge bg-label-primary w-50" :"btn btn-primary btn-sm mt-2 align-self-start" }`}
                   onClick={() => handleTenantselection(tenant?.id)}
-                  disabled={isPending && pendingTenant === tenant.id || currentTenant === tenant.id }
+                  disabled={isPending && pendingTenant === tenant.id || currentTenant === tenant.id || isPending}
                 >
                   {currentTenant === tenant.id  ?  "Active Tenant" :isPending && pendingTenant === tenant.id
                     ? "Please Wait.."

src/pages/collections/CollectionPage.jsx

@@ -0,0 +1,223 @@
+import React, { createContext, useContext, useState } from "react";
+import moment from "moment";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import CollectionList from "../../components/collections/CollectionList";
+import { useModal } from "../../hooks/useAuth";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DateRangePicker1 } from "../../components/common/DateRangePicker";
+import { isPending } from "@reduxjs/toolkit";
+import ConfirmModal from "../../components/common/ConfirmModal";
+import showToast from "../../services/toastService";
+import { useMarkedPaymentReceived } from "../../hooks/useCollections";
+import GlobalModel from "../../components/common/GlobalModel";
+import AddPayment from "../../components/collections/AddPayment";
+import ViewCollection from "../../components/collections/ViewCollection";
+import ManageCollection from "../../components/collections/ManageCollection";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import {
+  ADDPAYMENT_COLLECTION,
+  ADMIN_COLLECTION,
+  CREATE_COLLECTION,
+  EDIT_COLLECTION,
+  VIEW_COLLECTION,
+} from "../../utils/constants";
+import AccessDenied from "../../components/common/AccessDenied";
+
+const CollectionContext = createContext();
+export const useCollectionContext = () => {
+  const context = useContext(CollectionContext);
+  if (!context) {
+    window.location = "/dashboard";
+    showToast("Out of Context Happend inside Collection Context", "warning");
+  }
+  return context;
+};
+const CollectionPage = () => {
+  const [viewCollection, setViewCollection] = useState(null);
+  const [makeCollection, setCollection] = useState({
+    isOpen: false,
+    invoiceId: null,
+  });
+  const [ViewDocument, setDocumentView] = useState({
+    IsOpen: false,
+    Image: null,
+  });
+  const [processedPayment, setProcessedPayment] = useState(null);
+  const [addPayment, setAddPayment] = useState({
+    isOpen: false,
+    invoiceId: null,
+  });
+  const [showPending, setShowPending] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
+  const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
+  const canCreate = useHasUserPermission(CREATE_COLLECTION);
+  const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
+  const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
+  const methods = useForm({
+    defaultValues: {
+      fromDate: moment().subtract(180, "days").format("DD-MM-YYYY"),
+      toDate: moment().format("DD-MM-YYYY"),
+    },
+  });
+  const { watch } = methods;
+  const [fromDate, toDate] = watch(["fromDate", "toDate"]);
+
+  const handleToggleActive = (e) => setShowPending(e.target.checked);
+
+  const contextMassager = {
+    setProcessedPayment,
+    setCollection,
+    setAddPayment,
+    addPayment,
+    setViewCollection,
+    viewCollection,
+    setDocumentView,
+  };
+  const { mutate: MarkedReceived, isPending } = useMarkedPaymentReceived(() => {
+    setProcessedPayment(null);
+  });
+  const handleMarkedPayment = (payload) => {
+    MarkedReceived(payload);
+  };
+ if (isAdmin === undefined || 
+    canAddPayment === undefined || 
+    canEditCollection === undefined || 
+    canViewCollection === undefined || 
+    canCreate === undefined
+) {
+  return <div className="text-center py-5">Checking access...</div>;
+}
+
+if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) {
+  return <AccessDenied data={[{ label: "Home", link: "/" }, { label: "Collection" }]} />;
+}
+  return (
+    <CollectionContext.Provider value={contextMassager}>
+      <div className="container-fluid">
+        <Breadcrumb
+          data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
+        />
+
+        <div className="card my-3 py-2 px-sm-4 px-0">
+          <div className="row px-3">
+            <div className="col-12 col-md-3 mb-1">
+              <FormProvider {...methods}>
+                <DateRangePicker1 howManyDay={180} />
+              </FormProvider>
+            </div>
+            <div className="col-12 col-md-3 d-flex align-items-center gap-2 ">
+              <div className="form-check form-switch text-start align-items-center">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  role="switch"
+                  id="inactiveEmployeesCheckbox"
+                  checked={showPending}
+                  onChange={(e) => setShowPending(e.target.checked)}
+                />
+                <label
+                  className="form-check-label ms-0"
+                  htmlFor="inactiveEmployeesCheckbox"
+                >
+                  Show Pending
+                </label>
+              </div>
+            </div>
+
+            <div className="col-12 col-md-6  d-flex justify-content-end gap-4">
+              <div className=" w-md-auto">
+                {" "}
+                <input
+                  type="search"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  placeholder="search Collection"
+                  className="form-control form-control-sm"
+                />
+              </div>
+          { (canCreate || isAdmin) && (
+  <button
+    className="btn btn-sm btn-primary"
+    type="button"
+    onClick={() => setCollection({ isOpen: true, invoiceId: null })}
+  >
+    <i className="bx bx-plus-circle me-2"></i>
+    <span className="d-none d-md-inline-block">Add New Collection</span>
+  </button>
+)}
+
+            </div>
+          </div>
+        </div>
+
+        <CollectionList
+          fromDate={fromDate}
+          toDate={toDate}
+          isPending={showPending}
+          searchString={searchText}
+        />
+
+        {makeCollection.isOpen && (
+          <GlobalModel
+            isOpen={makeCollection.isOpen}
+            size="lg"
+            closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
+          >
+            <ManageCollection
+              collectionId={makeCollection?.invoiceId ?? null}
+              onClose={() => setCollection({ isOpen: false, invoiceId: null })}
+            />
+          </GlobalModel>
+        )}
+
+        {addPayment.isOpen && (
+          <GlobalModel
+            size="lg"
+            isOpen={addPayment.isOpen}
+            closeModal={() => setAddPayment({ isOpen: false, invoiceId: null })}
+          >
+            <AddPayment
+              onClose={() => setAddPayment({ isOpen: false, invoiceId: null })}
+            />
+          </GlobalModel>
+        )}
+
+        {viewCollection && (
+          <GlobalModel
+            size="lg"
+            isOpen={viewCollection}
+            closeModal={() => setViewCollection(null)}
+          >
+            <ViewCollection onClose={() => setViewCollection(null)} />
+          </GlobalModel>
+        )}
+
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            key={ViewDocument.Image ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+          >
+            <PreviewDocument imageUrl={ViewDocument.Image} />
+          </GlobalModel>
+        )}
+
+        <ConfirmModal
+          type="success"
+          header="Payment Successful Received"
+          message="Payment has been recored successfully."
+          isOpen={processedPayment?.isOpen}
+          loading={isPending}
+          onSubmit={() => handleMarkedPayment(processedPayment?.invoiceId)}
+          onClose={() => setProcessedPayment(null)}
+        />
+      </div>
+    </CollectionContext.Provider>
+  );
+};
+
+export default CollectionPage;

src/pages/employee/EmployeeList.jsx

@@ -7,6 +7,7 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import ManageEmp from "../../components/Employee/ManageRole";
 import {
   useEmployeesAllOrByProjectId,
+  useEmployeesByOrganization,
   useSuspendEmployee,
 } from "../../hooks/useEmployees";
 import { useProjectName, useProjects } from "../../hooks/useProjects";
@@ -36,6 +37,7 @@ import GlobalModel from "../../components/common/GlobalModel";
 import usePagination from "../../hooks/usePagination";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import Pagination from "../../components/common/Pagination";
 
 const EmployeeList = () => {
   const selectedProjectId = useSelector(
@@ -46,15 +48,14 @@ const EmployeeList = () => {
   const dispatch = useDispatch();
 
   const [showInactive, setShowInactive] = useState(false);
-  const [showAllEmployees, setShowAllEmployees] = useState(false);
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
-  const { employees, loading, setLoading, error, recallEmployeeData } =
+  const {
-    useEmployeesAllOrByProjectId(
+    data: employees,
-      showAllEmployees,
+    isLoading: loading,
-      selectedProjectId,
+    error,
-      showInactive
+    refetch: recallEmployeeData,
-    );
+  } = useEmployeesByOrganization(showInactive);
 
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
@@ -70,7 +71,6 @@ const EmployeeList = () => {
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
   const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
-  const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES);
   const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
     {
       setIsDeleteModalOpen,
@@ -157,7 +157,7 @@ const EmployeeList = () => {
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
     setShowInactive(false);
-    setShowAllEmployees(isChecked);
+    // setShowAllEmployees(isChecked);
   };
 
   const handleEmployeeModel = (id) => {
@@ -205,25 +205,16 @@ const EmployeeList = () => {
 
       setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
     }
-  }, [loading, employees, selectedProjectId, showAllEmployees]);
+  }, [loading, employees, selectedProjectId, showInactive]);
-
-  useEffect(() => {
-    if (!showAllEmployees) {
-      recallEmployeeData(showInactive, selectedProjectId);
-    }
-  }, [selectedProjectId, showInactive, showAllEmployees, recallEmployeeData]);
 
   const handler = useCallback(
     (msg) => {
       if (employees.some((item) => item.id == msg.employeeId)) {
         setEmployeeList([]);
-        recallEmployeeData(
+        recallEmployeeData(showInactive);
-          showInactive,
-          showAllEmployees ? null : selectedProjectId
-        ); // Use selectedProjectId here
       }
     },
-    [employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
+    [employees, showInactive, showInactive, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
@@ -254,7 +245,6 @@ const EmployeeList = () => {
           <ManageEmployee
             employeeId={selectedEmployeeId}
             onClosed={() => setShowModal(false)}
-            IsAllEmployee={showAllEmployees}
           />
         </GlobalModel>
       )}
@@ -293,38 +283,19 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-          <div className="card p-1">
+          <div className="card p-1 page-min-h">
             <div className="card-datatable table-responsive pt-5 mx-5 py-10">
               <div
                 id="DataTables_Table_0_wrapper"
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
-                style={{ width: "100%" }}
               >
                 <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                   {/* Switches: All Employees + Inactive */}
                   <div className="d-flex flex-wrap align-items-center gap-3">
                     {/* All Employees Switch */}
-                    {ViewAllEmployee && (
-                      <div className="form-check form-switch text-start">
-                        <input
-                          type="checkbox"
-                          className="form-check-input"
-                          role="switch"
-                          id="allEmployeesCheckbox"
-                          checked={showAllEmployees}
-                          onChange={handleAllEmployeesToggle}
-                        />
-                        <label
-                          className="form-check-label ms-0"
-                          htmlFor="allEmployeesCheckbox"
-                        >
-                          Show All Employees
-                        </label>
-                      </div>
-                    )}
 
                     {/* Show Inactive Employees Switch */}
-                    {showAllEmployees && (
+
                     <div className="form-check form-switch text-start">
                       <input
                         type="checkbox"
@@ -341,11 +312,10 @@ const EmployeeList = () => {
                         Show Inactive Employees
                       </label>
                     </div>
-                    )}
                   </div>
 
                   {/* Right side: Search + Export + Add Employee */}
-                  <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                  <div className="d-flex flex-wrap align-items-center justify-content-start justify-content-md-end gap-3 flex-grow-1">
                     {/* Search Input - ALWAYS ENABLED */}
                     <div className="dataTables_filter">
                       <label className="mb-0">
@@ -431,7 +401,6 @@ const EmployeeList = () => {
                   className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
                   id="DataTables_Table_0"
                   aria-describedby="DataTables_Table_0_info"
-                  style={{ width: "100%" }}
                   ref={tableRef}
                 >
                   <thead>
@@ -522,28 +491,27 @@ const EmployeeList = () => {
                         </td>
                       </tr>
                     )}
-                    {/* Conditional messages for no data or no search results */}
+
                     {!loading &&
                     displayData?.length === 0 &&
-                    searchText &&
+                    (!searchText ) ? (
-                    !showAllEmployees ? (
                       <tr>
-                        <td colSpan={8}>
+                        <td colSpan={8} className="border-0 py-3">
-                          <small className="muted">
+                        <div className="py-4">
-                            '{searchText}' employee not found
+                            No Data Found
-                          </small>{" "}
+                        </div>
                         </td>
                       </tr>
                     ) : null}
+
                       {!loading &&
                     displayData?.length === 0 &&
-                    (!searchText || showAllEmployees) ? (
+                    (searchText ) ? (
                       <tr>
-                        <td
+                        <td colSpan={8} className="border-0 py-3">
-                          colSpan={8}
+                          <div className="py-4">
-                          style={{ paddingTop: "20px", textAlign: "center" }}
+                            {`No match record found ${searchText} `}
-                        >
+                          </div>
-                          No Data Found
                         </td>
                       </tr>
                     ) : null}
@@ -697,55 +665,12 @@ const EmployeeList = () => {
                   </tbody>
                 </table>
 
-                <div style={{ width: "1%" }}></div>
+                {displayData?.length > 0 && (
-
+                  <Pagination
-                {/* Pagination */}
+                    currentPage={currentPage}
-                {!loading && displayData.length > ITEMS_PER_PAGE && (
+                    totalPages={totalPages}
-                  <nav aria-label="Page">
+                    onPageChange={paginate}
-                    <ul className="pagination pagination-sm justify-content-end py-1">
+                  />
-                      <li
-                        className={`page-item ${
-                          currentPage === 1 ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link btn-xs"
-                          onClick={() => paginate(currentPage - 1)}
-                        >
-                          &laquo;
-                        </button>
-                      </li>
-
-                      {[...Array(totalPages)]?.map((_, index) => (
-                        <li
-                          key={index}
-                          className={`page-item ${
-                            currentPage === index + 1 ? "active" : ""
-                          }`}
-                        >
-                          <button
-                            className="page-link"
-                            onClick={() => paginate(index + 1)}
-                          >
-                            {index + 1}
-                          </button>
-                        </li>
-                      ))}
-
-                      <li
-                        className={`page-item ${
-                          currentPage === totalPages ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link"
-                          onClick={() => paginate(currentPage + 1)}
-                        >
-                          &raquo;
-                        </button>
-                      </li>
-                    </ul>
-                  </nav>
                 )}
               </div>
             </div>

src/pages/employee/EmployeeProfile.jsx

@@ -65,7 +65,7 @@ const EmployeeProfile = () => {
       case "attendance": {
         return (
           <>
-            <EmpAttendance employee={employeeId} />
+            <EmpAttendance  />
           </>
         );
       }

src/pages/master/MasterPage.jsx

@@ -103,7 +103,7 @@ const MasterPage = () => {
 
   if (menuErrorFlag || isMasterError)
     return (
-      <div className="d-flex flex-column align-items-center justify-content-center py-5">
+      <div className="d-flex flex-column align-items-center justify-content-center py-1 py-md-5">
         <h4 className="mb-3">
           <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
           occurred
@@ -161,21 +161,17 @@ const MasterPage = () => {
           data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
         />
 
-        <div className="row">
+        <div className="row page-min-h">
           <div className="card">
             <div
-              className="card-datatable table-responsive py-10 mx-5 "
+              className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
               style={{ overflow: "hidden" }}
             >
               <div className="row mb-2">
-                <div className="col-md-3 col-sm-6">
+                <div className="col-12 col-md-3">
                   <select
                     className="form-select py-1 px-2"
-                    style={{
+                   
-                      fontSize: "0.875rem",
-                      height: "32px",
-                      width: "190px",
-                    }}
                     value={selectedMaster}
                     onChange={(e) => dispatch(changeMaster(e.target.value))}
                   >
@@ -190,8 +186,8 @@ const MasterPage = () => {
                     )}
                   </select>
                 </div>
-                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
+                <div className="col-12 col-md-9  d-flex justify-content-end align-items-center gap-2 mt-2 mt-md-0">
-                  <div className="w-25">
+                  <div className="col-6 col-md-3">
                     <input
                       type="search"
                       className="form-control form-control-sm"
@@ -207,8 +203,8 @@ const MasterPage = () => {
                         handleModalData(selectedMaster, null, selectedMaster)
                       }
                     >
-                      <i className="bx bx-plus-circle me-2"></i>Add{" "}
+                      <i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
-                      {selectedMaster}
+                      {selectedMaster}</span>
                     </button>
                   )}
                 </div>

src/pages/master/MasterTable.jsx

@@ -92,7 +92,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                 {" "}
                 {selectedMaster === "Activity" ? "Activity" : "Name"}
               </th>
-              <th className="text-start">
+    <th className="text-start d-none d-md-table-cell">
+
                 {" "}
                 {selectedMaster === "Activity"
                   ? "Unit"
@@ -108,12 +109,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
           <tbody>
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
-                <tr key={index}>
+                <tr key={index} >
-                  <td style={{ width: "20px" }}>
+                  <td style={{ width: "20px" }} className="py-3">
                     <i className="bx bx-right-arrow-alt"></i>
                   </td>
                   {updatedColumns.map((col) => (
-                    <td className="text-start mx-2" key={col.key}>
+                    <td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
                       {col.key === "description" ? (
                         item[col.key] !== undefined &&
                         item[col.key] !== null ? (
@@ -133,7 +134,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                       )}
                     </td>
                   ))}
-                  <td className={!hasMasterPermission ? "d-none" : ""}>
+                  <td className={!hasMasterPermission ? "d-none" : "py-3"}>
                     {(selectedMaster === "Application Role" ||
                       selectedMaster === "Work Category") &&
                     item?.isSystem ? (

src/repositories/AuthRepository.jsx

@@ -10,6 +10,7 @@ const AuthRepository = {
   verifyOTP: (data) => api.postPublic("/api/auth/login-otp", data),
   register: (data) => api.postPublic("/api/auth/register", data),
   sendMail: (data) => api.postPublic("/api/auth/sendmail", data),
+  getSubscription:(frequency)=> api.getPublic(`/api/market/list/subscription-plan?frequency=${frequency}`),
 
   //  Protected routes (require auth token)
   logout: (data) => api.post("/api/auth/logout", data),
@@ -19,6 +20,8 @@ const AuthRepository = {
   selectTenant: (tenantId) => api.post(`/api/Auth/select-tenant/${tenantId}`),
   getTenantList: () => api.get("/api/Auth/get/user/tenants"),
 
+  // 
+
 };
 
 export default AuthRepository;

src/repositories/ColllectionRepository.jsx

@@ -0,0 +1,29 @@
+import { api } from "../utils/axiosClient";
+import { DirectoryRepository } from "./DirectoryRepository";
+
+export const CollectionRepository = {
+  createNewCollection: (data) =>
+    api.post(`/api/Collection/invoice/create`, data),
+  updateCollection:(id,data)=>{
+    api.put(`/api/Collection/invoice/edit/${id}`,data)
+  },
+  getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive,projectId, searchString) => {
+    let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
+
+    const params = [];
+    if (fromDate) params.push(`fromDate=${fromDate}`);
+    if (toDate) params.push(`toDate=${toDate}`);
+    if(projectId) params.push(`projectId=${projectId}`)
+
+    if (params.length > 0) {
+      url += `&${params.join("&")}`;
+    }
+   return api.get(url);
+  },
+
+   makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`,data),
+   markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`),
+   getCollection:(id)=>api.get(`/api/Collection/invoice/details/${id}`),
+   addComment:(data)=>api.post(`/api/Collection/invoice/add/comment`,data)
+};
+