Merge branch 'OnFieldWork_V1' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_Chips_Expense

public/assets/css/core-extend.css

@@ -11,27 +11,20 @@
  border-bottom:2px solid var(--bs-table-border-color) ;
 }
 .text-gary-80 {
-color:var(--bs-gray-500)
+  color:var(--bs-gray-500)
 }
 
 .text-royalblue{
-color: #1796e3;
+  color: #1796e3;
 }
 
 .text-md {
-font-size: 2rem;
+  font-size: 2rem;
 }
 
 .text-md-b { 
-font-weight: normal;
+  font-weight: normal;
 }
-.cursor-wait{
-  cursor:wait;
-}
-.cursor-notallowed {
- cursor: not-allowed;
-}
-
 .text-xxs { font-size: 0.55rem; }       /* 8px */
 .text-xs { font-size: 0.75rem; }       /* 12px */
 .text-sm { font-size: 0.875rem; }      /* 14px */
@@ -101,206 +94,3 @@ font-weight: normal;
 .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; }
-}
-
-.cursor-not-allowed{
-  cursor: not-allowed;
-}

public/assets/vendor/css/core.css

@@ -32574,3 +32574,6 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
 .text-red{
   color:var(--bs-red)
 }
+.bg-gray {
+background:var(--bs-body-color)
+}

src/ModalProvider.jsx

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

src/components/Activities/Attendance.jsx

@@ -11,8 +11,9 @@ import { useSelector } from "react-redux";
 import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import Pagination from "../common/Pagination";
 
-const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, }) => {
+const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -24,7 +25,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     loading: attLoading,
     recall: attrecall,
     isFetching
-  } = useAttendance(selectedProject, organizationId);
+  } = useAttendance(selectedProject, organizationId, includeInactive, date);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
       (att) => att?.checkInTime !== null && att?.checkOutTime === null
@@ -108,6 +109,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
+  
   return (
     <>
       <div
@@ -126,7 +129,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
               checked={ShowPending}
               onChange={(e) => setShowPending(e.target.checked)}
             />
-            <label className="form-check-label ms-0">Pending Attendance</label>
+            <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
         {attLoading ? (
@@ -138,7 +141,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                 <tr className="border-top-1">
                   <th colSpan={2}>Name</th>
                   <th>Role</th>
-                  <th>Organization</th>
+                  {/* <th>Organization</th> */}
                   <th>
                     <i className="bx bxs-down-arrow-alt text-success"></i>
                     Check-In
@@ -187,7 +190,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                         </td>
 
                         <td>{item.jobRoleName}</td>
-                        <td>{item.organizationName || "--"}</td>
+                        {/* <td>{item.organizationName || "--"}</td> */}
 
                         <td>
                           {item.checkInTime
@@ -223,6 +226,16 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                 )}
               </tbody>
             </table>
+
+
+            {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
+              
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={paginate}
+              />
+            )}
           </>
         ) : (
           <div
@@ -237,48 +250,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
           </div>
         )}
       </div>
-      {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
-        <nav aria-label="Page ">
-          <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>
-      )}
     </>
   );
 };

src/components/Activities/AttendcesLogs.jsx

@@ -5,17 +5,13 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
 import DateRangePicker from "../common/DateRangePicker";
-import {
+import { clearCacheKey, getCachedData, useSelectedProject } from "../../slices/apiDataManager";
-  clearCacheKey,
-  getCachedData,
-  useSelectedProject,
-} from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
 import { queryClient } from "../../layouts/AuthLayout";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
-import { useNavigate } from "react-router-dom";
+import Pagination from "../common/Pagination";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -38,14 +34,18 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
+const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
+  // const selectedProject = useSelector(
+  //   (store) => store.localVariables.projectId
+  // );
   const selectedProject = useSelectedProject();
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(false);
-  const [showPending, setShowPending] = useState(false);
+  const [showPending, setShowPending] = useState(false)
+
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const navigate = useNavigate();
+  const [processedData, setProcessedData] = useState([]);
 
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -68,54 +68,111 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   };
 
   const sortByName = (a, b) => {
-    const nameA = (a.firstName + a.lastName).toLowerCase();
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
-    const nameB = (b.firstName + b.lastName).toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
 
-  const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const {
+    data = [],
+    isLoading,
+    error,
+    refetch,
+    isFetching,
+  } = useAttendancesLogs(
     selectedProject,
     dateRange.startDate,
     dateRange.endDate,
     organizationId
   );
+  const filtering = useCallback((dataToFilter) => {
+  const filteredData = showPending
+    ? dataToFilter.filter((item) => item.checkOutTime === null)
+    : dataToFilter;
 
-  const processedData = useMemo(() => {
+  const group1 = filteredData
-    const filteredData = showPending
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-      ? data.filter((item) => item.checkOutTime === null)
+    .sort(sortByName);
-      : data;
+  const group2 = filteredData
+    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+    .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 group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-    const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).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 = [...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) {
+      acc[date] = acc[date] || [];
+      acc[date].push(item);
+    }
+    return acc;
+  }, {});
 
-    const groupedByDate = sortedList.reduce((acc, item) => {
+  const sortedDates = Object.keys(groupedByDate).sort(
-      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
+    (a, b) => new Date(b) - new Date(a)
-      if (date) {
+  );
-        acc[date] = acc[date] || [];
-        acc[date].push(item);
-      }
-      return acc;
-    }, {});
 
-    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
+  const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-    return sortedDates.flatMap((date) => groupedByDate[date]);
+  setProcessedData(finalData);
+}, [showPending]);
+
+
+  useEffect(() => {
+    filtering(data);
   }, [data, showPending]);
 
+  // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
-    if (!searchTerm) return processedData;
+    if (!searchTerm) {
-
+      return processedData;
-    const lowercased = searchTerm.toLowerCase();
+    }
-    return processedData.filter((item) =>
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
-      `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
+    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,
@@ -126,27 +183,34 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
 
   useEffect(() => {
     resetPage();
-  }, [filteredSearchData]);
+  }, [filteredSearchData, resetPage]);
 
   const handler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
       const checkIn = msg.response.checkInTime.substring(0, 10);
-
+      if (
-      if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
+        selectedProject === msg.projectId &&
+        startDate <= checkIn &&
+        checkIn <= endDate
+      ) {
         queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
           if (!oldData) {
             queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
             return;
           }
-          return oldData.map((record) =>
+          const updatedAttendance = oldData.map((record) =>
-            record.id === msg.response.id ? { ...record, ...msg.response } : record
+            record.id === msg.response.id
+              ? { ...record, ...msg.response }
+              : record
           );
+          filtering(updatedAttendance);
+          return updatedAttendance;
         });
         resetPage();
       }
     },
-    [selectedProject, dateRange, resetPage]
+    [selectedProject, dateRange, filtering, resetPage]
   );
 
   useEffect(() => {
@@ -158,10 +222,18 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
     (msg) => {
       const { startDate, endDate } = dateRange;
       if (data.some((item) => item.employeeId == msg.employeeId)) {
-        refetch();
+        // dispatch(
+        //   fetchAttendanceData({
+        //     ,
+        //     fromDate: startDate,
+        //     toDate: endDate,
+        //   })
+        // );
+
+        refetch()
       }
     },
-    [data, refetch]
+    [selectedProject, dateRange, data, refetch]
   );
 
   useEffect(() => {
@@ -169,51 +241,35 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
-
-
   return (
     <>
       <div
-        className="dataTables_length text-start py-2 d-flex flex-wrap justify-content-between"
+        className="dataTables_length text-start py-2 d-flex justify-content-between"
         id="DataTables_Table_0_length"
       >
-        <div className="d-flex flex-wrap align-items-center gap-2 gap-md-3 my-0">
+        <div className="d-flex align-items-center my-0 ">
-          {/* Date Range Picker */}
+          <DateRangePicker
-          <div className="flex-grow-1 flex-md-grow-0">
+            onRangeChange={setDateRange}
-            <DateRangePicker
+            defaultStartDate={yesterday}
-              onRangeChange={setDateRange}
+          />
-              defaultStartDate={yesterday}
+          <div className="form-check form-switch text-start m-0 ms-5">
-            />
-          </div>
-
-          {/* Pending Attendance Switch */}
-          <div className="form-check form-switch text-start mb-0">
             <input
               type="checkbox"
               className="form-check-input"
               role="switch"
-              id="inactiveEmployeesCheckbox"
               disabled={isFetching}
+              id="inactiveEmployeesCheckbox"
               checked={showPending}
               onChange={(e) => setShowPending(e.target.checked)}
             />
-            <label className="form-check-label ms-0 ms-md-0">
+            <label className="form-check-label ms-0">Show Pending</label>
-              Pending Attendance
-            </label>
           </div>
         </div>
        
       </div>
-
+      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
-      <div
-        className="table-responsive text-nowrap"
-        style={{ minHeight: "200px" }}
-      >
         {isLoading ? (
-          <div
+          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
-            className="d-flex justify-content-center align-items-center"
-            style={{ height: "200px" }}
-          >
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -224,10 +280,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
                   Name
                 </th>
                 <th className="border-top-1">Date</th>
-                <th>Organization</th>
+                {/* <th>Organization</th> */}
                 <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
+                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                  Check-In
                 </th>
                 <th>
                   <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@@ -271,12 +326,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
                           lastName={attendance.lastName}
                         />
                         <div className="d-flex flex-column">
-                          <a
+                          <a href="#" className="text-heading text-truncate">
-                            onClick={() =>
-                              navigate(`/employee/${attendance.employeeId}?for=attendance`)
-                            }
-                            className="text-heading text-truncate cursor-pointer"
-                          >
                             <span className="fw-normal">
                               {attendance.firstName} {attendance.lastName}
                             </span>
@@ -289,7 +339,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
                         attendance.checkInTime || attendance.checkOutTime
                       ).format("DD-MMM-YYYY")}
                     </td>
-                    <td>{attendance.organizationName || "--"}</td>
+                    {/* <td>{attendance.organizationName || "--"}</td>  */}
                     <td>{convertShortTime(attendance.checkInTime)}</td>
                     <td>
                       {attendance.checkOutTime
@@ -311,11 +361,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12">
+          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
-            <span className="text-secondary">
-              No attendance record found in selected date range.
-            </span>
-          </div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
@@ -327,45 +373,11 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         </div>
       )}
       {filteredSearchData.length > ITEMS_PER_PAGE && (
-        <nav aria-label="Page ">
+      <Pagination
-          <ul className="pagination pagination-sm justify-content-end py-1">
+                currentPage={currentPage}
-            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+                totalPages={totalPages}
-              <button
+                onPageChange={paginate}
-                className="page-link btn-xs"
+              />
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              (pageNumber) => (
-                <li
-                  key={pageNumber}
-                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    }`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => paginate(pageNumber)}
-                  >
-                    {pageNumber}
-                  </button>
-                </li>
-              )
-            )}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link"
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
       )}
     </>
   );

src/components/Activities/CheckCheckOutForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,6 +9,7 @@ import showToast from "../../services/toastService";
 import { checkIfCurrentDate } from "../../utils/dateUtils";
 import { useMarkAttendance } from "../../hooks/useAttendance";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectName } from "../../hooks/useProjects";
 
 const createSchema = (modeldata) => {
   return z
@@ -19,31 +20,36 @@ const createSchema = (modeldata) => {
         .max(200, "Description should be less than 200 characters")
         .optional(),
     })
-    .refine((data) => {
+    .refine(
-      if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
+      (data) => {
-        const checkIn = new Date(modeldata.checkInTime);
+        if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
-        const [time, modifier] = data.markTime.split(" ");
+          const checkIn = new Date(modeldata.checkInTime);
-        const [hourStr, minuteStr] = time.split(":");
+          const [time, modifier] = data.markTime.split(" ");
-        let hour = parseInt(hourStr, 10);
+          const [hourStr, minuteStr] = time.split(":");
-        const minute = parseInt(minuteStr, 10);
+          let hour = parseInt(hourStr, 10);
+          const minute = parseInt(minuteStr, 10);
 
-        if (modifier === "PM" && hour !== 12) hour += 12;
+          if (modifier === "PM" && hour !== 12) hour += 12;
-        if (modifier === "AM" && hour === 12) hour = 0;
+          if (modifier === "AM" && hour === 12) hour = 0;
 
-        const checkOut = new Date(checkIn);
+          const checkOut = new Date(checkIn);
-        checkOut.setHours(hour, minute, 0, 0);
+          checkOut.setHours(hour, minute, 0, 0);
 
-        return checkOut >= checkIn;
+          return checkOut >= checkIn;
+        }
+        return true;
+      },
+      {
+        message: "Checkout time must be later than check-in time",
+        path: ["markTime"],
       }
-      return true;
+    );
-    }, {
-      message: "Checkout time must be later than check-in time",
-      path: ["markTime"],
-    });
 };
 
 const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
+  const [currentProject, setCurrentProject] = useState(null);
   const projectId = useSelectedProject();
+  const { projectNames, loading } = useProjectName();
   const { mutate: MarkAttendance } = useMarkAttendance();
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
@@ -95,17 +101,24 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
     closeModal();
   };
 
+  useEffect(() => {
+    if (projectId && projectNames) {
+      setCurrentProject(
+        projectNames?.find((project) => project.id === projectId)
+      );
+    }
+  }, [projectNames, projectId, loading]);
+
   return (
-    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 d-flex justify-content-center mb-4">
+      <div className="col-12 d-flex justify-content-center">
-        <label className="fs-5 tex-semibold text-center">
+        <label className="fs-5 text-dark text-center">
           {modeldata?.checkInTime && !modeldata?.checkOutTime
-            ? "Check-Out "
+            ? `Check out for ${currentProject?.name}`
-            : "Check-In "}
+            : `Check In for ${currentProject?.name}`}
         </label>
       </div>
 
-
       <div className="col-6 col-md-6 text-start">
         <label className="form-label" htmlFor="checkInDate">
           {modeldata?.checkInTime && !modeldata?.checkOutTime

src/components/Activities/InfraPlanning.jsx

@@ -33,7 +33,7 @@ const InfraPlanning = () => {
   const selectedService = useCurrentService();
 
   const { projectInfra, isLoading, isError, error, isFetched } =
-    useProjectInfra(selectedProject, selectedService || "");
+    useProjectInfra(selectedProject, selectedService || "" );
 
   const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const canApproveTask = useHasUserPermission(APPROVE_TASK);
@@ -62,13 +62,9 @@ const InfraPlanning = () => {
 
   if (isFetched && (!projectInfra || projectInfra.length === 0)) {
     return (
-      <div
+      <div className="text-center">
-        className="text-center d-flex justify-content-center align-items-center text-muted"
+        <p className="my-3">No Result Found</p>
-        style={{ minHeight: "40vh", fontSize: "0.9rem" }}
-      >
-        <p className="my-3 m-0">No Result Found</p>
       </div>
-
     );
   }
 

src/components/Activities/Regularization.jsx

@@ -1,45 +1,26 @@
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import Avatar from "../common/Avatar";
-import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
+import { convertShortTime } 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 {
+import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
-  cacheData,
-  clearCacheKey,
-  useSelectedProject,
-} from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
-import Pagination from "../../components/common/Pagination";
+import Pagination from "../common/Pagination";
-import { useNavigate } from "react-router-dom";
 
-const Regularization = ({
+const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
-  handleRequest,
-  searchTerm,
-  projectId,
-  organizationId,
-  IncludeInActive,
-}) => {
   const queryClient = useQueryClient();
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
-  const navigate = useNavigate();
+  const { regularizes, loading, error, refetch } =
-  const { regularizes, loading, error, refetch } = useRegularizationRequests(
+    useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
-    selectedProject,
-    organizationId,
-    IncludeInActive
-  );
 
   useEffect(() => {
-    if (!regularizes) return
+    setregularizedList(regularizes);
-    if (regularizes?.length) {
-      setregularizedList(regularizes);
-
-    }
   }, [regularizes]);
 
   const sortByName = (a, b) => {
@@ -74,15 +55,48 @@ const Regularization = ({
     }
     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 { currentPage, totalPages, currentItems, paginate } = usePagination(
+  // const filteredSearchData = useMemo(() => {
-    filteredSearchData,
+  //   let sortedList = [...regularizesList].sort(sortByName);
-    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);
@@ -104,114 +118,84 @@ const Regularization = ({
   }, [employeeHandler]);
 
   return (
-    <div>
+    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
-      <div
+      {loading ? (
-        className="table-responsive pt-3 text-nowrap pb-4"
+        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
-        style={{ minHeight: "200px" }}
+          <p className="text-secondary">Loading...</p>
-      >
+        </div>
-        {loading ? (
+      ) : currentItems?.length > 0 ? (
-          <div
+        <table className="table mb-0">
-            className="d-flex justify-content-center align-items-center"
+          <thead>
-            style={{ height: "200px" }}
+            <tr>
-          >
+              <th colSpan={2}>Name</th>
-            <p className="text-secondary">Loading...</p>
+              <th>Date</th>
-          </div>
+              {/* <th>Organization</th> */}
-        ) : currentItems?.length > 0 ? (
+              <th>
-          <table className="table mb-0">
+                <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
-            <thead>
+              </th>
-              <tr>
+              <th>
-                <th colSpan={2}>Name</th>
+                <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-                <th>Date</th>
+              </th>
-                <th>Organization</th>
+              <th>Action</th>
-                <th>
+            </tr>
-                  <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
+          </thead>
-                </th>
+          <tbody>
-                <th>
+            {currentItems?.map((att, index) => (
-                  <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+              <tr key={index}>
-                </th>
+                <td colSpan={2}>
-                <th colSpan={2}>
+                  <div className="d-flex justify-content-start align-items-center">
-                  Requested By
+                    <Avatar
-                </th>
+                      firstName={att.firstName}
-                <th >
+                      lastName={att.lastName}
-                  Requested At
+                    />
-                </th>
+                    <div className="d-flex flex-column">
-                <th>Action</th>
+                      <a href="#" className="text-heading text-truncate">
-              </tr>
-            </thead>
-            <tbody>
-              {currentItems?.map((att, index) => (
-                <tr key={index}>
-                  <td colSpan={2}>
-                    <div className="d-flex justify-content-start align-items-center">
-                      <Avatar firstName={att.firstName} lastName={att.lastName} />
-                      <div className="d-flex flex-column"> <a
-                        onClick={() =>
-                          navigate(`/employee/${att.employeeId}?for=attendance`)
-                        }
-                        className="text-heading text-truncate cursor-pointer"                        >
                         <span className="fw-normal">
                           {att.firstName} {att.lastName}
                         </span>
                       </a>
-                      </div>
                     </div>
-                  </td>
+                  </div>
-                  <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
+                </td>
+                <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
 
-                  <td>{att.organizationName || "--"}</td>
+                {/* <td>{att.organizationName || "--"}</td> */}
 
-                  <td>{convertShortTime(att.checkInTime)}</td>
+                <td>{convertShortTime(att.checkInTime)}</td>
-                  <td>
+                <td>
-                    {att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
+                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
-                  </td>
+                </td>
+                <td className="text-center ">
+                  <RegularizationActions
+                    attendanceData={att}
+                    handleRequest={handleRequest}
+                    refresh={refetch}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
 
-                  <td colSpan={2}>
+      ) : (
-                    {att.requestedBy ? (<div className="d-flex justify-content-start align-items-center">
+        <div
-                      <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
+          className="d-flex justify-content-center align-items-center"
-                      <div className="d-flex flex-column">
+          style={{ height: "200px" }}
-                        <a href="#" className="text-heading text-truncate">
+        >
-                          <span className="fw-normal">
+          <span className="text-secondary">
-                            {att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
+            {searchTerm
-                          </span>
+              ? "No results found for your search."
-                        </a>
+              : "No Requests Found !"}
-                      </div>
+          </span>
-                    </div>) : (<small>--</small>)}
+        </div>
-                  </td>
+      )}
-                  <td>
+      {!loading && totalPages > 1 && (
-                    {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt, true) : "--"}
+        <Pagination
-                  </td>
+                currentPage={currentPage}
-                  <td className="text-center ">
+                totalPages={totalPages}
-                    <RegularizationActions
+                onPageChange={paginate}
-                      attendanceData={att}
+              />
-                      handleRequest={handleRequest}
-                      refresh={refetch}
-                    />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        ) : (
-          <div
-            className="d-flex justify-content-center align-items-center"
-            style={{ height: "200px" }}
-          >
-            <span className="text-secondary">
-              {searchTerm
-                ? "No results found for your search."
-                : "No Requests Found !"}
-            </span>
-          </div>
-        )}
-      </div>
-      {totalPages > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={paginate}
-        />
       )}
-
     </div>
   );
 };

src/components/Charts/HorizontalBarChart.jsx

@@ -23,7 +23,7 @@ const HorizontalBarChart = ({
   if (loading) {
     return (
       <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
-        <span className="text-gray-500">Loading chart...</span>
+        <span className="text-gray-500 text-sm">Loading chart...</span>
         {/* Replace this with a skeleton or spinner if you prefer */}
       </div>
     );

src/components/Context/ChangePasswordContext.jsx

@@ -0,0 +1,42 @@
+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 } from "../../hooks/useProjects";
+import { useCurrentService, useProjectInfra } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -10,14 +10,15 @@ 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 selectedProject = useSelectedProject();
+  const selectedProjec = useSelectedProject();
   const selectedService = useCurrentService();
-  const { data } = useTaskFilter(selectedProject);
+  const { projectInfra, isLoading, error, isFetched } = useProjectInfra(
-
+    selectedProjec,
+    selectedService
+  );
   const methods = useForm({
     resolver: zodResolver(TaskReportFilterSchema),
     defaultValues: TaskReportDefaultValue,
@@ -29,25 +30,23 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
     handleSubmit,
     formState: { errors },
   } = methods;
-  const closePanel = () => {
+
-    document.querySelector(".offcanvas.show .btn-close")?.click();
-  };
   const onSubmit = (formData) => {
-    const filterPayload = {
+  console.log(formData)
-      ...formData,
+     const filterPayload = {
-      dateFrom: localToUtc(formData.dateFrom),
+      startDate:localToUtc(formData.startDate),
-      dateTo: localToUtc(formData.dateTo),
+      endDate:localToUtc(formData.endDate)
-    };
+      
+     }
     handleFilter(filterPayload);
-    closePanel();
   };
 
-  const onClear = () => {
+  const onClear =()=>{
     setResetKey((prev) => prev + 1);
-    handleFilter(TaskReportDefaultValue);
+    handleFilter(TaskReportDefaultValue)
-    reset(TaskReportDefaultValue);
+    reset(TaskReportDefaultValue)
-    closePanel();
+  }
-  };
+  
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
@@ -55,48 +54,34 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
           <label className="fw-semibold">Choose Date Range:</label>
           <DateRangePicker1
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="dateFrom"
+            startField="startDate"
-            endField="dateTo"
+            endField="endDate"
             resetSignal={resetKey}
-            defaultRange={false}
+            defaultRange={true}
-            maxDate={new Date()}
           />
         </div>
 
-        <div className="row mb-2">
+        {/* <div className="row g-2">
-          <SelectMultiple
+            <SelectMultiple
-            name="buildingIds"
+              name="buildingIds"
-            label="Building"
+              label="Projects"
-            options={data?.buildings}
+              options={projectInfra}
-            labelKey="name"
+              labelKey="buildingName"
-            valueKey="id"
+              valueKey="id"
-          />
+            />
-        </div>
+          </div>
-        <div className="row mb-2">
+          <div className="row g-2">
-          <SelectMultiple
+            <SelectMultiple
-            name="floorIds"
+              name="floorIds"
-            label="Floor"
+              label="Floor"
-            options={data?.floors}
+              options={projectInfra}
-            labelKey="name"
+              labelKey="floorName"
-            valueKey="id"
+              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
+          <button type="button" className="btn btn-label-secondary btn-sm" onClick={onClear}>
-            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

@@ -29,7 +29,7 @@ const TaskReportList = () => {
   const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
   const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
 
-  const { service, openModal, closeModal, filter } = useDailyProgrssContext();
+  const { service, openModal, closeModal,filter } = useDailyProgrssContext();
   const selectedProject = useSelectedProject();
   const { projectNames } = useProjectName();
 
@@ -37,7 +37,7 @@ const TaskReportList = () => {
     selectedProject,
     ITEMS_PER_PAGE,
     currentPage,
-    service, filter
+    service,filter
   );
 
   const ProgrssReportColumn = [
@@ -192,114 +192,109 @@ const TaskReportList = () => {
   if (isLoading) return <TaskReportListSkeleton />;
   if (isError) return <div>Loading....</div>;
   return (
-    <div>
+    <div className="mt-2">
-      <div className="mt-2 table-responsive text-nowrap">
+      <table className="table">
-        <table className="table">
+        <thead>
-          <thead>
+          <tr>
+            <th className="text-start">Activity</th>
+            <th>
+              <span>
+                Total Pending{" "}
+                <HoverPopup
+                  title="Total Pending Task"
+                  content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                >
+                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                </HoverPopup>
+              </span>
+            </th>
+            <th>
+              <span>
+                Reported/Planned{" "}
+                <HoverPopup
+                  title="Reported and Planned Task"
+                  content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                >
+                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
+                </HoverPopup>
+              </span>
+            </th>
+            <th>Assign Date</th>
+            <th>Team</th>
+            <th className="text-center">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groupedTasks.length === 0 && (
             <tr>
-              <th className="text-start">Activity</th>
+              <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
-              <th>
+                No reports available
-                <span>
+              </td>
-                  Total Pending{" "}
-                  <HoverPopup
-                    title="Total Pending Task"
-                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
-                  >
-                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                  </HoverPopup>
-                </span>
-              </th>
-              <th>
-                <span>
-                  Reported/Planned{" "}
-                  <HoverPopup
-                    title="Reported and Planned Task"
-                    content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
-                  >
-                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                  </HoverPopup>
-                </span>
-              </th>
-              <th>Assign Date</th>
-              <th>Team</th>
-              <th className="text-center">Actions</th>
             </tr>
-          </thead>
+          )}
-          <tbody>
+
-            {groupedTasks.length === 0 && (
+          {groupedTasks.map(({ date, tasks }) => (
-              <tr>
+            <React.Fragment key={date}>
-                <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
+              <tr className="table-row-header text-start">
-                  No reports available
+                <td colSpan={6}>
+                  <strong>{formatUTCToLocalTime(date)}</strong>
                 </td>
               </tr>
-            )}
+              {tasks.map((task, idx) => (
-
+                <tr key={task.id || idx}>
-            {groupedTasks.map(({ date, tasks }) => (
+                  <td className="flex-wrap text-start">
-              <React.Fragment key={date}>
+                    <div>
-                <tr className="table-row-header text-start">
+                      {task.workItem.activityMaster?.activityName || "No Activity Name"}
-                  <td colSpan={6}>
+                    </div>
-                    <strong>{formatUTCToLocalTime(date)}</strong>
+                    <div className="text-sm py-2">
+                      {task.workItem.workArea?.floor?.building?.name} ›{" "}
+                      {task.workItem.workArea?.floor?.floorName} ›{" "}
+                      {task.workItem.workArea?.areaName}
+                    </div>
+                  </td>
+                  <td>
+                    {formatNumber(task.workItem.plannedWork)}
+                  </td>
+                  <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
+                  <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
+                  <td className="text-center">{renderTeamMembers(task, idx)}</td>
+                  <td className="text-center">
+                    <div className="d-flex justify-content-end gap-2">
+                      {ReportTaskRights && !task.reportedDate && (
+                        <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
+                          Report
+                        </button>
+                      )}
+                      {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
+                        <button
+                          className="btn btn-xs btn-warning"
+                          onClick={() => openModal("comments", { task, isActionAllow: true })}
+                        >
+                          QC
+                        </button>
+                      )}
+                      <button
+                        className="btn btn-xs btn-primary"
+                        onClick={() => openModal("comments", { task, isActionAllow: false })}
+                      >
+                        Comment
+                      </button>
+                    </div>
                   </td>
                 </tr>
-                {tasks.map((task, idx) => (
+              ))}
-                  <tr key={task.id || idx}>
+            </React.Fragment>
-                    <td className="flex-wrap text-start">
+          ))}
-                      <div>
+        </tbody>
-                        {task.workItem.activityMaster?.activityName || "No Activity Name"}
+      </table>
-                      </div>
+      {data?.data?.length > 0 && (
-                      <div className="text-sm py-2">
+        <Pagination
-                        {task.workItem.workArea?.floor?.building?.name} ›{" "}
+          currentPage={currentPage}
-                        {task.workItem.workArea?.floor?.floorName} ›{" "}
+          totalPages={data.totalPages}
-                        {task.workItem.workArea?.areaName}
+          onPageChange={paginate}
-                      </div>
+        />
-                    </td>
+      )}
-                    <td>
+    </div>
-                      {formatNumber(task.workItem.plannedWork)}
-                    </td>
-                    <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
-                    <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                    <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                    <td className="text-center">
-                      <div className="d-flex justify-content-end gap-2">
-                        {ReportTaskRights && !task.reportedDate && (
-                          <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
-                            Report
-                          </button>
-                        )}
-                        {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                          <button
-                            className="btn btn-xs btn-warning"
-                            onClick={() => openModal("comments", { task, isActionAllow: true })}
-                          >
-                            QC
-                          </button>
-                        )}
-                        <button
-                          className="btn btn-xs btn-primary"
-                          onClick={() => openModal("comments", { task, isActionAllow: false })}
-                        >
-                          Comment
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </React.Fragment>
-            ))}
-          </tbody>
-        </table>
-
-      </div>
-      {
-        data?.data?.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={data.totalPages}
-            onPageChange={paginate}
-          />
-        )
-      }
-    </div >
   );
 };
 

src/components/DailyProgressRport/TaskRportScheam.jsx

@@ -1,17 +1,15 @@
 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(),
-  activityIds: z.array(z.string()).optional(),
+  startDate: z.string().optional(),
-  dateFrom: z.string().optional(),
+  endDate: z.string().optional(),
-  dateTo: z.string().optional(),
 });
 
 export const TaskReportDefaultValue = {
-    buildingIds:[],
+    // buildingIds:[],
-    floorIds:[],
+    // floorIds:[],
-    activityIds:[],
+    startDate:null,
-    dateFrom:null,
+    endDate:null
-    dateTo:null
 }

src/components/Dashboard/Attendance.jsx

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from "react";
 import ApexChart from "../Charts/Circle";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
-import { useSelectedProject } from "../../hooks/useSelectedProject"; // ✅ your custom hook
+import { useSelectedProject } from "../../hooks/useSelectedProject"; 
 
 const Attendance = () => {
   const { projects } = useProjects();
@@ -31,7 +31,7 @@ const selectedProjectId = useSelectedProject()
       <div className="card-header mb-1 pb-0">
         <div className="d-flex flex-wrap justify-content-between align-items-center">
           <div className="card-title mb-0 text-start">
-            <h5 className="mb-1">Attendance</h5>
+            <h5 className="mb-1 card-title">Attendance</h5>
             <p className="card-subtitle">Daily Attendance Data</p>
           </div>
 

src/components/Dashboard/AttendanceChart.jsx

@@ -1,205 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { useSelector } from "react-redux";
-import ReactApexChart from "react-apexcharts";
-import { useAttendanceOverviewData } from "../../hooks/useDashboard_Data";
-import flatColors from "../Charts/flatColor";
-import ChartSkeleton from "../Charts/Skelton";
-
-const formatDate = (dateStr) => {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString("en-GB", {
-    day: "2-digit",
-    month: "long",
-  });
-};
-
-const AttendanceOverview = () => {
-  const [dayRange, setDayRange] = useState(7);
-  const [view, setView] = useState("chart");
-
-  const projectId = useSelector((store) => store.localVariables.projectId);
-  const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
-    projectId,
-    dayRange
-  );
-
-  const { tableData, roles, dates } = useMemo(() => {
-    const map = new Map();
-
-    attendanceOverviewData.forEach((entry) => {
-      const date = formatDate(entry.date);
-      if (!map.has(date)) map.set(date, {});
-      map.get(date)[entry.role.trim()] = entry.present;
-    });
-
-    const uniqueRoles = [
-      ...new Set(attendanceOverviewData.map((e) => e.role.trim())),
-    ];
-    const sortedDates = [...map.keys()];
-    const data = sortedDates.map((date) => {
-      const row = { date };
-      uniqueRoles.forEach((role) => {
-        row[role] = map.get(date)?.[role] ?? 0;
-      });
-      return row;
-    });
-
-    return {
-      tableData: data,
-      roles: uniqueRoles,
-      dates: sortedDates,
-    };
-  }, [attendanceOverviewData]);
-
-  const chartSeries = roles.map((role) => ({
-    name: role,
-    data: tableData.map((row) => row[role]),
-  }));
-
-  const chartOptions = {
-    chart: {
-      type: "bar",
-      stacked: true,
-      height: 400,
-      toolbar: { show: false },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 2,
-        columnWidth: "60%",
-      },
-    },
-    xaxis: {
-      categories: tableData.map((row) => row.date),
-    },
-    yaxis: {
-      show: true,
-      axisBorder: {
-        show: true,
-        color: "#78909C",
-        offsetX: 0,
-        offsetY: 0,
-      },
-      axisTicks: {
-        show: true,
-        borderType: "solid",
-        color: "#78909C",
-        width: 6,
-        offsetX: 0,
-        offsetY: 0,
-      },
-    },
-    legend: {
-      position: "bottom",
-    },
-    fill: {
-      opacity: 1,
-    },
-    colors: roles.map((_, i) => flatColors[i % flatColors.length]),
-  };
-
-  return (
-    <div className="bg-white p-4 rounded shadow d-flex flex-column">
-      {/* Header */}
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <div className="card-title mb-0 text-start">
-          <h5 className="mb-1 fw-bold">Attendance Overview</h5>
-          <p className="card-subtitle">Role-wise present count</p>
-        </div>
-        <div className="d-flex gap-2">
-          <select
-            className="form-select form-select-sm"
-            value={dayRange}
-            onChange={(e) => setDayRange(Number(e.target.value))}
-          >
-            <option value={7}>Last 7 Days</option>
-            <option value={15}>Last 15 Days</option>
-            <option value={30}>Last 30 Days</option>
-          </select>
-          <button
-            className={`btn btn-sm p-1 ${
-              view === "chart" ? "btn-primary" : "btn-outline-primary"
-            }`}
-            onClick={() => setView("chart")}
-            title="Chart View"
-          >
-            <i className="bx bx-bar-chart-alt-2"></i>
-          </button>
-          <button
-            className={`btn btn-sm p-1 ${
-              view === "table" ? "btn-primary" : "btn-outline-primary"
-            }`}
-            onClick={() => setView("table")}
-            title="Table View"
-          >
-            <i className="bx bx-list-ul fs-5"></i>
-          </button>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-grow-1 d-flex align-items-center justify-content-center">
-        {loading ? (
-          <ChartSkeleton />
-        ) : error ? (
-          <p className="text-danger">{error}</p>
-        ) : view === "chart" ? (
-          <div className="w-100">
-            <ReactApexChart
-              options={chartOptions}
-              series={chartSeries}
-              type="bar"
-              height={400}
-            />
-          </div>
-        ) : (
-          <div
-            className="table-responsive w-100"
-            style={{ maxHeight: "350px", overflowY: "auto" }}
-          >
-            <table className="table table-bordered table-sm text-start align-middle mb-0">
-              <thead
-                className="table-light"
-                style={{ position: "sticky", top: 0, zIndex: 1 }}
-              >
-                <tr>
-                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>
-                    Role
-                  </th>
-                  {dates.map((date, idx) => (
-                    <th
-                      key={idx}
-                      style={{ background: "#f8f9fa", textTransform: "none" }}
-                    >
-                      {date}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-
-              <tbody>
-                {roles.map((role) => (
-                  <tr key={role}>
-                    <td>{role}</td>
-                    {tableData.map((row, idx) => {
-                      const value = row[role];
-                      const cellStyle =
-                        value > 0 ? { backgroundColor: "#d5d5d5" } : {};
-                      return (
-                        <td key={idx} style={cellStyle}>
-                          {value}
-                        </td>
-                      );
-                    })}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AttendanceOverview;

src/components/Dashboard/AttendanceOverview.jsx

@@ -0,0 +1,133 @@
+import React, { useState, useMemo } from "react";
+import { useSelector } from "react-redux";
+import ReactApexChart from "react-apexcharts";
+import { useAttendanceOverviewData } from "../../hooks/useDashboard_Data";
+import flatColors from "../Charts/flatColor";
+import ChartSkeleton from "../Charts/Skelton";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { formatDate_DayMonth } from "../../utils/dateUtils";
+
+
+
+const AttendanceOverview = () => {
+  const [dayRange, setDayRange] = useState(7);
+  const [view, setView] = useState("chart");
+  const selectedProject = useSelectedProject();
+
+  const { data: attendanceOverviewData, isLoading, isError, error } = useAttendanceOverviewData(
+    selectedProject,
+    dayRange
+  );
+
+  // Use empty array while loading
+  const attendanceData = attendanceOverviewData || [];
+
+  const { tableData, roles, dates } = useMemo(() => {
+    if (!attendanceData || attendanceData.length === 0) {
+      return { tableData: [], roles: [], dates: [] };
+    }
+
+    const map = new Map();
+
+    attendanceData.forEach((entry) => {
+      const date = formatDate_DayMonth(entry.date);
+      if (!map.has(date)) map.set(date, {});
+      map.get(date)[entry.role.trim()] = entry.present;
+    });
+
+    const uniqueRoles = [...new Set(attendanceData.map((e) => e.role.trim()))];
+    const sortedDates = [...map.keys()];
+
+    const tableData = sortedDates.map((date) => {
+      const row = { date };
+      uniqueRoles.forEach((role) => {
+        row[role] = map.get(date)?.[role] ?? 0;
+      });
+      return row;
+    });
+
+    return { tableData, roles: uniqueRoles, dates: sortedDates };
+  }, [attendanceData]);
+
+  const chartSeries = roles.map((role) => ({
+    name: role,
+    data: tableData.map((row) => row[role]),
+  }));
+
+  const chartOptions = {
+    chart: { type: "bar", stacked: true, height: 400, toolbar: { show: false } },
+    plotOptions: { bar: { borderRadius: 2, columnWidth: "60%" } },
+    xaxis: { categories: tableData.map((row) => row.date) },
+    yaxis: { show: true, axisBorder: { show: true, color: "#78909C" }, axisTicks: { show: true, color: "#78909C", width: 6 } },
+    legend: { position: "bottom" },
+    fill: { opacity: 1 },
+    colors: roles.map((_, i) => flatColors[i % flatColors.length]),
+  };
+
+  return (
+    <div className="bg-white p-4 rounded shadow d-flex flex-column position-relative " >
+      {/* Optional subtle loading overlay */}
+      {isLoading && (
+        <div className="position-absolute w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-50 z-index-1">
+          <span>Loading...</span>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div className="card-title mb-0 text-start">
+          <h5 className="mb-1 card-title">Attendance Overview</h5>
+          <p className="card-subtitle">Role-wise present count</p>
+        </div>
+        <div className="d-flex gap-2">
+          <select className="form-select form-select-sm" value={dayRange} onChange={(e) => setDayRange(Number(e.target.value))}>
+            <option value={7}>Last 7 Days</option>
+            <option value={15}>Last 15 Days</option>
+            <option value={30}>Last 30 Days</option>
+          </select>
+          <button className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setView("chart")} title="Chart View">
+            <i className="bx bx-bar-chart-alt-2"></i>
+          </button>
+          <button className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setView("table")} title="Table View">
+            <i className="bx bx-list-ul fs-5"></i>
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-grow-1 d-flex align-items-center justify-content-center">
+        {view === "chart" ? (
+          <div className="w-100">
+            <ReactApexChart options={chartOptions} series={chartSeries} type="bar" height={300} />
+          </div>
+        ) : (
+          <div className="table-responsive w-100" style={{ maxHeight: "350px", overflowY: "auto" }}>
+            <table className="table table-bordered table-sm text-start align-middle mb-0">
+              <thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
+                <tr>
+                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
+                  {dates.map((date, idx) => (
+                    <th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {roles.map((role) => (
+                  <tr key={role}>
+                    <td>{role}</td>
+                    {tableData.map((row, idx) => {
+                      const value = row[role];
+                      return <td key={idx} style={value > 0 ? { backgroundColor: "#d5d5d5" } : {}}>{value}</td>;
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AttendanceOverview;

src/components/Dashboard/Dashboard.jsx

@@ -1,83 +1,63 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import {
+// import {
-    useDashboardProjectsCardData,
+//     useDashboardProjectsCardData,
-    useDashboardTeamsCardData,
+//     useDashboardTeamsCardData,
-    useDashboardTasksCardData,
+//     useDashboardTasksCardData,
-    useAttendanceOverviewData
+//     useAttendanceOverviewData
-} from "../../hooks/useDashboard_Data";
+// } from "../../hooks/useDashboard_Data";
 
-import Projects from "./Projects";
+// import Projects from "./Projects";
-import Teams from "./Teams";
+// import Teams from "./Teams";
-import TasksCard from "./Tasks";
+// import TasksCard from "./Tasks";
-import ProjectCompletionChart from "./ProjectCompletionChart";
+// import ProjectCompletionChart from "./ProjectCompletionChart";
-import ProjectProgressChart from "./ProjectProgressChart";
+// import ProjectProgressChart from "./ProjectProgressChart";
-import ProjectOverview from "../Project/ProjectOverview";
+// import ProjectOverview from "../Project/ProjectOverview";
-import AttendanceOverview from "./AttendanceChart";
+import AttendanceOverview from "./AttendanceOverview";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectName } from "../../hooks/useProjects";
 import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 
 const Dashboard = () => {
+  // const { projectsCardData } = useDashboardProjectsCardData();
+  // const { teamsCardData } = useDashboardTeamsCardData();
+  // const { tasksCardData } = useDashboardTasksCardData();
 
-    // Get the selected project ID from Redux store
+  // Get the selected project ID from Redux store
-    const projectId = useSelector((store) => store.localVariables.projectId);
+  const projectId = useSelector((store) => store.localVariables.projectId);
-    const isAllProjectsSelected = projectId === null;
+  const isAllProjectsSelected = projectId === null;
 
-    return (
+  return (
-        <div className="container-fluid mt-5">
+  <div className="container-fluid py-5">
-            <div className="row gy-4">
+  <div className="row mb-6 g-6">
-                {isAllProjectsSelected && (
+    <div className="col-12 col-xl-8">
-                    <div className="col-sm-6 col-lg-4">
+      <div className="card h-100">
-                        <Projects  />
+        <ExpenseAnalysis />
-                    </div>
+      </div>
-                )}
+    </div>
 
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
+    <div className="col-12 col-xl-4 col-md-6">
-                    <Teams  />
+      <div className="card ">
-                </div>
+        <ExpenseStatus />
+      </div>
+    </div>
+  </div>
 
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
+  <div className="row g-6">
-                    <TasksCard/>
+    {!isAllProjectsSelected && (
-                </div>
+      <div className="col-6">
+        <AttendanceOverview />
+      </div>
+    )}
+    <div className="col-6">
+      <ExpenseByProject />
+    </div>
+  </div>
+</div>
 
-                {isAllProjectsSelected && (
+  );
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectCompletionChart />
-                    </div>
-                )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectOverview />
-                    </div>
-                )}
-
-                <div className="col-xxl-6 col-lg-6">
-                    <ProjectProgressChart />
-                </div>
-                <div className="col-12 col-xl-8">
-                    <div className="card h-100">
-                        <ExpenseAnalysis />
-                    </div>
-                </div>
-
-                <div className="col-12 col-xl-4 col-md-6">
-                    <div className="card ">
-                        <ExpenseStatus />
-                    </div>
-                </div>
-                {!isAllProjectsSelected && (
-                    <div className="col-12 col-md-6 mb-sm-0 mb-4 ">
-                        <AttendanceOverview />
-                    </div>
-                )}
-                <div className="col-12 col-md-6">
-                    <ExpenseByProject />
-                </div>
-            </div>
-        </div>
-    );
 };
 
 export default Dashboard;

src/components/Dashboard/DashboardSkeleton.jsx

@@ -1,110 +0,0 @@
-import React from "react";
-
-const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
-  <div
-    className={`skeleton ${className}`}
-    style={{
-      height,
-      width,
-      borderRadius: "4px",
-      background: "linear-gradient(90deg, #eee, #f5f5f5, #eee)",
-      backgroundSize: "200% 100%",
-      animation: "skeleton-loading 1.5s infinite",
-    }}
-  ></div>
-);
-
-const skeletonStyle = `
-@keyframes skeleton-loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-`;
-
-export const ProjectCardSkeleton = () => {
-  return (
-    <>
-      {/* Inject animation CSS once */}
-      <style>{skeletonStyle}</style>
-
-      <div className="card p-3 h-100 text-center d-flex justify-content-between">
-        {/* Header */}
-        <div className="d-flex justify-content-start align-items-center mb-3">
-          <h5 className="fw-bold mb-0 ms-2">
-            <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
-            Projects
-          </h5>
-        </div>
-
-        {/* Skeleton body */}
-        <div className="d-flex justify-content-around align-items-start mt-n2 w-100">
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="40px" className="mx-auto" />
-          </div>
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="40px" className="mx-auto" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export const TeamsSkeleton = () => {
-  return (
-    <>
-      <style>{skeletonStyle}</style>
-
-      <div className="card p-3 h-100 text-center d-flex justify-content-between">
-        {/* Header */}
-        <div className="d-flex justify-content-start align-items-center mb-3">
-          <h5 className="fw-bold mb-0 ms-2">
-            <i className="bx bx-group text-warning"></i> Teams
-          </h5>
-        </div>
-
-        {/* Skeleton Body */}
-        <div className="d-flex justify-content-around align-items-start mt-n2 w-100">
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="90px" className="mx-auto" />
-          </div>
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="70px" className="mx-auto" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-export const TasksSkeleton = () => {
-  return (
-    <>
-      <style>{skeletonStyle}</style>
-
-      <div className="card p-3 h-100 text-center d-flex justify-content-between">
-        {/* Header */}
-        <div className="d-flex justify-content-start align-items-center mb-3">
-          <h5 className="fw-bold mb-0 ms-2">
-            <i className="bx bx-task text-success"></i> Tasks
-          </h5>
-        </div>
-
-        {/* Skeleton Body */}
-        <div className="d-flex justify-content-around align-items-start mt-n2 w-100">
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="70px" className="mx-auto" />
-          </div>
-          <div className="text-center">
-            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
-            <SkeletonLine height={14} width="90px" className="mx-auto" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -5,44 +5,41 @@ import { useSelectedProject } from "../../slices/apiDataManager";
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import { FormProvider, useForm } from "react-hook-form";
 import { formatCurrency, localToUtc } from "../../utils/appUtils";
-import { useProjectName } from "../../hooks/useProjects";
 
 const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
-  const [projectName, setProjectName] = useState("All Project");
-  const { projectNames, loading } = useProjectName();
 
   const methods = useForm({
-    defaultValues: { startDate: "", endDate: "" },
+    defaultValues: {
+      startDate: "",
+      endDate: "",
+    },
   });
 
-  useEffect(() => {
-    if (projectId && projectNames?.length) {
-      const project = projectNames.find((p) => p.id === projectId);
-      setProjectName(project?.name || "All Project");
-    } else {
-      setProjectName("All Project");
-    }
-  }, [projectNames, projectId]);
-
   const { watch } = methods;
-  const [startDate, endDate] = watch(["startDate", "endDate"]);
 
+
+  const [startDate, endDate] = watch(["startDate", "endDate"]);
   const { data, isLoading, isError, error, isFetching } = useExpenseAnalysis(
-    projectId,
+  projectId,
-    startDate ? localToUtc(startDate) : null,
+  startDate ? localToUtc(startDate) : null,
-    endDate ? localToUtc(endDate) : null
+  endDate ? localToUtc(endDate) : null
   );
 
   if (isError) return <div>{error.message}</div>;
 
+
+
+
   const report = data?.report ?? [];
-  const { labels, series, total } = useMemo(() => {
+
-    const labels = report.map((item) => item.projectName);
+const { labels, series, total } = useMemo(() => {
-    const series = report.map((item) => item.totalApprovedAmount || 0);
+  const labels = report.map((item) => item.projectName);
-    const total = formatCurrency(data?.totalAmount || 0);
+  const series = report.map((item) => item.totalApprovedAmount || 0);
-    return { labels, series, total };
+  const total = formatCurrency(data?.totalAmount || 0);
-  }, [report, data?.totalAmount]);
+
+  return { labels, series, total };
+}, [report, data?.totalAmount]);
 
   const donutOptions = {
     chart: { type: "donut" },
@@ -66,100 +63,94 @@ const ExpenseAnalysis = () => {
         },
       },
     },
-    responsive: [
-      {
-        breakpoint: 576, // mobile breakpoint
-        options: {
-          chart: { width: "100%" },
-        },
-      },
-    ],
   };
 
+  if (data?.report === 0) {
+    return <div>No data found</div>;
+  }
+
   return (
     <>
-     
+      <div className="card-header d-flex justify-content-between  align-items-center ">
-        <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
+        <div>
-          <div className="text-start w-100">
+          <h5 className="mb-1 card-title text-start">Expense Breakdown</h5>
-            <h5 className="mb-1 card-title">Expense Breakdown</h5>
+          <p className="card-subtitle">Category Wise Expense Breakdown</p>
-            {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
-            <p className="card-subtitle m-0">{projectName}</p>
-          </div>
-
-          <div className="text-start text-sm-end w-75">
-            <FormProvider {...methods}>
-              <DateRangePicker1 />
-            </FormProvider>
-          </div>
         </div>
 
-        {/* Card body */}
+        <div className="text-end">
-        <div className="card-body position-relative">
+          <FormProvider {...methods}>
-          {isLoading && (
+            <DateRangePicker1 />
-            <div
+          </FormProvider>
-              className="d-flex justify-content-center align-items-center"
+        </div>
-              style={{ height: "200px" }}
+      </div>
-            >
+
-              <span>Loading...</span>
+      <div className="card-body position-relative">
+        {/* Initial loading: show full loader */}
+        {isLoading && (
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: "200px" }}
+          >
+            <span>Loading...</span>
+          </div>
+        )}
+
+        {/* Data display */}
+        {!isLoading && report.length === 0 && (
+          <div className="text-center text-muted py-5">No data found</div>
+        )}
+
+        {!isLoading && report.length > 0 && (
+          <>
+            {/* Overlay spinner for refetch */}
+            {isFetching && (
+              <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
+                <span>Loading...</span>
+              </div>
+            )}
+
+            <div className="d-flex justify-content-center mb-3">
+              <Chart
+                options={donutOptions}
+                series={report.map((item) => item.totalApprovedAmount || 0)}
+                type="donut"
+                width="320"
+              />
             </div>
-          )}
 
-          {!isLoading && report.length === 0 && (
+            <div className="mb-2 w-100">
-            <div className="text-center py-5 text-muted">No data found</div>
+              <div className="row">
-          )}
+                {report.map((item, idx) => (
-
+                  <div
-          {!isLoading && report.length > 0 && (
+                    className="col-6 d-flex justify-content-start align-items-start mb-2"
-            <>
+                    key={idx}
-              {isFetching && (
+                  >
-                <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
+                    <div className="avatar me-2">
-                  <span>Loading...</span>
+                      <span
-                </div>
+                        className="avatar-initial rounded-2"
-              )}
+                        style={{
-
+                          backgroundColor:
-              <div className="d-flex justify-content-center mb-3">
+                            donutOptions.colors[
-                <Chart
+                              idx % donutOptions.colors.length
-                  options={donutOptions}
+                            ],
-                  series={series}
+                        }}
-                  type="donut"
+                      >
-                  width="100%"
+                        <i className="bx bx-receipt fs-4"></i>
-                  height={320}
+                      </span>
-                />
-              </div>
-
-              <div className="mb-2 w-100">
-                <div className="row g-2">
-                  {report.map((item, idx) => (
-                    <div
-                      className="col-12 col-sm-6 d-flex align-items-start"
-                      key={idx}
-                    >
-                      <div className="avatar me-2">
-                        <span
-                          className="avatar-initial rounded-2"
-                          style={{
-                            backgroundColor:
-                              donutOptions.colors[idx % donutOptions.colors.length],
-                          }}
-                        >
-                          <i className="bx bx-receipt fs-4"></i>
-                        </span>
-                      </div>
-                      <div className="d-flex flex-column gap-1 text-start">
-                        <small className="fw-semibold">{item.projectName}</small>
-                        <span className="fw-semibold text-muted ms-1">
-                          {formatCurrency(item.totalApprovedAmount)}
-                        </span>
-                      </div>
                     </div>
-                  ))}
+                    <div className="d-flex flex-column gap-1 text-start">
-                </div>
+                      <small className="fw-semibold ">{item.projectName}</small>
+                      <span className="fw-semibold text-muted ms-1">
+                        {formatCurrency(item.totalApprovedAmount)}
+                      </span>
+                    </div>
+                  </div>
+                ))}
               </div>
-            </>
+            </div>
-          )}
+          </>
-        </div>
+        )}
-   
+      </div>
-      {/* Header */}
-
     </>
   );
 };

src/components/Dashboard/ExpenseByProject.jsx

@@ -5,18 +5,13 @@ import { useSelector } from "react-redux";
 import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
 import { formatCurrency } from "../../utils/appUtils";
 import { formatDate_DayMonth } from "../../utils/dateUtils";
-import { useProjectName } from "../../hooks/useProjects";
-import { useSelectedProject } from "../../slices/apiDataManager";
 
 const ExpenseByProject = () => {
   const projectId = useSelector((store) => store.localVariables.projectId);
-  const [projectName, setProjectName] = useState("All Project");
   const [range, setRange] = useState("12M");
-  const { projectNames, loading } = useProjectName();
   const [selectedType, setSelectedType] = useState("");
   const [viewMode, setViewMode] = useState("Category");
   const [chartData, setChartData] = useState({ categories: [], data: [] });
-  const selectedProject = useSelectedProject();
 
   const { ExpenseTypes, loading: typeLoading } = useExpenseType();
 
@@ -26,15 +21,6 @@ const ExpenseByProject = () => {
     range === "All" ? null : parseInt(range)
   );
 
-  useEffect(() => {
-    if (selectedProject && projectNames?.length) {
-      const project = projectNames.find((p) => p.id === selectedProject);
-      setProjectName(project?.name || "All Project");
-    } else {
-      setProjectName("All Project");
-    }
-  }, [projectNames, selectedProject]);
-
   useEffect(() => {
     if (expenseApiData) {
       const categories = expenseApiData.map((item) =>
@@ -86,9 +72,9 @@ const ExpenseByProject = () => {
       {/* Header */}
       <div className="card-header">
         <div className="d-flex justify-content-start align-items-center mb-3 mt-3">
-          <div className="text-start">
+          <div>
             <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
-            <p className="card-subtitle m-0">{projectName}</p>
+            <p className="card-subtitle me-5 mb-0">Detailed project expenses</p>
           </div>
           <div className="btn-group mb-4 ms-n8">
             <button
@@ -127,14 +113,15 @@ const ExpenseByProject = () => {
         </div>
 
         {/* Range Buttons + Expense Dropdown */}
-        <div className="d-flex align-items-center flex-wrap ">
+        <div className="d-flex align-items-center flex-wrap">
           {["1M", "3M", "6M", "12M", "All"].map((item) => (
             <button
               key={item}
-              className={`border-0 px-2 py-1 text-sm rounded ${range === item
+              className={`border-0 px-2 py-1 text-sm rounded ${
-                ? "text-white bg-primary"
+                range === item
-                : "text-body bg-transparent"
+                  ? "text-white bg-primary"
-                }`}
+                  : "text-body bg-transparent"
+              }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(item)}
             >
@@ -143,7 +130,7 @@ const ExpenseByProject = () => {
           ))}
           {viewMode === "Category" && (
             <select
-              className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
+              className="form-select form-select-sm ms-auto mb-3"
               value={selectedType}
               onChange={(e) => setSelectedType(e.target.value)}
               disabled={typeLoading}
@@ -161,16 +148,15 @@ const ExpenseByProject = () => {
       </div>
 
       {/* Chart */}
-      <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
+      <div
+        className="card-body bg-white text-dark p-3 rounded"
+      >
         {isLoading ? (
           <p>Loading chart...</p>
-        ) : !expenseApiData || expenseApiData.length === 0 ? (
-          <div className="text-center text-muted py-5">No data found</div>
         ) : (
-          <Chart options={options} series={series} type="bar" height={235} />
+          <Chart options={options} series={series} type="bar"  height={235} />
         )}
       </div>
-
     </div>
   );
 };

src/components/Dashboard/ExpenseStatus.jsx

@@ -8,7 +8,6 @@ import { EXPENSE_MANAGE, EXPENSE_STATUS } from "../../utils/constants";
 import { useNavigate } from "react-router-dom";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
-
 const ExpenseStatus = () => {
   const [projectName, setProjectName] = useState("All Project");
   const selectedProject = useSelectedProject();
@@ -43,37 +42,47 @@ const ExpenseStatus = () => {
       </div>
 
       <div className="card-body ">
-
+        <div className=" py-0 text-start mb-2">
+         {isManageExpense && ( <div className="d-flex justify-content-between align-items-center">
+            <div className="d-block">
+              <span className={`fs-semibold d-block ${countDigit(data?.totalAmount) > 3 ? "text-base":"text-lg" }`}>Project Spendings:</span>{" "}
+              <small className="d-block text-xxs text-gary-80">{`(All Processed Payments)`}</small>
+            </div>
+            <span className={`text-end text-royalblue ${countDigit(data?.totalAmount) > 3 ? "text-":"text-3xl" }  text-md`}>
+              {formatCurrency(data?.totalAmount)}
+            </span>
+          </div>)}
+        </div>
         <div className="report-list text-start">
           {[
             {
               title: "Pending Payment",
-              count: data?.processPending?.count || 0,
+              count: data?.approvePending?.count,
-              amount: data?.processPending?.totalAmount || 0,
+              amount: data?.approvePending?.totalAmount,
               icon: "bx bx-rupee",
               iconColor: "text-primary",
               status: EXPENSE_STATUS.payment_pending,
             },
             {
               title: "Pending Approve",
-              count: data?.approvePending?.count || 0,
+              count: data?.processPending?.count,
-              amount: data?.approvePending?.totalAmount || 0,
+              amount: data?.processPending?.totalAmount,
               icon: "fa-solid fa-check",
               iconColor: "text-warning",
               status: EXPENSE_STATUS.approve_pending,
             },
             {
               title: "Pending Review",
-              count: data?.reviewPending?.count || 0,
+              count: data?.reviewPending?.count,
-              amount: data?.reviewPending?.totalAmount || 0,
+              amount: data?.reviewPending?.totalAmount,
               icon: "bx bx-search-alt-2",
               iconColor: "text-secondary",
               status: EXPENSE_STATUS.review_pending,
             },
             {
               title: "Draft",
-              count: data?.draft?.count || 0,
+              count: data?.submited?.count,
-              amount: data?.draft?.totalAmount || 0,
+              amount: data?.submited?.totalAmount,
               icon: "bx bx-file-blank",
               iconColor: "text-info",
               status: EXPENSE_STATUS.daft,
@@ -93,20 +102,14 @@ const ExpenseStatus = () => {
                 <div className="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
                   <div className="d-flex flex-column gap-2">
                     <span className="fw-bold">{item?.title}</span>
-                    {item?.amount ? (
+                    {item?.amount ?   <small className="mb-0 text-primary">
-                      <small className="mb-0 text-primary">
+                      {formatCurrency(item?.amount)}
-                        {formatCurrency(item?.amount)}
+                    </small> :""}
-                      </small>
-                    ) : (
-                      <small className="mb-0 text-primary">{formatCurrency(0)}</small>
-                    )}
                   </div>
-                  <div>
+                  <div className="">
-                    <small
+                    {" "}
-                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
+                    <small className={`text-royalblue ${countDigit(item?.count) >= 3 ? "text-xl" : "text-2xl"} text-gray-500`}>
-                        } text-gray-500`}
+                   {item?.count }
-                    >
-                      {item?.count || 0}
                     </small>
                     <small className="text-muted fs-semibold text-royalblue text-md">
                       <i className="bx bx-chevron-right"></i>
@@ -117,38 +120,6 @@ const ExpenseStatus = () => {
             </div>
           ))}
         </div>
-
-        <div className=" py-0 text-start mb-2">
-          {isManageExpense && (
-            <div
-              className="d-flex justify-content-between align-items-center cursor-pointer"
-              onClick={() => handleNavigate(EXPENSE_STATUS.process_pending)}
-            >
-              <div className="d-block">
-                <span
-                  className={`fs-semibold d-block ${countDigit(data?.totalAmount || 0) > 3 ? "text-base" : "text-lg"
-                    }`}
-                >
-                  Project Spendings:
-                </span>{" "}
-                <small className="d-block text-xxs text-gary-80">
-                  (All Processed Payments)
-                </small>
-              </div>
-              <div className="d-flex align-items-center gap-2">
-                <span
-                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
-                    } text-md`}
-                >
-                  {formatCurrency(data?.totalAmount || 0)}
-                </span>
-                <small className="text-muted fs-semibold text-royalblue text-md">
-                  <i className="bx bx-chevron-right"></i>
-                </small>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     </>
   );

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -3,8 +3,7 @@ import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
 
 const ProjectCompletionChart = () => {
-  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
+  const { projects, loading } = useProjects();
-
 
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
@@ -12,7 +11,7 @@ const ProjectCompletionChart = () => {
     projects?.map((p) => {
       const completed = p.completedWork || 0;
       const planned = p.plannedWork || 1;
-      const percent = planned ? (completed / planned) * 100 : 0;
+      const percent = (completed / planned) * 100;
       return Math.min(Math.round(percent), 100);
     }) || [];
 

src/components/Dashboard/Projects.jsx

@@ -1,9 +1,6 @@
 import React, { useEffect } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
-import ProjectInfra from "../Project/ProjectInfra";
-import { ProjectCardSkeleton } from "./DashboardSkeleton";
-import { formatFigure } from "../../utils/appUtils";
 
 const Projects = () => {
   const {
@@ -11,7 +8,6 @@ const Projects = () => {
     isLoading,
     isError,
     error,
-    isFetching,
     refetch,
   } = useDashboardProjectsCardData();
 
@@ -27,7 +23,7 @@ const Projects = () => {
 
   const totalProjects = projectsCardData?.totalProjects ?? 0;
   const ongoingProjects = projectsCardData?.ongoingProjects ?? 0;
-  if (isLoading) return <ProjectCardSkeleton />;
+
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -37,41 +33,24 @@ const Projects = () => {
         </h5>
       </div>
 
-      {isError ? (
+      {isLoading ? (
-        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <i className="bx bx-error-circle bx-sm fs-2 "></i>
+          <div className="spinner-border text-primary" role="status">
-          <small className="text-muted mb-2">
+            <span className="visually-hidden">Loading...</span>
-            {error?.message || "Unable to load data at the moment."}
+          </div>
-          </small>
+        </div>
-          <span
+      ) : isError ? (
-            className={`text-muted ${
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-              isFetching ? "cursor-wait" : "cursor-pointer"
+          {error?.message || "Error loading data"}
-            }`}
-            onClick={refetch}
-          >
-            <i
-              className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
-            ></i>{" "}
-            Retry
-          </span>
         </div>
       ) : (
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
-            <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{totalProjects.toLocaleString()}</h4>
-               {formatFigure(totalProjects ?? 0, {
-              notation: "compact",
-            })}
-            </h4>
-           
             <small className="text-muted">Total</small>
           </div>
           <div>
-            <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{ongoingProjects.toLocaleString()}</h4>
-              {formatFigure(ongoingProjects ?? 0, {
-                notation: "compact",
-              })}
-            </h4>
             <small className="text-muted">Ongoing</small>
           </div>
         </div>

src/components/Dashboard/Tasks.jsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
-import { TasksSkeleton } from "./DashboardSkeleton";
-import { formatCurrency, formatFigure } from "../../utils/appUtils";
 
 const TasksCard = () => {
   const projectId = useSelectedProject();
@@ -12,57 +10,42 @@ const TasksCard = () => {
     isLoading,
     isError,
     error,
-    isFetching,
-    refetch,
   } = useDashboardTasksCardData(projectId);
-  if (isLoading) return <TasksSkeleton />;
+
   return (
-    <div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
+    <div className="card p-3 h-100 text-center d-flex justify-content-between">
-      {/* Header */}
       <div className="d-flex justify-content-start align-items-center mb-3">
         <h5 className="fw-bold mb-0 ms-2">
           <i className="bx bx-task text-success"></i> Tasks
         </h5>
       </div>
 
-      {isError ? (
+      {isLoading ? (
-        <div className="d-flex flex-column justify-content-center align-items-center p-3">
+        // Loader while fetching
-          <i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <small className="text-muted mb-2">
+          <div className="spinner-border text-primary" role="status">
-            {error?.message || "Unable to load data at the moment."}
+            <span className="visually-hidden">Loading...</span>
-          </small>
+          </div>
-          <span
+        </div>
-            className={`text-muted ${
+      ) : isError ? (
-              isFetching ? "cursor-wait" : "cursor-pointer"
+        // Show error
-            }`}
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-            onClick={refetch}
+          {error?.message || "Error loading data"}
-          >
-            <i
-              className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
-            ></i>
-            Retry
-          </span>
         </div>
       ) : (
-        <div className="d-flex justify-content-around align-items-start flex-wrap mt-n2">
+        // Show data
-          {/* Total Tasks */}
+        <div className="d-flex justify-content-around align-items-start mt-n2">
-          <div className="text-center flex-fill p-2">
+          <div>
-            <h4 className="mb-0 fw-bold text-truncate">
+            <h4 className="mb-0 fw-bold">
-              {formatFigure(tasksCardData?.totalTasks ?? 0, {
+              {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
-                notation: "compact",
-              })}
             </h4>
-            <small className="text-muted d-block">Total</small>
+            <small className="text-muted">Total</small>
           </div>
-
+          <div>
-          {/* Completed Tasks */}
+            <h4 className="mb-0 fw-bold">
-          <div className="text-center flex-fill p-2">
+              {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
-            <h4 className="mb-0 fw-bold text-truncate">
-              {formatFigure(tasksCardData?.completedTasks ?? 0, {
-                notation: "compact",
-              })}
             </h4>
-            <small className="text-muted d-block">Completed</small>
+            <small className="text-muted">Completed</small>
           </div>
         </div>
       )}

src/components/Dashboard/Teams.jsx

@@ -4,20 +4,16 @@ import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSelectedProject } from "../../slices/apiDataManager";
-import { TeamsSkeleton } from "./DashboardSkeleton";
-import { formatFigure } from "../../utils/appUtils";
 
 const Teams = () => {
   const queryClient = useQueryClient();
-  const projectId = useSelectedProject();
+ const projectId = useSelectedProject()
 
   const {
     data: teamsCardData,
     isLoading,
     isError,
     error,
-    isFetching,
-    refetch,
   } = useDashboardTeamsCardData(projectId);
 
   // Handle real-time updates via eventBus
@@ -44,7 +40,6 @@ const Teams = () => {
   const inToday = teamsCardData?.inToday ?? 0;
   const totalEmployees = teamsCardData?.totalEmployees ?? 0;
 
-  if (isLoading) return <TeamsSkeleton />;
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -53,41 +48,24 @@ const Teams = () => {
         </h5>
       </div>
 
-      {isError ? (
+      {isLoading ? (
-        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <i className="bx bx-error-circle bx-sm fs-2 "></i>
+          <div className="spinner-border text-primary" role="status">
-
+            <span className="visually-hidden">Loading...</span>
-          <small className="text-muted mb-2">
+          </div>
-            {error?.message || "Unable to load data at the moment."}
+        </div>
-          </small>
+      ) : isError ? (
-          <span
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-            className={`text-muted ${
+          {error?.message || "Error loading data"}
-              isFetching ? "cursor-wait" : "cursor-pointer"
-            }`}
-            onClick={refetch}
-          >
-            <i
-              className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
-            ></i>{" "}
-            Retry
-          </span>
         </div>
       ) : (
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
-            <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
-              {formatFigure(totalEmployees ?? 0, {
-                notation: "compact",
-              })}
-            </h4>
             <small className="text-muted">Total Employees</small>
           </div>
           <div>
-            <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{inToday.toLocaleString()}</h4>
-              {formatFigure(inToday ?? 0, {
-                notation: "compact",
-              })}
-            </h4>
             <small className="text-muted">In Today</small>
           </div>
         </div>

src/components/Directory/AssignedBucket.jsx

@@ -19,8 +19,11 @@ const AssignedBucket = ({ selectedBucket, handleClose }) => {
     }
   }, [selectedBucket, employeesList]);
 
-  const { mutate: AssignEmployee, isPending } = useAssignEmpToBucket(() =>
+  const { mutate: AssignEmployee, isPending } = useAssignEmpToBucket(() =>{
+     setSelectedEmployees([])
     handleClose()
+  }
+   
   );
 
   const handleSubmit = async (e) => {

src/components/Directory/ContactFilterChips.jsx

@@ -1,56 +0,0 @@
-import React, { useMemo } from "react";
-
-const ContactFilterChips = ({ filters, filterData, removeFilterChip, clearFilter }) => {
-  const data = filterData?.data || filterData || {};
-
-  const filterChips = useMemo(() => {
-    const chips = [];
-
-    const addGroup = (ids, list, label, key) => {
-      if (!ids?.length) return;
-      const items = ids.map((id) => ({
-        id,
-        name: list?.find((i) => i.id === id)?.name || id,
-      }));
-      chips.push({ key, label, items });
-    };
-
-    addGroup(filters.bucketIds, data.buckets, "Buckets", "bucketIds");
-    addGroup(filters.categoryIds, data.contactCategories, "Category", "categoryIds");
-
-    return chips;
-  }, [filters, filterData]);
-
-  if (!filterChips.length) return null;
-
-  return (
-    <div className="d-flex flex-wrap align-items-center gap-2">
-      {filterChips.map((chipGroup) => (
-        <div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
-          <span className="fw-semibold me-2">{chipGroup.label}:</span>
-          {chipGroup.items.map((item) => (
-            <span
-              key={item.id}
-              className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
-            >
-              <span>{item.name}</span>
-              <button
-                type="button"
-                className="btn-close btn-close-white btn-sm ms-2"
-                style={{
-                  filter: "invert(1) grayscale(1)",
-                  opacity: 0.7,
-                  fontSize: "0.6rem",
-                }}
-                onClick={() => removeFilterChip(chipGroup.key, item.id)}
-              />
-            </span>
-          ))}
-        </div>
-      ))}
-
-    </div>
-  );
-};
-
-export default ContactFilterChips;

src/components/Directory/ListViewContact.jsx

@@ -4,8 +4,9 @@ import Pagination from "../common/Pagination";
 import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
 import { useActiveInActiveContact } from "../../hooks/useDirectory";
 import ConfirmModal from "../common/ConfirmModal";
+import Loader from "../common/Loader";
 
-const ListViewContact = ({ data, Pagination }) => {
+const ListViewContact = ({ data, Pagination, isLoading }) => {
   const { showActive, setManageContact, setContactOpen } =
     useDirectoryContext();
   const [deleteContact, setDeleteContact] = useState({
@@ -85,6 +86,8 @@ const ListViewContact = ({ data, Pagination }) => {
     ActiveInActive({ contactId: contactId, contactStatus: !showActive });
   };
 
+  if(isLoading) return <Loader/>
+  if(!data|| data.length === 0)return <div className="text-center py-12">No Contact Found</div>
   return (
     <>
       <ConfirmModal
@@ -97,103 +100,98 @@ const ListViewContact = ({ data, Pagination }) => {
         paramData={deleteContact.contactId}
         isOpen={deleteContact.Open}
       />
-      <div className="card ">
+      <div className="card page-min-h">
         <div
           className="card-datatable table-responsive"
           id="horizontal-example"
         >
-          <div className="dataTables_wrapper no-footer mx-5 pb-2">
+         
-            <table className="table dataTable text-nowrap">
+          {data && (
-              <thead>
+            <div className="dataTables_wrapper no-footer mx-5 pb-2">
-                <tr className="table_header_border">
+              <table className="table dataTable text-nowrap">
-                  {contactList?.map((col) => (
+                <thead>
-                    <th key={col.key} className={col.align}>
+                  <tr className="table_header_border">
-                      {col.label}
+                    {contactList?.map((col) => (
+                      <th key={col.key} className={col.align}>
+                        {col.label}
+                      </th>
+                    ))}
+                    <th className="sticky-action-column bg-white text-center">
+                      Action
                     </th>
-                  ))}
-                  <th className="sticky-action-column bg-white text-center">
-                    Action
-                  </th>
-                </tr>
-              </thead>
-              <tbody >
-                {Array.isArray(data) && data.length > 0 ? (
-                  data.map((row, i) => (
-                    <tr
-                      key={i}
-                      style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
-                    >
-                      {contactList.map((col) => (
-                        <td key={col.key} className={col.align}>
-                          {col.getValue(row)}
-                        </td>
-                      ))}
-                      <td className="text-center">
-                        {showActive ? (
-                          <div className="d-flex justify-content-center gap-2">
-                            <i
-                              className="bx bx-show text-primary cursor-pointer"
-                              onClick={() =>
-                                setContactOpen({ contact: row, Open: true })
-                              }
-                            ></i>
-
-                            <i
-                              className="bx bx-edit text-secondary cursor-pointer"
-                              onClick={() =>
-                                setManageContact({
-                                  isOpen: true,
-                                  contactId: row.id,
-                                })
-                              }
-                            ></i>
-
-                            <i
-                              className="bx bx-trash text-danger cursor-pointer"
-                              onClick={() =>
-                                setDeleteContact({
-                                  contactId: row.id,
-                                  Open: true,
-                                })
-                              }
-                            ></i>
-                          </div>
-                        ) : (
-                          <i
-                            className={`bx  ${isPending && activeContact === row.id
-                                ? "bx-loader-alt bx-spin"
-                                : "bx-recycle"
-                              } me-1 text-primary cursor-pointer`}
-                            title="Restore"
-                            onClick={() => {
-                              setActiveContact(row.id);
-                              handleActiveInactive(row.id);
-                            }}
-                          ></i>
-                        )}
-                      </td>
-                    </tr>
-                  ))
-                ) : (
-                  <tr style={{ height: "200px" }}>
-                    <td
-                      colSpan={contactList.length + 1}
-                      className="text-center border-0 align-middle"
-                    >
-                      No contacts found
-                    </td>
                   </tr>
+                </thead>
+                <tbody>
+                  {Array.isArray(data) && data.length > 0 && (
+                    data.map((row, i) => (
+                      <tr
+                        key={i}
+                        style={{
+                          background: `${!showActive ? "#f8f6f6" : ""}`,
+                        }}
+                      >
+                        {contactList.map((col) => (
+                          <td key={col.key} className={col.align}>
+                            {col.getValue(row)}
+                          </td>
+                        ))}
+                        <td className="text-center">
+                          {showActive ? (
+                            <div className="d-flex justify-content-center gap-2">
+                              <i
+                                className="bx bx-show text-primary cursor-pointer"
+                                onClick={() =>
+                                  setContactOpen({ contact: row, Open: true })
+                                }
+                              ></i>
+
+                              <i
+                                className="bx bx-edit text-secondary cursor-pointer"
+                                onClick={() =>
+                                  setManageContact({
+                                    isOpen: true,
+                                    contactId: row.id,
+                                  })
+                                }
+                              ></i>
+
+                              <i
+                                className="bx bx-trash text-danger cursor-pointer"
+                                onClick={() =>
+                                  setDeleteContact({
+                                    contactId: row.id,
+                                    Open: true,
+                                  })
+                                }
+                              ></i>
+                            </div>
+                          ) : (
+                            <i
+                              className={`bx  ${
+                                isPending && activeContact === row.id
+                                  ? "bx-loader-alt bx-spin"
+                                  : "bx-recycle"
+                              } me-1 text-primary cursor-pointer`}
+                              title="Restore"
+                              onClick={() => {
+                                setActiveContact(row.id);
+                                handleActiveInactive(row.id);
+                              }}
+                            ></i>
+                          )}
+                        </td>
+                      </tr>
+                    ))
+                  ) }
+                </tbody>
+              </table>
+              {Pagination && (
+                <div className="d-flex justify-content-start">{Pagination}</div>
+              )}
+            </div>
+          )}
          
-                )}
-              </tbody>
-            </table>
-          </div>
         </div>
-        {Pagination && (
-          <div className="d-flex justify-content-start">
-            {Pagination}
-          </div>
-        )}
       </div>
     </>
   );

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 { data:projects, loading: projectLoading } = useProjects();
+  const { data: projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { organizationList } = useOrganization();
@@ -205,13 +205,14 @@ const ManageContact = ({ contactId, closeModal }) => {
             <Label htmlFor={"organization"} required>
               Organization
             </Label>
-           <InputSuggestions
+            <InputSuggestions
-    organizationList={organizationList}
+              organizationList={organizationList}
-  value={watch("organization") || ""}
+              value={watch("organization") || ""}
-  onChange={(val) => setValue("organization", val, { shouldValidate: true })}
+              onChange={(val) =>
-  error={errors.organization?.message}
+                setValue("organization", val, { shouldValidate: true })
-/>
+              }
-
+              error={errors.organization?.message}
+            />
           </div>
         </div>
 
@@ -394,6 +395,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               labelKey="name"
               valueKey="id"
               IsLoading={projectLoading}
+              
             />
             {errors.projectIds && (
               <small className="danger-text">{errors.projectIds.message}</small>
@@ -408,6 +410,7 @@ const ManageContact = ({ contactId, closeModal }) => {
             label="Tags"
             options={contactTags}
             isRequired={true}
+            require
           />
           {errors.tags && (
             <small className="danger-text">{errors.tags.message}</small>
@@ -417,7 +420,7 @@ const ManageContact = ({ contactId, closeModal }) => {
         {/* Buckets */}
         <div className="row">
           <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Bucket</label>
+            <Label required>Select Bucket</Label>
             <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
@@ -450,7 +453,7 @@ const ManageContact = ({ contactId, closeModal }) => {
         </div>
 
         {/* Address + Description */}
-        <div className="col-12 text-start">
+        <div className="col-12 text-start mb-2">
           <label className="form-label">Address</label>
           <textarea
             className="form-control form-control-sm"
@@ -459,7 +462,7 @@ const ManageContact = ({ contactId, closeModal }) => {
           />
         </div>
         <div className="col-12 text-start">
-          <label className="form-label">Description</label>
+          <Label required>Description</Label>
           <textarea
             className="form-control form-control-sm"
             rows="2"
@@ -479,10 +482,13 @@ const ManageContact = ({ contactId, closeModal }) => {
           >
             Cancel
           </button>
-          <button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
+          <button
+            className="btn btn-sm btn-primary"
+            type="submit"
+            disabled={isPending}
+          >
             {isPending ? "Please Wait..." : "Submit"}
           </button>
-         
         </div>
       </form>
     </FormProvider>

src/components/Directory/NoteFilterChips.jsx

@@ -1,79 +0,0 @@
-import React, { useMemo } from "react";
-import moment from "moment";
-
-const NoteFilterChips = ({ filters, filterData, removeFilterChip }) => {
-  // Normalize data (in case it’s wrapped in .data)
-  const data = filterData?.data || filterData || {};
-
-  const filterChips = useMemo(() => {
-    const chips = [];
-
-    const buildGroup = (ids, list, label, key) => {
-      if (!ids?.length) return;
-      const items = ids.map((id) => ({
-        id,
-        name: list?.find((item) => item.id === id)?.name || id,
-      }));
-      chips.push({ key, label, items });
-    };
-
-    // Build chips dynamically
-    buildGroup(filters.createdByIds, data.createdBy, "Created By", "createdByIds");
-    buildGroup(filters.organizations, data.organizations, "Organization", "organizations");
-
-    // Example: Add date range if you ever add in future
-    if (filters.startDate || filters.endDate) {
-      const start = filters.startDate ? moment(filters.startDate).format("DD-MM-YYYY") : "";
-      const end = filters.endDate ? moment(filters.endDate).format("DD-MM-YYYY") : "";
-      chips.push({
-        key: "dateRange",
-        label: "Date Range",
-        items: [{ id: "dateRange", name: `${start} - ${end}` }],
-      });
-    }
-
-    return chips;
-  }, [filters, filterData]);
-
-  if (!filterChips.length) return null;
-
-  return (
-    <div className="row my-2">
-      <div className="col-12">
-        <div className="d-flex flex-wrap align-items-start gap-2">
-          {filterChips.map((chip) => (
-            <div
-              key={chip.key}
-              className="d-flex align-items-center flex-wrap px-2 py-1"
-              style={{ fontSize: "0.9rem" }}
-            >
-              <span className="fw-semibold me-2">{chip.label}:</span>
-              <div className="d-flex flex-wrap align-items-center gap-1">
-                {chip.items.map((item) => (
-                  <span
-                    key={item.id}
-                    className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
-                  >
-                    <span>{item.name}</span>
-                    <button
-                      type="button"
-                      className="btn-close btn-close-white btn-sm ms-2"
-                      style={{
-                        filter: "invert(1) grayscale(1)",
-                        opacity: 0.7,
-                        fontSize: "0.6rem",
-                      }}
-                      onClick={() => removeFilterChip(chip.key, item.id)}
-                    />
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NoteFilterChips;

src/components/Documents/DocumentFilterChips.jsx

@@ -1,94 +0,0 @@
-import React, { useMemo } from "react";
-import moment from "moment";
-
-const DocumentFilterChips = ({ filters, filterData, removeFilterChip }) => {
-  // Normalize structure: handle both "filterData.data" and plain "filterData"
-  const data = filterData?.data || filterData || {};
-
-  const filterChips = useMemo(() => {
-    const chips = [];
-
-    const buildGroup = (ids, list, label, key) => { 
-      if (!ids?.length) return;
-      const items = ids.map((id) => ({
-        id,
-        name: list?.find((item) => item.id === id)?.name || id,
-      }));
-      chips.push({ key, label, items });
-    };
-
-    // Build chips using normalized data
-    buildGroup(filters.uploadedByIds, data.uploadedBy || [], "Uploaded By", "uploadedByIds");
-    buildGroup(filters.documentCategoryIds, data.documentCategory || [], "Category", "documentCategoryIds");
-    buildGroup(filters.documentTypeIds, data.documentType || [], "Type", "documentTypeIds");
-    buildGroup(filters.documentTagIds, data.documentTag || [], "Tags", "documentTagIds");
-
-    if (filters.statusIds?.length) {
-      const items = filters.statusIds.map((status) => ({
-        id: status,
-        name:
-          status === true
-            ? "Verified"
-            : status === false
-            ? "Rejected"
-            : "Pending",
-      }));
-      chips.push({ key: "statusIds", label: "Status", items });
-    }
-
-    if (filters.startDate || filters.endDate) {
-      const start = filters.startDate ? moment(filters.startDate).format("DD-MM-YYYY") : "";
-      const end = filters.endDate ? moment(filters.endDate).format("DD-MM-YYYY") : "";
-      chips.push({
-        key: "dateRange",
-        label: "Date Range",
-        items: [{ id: "dateRange", name: `${start} - ${end}` }],
-      });
-    }
-
-    return chips;
-  }, [filters, filterData]);
-
-  if (!filterChips.length) return null;
-
-
-  return (
-    <div className="row my-2">
-      <div className="col-12">
-        <div className="d-flex flex-wrap align-items-start gap-1">
-          {filterChips.map((chip) => (
-            <div
-              key={chip.key}
-              className="d-flex align-items-center flex-wrap px-2 py-1"
-              style={{ fontSize: "0.9rem" }}
-            >
-              <span className="fw-semibold me-2">{chip.label}:</span>
-              <div className="d-flex flex-wrap align-items-center gap-1">
-                {chip.items.map((item) => (
-                  <span
-                    key={item.id}
-                    className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
-                  >
-                    <span>{item.name}</span>
-                    <button
-                      type="button"
-                      className="btn-close btn-close-white btn-sm ms-2"
-                      style={{
-                        filter: "invert(1) grayscale(1)",
-                        opacity: 0.7,
-                        fontSize: "0.6rem",
-                      }}
-                      onClick={() => removeFilterChip(chip.key, item.id)}
-                    />
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DocumentFilterChips;

src/components/Documents/DocumentFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useImperativeHandle, forwardRef } from "react";
+import React, { useState } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,34 +9,16 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import moment from "moment";
-import { useParams } from "react-router-dom";
 
-const DocumentFilterPanel = forwardRef(
+const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
-  ({ entityTypeId, onApply, setFilterdata }, ref) => {
   const [resetKey, setResetKey] = useState(0);
-  const { status } = useParams();
 
   const { data, isError, isLoading, error } =
     useDocumentFilterEntities(entityTypeId);
 
-  //changes
-
-  const dynamicDocumentFilterDefaultValues = useMemo(() => {
-    return {
-      ...DocumentFilterDefaultValues,
-      uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
-      documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
-      documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
-      documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
-      startDate: DocumentFilterDefaultValues.startDate,
-      endDate: DocumentFilterDefaultValues.endDate,
-    };
-
-  }, [status]);
-
   const methods = useForm({
     resolver: zodResolver(DocumentFilterSchema),
-    defaultValues: dynamicDocumentFilterDefaultValues,
+    defaultValues: DocumentFilterDefaultValues,
   });
 
   const { handleSubmit, reset, setValue, watch } = methods;
@@ -50,24 +32,6 @@ const DocumentFilterPanel = forwardRef(
     document.querySelector(".offcanvas.show .btn-close")?.click();
   };
 
-  useImperativeHandle(ref, () => ({
-    resetFieldValue: (name, value) => {
-      if (value !== undefined) {
-        setValue(name, value);
-      } else {
-        reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
-      }
-    },
-    getValues: methods.getValues, // optional, to read current filter state
-  }));
-
-  //changes
-  useEffect(() => {
-    if (data && setFilterdata) {
-      setFilterdata(data);
-    }
-  }, [data, setFilterdata]);
-
   const onSubmit = (values) => {
     onApply({
       ...values,
@@ -78,14 +42,14 @@ const DocumentFilterPanel = forwardRef(
         ? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
         : null,
     });
-    // closePanel();
+    closePanel();
   };
 
   const onClear = () => {
     reset(DocumentFilterDefaultValues);
     setResetKey((prev) => prev + 1);
     onApply(DocumentFilterDefaultValues);
-    // closePanel();
+    closePanel();
   };
 
   if (isLoading) return <div>Loading...</div>;
@@ -99,8 +63,6 @@ const DocumentFilterPanel = forwardRef(
     documentTag = [],
   } = data?.data || {};
 
-
-
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -111,16 +73,18 @@ const DocumentFilterPanel = forwardRef(
             <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
+                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  }`}
+                  isUploadedAt ? "active btn-secondary text-white" : ""
+                }`}
                 onClick={() => setValue("isUploadedAt", true)}
               >
                 Uploaded On
               </button>
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
+                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  }`}
+                  !isUploadedAt ? "active btn-secondary text-white" : ""
+                }`}
                 onClick={() => setValue("isUploadedAt", false)}
               >
                 Updated On
@@ -237,6 +201,6 @@ const DocumentFilterPanel = forwardRef(
       </form>
     </FormProvider>
   );
-});
+};
 
 export default DocumentFilterPanel;

src/components/Documents/DocumentSkeleton.jsx

@@ -17,54 +17,56 @@ const SkeletonCell = ({
   />
 );
 
-export const DocumentTableSkeleton = ({ rows = 5 }) => {
+export const DocumentTableSkeleton = ({ rows = 10 }) => {
   return (
+    <table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
+      <thead>
+        <tr>
+          <th className="text-start">Name</th>
+          <th className="text-start">Document Type</th>
+          <th className="text-start">Uploaded By</th>
+          <th className="text-center">Uploaded on</th>
+          <th className="text-center">Status</th>
+        </tr>
+      </thead>
 
-      <table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
+      <tbody>
-        <thead>
+        {[...Array(rows)].map((_, idx) => (
-          <tr>
+          <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
-            <th className="text-start">Name</th>
+            {/* Name */}
-            <th className="text-start">Document Type</th>
+            <td className="text-start">
-            <th className="text-start">Uploaded By</th>
+              <SkeletonCell width="120px" height={16} />
-            <th className="text-center">Uploaded on</th>
+            </td>
-            <th className="text-center">Status</th>
-          </tr>
-        </thead>
 
-        <tbody>
+            {/* Document Type */}
-          {[...Array(rows)].map((_, idx) => (
+            <td className="text-start">
-            <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
+              <SkeletonCell width="100px" height={16} />
-              {/* Name */}
+            </td>
-              <td className="text-start">
-                <SkeletonCell width="120px" height={16} />
-              </td>
 
-              {/* Document Type */}
+            {/* Uploaded By (Avatar + Name) */}
-              <td className="text-start">
+            <td className="text-start">
-                <SkeletonCell width="100px" height={16} />
+              <div className="d-flex align-items-center gap-2">
-              </td>
+                <SkeletonCell
-
+                  width="30px"
-              {/* Uploaded By (Avatar + Name) */}
+                  height={30}
-              <td className="text-start">
+                  className="rounded-circle"
-                <div className="d-flex align-items-center gap-2">
+                />
-                  <SkeletonCell width="30px" height={30} className="rounded-circle" />
-                  <SkeletonCell width="80px" height={16} />
-                </div>
-              </td>
-
-              {/* Uploaded on */}
-              <td className="text-center">
                 <SkeletonCell width="80px" height={16} />
-              </td>
+              </div>
+            </td>
 
-              {/* Status */}
+            {/* Uploaded on */}
-              <td className="text-center">
+            <td className="text-center">
-                <SkeletonCell width="70px" height={20} className="rounded" />
+              <SkeletonCell width="80px" height={16} />
-              </td>
+            </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
 
+            {/* Status */}
+            <td className="text-center">
+              <SkeletonCell width="70px" height={20} className="rounded" />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   );
 };

src/components/Documents/Documents.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import GlobalModel from "../common/GlobalModel";
 import NewDocument from "./ManageDocument";
 import { DOCUMENTS_ENTITIES, UPLOAD_DOCUMENT } from "../../utils/constants";
@@ -17,7 +17,6 @@ import ViewDocument from "./ViewDocument";
 import DocumentViewerModal from "./DocumentViewerModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
-import DocumentFilterChips from "./DocumentFilterChips";
 
 // Context
 export const DocumentContext = createContext();
@@ -52,14 +51,12 @@ const Documents = ({ Document_Entity, Entity }) => {
   const [isSelf, setIsSelf] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [isActive, setIsActive] = useState(true);
-  const [filters, setFilter] = useState(DocumentFilterDefaultValues);
+  const [filters, setFilter] = useState();
   const [isRefetching, setIsRefetching] = useState(false);
   const [refetchFn, setRefetchFn] = useState(null);
   const [DocumentEntity, setDocumentEntity] = useState(Document_Entity);
   const { employeeId } = useParams();
   const [OpenDocument, setOpenDocument] = useState(false);
-  const [filterData, setFilterdata] = useState(DocumentFilterDefaultValues);
-  const updatedRef = useRef();
   const [ManageDoc, setManageDoc] = useState({
     document: null,
     isOpen: false,
@@ -95,7 +92,7 @@ const Documents = ({ Document_Entity, Entity }) => {
     setShowTrigger(true);
     setOffcanvasContent(
       "Document Filters",
-      <DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} setFilterdata={setFilterdata} ref={updatedRef} />
+      <DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} />
     );
 
     return () => {
@@ -118,35 +115,13 @@ const Documents = ({ Document_Entity, Entity }) => {
       setDocumentEntity(Document_Entity);
     }
   }, [Document_Entity]);
-
-
-  const removeFilterChip = (key, id) => {
-    const updatedFilters = { ...filters };
-    if (Array.isArray(updatedFilters[key])) {
-      updatedFilters[key] = updatedFilters[key].filter((v) => v !== id);
-      updatedRef.current?.resetFieldValue(key,updatedFilters[key]);
-    }
-    else if (key === "dateRange") {
-      updatedFilters.startDate = null;
-      updatedFilters.endDate = null;
-      updatedRef.current?.resetFieldValue("startDate",null);
-      updatedRef.current?.resetFieldValue("endDate",null);
-    }
-    else {
-      updatedFilters[key] = null;
-    }
-    setFilter(updatedFilters);
-   return updatedFilters;
-  };
-
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-2">
-        <div className="card page-min-h d-flex p-5">
+        <div className="card page-min-h d-flex p-2">
-          <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
           <div className="row align-items-center">
             {/* Search */}
-            <div className="d-flex flex-row gap-2 col-12 col-md-8 col-lg-4 mb-md-0 align-items-center mb-2">
+            <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
               <div className="d-flex">
                 {" "}
                 <input
@@ -174,7 +149,7 @@ const Documents = ({ Document_Entity, Entity }) => {
               </label>
             </div>
 
-            <div className="col-12 col-md-6 col-lg-8 text-end">
+            <div className="col-6 col-md-6 col-lg-8 text-end">
               {(isSelf || canUploadDocument) && (
                 <button
                   className="btn btn-sm btn-primary me-3"

src/components/Documents/DocumentsList.jsx

@@ -84,7 +84,7 @@ const DocumentsList = ({
     return <div>Error: {error?.message || "Something went wrong"}</div>;
   if (isInitialEmpty) return <div className="py-12 my-12">No documents found yet.</div>;
   if (isSearchEmpty) return <div className="py-12 my-12">No results found for "{debouncedSearch}"</div>;
-  if (isFilterEmpty) return <div className="py-12 my-12">No documents match your filter.</div>;
+  if (isFilterEmpty) return <div  className="py-12 my-12">No documents match your filter.</div>;
 
   const handleDelete = () => {
     ActiveInActive(
@@ -138,14 +138,16 @@ const DocumentsList = ({
             lastName={e.uploadedBy?.lastName}
           />
           <span className="text-truncate ms-1">
-            {`${e.uploadedBy?.firstName ?? ""} ${e.uploadedBy?.lastName ?? ""
+            {`${e.uploadedBy?.firstName ?? ""} ${
-              }`.trim() || "N/A"}
+              e.uploadedBy?.lastName ?? ""
+            }`.trim() || "N/A"}
           </span>
         </div>
       ),
       getValue: (e) =>
-        `${e.uploadedBy?.firstName ?? ""} ${e.uploadedBy?.lastName ?? ""
+        `${e.uploadedBy?.firstName ?? ""} ${
-          }`.trim() || "N/A",
+          e.uploadedBy?.lastName ?? ""
+        }`.trim() || "N/A",
     },
     {
       key: "uploadedAt",
@@ -178,10 +180,10 @@ const DocumentsList = ({
         />
       )}
 
-      <div className="table-responsive">
+      <div className="table-responsive p-2">
         <table className="table border-top dataTable text-nowrap">
-          <thead>
+          <thead className="">
-            <tr className="shadow-sm">
+            <tr className="py-2 ">
               {DocumentColumns.map((col) => (
                 <th key={col.key} className={`sorting ${col.align}`}>
                   {col.label}
@@ -215,7 +217,7 @@ const DocumentsList = ({
                           }
                         ></i>
 
-                        {(isSelf || canModifyDocument) && (
+                          {(isSelf || canModifyDocument) && (
                           <i
                             className="bx bx-edit text-secondary cursor-pointer"
                             onClick={() =>
@@ -224,7 +226,7 @@ const DocumentsList = ({
                           ></i>
                         )}
 
-                        {(isSelf || canDeleteDocument) && (
+                         {(isSelf || canDeleteDocument) && (
                           <i
                             className="bx bx-trash text-danger cursor-pointer"
                             onClick={() => {

src/components/Employee/EmpAttendance.jsx

@@ -14,24 +14,28 @@ 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 = () => {
+const EmpAttendance = ({ employee }) => {
-  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: moment().subtract(6, "days").format("DD-MM-YYYY"),
+      startDate: "",
-      endDate: moment().format("DD-MM-YYYY"),
+      endDate: "",
     },
   });
-  const { watch } = methods;
+  const { control, register, handleSubmit, reset, watch } = methods;
-
+  const startDate = watch("startDate");
-  const [startDate, endDate] = watch(["startDate", "endDate"]);
+  const endDate = watch("endDate");
   const {
     data = [],
     isLoading: loading,
@@ -40,20 +44,76 @@ const EmpAttendance = () => {
     error,
     refetch,
   } = useAttendanceByEmployee(
-    employeeId,
+    employee,
-    startDate ? localToUtc(startDate) : null,
+    localToUtc(startDate),
-    endDate ? localToUtc(endDate) : null
+    localToUtc(endDate)
   );
-
   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).getTime() - new Date(a?.checkInTime).getTime()
+      new Date(b.checkInTime || b.checkOutTime) -
+      new Date(a.checkInTime || a.checkOutTime)
   );
 
-
+  const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    sorted,
+    sortedFinalList,
     ITEMS_PER_PAGE
   );
 
@@ -63,6 +123,7 @@ const EmpAttendance = () => {
   };
   const closeModal = () => setIsModalOpen(false);
 
+  const onSubmit = (formData) => {};
   return (
     <>
       {isModalOpen && (
@@ -70,15 +131,25 @@ const EmpAttendance = () => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-2 py-2 page-min-h ">
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
-          <div className="col-4 col-md-3 my-0 ">
+          <div className="col-3 my-0 ">
             <>
               <FormProvider {...methods}>
-                <DateRangePicker1 />
+                <form
+                  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>
@@ -163,7 +234,7 @@ const EmpAttendance = () => {
             </table>
           )}
         </div>
-        {!loading && data.length > 20 && (
+        {!loading && sortedFinalList.length > 20 && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/components/Employee/EmpBanner.jsx

@@ -1,13 +1,12 @@
 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 {onOpen}  = useModal("ChangePassword")
+  const { openChangePassword } = useChangePassword();
   const [showModal, setShowModal] = useState(false);
 
   return (
@@ -87,7 +86,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 && (   
+                {profile?.isActive && (   // ✅ show only if active
                   <li className="list-inline-item">
                     <button
                       className="btn btn-sm btn-primary btn-block"
@@ -102,7 +101,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
                   {profile?.id === loggedInUser?.employeeInfo?.id && (
                     <button
                       className="btn btn-sm btn-outline-primary btn-block"
-                      onClick={onOpen}
+                      onClick={() => openChangePassword()}
                     >
                       Change Password
                     </button>

src/components/Employee/EmpDashboard.jsx

@@ -12,11 +12,11 @@ const EmpDashboard = ({ profile }) => {
   return (
     <>
       <div className="row">
-        <div className="col-12 col-sm-6 pt-5">
+        <div className="col-12 col-sm-6 pt-2">
           {" "}
           <EmpOverview profile={profile}></EmpOverview>
         </div>
-        <div className="col col-sm-6 pt-5">
+        {/* <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small text-start d-block">
@@ -29,7 +29,6 @@ const EmpDashboard = ({ profile }) => {
                     className="d-flex mb-4 align-items-start flex-wrap"
                     key={project.id}
                   >
-                    {/* Project Info */}
                     <div className="flex-grow-1">
                       <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="d-flex">
@@ -70,7 +69,6 @@ const EmpDashboard = ({ profile }) => {
                         </div>
                       </div>
 
-                      {/* Dates */}
 
                     </div>
                   </li>
@@ -79,7 +77,7 @@ const EmpDashboard = ({ profile }) => {
 
             </div>
           </div>
-        </div>
+        </div> */}
       </div>
     </>
   );

src/components/Employee/EmployeeNav.jsx

@@ -24,7 +24,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
       icon: "bx bx-file",
       label: "Documents",
     },
-    { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
+    // { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
   ].filter(Boolean);
   return (
     <div className="col-md-12">

src/components/Employee/EmployeeSchema.jsx

@@ -90,7 +90,7 @@ export  const employeeSchema =
       .min(1, { message: "Phone Number is required" })
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
     jobRoleId: z.string().min(1, { message: "Role is required" }),
-    organizationId:z.string().min(1,{message:"Organization is required"}),
+    // organizationId:z.string().min(1,{message:"Organization is required"}),  // hide temp. for version 1
     hasApplicationAccess:z.boolean().default(false),
   }).refine((data) => {
   if (data.hasApplicationAccess) {
@@ -119,6 +119,6 @@ export const defatEmployeeObj = {
       permanentAddress:  "",
       phoneNumber:  "",
       jobRoleId: null,
-      organizationId:"",
+      // organizationId:"",
       hasApplicationAccess:false
     }

src/components/Employee/ManageEmployee.jsx

@@ -15,18 +15,18 @@ import {
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
 import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
-import { useOrganizationsList } from "../../hooks/useOrganization";
+// import { useOrganizationsList } from "../../hooks/useOrganization";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const ManageEmployee = ({ employeeId, onClosed }) => {
+const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
   const { mutate: updateEmployee, isPending } = useUpdateEmployee();
-  const {
+  // const {
-    data: organzationList,
+  //   data: organzationList,
-    isLoading,
+  //   isLoading,
-    isError,
+  //   isError,
-    error: EempError,
+  //   error: EempError,
-  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
+  // } = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
   const {
     employee,
     error,
@@ -72,7 +72,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
       data.email = null;
     }
 
-    const payload = { ...data };
+    const payload = { ...data, IsAllEmployee };
 
     if (employeeId) {
       payload.id = employeeId;
@@ -113,7 +113,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             permanentAddress: currentEmployee.permanentAddress || "",
             phoneNumber: currentEmployee.phoneNumber || "",
             jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-            organizationId: currentEmployee.organizationId || "",
+            // organizationId: currentEmployee.organizationId || "",     //   Hide temp. for version 1
             hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
           }
         : {}
@@ -413,9 +413,10 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
           </div>
         </div>
 
-        {/* -------------- */}
+       
         <div className="row mb-3">
-          <div className="col-sm-6">
+           {/* -------------- Temp hide for Version---------------*/}
+          {/* <div className="col-sm-6">
             <Label className="form-text text-start" required>
               Organization
             </Label>
@@ -446,9 +447,10 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 {errors.organizationId.message}
               </div>
             )}
-          </div>
+          </div> */}
+          {/* --------------------------------------------------- */}
 
-          <div className="col-sm-6 d-flex align-items-center mt-2">
+          <div className="col-12 d-flex align-items-center mt-2">
             <label className="form-check-label d-flex align-items-center">
               <input
                 type="checkbox"
@@ -584,15 +586,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             )}
           </div>
         </div>
-        <div className="row text-end">
+        <div className="d-flex flex-row gap-3 justify-content-end">
-          <div className="col-sm-12">
             <button
               aria-label="manage employee"
-              type="reset"
               className="btn btn-sm btn-label-secondary me-2"
               disabled={isPending}
+              onClick={()=>onClosed()}
             >
-              Clear
+              Close
             </button>
             <button
               aria-label="manage employee"
@@ -600,9 +601,8 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               className="btn btn-sm btn-primary"
               disabled={isPending}
             >
-              {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
+              {isPending ? "Please Wait..." : employeeId ? "Update" : "Submit"}
             </button>
-          </div>
         </div>
       </form>
     </>

src/components/Employee/handleEmployeeExport.jsx

@@ -1,84 +0,0 @@
-import moment from "moment";
-import { exportToExcel, exportToCSV, exportToPDF, printTable } from "../../utils/tableExportUtils";
-
-/**
- * Handles export operations for employee data.
- * @param {string} type - Export type: 'csv', 'excel', 'pdf', or 'print'
- * @param {Array} employeeList - Full employee data array
- * @param {Array} filteredData - Filtered employee data (if search applied)
- * @param {string} searchText - Current search text (used to decide dataset)
- * @param {RefObject} tableRef - Table reference (used for print)
- */
-const handleEmployeeExport = (type, employeeList, filteredData, searchText, tableRef) => {
-    // Export full list (filtered if search applied)
-    const dataToExport = searchText ? filteredData : employeeList;
-
-    if (!dataToExport || dataToExport.length === 0) return;
-
-    // Map and format employee data for export
-    const exportData = dataToExport.map((item) => ({
-        "First Name": item.firstName || "",
-        "Middle Name": item.middleName || "",
-        "Last Name": item.lastName || "",
-        "Email": item.email || "",
-        "Gender": item.gender || "",
-        "Birth Date": item.birthdate
-            ? moment(item.birthdate).format("DD-MMM-YYYY")
-            : "",
-        "Joining Date": item.joiningDate
-            ? moment(item.joiningDate).format("DD-MMM-YYYY")
-            : "",
-        "Permanent Address": item.permanentAddress || "",
-        "Current Address": item.currentAddress || "",
-        "Phone Number": item.phoneNumber || "",
-        "Emergency Phone Number": item.emergencyPhoneNumber || "",
-        "Emergency Contact Person": item.emergencyContactPerson || "",
-        "Is Active": item.isActive ? "Active" : "Inactive",
-        "Job Role": item.jobRole || "",
-    }));
-
-    switch (type) {
-        case "csv":
-            exportToCSV(exportData, "employees");
-            break;
-
-        case "excel":
-            exportToExcel(exportData, "employees");
-            break;
-
-        case "pdf":
-            exportToPDF(
-                dataToExport.map((item) => ({
-                    Name: `${item.firstName || ""} ${item.lastName || ""}`.trim(),
-                    Email: item.email || "",
-                    "Phone Number": item.phoneNumber || "",
-                    "Job Role": item.jobRole || "",
-                    "Joining Date": item.joiningDate
-                        ? moment(item.joiningDate).format("DD-MMM-YYYY")
-                        : "",
-                    Gender: item.gender || "",
-                    Status: item.isActive ? "Active" : "Inactive",
-                })),
-                "employees",
-                [
-                    "Name",
-                    "Email",
-                    "Phone Number",
-                    "Job Role",
-                    "Joining Date",
-                    "Gender",
-                    "Status",
-                ]
-            );
-            break;
-
-        case "print":
-            printTable(tableRef.current);
-            break;
-
-        default:
-            break;
-    }
-};
-
-export default handleEmployeeExport;

src/components/Expenses/ActiveFilters.jsx

@@ -0,0 +1,50 @@
+const ActiveFilters = ({ filters, optionsLookup = {}, onRemove }) => {
+  const entries = Object.entries(filters || {});
+
+  return (
+    <div className="d-flex flex-wrap gap-2">
+      {entries.map(([key, value]) => {
+        if (!value || (Array.isArray(value) && value.length === 0)) return null;
+
+        if (Array.isArray(value)) {
+          return value.map((v) => {
+            const label = optionsLookup[key]?.[v] || v;
+            return (
+              <span
+                key={`${key}-${v}`}
+                className="badge bg-label-primary cursor-pointer"
+                onClick={() => onRemove(key, v)}
+              >
+                {label} <i className="bx bx-x ms-1"></i>
+              </span>
+            );
+          });
+        }
+
+        if (typeof value === "boolean") {
+          return (
+            <span
+              key={key}
+              className="badge bg-label-success cursor-pointer"
+              onClick={() => onRemove(key)}
+            >
+              {key}: {value ? "Yes" : "No"} <i className="bx bx-x ms-1"></i>
+            </span>
+          );
+        }
+
+        return (
+          <span className="badge bg-primary">
+            {data?.startDate && data?.endDate
+              ? `${formatUTCToLocalTime(
+                  data.startDate
+                )} - ${formatUTCToLocalTime(data.endDate)}`
+              : "No dates"}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ActiveFilters;

src/components/Expenses/ExpenseFilterChips.jsx

@@ -40,44 +40,47 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
     if (!filterChips.length) return null;
 
     return (
-        <div className="row">
+<div className="row">
-            <div className="col-12">
+  <div className="col-12">
-                <div className="d-flex flex-wrap align-items-start gap-1 text-start">
+    <div className="d-flex flex-wrap align-items-start gap-1 text-start">
-                    {filterChips.map((chip) => (
+      {filterChips.map((chip) => (
-                        <div
+        <div
-                            key={chip.key}
+          key={chip.key}
-                            className="d-flex align-items-center flex-wrap   px-2 py-1 "
+          className="d-flex align-items-center flex-wrap   px-2 py-1 "
-                            style={{ fontSize: "0.9rem", maxWidth: "100%" }}
+          style={{ fontSize: "0.9rem", maxWidth: "100%" }}
-                        >
+        >
-                            {/* Chip Label */}
+          {/* Chip Label */}
-                            <span className="fw-semibold me-2">{chip.label}:</span>
+          <span className="fw-semibold me-2">{chip.label}:</span>
 
-                            {/* Chip Items */}
+          {/* Chip Items */}
-                            <div className="d-flex flex-wrap align-items-center gap-1">
+          <div className="d-flex flex-wrap align-items-center gap-1">
-                                {chip.items.map((item) => (
+            {chip.items.map((item) => (
-                                    <span
+              <span
-                                        key={item.id}
+                key={item.id}
-                                        className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
+                className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
-                                    >
+              >
-                                        <span>{item.name}</span>
+                <span>{item.name}</span>
-                                        <button
+                <button
-                                            type="button"
+                  type="button"
-                                            className="btn-close btn-close-white btn-sm ms-2"
+                  className="btn-close btn-close-white btn-sm ms-2"
-                                            style={{
+                  style={{
-                                                filter: "invert(1) grayscale(1)",
+                    filter: "invert(1) grayscale(1)",
-                                                opacity: 0.7,
+                    opacity: 0.7,
-                                                fontSize: "0.6rem",
+                    fontSize: "0.6rem",
-                                            }}
+                  }}
-                                            onClick={() => removeFilterChip(chip.key, item.id)}
+                  onClick={() => removeFilterChip(chip.key, item.id)}
-                                        />
+                />
-                                    </span>
+              </span>
-                                ))}
+            ))}
-                            </div>
+          </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
         </div>
+      ))}
+    </div>
+  </div>
+</div>
+
+
+
     );
 };
 

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
+import React, {forwardRef, useEffect,useImperativeHandle, useState, useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -31,7 +31,7 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
       { id: "submittedBy", name: "Submitted By" },
       { id: "project", name: "Project" },
       { id: "paymentMode", name: "Payment Mode" },
-      { id: "expensesType", name: "Expense Category" },
+      { id: "expensesType", name: "Expense Type" },
       { id: "createdAt", name: "Submitted Date" },
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
@@ -77,7 +77,7 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
     if (group) setSelectedGroup(group);
   };
 
-  useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
     resetFieldValue: (name, value) => {
       // Reset specific field
       if (value !== undefined) {
@@ -119,14 +119,15 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
   const [appliedStatusId, setAppliedStatusId] = useState(null);
 
   useEffect(() => {
-    if (!status || !data) return;
+    if (!status) return;
 
-    if (status !== appliedStatusId) {
+    if (status !== appliedStatusId && data) {
       const filterWithStatus = {
         ...dynamicDefaultFilter,
-        projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
         startDate: dynamicDefaultFilter.startDate
-          ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
+          ? moment
+            .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
+            .toISOString()
           : undefined,
         endDate: dynamicDefaultFilter.endDate
           ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
@@ -135,6 +136,7 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
 
       onApply(filterWithStatus);
       handleGroupBy(selectedGroup.id);
+
       setAppliedStatusId(status);
     }
   }, [
@@ -145,10 +147,8 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
     handleGroupBy,
     selectedGroup.id,
     appliedStatusId,
-    selectedProjectId, // ✅ Added dependency
   ]);
 
-
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if (isError && isFetched)
     return <div>Something went wrong Here- {error.message} </div>;

src/components/Expenses/ExpenseList.jsx

@@ -21,7 +21,6 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
 import ExpenseFilterChips from "./ExpenseFilterChips";
 import { defaultFilter } from "./ExpenseSchema";
-import { useNavigate } from "react-router-dom";
 
 const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const [deletingId, setDeletingId] = useState(null);
@@ -31,7 +30,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(searchText, 500);
-  const navigate = useNavigate();
 
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
@@ -80,8 +78,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+          key = `${item?.createdBy?.firstName ?? ""} ${
-            }`.trim();
+            item.createdBy?.lastName ?? ""
+          }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -94,7 +93,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           break;
         case "expensesType":
           key = item?.expensesType?.name || "Unknown Type";
-          displayField = "Expense Category";
+          displayField = "Expense Type";
           break;
         case "createdAt":
           key = item?.createdAt?.split("T")[0] || "Unknown Date";
@@ -142,8 +141,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
-        <div className="d-flex align-items-center cursor-pointer"
+        <div className="d-flex align-items-center">
-          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
           <Avatar
             size="xs"
             classAvatar="m-0"
@@ -178,8 +176,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         <span
           className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
             }`}
-          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
-            }`}
         >
           {e.status?.name || "Unknown"}
         </span>
@@ -211,6 +207,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
     );
   };
+
+
   return (
     <>
       {IsDeleteModalOpen && (
@@ -228,16 +226,19 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
 
       <div className="card page-min-h px-sm-4">
         {/* Filter Chips */}
-        <ExpenseFilterChips
+            <ExpenseFilterChips
-          filters={filters}
+              filters={filters}
-          filterData={filterData}
+              filterData={filterData}
-          removeFilterChip={removeFilterChip}
+              removeFilterChip={removeFilterChip}
-          groupBy={groupBy}
+              groupBy={groupBy}              
-        />
+            />
         <div
           className="card-datatable table-responsive "
           id="horizontal-example"
         >
+      
+            
+        
           <div className="dataTables_wrapper no-footer px-2 ">
             <table className="table border-top dataTable text-nowrap">
               <thead>
@@ -267,7 +268,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                         <td colSpan={8} className="text-start">
                           <div className="d-flex align-items-center">
                             {" "}
-                            <small className="fs-6 py-1">
+                            <small className="fs-6 ">
                               {displayField} :{" "}
                             </small>{" "}
                             <small className="fs-6  ms-3">

src/components/Expenses/ExpenseSchema.js

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { localToUtc } from "../../utils/appUtils";
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED_TYPES = [
@@ -17,15 +18,12 @@ export const ExpenseSchema = (expenseTypes) => {
         .min(1, { message: "Expense type is required" }),
       paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
       paidById: z.string().min(1, { message: "Employee name is required" }),
-      transactionDate: z
+      transactionDate: z.string().min(1, { message: "Date is required" }),
-        .string()
-        .min(1, { message: "Date is required" })
-      ,
       transactionId: z.string().optional(),
       description: z.string().min(1, { message: "Description is required" }),
       location: z.string().min(1, { message: "Location is required" }),
       supplerName: z.string().min(1, { message: "Supplier name is required" }),
-      gstNumber :z.string().optional(),
+      gstNumber: z.string().optional(),
       amount: z.coerce
         .number({
           invalid_type_error: "Amount is required and must be a number",
@@ -54,8 +52,6 @@ export const ExpenseSchema = (expenseTypes) => {
           })
         )
         .nonempty({ message: "At least one file attachment is required" }),
-         
- 
     })
     .refine(
       (data) => {
@@ -68,9 +64,14 @@ export const ExpenseSchema = (expenseTypes) => {
         path: ["paidById"],
       }
     )
-   .superRefine((data, ctx) => {
+    .superRefine((data, ctx) => {
-      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
+      const expenseType = expenseTypes.find(
-      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
+        (et) => et.id === data.expensesTypeId
+      );
+      if (
+        expenseType?.noOfPersonsRequired &&
+        (!data.noOfPersons || data.noOfPersons < 1)
+      ) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: "No. of Persons is required and must be at least 1",
@@ -92,12 +93,14 @@ export const defaultExpense = {
   supplerName: "",
   amount: "",
   noOfPersons: "",
-  gstNumber:"",
+  gstNumber: "",
   billAttachments: [],
 };
 
-
+export const ExpenseActionScheam = (
-export const ExpenseActionScheam = (isReimbursement = false) => {
+  isReimbursement = false,
+  transactionDate
+) => {
   return z
     .object({
       comment: z.string().min(1, { message: "Please leave comment" }),
@@ -122,6 +125,15 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
             message: "Reimburse Date is required",
           });
         }
+        // let reimburse_Date = localToUtc(data.reimburseDate);
+        // if (transactionDate > reimburse_Date) {
+        //   ctx.addIssue({
+        //     code: z.ZodIssueCode.custom,
+        //     path: ["reimburseDate"],
+        //     message:
+        //       "Reimburse Date must be greater than or equal to Expense created Date",
+        //   });
+        // }
         if (!data.reimburseById) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
@@ -133,7 +145,7 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
     });
 };
 
-  export const defaultActionValues = {
+export const defaultActionValues = {
   comment: "",
   statusId: "",
 
@@ -142,13 +154,12 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
   reimburseById: null,
 };
 
-
-
 export const SearchSchema = z.object({
   projectIds: z.array(z.string()).optional(),
   statusIds: z.array(z.string()).optional(),
   createdByIds: z.array(z.string()).optional(),
   paidById: z.array(z.string()).optional(),
+  ExpenseTypeIds: z.array(z.string()).optional(),
   startDate: z.string().optional(),
   endDate: z.string().optional(),
   isTransactionDate: z.boolean().default(true),
@@ -159,8 +170,8 @@ export const defaultFilter = {
   statusIds: [],
   createdByIds: [],
   paidById: [],
+  ExpenseTypeIds: [],
   isTransactionDate: true,
   startDate: null,
   endDate: null,
 };
-

src/components/Expenses/ManageExpense.jsx

@@ -296,11 +296,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
 
-          <div className="col-12 col-md-6 text-start">
+          {/* <div className="col-md-6">
             <Label htmlFor="paidById" className="form-label" required>
               Paid By
             </Label>
-            {/* <select
+            <select
               className="form-select form-select-sm"
               id="paymentModeId"
               {...register("paidById")}
@@ -321,13 +321,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             </select>
             {errors.paidById && (
               <small className="danger-text">{errors.paidById.message}</small>
-            )} */}
+            )}
+          </div> */}
 
+          <div className="col-12 col-md-6 text-start">
+            <label className="form-label">Paid By </label>
             <EmployeeSearchInput
               control={control}
               name="paidById"
               projectId={null}
-              forAll={expenseToEdit ? true : false}
             />
           </div>
         </div>

src/components/Expenses/PreviewDocument.jsx

@@ -1,137 +1,28 @@
-import { useState, useRef ,useEffect} from "react";
+import { useState } from 'react';
 
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
-  const [rotation, setRotation] = useState(0);
-  const [zoom, setZoom] = useState(1);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = useState(false);
-  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
-  const containerRef = useRef(null);
-
-  //  Zoom handlers
-  const handleZoomIn = () => setZoom((prev) => Math.min(prev + 0.2, 3));
-  const handleZoomOut = () => setZoom((prev) => Math.max(prev - 0.2, 0.5));
-
-  //  Mouse wheel zoom
-  const handleWheel = (e) => {
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-    setZoom((prev) => Math.min(Math.max(prev + delta, 0.5), 3));
-  };
-
-   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener("wheel", handleWheel, { passive: false });
-
-    return () => {
-      container.removeEventListener("wheel", handleWheel);
-    };
-  }, []);
-  const handleMouseDown = (e) => {
-    if (zoom <= 1) return;
-    setIsDragging(true);
-    setStartPos({
-      x: e.clientX - position.x,
-      y: e.clientY - position.y,
-    });
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDragging) return;
-    setPosition({
-      x: e.clientX - startPos.x,
-      y: e.clientY - startPos.y,
-    });
-  };
-
-  const handleMouseUp = () => setIsDragging(false);
-  const handleMouseLeave = () => setIsDragging(false);
-
-  const handleReset = () => {
-    setRotation(0);
-    setZoom(1);
-    setPosition({ x: 0, y: 0 });
-  };
 
   return (
-    <>
+    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
-      <div className="d-flex justify-content-start align-items-center gap-3 mb-2 px-3 py-2 px-md-0 py-md-0">
+      {loading && (
-        <i
+        <div className="text-secondary text-center mb-2">
-          className="bx bx-rotate-right fs-4 cursor-pointer"
+          Loading...
-          title="Rotate Right"
+        </div>
-          onClick={() => setRotation((prev) => prev + 90)}
+      )}
-        ></i>
+      <img
-        <i
+        src={imageUrl}
-          className="bx bx-zoom-in fs-4 cursor-pointer"
+        alt="Full View"
-          title="Zoom In"
+        className="img-fluid"
-          onClick={handleZoomIn}
-        ></i>
-        <i
-          className="bx bx-zoom-out fs-4 cursor-pointer"
-          title="Zoom Out"
-          onClick={handleZoomOut}
-        ></i>
-        <i
-          className="bx bx-reset fs-4 cursor-pointer"
-          title="Reset"
-          onClick={handleReset}
-        ></i>
-      </div>
-
-      <div
-        ref={containerRef}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
-        className="d-flex justify-content-center align-items-center overflow-hidden border rounded "
         style={{
-          width: "100%",
+          maxHeight: "100vh",
-          height: "80vh",
+          objectFit: "contain",
-          background: "#f8f9fa",
+          display: loading ? "none" : "block",
-          cursor: zoom > 1 ? (isDragging ? "grabbing" : "grab") : "default",
-          userSelect: "none",
-          position: "relative",
         }}
-      >
+        onLoad={() => setLoading(false)}
-        {loading && (
+      />
-          <div className="text-secondary text-center position-absolute">
+    </div>
-            Loading...
-          </div>
-        )}
-        <img
-          src={imageUrl}
-          alt="Preview"
-          onLoad={() => setLoading(false)}
-          style={{
-            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${zoom})`,
-            transition: isDragging ? "none" : "transform 0.3s ease",
-            objectFit: "contain",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            display: loading ? "none" : "block",
-            pointerEvents: "none",
-          }}
-        />
-      </div>
-
-      {/* <div className="d-flex justify-content-center gap-2 mt-2">
-        <button
-          className="btn btn-sm btn-outline-secondary"
-          onClick={handleReset}
-          title="Reset View"
-        >
-          <i className="bx bx-reset"></i> Reset View
-        </button>
-      </div> */}
-    </>
   );
 };
 
 export default PreviewDocument;
-
-
-

src/components/Expenses/ViewExpense.jsx

@@ -9,11 +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 {
+import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
-  getColorNameFromHex,
-  getIconByFileType,
-  localToUtc,
-} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -42,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-  const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
+  const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
   const navigate = useNavigate();
   const {
     register,
@@ -95,7 +91,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate: localToUtc(formData.reimburseDate),
+      reimburseDate:localToUtc(formData.reimburseDate),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -110,14 +106,12 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-3">
+      <div className="row mb-1">
-        <div className="col-12 mb-3">
+        <div className="col-12 mb-1">
-          <h5 className="fw-semibold">Expense Details</h5>
+          <h5 className="fw-semibold m-0">Expense Details</h5>
           <hr />
         </div>
-        <div className="text-start mb-2">
+         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
-          <div className="text-muted">{data?.description}</div>
-        </div>
         {/* Row 1 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
@@ -281,7 +275,7 @@ const ViewExpense = ({ ExpenseId }) => {
               className="form-label me-2 mb-0 fw-semibold"
               style={{ minWidth: "130px" }}
             >
-              Paid By:
+              Paid By :
             </label>
             <div className="d-flex align-items-center ">
               <Avatar
@@ -298,6 +292,11 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         </div>
+        
+          <div className="text-start my-1">
+            <label className="fw-semibold form-label">Description : </label>
+          <div className="text-muted">{data?.description}</div>
+        </div>
       </div>
 
       <div className="col-12 text-start">
@@ -305,15 +304,15 @@ const ViewExpense = ({ ExpenseId }) => {
 
         <div className="d-flex flex-wrap gap-2">
           {data?.documents?.map((doc) => {
-            const isImage = doc.contentType?.startsWith("image");
+            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"
+                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
                 style={{
                   width: "80px",
-                  cursor: "pointer",
+                  cursor: isImage ? "pointer" : "default",
                 }}
                 onClick={() => {
                   if (isImage) {
@@ -321,8 +320,6 @@ const ViewExpense = ({ ExpenseId }) => {
                       IsOpen: true,
                       Image: doc.preSignedUrl,
                     });
-                  } else {
-                    window.open(doc.preSignedUrl, "_blank");
                   }
                 }}
               >
@@ -338,7 +335,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 </small>
               </div>
             );
-          }) ?? "No Attachment"}
+          })}
         </div>
       </div>
 
@@ -401,7 +398,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 <DatePicker
                   name="reimburseDate"
                   control={control}
-                  minDate={data?.transactionDate}
+                  minDate={data?.createdAt}
                   maxDate={new Date()}
                 />
                 {errors.reimburseDate && (
@@ -424,9 +421,7 @@ const ViewExpense = ({ ExpenseId }) => {
             {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
               (IsRejectedExpense && isCreatedBy)) && (
               <>
-                <Label className="form-label me-2 mb-0" required>
+                <Label className="form-label me-2 mb-0" required>Comment</Label>
-                  Comment
-                </Label>
                 <textarea
                   className="form-control form-control-sm"
                   {...register("comment")}
@@ -448,7 +443,7 @@ const ViewExpense = ({ ExpenseId }) => {
                       key={status.id || index}
                       type="button"
                       onClick={() => {
-                        setClickedStatusId(status.id);
+                      setClickedStatusId(status.id);
                         setValue("statusId", status.id);
                         handleSubmit(onSubmit)();
                       }}

src/components/Layout/Header.jsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState,useMemo } from "react";
 import getGreetingMessage from "../../utils/greetingHandler";
 import {
   cacheData,
@@ -12,125 +13,104 @@ 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 { useProjects } from "../../hooks/useProjects";
+import { useChangePassword } from "../Context/ChangePasswordContext";
-import { useCallback, useEffect, useState } from "react";
+import {  useProjects } from "../../hooks/useProjects";
 import { useProjectName } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { MANAGE_PROJECT } from "../../utils/constants";
+import { ALLOW_PROJECTSTATUS_ID, MANAGE_PROJECT, UUID_REGEX } from "../../utils/constants";
-import { useAuthModal, useLogout, useModal } from "../../hooks/useAuth";
+import { useAuthModal, useLogout } from "../../hooks/useAuth";
 
 const Header = () => {
-  const { profile } = useProfile();
+ const { profile } = useProfile();
+  const { data: masterData } = useMaster();
   const location = useLocation();
   const dispatch = useDispatch();
-  const { data, loading } = useMaster();
   const navigate = useNavigate();
-  const {onOpen} = useAuthModal()
+
-  const { onOpen:changePass } = useModal("ChangePassword");
+  const { mutate: logout, isPending: logouting } = useLogout();
+  const { onOpen } = useAuthModal();
+  const { openChangePassword } = useChangePassword();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const { mutate : logout,isPending:logouting} = useLogout()
 
-  const isDashboardPath =
+  const pathname = location.pathname;
-    /^\/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) => {
+  // ======= MEMO CHECKS =======
-    const isDirectoryPath = /^\/directory$/.test(pathname);
+  const isDashboardPath = pathname === "/" || pathname === "/dashboard";
+  const isProjectPath = pathname === "/projects";
+  const isDirectory = pathname === "/directory";
+  const isEmployeeList = pathname === "/employees";
+  // const isExpense = pathname === "/expenses";
+  const isEmployeeProfile = UUID_REGEX.test(pathname);
 
-    // const isProfilePage = /^\/employee$/.test(location.pathname);
+  const hideDropPaths =
-    const isProfilePage =
+    isDirectory || isEmployeeList  || isEmployeeProfile;
-      /^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
-        pathname
-      );
-    const isExpensePage = /^\/expenses$/.test(pathname);
 
-    return !(isDirectoryPath || isProfilePage || isExpensePage);
+  const showProjectDropdown = !hideDropPaths;
-  };
-  const allowedProjectStatusIds = [
-    "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-    "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-    "b74da4c2-d07e-46f2-9919-e75e49b12731",
-  ];
-
-  const getRole = (roles, joRoleId) => {
-    if (!Array.isArray(roles)) return "User";
-    let role = roles.find((role) => role.id === joRoleId);
-    return role ? role.name : "User";
-  };
-
- 
-
-  
-
-  const handleProfilePage = () => {
-    navigate(`/employee/${profile?.employeeInfo?.id}`);
-  };
 
+  // ===== Project Names & Selected Project =====
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
-
   const selectedProject = useSelectedProject();
 
-  const projectsForDropdown = isDashboardPath
+  const projectsForDropdown = useMemo(
-    ? projectNames
+    () =>
-    : projectNames?.filter((project) =>
+      isDashboardPath
-        allowedProjectStatusIds.includes(project.projectStatusId)
+        ? projectNames
-      );
+        : projectNames?.filter((project) =>
+            ALLOW_PROJECTSTATUS_ID.includes(project.projectStatusId)
+          ),
+    [projectNames, isDashboardPath]
+  );
 
-  let currentProjectDisplayName;
+  const currentProjectDisplayName = useMemo(() => {
-  if (projectLoading) {
+    if (projectLoading) return "Loading...";
-    currentProjectDisplayName = "Loading...";
+    if (!projectNames?.length) return "No Projects Assigned";
-  } else if (!projectNames || projectNames.length === 0) {
+    if (projectNames.length === 1) return projectNames[0].name;
-    currentProjectDisplayName = "No Projects Assigned";
+         if (selectedProject === null) return "All Projects";
-  } else if (projectNames.length === 1) {
+    const selectedObj = projectNames.find((p) => p.id === selectedProject);
-    currentProjectDisplayName = projectNames[0].name;
+    return selectedObj
-  } else {
+  ? selectedObj.name
-    if (selectedProject === null) {
+  : projectNames[0]?.name || "No Projects Assigned";
-      currentProjectDisplayName = "All Projects";
+  }, [projectLoading, projectNames, selectedProject]);
-    } else {
-      const selectedProjectObj = projectNames.find(
-        (p) => p?.id === selectedProject
-      );
-      currentProjectDisplayName = selectedProjectObj
-        ? selectedProjectObj.name
-        : "All Projects";
-    }
-  }
 
+  // ===== Role Helper =====
+  const getRole = (roles, joRoleId) => {
+    if (!Array.isArray(roles)) return "User";
+    return roles.find((r) => r.id === joRoleId)?.name || "User";
+  };
 
+  // ===== Navigate to Profile =====
+  const handleProfilePage = () =>
+    navigate(`/employee/${profile?.employeeInfo?.id}`);
 
+  // ===== Set default project on load =====
   useEffect(() => {
     if (
-      projectNames &&
+      projectNames?.length &&
-      projectNames.length > 0 &&
       selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
       if (projectNames.length === 1) {
-        dispatch(setProjectId(projectNames[0]?.id || null));
+        dispatch(setProjectId(projectNames[0].id || null));
       } else {
         if (isDashboardPath) {
           dispatch(setProjectId(null));
         } else {
-          const firstAllowedProject = projectNames.find((project) =>
+          const firstAllowed = projectNames.find((project) =>
-            allowedProjectStatusIds.includes(project.projectStatusId)
+            ALLOW_PROJECTSTATUS_ID.includes(project.projectStatusId)
           );
-          dispatch(setProjectId(firstAllowedProject?.id || null));
+          dispatch(setProjectId(firstAllowed?.id || null));
         }
       }
     }
   }, [projectNames, selectedProject, dispatch, isDashboardPath]);
 
+  // ===== Event Handlers =====
   const handler = useCallback(
     async (data) => {
       if (!HasManageProjectPermission) {
         await fetchData();
-        const projectExist = data.projectIds.some(
+        if (data.projectIds?.includes(selectedProject)) {
-          (item) => item === selectedProject
-        );
-        if (projectExist) {
           cacheData("hasReceived", false);
         }
       }
@@ -140,14 +120,15 @@ const Header = () => {
 
   const newProjectHandler = useCallback(
     async (msg) => {
-      if (HasManageProjectPermission && msg.keyword === "Create_Project") {
+      if (
-        await fetchData();
+        msg.keyword === "Create_Project" ||
-      } else if (projectNames?.some((item) => item.id === msg.response.id)) {
+        projectNames?.some((p) => p.id === msg.response?.id)
+      ) {
         await fetchData();
+        cacheData("hasReceived", false);
       }
-      cacheData("hasReceived", false);
     },
-    [HasManageProjectPermission, projectNames, fetchData]
+    [projectNames, fetchData]
   );
 
   useEffect(() => {
@@ -164,10 +145,10 @@ const Header = () => {
     };
   }, [handler, newProjectHandler]);
 
-  const handleProjectChange = (project) => {
+  // ===== Project Change =====
-    dispatch(setProjectId(project));
+  const handleProjectChange = (projectId) => {
-
+    dispatch(setProjectId(projectId));
-    if (isProjectPath && project !== null) {
+    if (isProjectPath && projectId !== null) {
       navigate("/projects/details");
     }
   };
@@ -191,8 +172,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 && (
-          {showProjectDropdown(location.pathname) && (
           <div className="align-items-center">
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
             <div className="btn-group">
@@ -218,16 +198,14 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                    {(isDashboardPath|| isCollectionPath) &&(
+
-                      <li>
+                     <li>
-                        <button
+                          <button
-                          className="dropdown-item"
+                            className="dropdown-item"
-                          onClick={() => handleProjectChange(null)}
+                            onClick={() => handleProjectChange(null)}
-                        >
+                          >All Project</button>
-                          All Projects
+                          </li>
-                        </button>
+                        
-                      </li>
-                    )}
                     {[...projectsForDropdown]
                       .sort((a, b) => a?.name?.localeCompare(b.name))
                       .map((project) => (
@@ -250,115 +228,11 @@ 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">
+          {/* {HasManageProjectPermission && ( */}
-            <a
+         
-              className="nav-link dropdown-toggle hide-arrow"
+          {/* )} */}
-              data-bs-toggle="dropdown"
-              data-bs-auto-close="true"
-              aria-expanded="false"
-            >
-              <i className="icon-base bx bx-grid-alt icon-md"></i>
-            </a>
-            <div className="dropdown-menu dropdown-menu-end p-0">
-              <div className="dropdown-menu-header border-bottom">
-                <div className="dropdown-header d-flex align-items-center py-3">
-                  <h6 className="mb-0 me-auto">Shortcuts</h6>
-                  <a
-                    className="dropdown-shortcuts-add py-2 cusror-pointer"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    aria-label="Add shortcuts"
-                    data-bs-original-title="Add shortcuts"
-                  >
-                    <i className="icon-base bx bx-plus-circle text-heading"></i>
-                  </a>
-                </div>
-              </div>
-              <div className="dropdown-shortcuts-list scrollable-container ps">
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/dashboard`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-home icon-26px text-heading"></i>
-                      </span>
-                      Dashboard
-                    </a>
-                    <small>User Dashboard</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/projects`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
-                      </span>
-                      Projects
-                    </a>
-                    <small>Projects List</small>
-                  </div>
-                </div>
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/employees`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
-                      </span>
-                      Employees
-                    </a>
-                    <small>Manage Employees</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/attendance`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
-                      </span>
-                      Attendance
-                    </a>
-                    <small>Manage Attendance</small>
-                  </div>
-                </div>
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/task`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
-                      </span>
-                      Allocate Work
-                    </a>
-                    <small>Work Allocations</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/records`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
-                      </span>
-                      Daily Work Log
-                    </a>
-                    <small>Daily Work Allocations</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
           <li className="nav-item navbar-dropdown dropdown-user dropdown">
             <a
               aria-label="dropdown profile avatar"
@@ -390,7 +264,7 @@ const Header = () => {
                         {profile?.employeeInfo?.firstName}
                       </span>
                       <small className="text-muted">
-                        {getRole(data, profile?.employeeInfo?.joRoleId)}
+                        {getRole(masterData, profile?.employeeInfo?.joRoleId)}
                       </small>
                     </div>
                   </div>
@@ -399,15 +273,13 @@ const Header = () => {
               <li>
                 <div className="dropdown-divider"></div>
               </li>
-               <li onClick={()=>onOpen()}>
+              {/* <li onClick={() => onOpen()}>
                 {" "}
-                <a
+                <a className="dropdown-item cusor-pointer">
-                  className="dropdown-item cusor-pointer"
-                >
                   <i className="bx bx-transfer-alt me-2"></i>
                   <span className="align-middle">Switch Workspace</span>
                 </a>
-              </li>
+              </li> */}
               <li onClick={handleProfilePage}>
                 <a
                   aria-label="go to profile"
@@ -426,7 +298,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              <li onClick={changePass}>
+              <li onClick={openChangePassword}>
                 {" "}
                 <a
                   aria-label="go to profile"
@@ -437,7 +309,6 @@ const Header = () => {
                 </a>
               </li>
 
-             
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -445,10 +316,17 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  onClick={()=>logout()}
+                  onClick={() => logout()}
                 >
-                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
+                  {logouting ? (
-                  <span className="align-middle">SignOut</span></>}
+                    "Please Wait"
+                  ) : (
+                    <>
+                      {" "}
+                      <i className="bx bx-log-out me-2"></i>
+                      <span className="align-middle">SignOut</span>
+                    </>
+                  )}
                 </a>
               </li>
             </ul>

src/components/Organization/OrgPickerFromSPId.jsx

@@ -10,14 +10,13 @@ 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, orgData } =
+  const { onClose, startStep, flowType, onOpen, prevStep } =
     useOrganizationModal();
-  const clientQuery = useQueryClient();
+
   const {
     register,
     handleSubmit,
@@ -37,41 +36,29 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
     setSPRID(formdata.spridSearchText);
   };
 
-  const handleCrateOrg = () => {
+  const handleOrg = (orgId) => {};
-    clientQuery.removeQueries({ queryKey: ["organization"] });
-    onOpen({ startStep: 4, orgData: null });
-  };
   const SP = watch("spridSearchText");
   return (
-    <div className="d-block mt-4">
+    <div className="d-block">
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form
-        <div className="row align-items-center g-2">
+        className="d-flex flex-row gap-6 text-start align-items-center"
-          {/* Input Section */}
+        onSubmit={handleSubmit(onSubmit)}
-          <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
+      >
-            <Label className="text-nowrap mb-1 mb-md-0" required>
+        <div className="d-flex flex-row align-items-center gap-2">
-              Search by SPRID
+          <Label className="text-secondary">Search by SPRID</Label>
-            </Label>
+          <input
-            <input
+            type="search"
-              type="search"
+            {...register("spridSearchText")}
-              {...register("spridSearchText")}
+            className="form-control form-control-sm w-auto"
-              className="form-control form-control-sm flex-grow-1"
+            placeholder="Enter SPRID"
-              placeholder="Enter SPRID"
+            maxLength={4}
-              maxLength={4}
+          />
-            />
-          </div>
-
-          {/* Button Section */}
-          <div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
-            <button
-              type="submit"
-              className="btn btn-sm btn-primary w-100 w-md-auto"
-            >
-              <i className="bx bx-sm bx-search-alt-2"></i> Search
-            </button>
-          </div>
         </div>
-      </form>
 
+        <button type="submit" className="btn btn-sm btn-primary">
+          <i className="bx bx-sm bx-search-alt-2"></i> Search
+        </button>
+      </form>
       <div className="text-start danger-text">
         {" "}
         {errors.spridSearchText && (
@@ -132,14 +119,14 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
           No organization found for "{SPRID}"
         </div>
       ) : null}
-      <div className="py-2 text-center text-tiny text-black">
+      <div className="py-12 text-center text-tiny text-black">
         <small className="d-block text-secondary">
           Do not have SPRID or could not find organization ?
         </small>
         <button
           type="button"
           className="btn btn-sm btn-primary mt-3"
-          onClick={handleCrateOrg}
+          onClick={() => onOpen({ startStep: 4 })}
         >
           <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().trim()
+    .string()
     .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 className="bx bx-buildings"></i>
+          <i class="bx bx-buildings"></i>
           <span
             className="text-truncate d-inline-block "
             style={{ maxWidth: "150px" }}
@@ -93,12 +93,10 @@ const OrganizationsList = ({searchText}) => {
   if (isError) return <div>{error?.message || "Something went wrong"}</div>;
 
   return (
-       <div
+    <div className="card px-0 px-sm-4 pb-12 pt-5">
-          className="card-datatable table-responsive overflow-auto"
+      <div className="card-datatable table-responsive" id="horizontal-example">
-          id="horizontal-example"
+        <div className="dataTables_wrapper no-footer px-2">
-        >
+          <table className="table border-top dataTable text-nowrap">
-          <div className="dataTables_wrapper no-footer px-2 ">
-            <table className="table border-top dataTable text-nowrap">
             <thead>
               <tr className="table_header_border">
                 {organizationsColumns.map((col) => (
@@ -133,7 +131,7 @@ const OrganizationsList = ({searchText}) => {
                       <div className="d-flex justify-content-center gap-2">
                         <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                         <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
-                        <i className="bx bx-trash text-danger cursor-not-allowed"></i>
+                        <i className="bx bx-trash text-danger cursor-pointer"></i>
                       </div>
                     </td>
                   </tr>
@@ -144,7 +142,7 @@ const OrganizationsList = ({searchText}) => {
                     colSpan={organizationsColumns.length + 1}
                     className="text-center"
                   >
-                    <p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
+                    <p className="fw-semibold">Not Found</p>
                   </td>
                 </tr>
               )}
@@ -159,6 +157,7 @@ const OrganizationsList = ({searchText}) => {
             )}
         </div>
       </div>
+    </div>
   );
 };
 

src/components/Organization/ViewOrganization.jsx

@@ -22,8 +22,9 @@ const VieworgDataanization = ({ orgId }) => {
           </div>
           <div className="text-end">
             <span
-              className={`badge bg-label-${data?.isActive ? "primary" : "secondary"
+              className={`badge bg-label-${
-                } `}
+                data?.isActive ? "primary" : "secondary"
+              } `}
             >
               {data?.isActive ? "Active" : "In-Active"}{" "}
             </span>
@@ -104,101 +105,9 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted text-start">{data?.address}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="d-flex text-secondary mb-2">
-        <div
+        {" "}
-          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
+        <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
-          data-bs-toggle="collapse"
-          data-bs-target="#collapse-projects-services"
-          aria-expanded="false"
-        >
-          <div>
-            <i className="bx bx-sm bx-briefcase me-1" /> Projects
-          </div>
-          <i className="bx bx-chevron-down me-2"></i>
-        </div>
-
-        {/* remove "show" from className */}
-        <div id="collapse-projects-services" className="collapse">
-          {data?.projects && data.projects.length > 0 ? (
-            data.projects
-              .reduce((acc, curr) => {
-                const projectId = curr.project.id;
-                if (!acc.find((p) => p.id === projectId)) {
-                  acc.push(curr.project);
-                }
-                return acc;
-              }, [])
-              .map((project) => (
-                <div key={project.id} className="mb-2 rounded p-2">
-                  <div
-                    className="d-flex justify-content-between align-items-center cursor-pointer"
-                    data-bs-toggle="collapse"
-                    data-bs-target={`#collapse-${project.id}`}
-                    aria-expanded="false"
-                  >
-                    <label className="form-label fw-semibold">
-                      <i className="bx bx-buildings me-2"></i>
-                      {project.name}
-                    </label>
-                    <i className="bx bx-chevron-down"></i>
-                  </div>
-
-                  <div id={`collapse-${project.id}`} className="collapse mt-2 ps-5">
-                    {data.projects
-                      .filter((p) => p.project.id === project.id)
-                      .map((p) => (
-                        <div key={p.service.id} className="mb-1 text-muted">
-                          <i className="bx bx-wrench me-2"></i>
-                          {p.service.name}
-                        </div>
-                      ))}
-                  </div>
-                </div>
-              ))
-          ) : (
-            <div className="text-muted fst-italic ps-2">No projects available</div>
-          )}
-        </div>
-      </div>
-
-      {/* Services Section */}
-      <div className="col-12 mb-3">
-        <div
-          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
-          data-bs-toggle="collapse"
-          data-bs-target="#collapse-services"
-          aria-expanded="false"
-        >
-          <div>
-            <i className="bx bx-sm bx-cog me-1" /> Services
-          </div>
-          <i className="bx bx-chevron-down me-2"></i>
-        </div>
-
-        {/* collapse is closed initially */}
-        <div id="collapse-services" className="collapse">
-          {data?.services && data.services.length > 0 ? (
-            <div className="row">
-              {data.services.map((service) => (
-                <div key={service.id} className="col-md-12 mb-3">
-                  <div className="card h-100 shadow-sm border-0">
-                    <div className="card-body">
-                      <h6 className="fw-semibold mb-1">
-                        <i className="bx bx-wrench me-1"></i>
-                        {service.name}
-                      </h6>
-                      <p className="text-muted small mb-0">
-                        {service.description || "No description available."}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-muted fst-italic ps-2">No services available</div>
-          )}
-        </div>
       </div>
     </div>
   );

src/components/Project/AboutProject.jsx

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

src/components/Project/AssignTask.jsx

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

src/components/Project/Infrastructure/WorkArea.jsx

@@ -104,11 +104,11 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       </span>
                     </div>
 
-                    <div className="col-6 col-md-2">
+                    <div className="col-2">
                       <ProgressBar
                         completedWork={formatNumber(workArea?.completedWork)}
                         plannedWork={formatNumber(workArea?.plannedWork)}
-                        className="m-0 my-2 " height="6px"rounded showLabel={true}
+                        className="m-0 my-2 me-6 text-info"
                       />
                     </div>
                   </div>

src/components/Project/ManageProjectInfo.jsx

@@ -5,7 +5,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
+import {
+  useCreateProject,
+  useProjectDetails,
+  useProjectModal,
+  useUpdateProject,
+} from "../../hooks/useProjects";
 
 import {
   DEFAULT_EMPTY_STATUS_ID,
@@ -17,6 +22,7 @@ import {
   useOrganizationsList,
 } from "../../hooks/useOrganization";
 import { localToUtc } from "../../utils/appUtils";
+import Modal from "../common/Modal";
 
 const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
@@ -37,13 +43,19 @@ const ManageProjectInfo = ({ project, onClose }) => {
   const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
 
   const { projects_Details, loading } = useProjectDetails(project);
-  const { data, isLoading, isError, error } = useOrganizationsList(
+  // const { data, isLoading, isError, error } = useOrganizationsList(
-    ITEMS_PER_PAGE,
+  //   ITEMS_PER_PAGE,
-    1,
+  //   1,
-    true
+  //   true
+  // );
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {
+    onClose?.();
+  });
+  const { mutate: CeateProject, isPending: isCreating } = useCreateProject(
+    () => {
+      onClose?.();
+    }
   );
-  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
-  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
 
   const {
     register,
@@ -70,11 +82,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 || "",   // hide temp. for version 1
-        pmcId: projects_Details?.pmc?.id || "",
+        // pmcId: projects_Details?.pmc?.id || "",
       });
     setAddressLength(projects_Details?.projectAddress?.length || 0);
-  }, [project, projects_Details, reset,data]);
+  }, [project, projects_Details, reset]);
 
   const onSubmitForm = (formData) => {
     if (project) {
@@ -85,13 +97,13 @@ const ManageProjectInfo = ({ project, onClose }) => {
         id: project,
       };
       UpdateProject({ projectId: project, payload: payload });
-    }else{
+    } else {
-       let payload = {
+      let payload = {
         ...formData,
         startDate: localToUtc(formData.startDate),
         endDate: localToUtc(formData.endDate),
       };
-      CeateProject(payload)
+      CeateProject(payload);
     }
   };
 
@@ -104,7 +116,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
     onOpen({ startStep: 2, flowType: "default" });
   };
 
-
   return (
     <div className="p-sm-2 p-2">
       <div className="text-center mb-2">
@@ -254,7 +265,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             </div>
           )}
         </div>
-        <div className="col-12 ">
+        {/* <div className="col-12 ">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Promoter
           </label>
@@ -327,10 +338,10 @@ 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>
+        </div> */}
 
         <div className="col-12 col-md-12">
           <Label htmlFor="projectAddress" required>
@@ -367,16 +378,20 @@ const ManageProjectInfo = ({ project, onClose }) => {
             className="btn btn-label-secondary btn-sm me-2"
             onClick={handleCancel}
             aria-label="Close"
-            disabled={isPending || isCreating || loading}
+            disabled={isPending || isCreating}
           >
             Cancel
           </button>
           <button
             type="submit"
             className="btn btn-primary btn-sm"
-            disabled={isPending || isCreating || loading}
+            disabled={isPending || isCreating}
           >
-            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
+            {isPending || isCreating
+              ? "Please Wait..."
+              : project
+              ? "Update"
+              : "Submit"}
           </button>
         </div>
       </form>
@@ -385,3 +400,15 @@ const ManageProjectInfo = ({ project, onClose }) => {
 };
 
 export default ManageProjectInfo;
+
+export const ProjectModal = () => {
+  const { isOpen, data, closeModal } = useProjectModal();
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      body={<ManageProjectInfo project={data} onClose={closeModal} />}
+      onClose={closeModal}
+    />
+  );
+};

src/components/Project/ProjectCard.jsx

@@ -54,7 +54,7 @@ const ProjectCard = ({ project }) => {
                     style={{ fontSize: "xx-large" }}
                   ></i>
                 </div>
-                <div className="me-2">
+                <div className="me-2 text-start">
                   <h5
                     className="mb-0 stretched-link text-heading text-start"
                     onClick={handleViewProject}
@@ -66,7 +66,7 @@ const ProjectCard = ({ project }) => {
                   </div>
                 </div>
               </div>
-              <div className={`ms-auto ${!ManageProject && "d-none"}`}>
+              <div className={`ms-auto `}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -106,12 +106,6 @@ const ProjectCard = ({ project }) => {
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={handleViewActivities}>
-                      <a className="dropdown-item">
-                        <i className="bx bx-task me-2"></i>
-                        <span className="align-left">Activities</span>
-                      </a>
-                    </li>
                   </ul>
                 </div>
               </div>

src/components/Project/ProjectCardView.jsx

@@ -1,70 +1,62 @@
-import React from 'react'
+import React from "react";
-import { useProjects } from '../../hooks/useProjects'
+import { useProjects } from "../../hooks/useProjects";
-import Loader from '../common/Loader'
+import Loader from "../common/Loader";
-import ProjectCard from './ProjectCard'
+import ProjectCard from "./ProjectCard";
-
-const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
-
 
+const ProjectCardView = ({ currentItems, setCurrentPage, totalPages }) => {
   return (
+    <div className="row page-min-h">
+      {currentItems.length === 0 && (
+        <p className="text-center text-muted">No projects found.</p>
+      )}
 
-      <div className="row page-min-h">
+      {currentItems.map((project) => (
+        <ProjectCard key={project.id} project={project} />
+      ))}
 
-          { currentItems.length === 0 && (
+      {totalPages > 1 && (
-            <p className="text-center text-muted">No projects found.</p>
+        <nav>
-          )}
+          <ul className="pagination pagination-sm justify-content-end py-2">
-     
+            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-            {currentItems.map((project) => (
+              <button
-              <ProjectCard
+                className="page-link"
-                key={project.id}
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                project={project}
+              >
-              />
+                &laquo;
-            ))}
+              </button>
-
+            </li>
-
+            {[...Array(totalPages)].map((_, i) => (
-             {  totalPages > 1 && (
-          <nav>
-            <ul className="pagination pagination-sm justify-content-end py-2">
-              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-                <button
-                  className="page-link"
-                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                >
-                  &laquo;
-                </button>
-              </li>
-              {[...Array(totalPages)].map((_, i) => (
-                <li
-                  key={i}
-                  className={`page-item ${currentPage === i + 1 && "active"}`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => setCurrentPage(i + 1)}
-                  >
-                    {i + 1}
-                  </button>
-                </li>
-              ))}
               <li
-                className={`page-item ${currentPage === totalPages && "disabled"
+                key={i}
-                  }`}
+                className={`page-item ${currentPage === i + 1 && "active"}`}
               >
                 <button
                   className="page-link"
-                  onClick={() =>
+                  onClick={() => setCurrentPage(i + 1)}
-                    setCurrentPage((p) => Math.min(totalPages, p + 1))
-                  }
                 >
-                  &raquo;
+                  {i + 1}
                 </button>
               </li>
-            </ul>
+            ))}
-          </nav>
+            <li
-        )}
+              className={`page-item ${
-          </div>
+                currentPage === totalPages && "disabled"
+              }`}
+            >
+              <button
+                className="page-link"
+                onClick={() =>
+                  setCurrentPage((p) => Math.min(totalPages, p + 1))
+                }
+              >
+                &raquo;
+              </button>
+            </li>
+          </ul>
+        </nav>
+      )}
+    </div>
+  );
+};
 
-  )
+export default ProjectCardView;
-}
-
-export default ProjectCardView

src/components/Project/ProjectListView.jsx

@@ -26,9 +26,8 @@ const ProjectListView = ({
   const navigate = useNavigate();
   const { setMangeProject } = useProjectContext();
   // const { data, isLoading, isError, error } = useProjects();
-
   //   check Permissions
-  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+  // const canManageProject = useHasUserPermission(MANAGE_PROJECT);
 
   const projectColumns = [
     {
@@ -125,22 +124,22 @@ const ProjectListView = ({
     },
   ];
 
-  const handleViewActivities = (project) => {
+  // const handleViewActivities = (project) => {
-    dispatch(setProjectId(project));
+  //   dispatch(setProjectId(project));
-    navigate(`/activities/records?project=${project}`);
+  //   navigate(`/activities/records?project=${project}`);
-  };
+  // };
 
+  const handleMoveDetails = (project) => {
+    dispatch(setProjectId(project));
+    navigate("/projects/details");
+  };
   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} table_header_border`}>
+              <th key={col.key} colSpan={col.colSpan} className={col.className}>
                 {col.label}
               </th>
             ))}
@@ -162,11 +161,7 @@ const ProjectListView = ({
                     : project[col.key] || "N/A"}
                 </td>
               ))}
-              <td
+              <td className={`mx-2 ${"d-sm-table-cell"}`}>
-                className={`mx-2 ${
-                  canManageProject ? "d-sm-table-cell" : "d-none"
-                }`}
-              >
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -184,7 +179,7 @@ const ProjectListView = ({
                     ></i>
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
-                    <li>
+                    <li onClick={() => handleMoveDetails(project.id)}>
                       <a
                         aria-label="click to  View details"
                         className="dropdown-item cursor-pointer"
@@ -208,12 +203,12 @@ const ProjectListView = ({
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={() => handleViewActivities(project.id)}>
+                    {/* <li onClick={() => handleViewActivities(project.id)}>
                       <a className="dropdown-item cursor-pointer">
                         <i className="bx bx-task me-2"></i>
                         <span className="align-left">Activities</span>
                       </a>
-                    </li>
+                    </li> */}
                   </ul>
                 </div>
               </td>
@@ -221,7 +216,6 @@ const ProjectListView = ({
           ))}
         </tbody>
       </table>
-      </div>
 
       {isLoading && (
         <div className="py-4">

src/components/Project/ProjectNav.jsx

@@ -27,45 +27,44 @@ const ProjectNav = ({ onPillClick, activePill }) => {
 
   const ProjectTab = [
     { key: "profile", icon: "bx bx-user", label: "Profile" },
-    { key: "teams", icon: "bx bx-group", label: "Teams" },
+    // { key: "teams", icon: "bx bx-group", label: "Teams" },
-    {
+    // {
-      key: "infra",
+    //   key: "infra",
-      icon: "bx bx-grid-alt",
+    //   icon: "bx bx-grid-alt",
-      label: "Infrastructure",
+    //   label: "Infrastructure",
-      hidden: !(HasViewInfraStructure || HasManageInfra || HasManageTask),
+    //   hidden: !(HasViewInfraStructure || HasManageInfra || HasManageTask),
-    },
+    // },
     {
       key: "directory",
       icon: "bx bxs-contact",
       label: "Directory",
       hidden: !(DirAdmin || DireManager || DirUser),
     },
-    { key: "documents", icon: "bx bx-folder-open", label: "Documents", hidden: !(isViewDocuments || isModifyDocument || isUploadDocument) },
+    { key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
-    { key: "organization", icon: "bx bx-buildings", label: "Organization" },
+    // { key: "organization", icon: "bx bx-buildings", label: "Organization"},
-    { key: "setting", icon: "bx bxs-cog", label: "Setting", hidden: !isManageTeam },
+    // { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
   ];
   return (
-    <div className="table-responsive">
+    <div className="nav-align-top">
-      <div className="nav-align-top">
+      <ul className="nav nav-tabs">
-        <ul className="nav nav-tabs">
+        {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
-          {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
+          <li key={tab.key} className="nav-item cursor-pointer">
-            <li key={tab.key} className="nav-item cursor-pointer">
+            <a
-              <a
              
-                className={`nav-link ${activePill === tab.key ? "active cursor-pointer" : ""
+              className={`nav-link ${
-                  } fs-6`}
+                activePill === tab.key ? "active cursor-pointer" : ""
-                onClick={(e) => {
+              } fs-6`}
-                  e.preventDefault();
+              onClick={(e) => {
-                  onPillClick(tab.key);
+                e.preventDefault();
-                }}
+                onPillClick(tab.key);
-              >
+              }}
-                <i className={`${tab.icon} bx-sm me-1_5`}></i>
+            >
-                <span className="d-none d-md-inline  ">{tab.label}</span>
+              <i className={`${tab.icon} bx-sm me-1_5`}></i>
-              </a>
+              <span className="d-none d-md-inline  ">{tab.label}</span>
-            </li>
+            </a>
-          ))}
+          </li>
-        </ul>
+        ))}
-      </div>
+      </ul>
     </div>
   );
 };

src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx

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

@@ -11,8 +11,8 @@ export const projectDefault = {
   startDate: currentDate.toISOString().split("T")[0],
   endDate: currentDate.toISOString().split("T")[0],
   projectStatusId: DEFAULT_EMPTY_STATUS_ID,
-  promoterId: "",
+  // promoterId: "",
-  pmcId: "",
+  // pmcId: "",
 };
 
 
@@ -39,8 +39,8 @@ export const projectSchema = z
       .min(1, { message: "End Date is required" })
       .default(projectDefault),
     projectStatusId: z.string().min(1, { message: "Status is required" }),
-    promoterId: z.string().min(1, { message: "Promoter is required" }),
+    // promoterId: z.string().min(1, { message: "Promoter is required" }),
-    pmcId: z.string().min(1, { message: "PMC is required" }),
+    // pmcId: z.string().min(1, { message: "PMC is required" }),
   })
   .refine(
     (data) => {

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 {  useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
+import { useProjectAssignedOrganizations } 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 } =
-    useProjectAssignedOrganizationsName(project);
+    useProjectAssignedOrganizations(project);
   return (
     <div className="container">
       <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
 
-      <div className="row align-items-center gx-5">
+      <div class="row align-items-center gx-5">
-        <div className="col">
+        <div class="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 className="col">
+        <div class="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,14 +2,13 @@ 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();
@@ -30,7 +29,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     useEmployeesByProjectAllocated(selectedProject, null);
 
   const { data: jobRoles } = useMaster();
-  const { data: services } = useProjectAssignedServices(selectedProject);
+  const { data: services } = useServices();
 
   const [employees, setEmployees] = useState([]);
 
@@ -188,7 +187,7 @@ if (employees.length === 0) {
                   }`}
                 >
                   <option value="">Select Service</option>
-                  {services?.map((s) => (
+                  {services?.data?.map((s) => (
                     <option key={s.id} value={s.id}>
                       {s.name}
                     </option>

src/components/Project/Team/Teams.jsx

@@ -93,26 +93,20 @@ const Teams = () => {
   };
 
   const filteredEmployees = useMemo(() => {
-    if (!projectEmployees) return [];
+    if (!projectEmployees || !searchTerm?.trim()) return projectEmployees;
 
-    let filtered = projectEmployees;
+    const lower = searchTerm.toLowerCase();
 
-    if (activeEmployee) {
+    return projectEmployees?.filter((emp) => {
-      filtered = projectEmployees.filter((emp) => !emp.isActive);
+      const fullName = `${emp.firstName ?? ""} ${
-    }
+        emp.lastName ?? ""
+      }`.toLowerCase();
 
-    // Apply search filter if present
+      const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-    if (searchTerm?.trim()) {
-      const lower = searchTerm.toLowerCase();
-      filtered = filtered.filter((emp) => {
-        const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-        return fullName.includes(lower) || jobRole.includes(lower);
-      });
-    }
 
-    return filtered;
+      return fullName?.includes(lower) || joberole?.includes(lower);
-  }, [projectEmployees, searchTerm, activeEmployee]);
+    });
+  }, [projectEmployees, searchTerm]);
   const handleSearch = (e) => setSearchTerm(e.target.value);
   const employeeHandler = useCallback(
     (msg) => {
@@ -201,7 +195,7 @@ const Teams = () => {
                     className="form-check-label ms-2"
                     htmlFor="activeEmployeeSwitch"
                   >
-                    {activeEmployee ? "Active Employees" : "In-active Employees"}
+                    {activeEmployee ? "Active Employees" : "Include Inactive Employees"}
                   </label>
                 </div>
               </div>
@@ -272,7 +266,7 @@ const Teams = () => {
                                   className="text-heading text-truncate cursor-pointer"
                                 >
                                   <span className="fw-normal">
-                                    {emp.firstName}{"  "}
+                                    {emp.firstName}
                                     {emp.lastName}
                                   </span>
                                 </a>
@@ -323,7 +317,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/OrganizationInfo.jsx

@@ -8,12 +8,14 @@ import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
 import { useGlobalServices } from "../../hooks/masterHook/useMaster";
 import SelectMultiple from "../common/SelectMultiple";
+import { useNavigate } from "react-router-dom";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
   const { data: services, isLoading: serviceLoading } = useGlobalServices();
+  const navigate = useNavigate()
   const {
     register,
     control,
@@ -29,8 +31,8 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     error,
     isPending,
   } = useCreateTenant(() => {
-    debugger
+    // onNext()
-    onNext()
+    navigate("/tenants");
   });
 
   const handleNext = async () => {
@@ -134,7 +136,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           control={control}
           placeholder="DD-MM-YYYY"
           maxDate={new Date()}
-          className={errors.onBoardingDate ? "is-invalid" : ""}
         />
         {errors.onBoardingDate && (
           <div className="invalid-feedback">

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="p-2 mt-3">
+    <div className="card 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

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

src/components/collections/AddPayment.jsx

@@ -1,266 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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 px-sm-4 px-0">
-      <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

@@ -1,211 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,445 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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?.startsWith("image");
-
-              return (
-                <div
-                  key={doc.documentId}
-                  className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
-                  style={{
-                    width: "80px",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => {
-                    if (isImage) {
-                      setDocumentView({
-                        IsOpen: true,
-                        Image: doc.preSignedUrl,
-                      });
-                    } else {
-                      window.open(doc.preSignedUrl, "_blank");
-                    }
-                  }}
-                >
-                  <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

@@ -1,101 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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}  ${classAvatar}`}>
+     <div className={`avatar avatar-${size} me-2 ${classAvatar}`}>
         <span className={`avatar-initial rounded-circle ${bgClass}`}>
           {generateAvatarText(firstName, lastName)}
         </span>

src/components/common/ConfirmModal.jsx

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

src/components/common/DateRangePicker.jsx

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

src/components/common/EmployeeSearchInput.jsx

@@ -1,16 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
 
-const EmployeeSearchInput = ({
+
-  control,
+const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
-  name,
-  projectId,
-  placeholder,
-  forAll,
-}) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -20,20 +15,32 @@ const EmployeeSearchInput = ({
   const [showDropdown, setShowDropdown] = useState(false);
   const debouncedSearch = useDebounce(search, 500);
 
-  const { data: employees, isLoading } = useEmployeesName(
+  const wrapperRef = useRef(null);
-    projectId,
+
-    debouncedSearch,
+  const {
-    forAll
+    data: employees,
-  );
+    isLoading,
+  } = useEmployeesName(projectId, debouncedSearch);
 
   useEffect(() => {
-    if (value && employees?.data) {
+    if (value && !search) {
-      const found = employees.data.find((emp) => emp.id === value);
+      const found = employees?.data?.find((emp) => emp.id === value);
-      if (found && forAll) {
+      if (found) setSearch(found.firstName + " " + found.lastName);
-        setSearch(found.firstName + " " + found.lastName);
-      }
     }
-  }, [value, employees?.data]);
+  }, [value, employees]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   const handleSelect = (employee) => {
     onChange(employee.id);
@@ -42,11 +49,11 @@ const EmployeeSearchInput = ({
   };
 
   return (
-    <div className="position-relative">
+    <div className="position-relative" ref={wrapperRef}>
       <input
         type="text"
         ref={ref}
-        className={`form-control form-control-sm`}
+        className="form-control form-control-sm"
         placeholder={placeholder}
         value={search}
         onChange={(e) => {
@@ -61,7 +68,7 @@ const EmployeeSearchInput = ({
 
       {showDropdown && (employees?.data?.length > 0 || isLoading) && (
         <ul
-          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
+          className="list-group position-absolute bg-white w-100 shadow z-3 px-0"
           style={{ maxHeight: 200, overflowY: "auto" }}
         >
           {isLoading ? (
@@ -99,3 +106,4 @@ const EmployeeSearchInput = ({
 };
 
 export default EmployeeSearchInput;
+

src/components/common/ProgressBar.jsx

@@ -3,65 +3,35 @@ import React from "react";
 const ProgressBar = ({
   plannedWork = 100,
   completedWork = 0,
-  height = "6px",
+  height = "8px",
   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);
+    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
   };
 
-  const percentage = getProgress(plannedWork, completedWork);
+  const progressStyle = {
-
+    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={`d-flex align-items-center ${className}`}
+      className={`progress ${className} ${rounded ? "rounded" : ""}`}
-      style={containerStyle}
+      style={{ height }}
     >
-      <div className="flex-grow-1">
+      <div
-        <div
+        className={`progress-bar ${rounded ? "rounded" : ""}`}
-          className={`progress ${rounded ? "rounded" : ""}`}
+        role="progressbar"
-          style={{ height, backgroundColor: "#f0f0f0" }}
+        style={progressStyle}
-        >
+        aria-valuenow={completedWork}
-          <div
+        aria-valuemin="0"
-            className={`progress-bar ${rounded ? "rounded" : ""}`}
+        aria-valuemax={plannedWork}
-            role="progressbar"
+      ></div>
-            style={progressBarStyle}
-            aria-valuenow={completedWork}
-            aria-valuemin="0"
-            aria-valuemax={plannedWork}
-          />
-        </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/common/SelectMultiple.jsx

@@ -4,6 +4,9 @@ import { createPortal } from "react-dom";
 import "./MultiSelectDropdown.css";
 import Label from "./Label";
 
+
+
+
 const SelectMultiple = ({
   name,
   options = [],
@@ -11,14 +14,16 @@ const SelectMultiple = ({
   labelKey = "name",
   valueKey = "id",
   placeholder = "Please select...",
-  IsLoading = false,required = false
+  IsLoading = false,
+  required = false,
 }) => {
-  const { setValue, watch,register } = useFormContext();
+  const { setValue, watch, register } = useFormContext();
-  useEffect(() => {
-  register(name, { value: [] });
-}, [register, name]);
 
-const selectedValues = watch(name) || [];
+  useEffect(() => {
+    register(name, { value: [] });
+  }, [register, name]);
+
+  const selectedValues = watch(name) || [];
 
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
@@ -60,18 +65,20 @@ const selectedValues = watch(name) || [];
     const updated = selectedValues.includes(value)
       ? selectedValues.filter((v) => v !== value)
       : [...selectedValues, value];
-
     setValue(name, updated, { shouldValidate: true });
   };
 
   const filteredOptions = (options || []).filter((item) => {
-  const label = getLabel(item);
+    const label = getLabel(item);
-  return (
+    return typeof label === "string" && label.toLowerCase().includes(searchText.toLowerCase());
-    typeof label === "string" &&
+  });
-    label.toLowerCase().includes(searchText.toLowerCase())
-  );
-});
 
+  // Sort filtered options in ascending order
+  const sortedOptions = filteredOptions.sort((a, b) => {
+    const labelA = getLabel(a).toString().toLowerCase();
+    const labelB = getLabel(b).toString().toLowerCase();
+    return labelA.localeCompare(labelB);
+  });
 
   const dropdownElement = (
     <div
@@ -101,7 +108,7 @@ const selectedValues = watch(name) || [];
         />
       </div>
 
-      {filteredOptions.map((item) => {
+      {sortedOptions.map((item) => {
         const labelVal = getLabel(item);
         const valueVal = item[valueKey];
         const isChecked = selectedValues.includes(valueVal);
@@ -124,12 +131,12 @@ const selectedValues = watch(name) || [];
         );
       })}
 
-      {!IsLoading && filteredOptions.length === 0 && (
+      {!IsLoading && sortedOptions.length === 0 && (
         <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
           <label className="text-muted">Not Found {`'${searchText}'`}</label>
         </div>
       )}
-      {IsLoading && filteredOptions.length === 0 && (
+      {IsLoading && sortedOptions.length === 0 && (
         <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
           <label className="text-muted">Loading...</label>
         </div>
@@ -140,19 +147,14 @@ const selectedValues = watch(name) || [];
   return (
     <>
       <div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
-        <label className="form-label mb-1">{label}</label>
+        <Label  required={required}>{label}</Label>
-        <Label className={name} required={required}></Label>
 
         <div
           className="multi-select-dropdown-header"
           onClick={() => setIsOpen((prev) => !prev)}
           style={{ cursor: "pointer" }}
         >
-          <span
+          <span className={selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"}>
-            className={
-              selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
-            }
-          >
             <div className="selected-badges-container">
               {selectedValues.length > 0 ? (
                 selectedValues.map((val) => {

src/components/common/TagInput.jsx

@@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import Label from "./Label";
 
-const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [],require = false }) => {
   const { setValue, watch } = useFormContext();
   const tags = watch(name) || [];
   const [input, setInput] = useState("");
@@ -65,9 +65,9 @@ const handleChange = (e) => {
 
   return (
     <>
-      <label htmlFor={name} className="form-label">
+      <Label required={require}>
         {label}
-      </label>
+      </Label>
 
       <div
         className="form-control form-control-sm p-1"

src/components/gallary/GalleryFilterPanel.jsx

@@ -1,143 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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 (
-    <div
-      className="d-flex justify-content-center align-items-center text-muted"
-      style={{ minHeight: "50vh" }}
-    >
-      <span style={{ fontSize: "0.9rem" }}>
-        {selectedProject
-          ? "No images match the selected filters."
-          : "Please Select Project!"}
-      </span>
-    </div>
-  );
-}
-
-
-  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

@@ -1,110 +0,0 @@
-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);
-  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,6 +41,7 @@ const EditContactTag = ({ data, onClose }) => {
       name: formData.name,
       description: formData.description,
     };
+    debugger
     updateContactTag({ id: data?.id, payload });
   }
   // const onSubmit = (formdata) => {

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,20 +58,24 @@ const MasterModal = ({ modaldata, closeModal }) => {
     "Edit-Document Type": (
       <ManageDocumentType data={item} onClose={closeModal} />
     ),
-    Services: <ManageServices onClose={closeModal} />,
+    "Services": (
-    "Edit-Services": <ManageServices data={item} onClose={closeModal} />,
+      <ManageServices onClose={closeModal} />
-    "Manage-Services": <ServiceGroups service={item} onClose={closeModal} />,
+    ),
-    "Payment Adjustment Head": <ManagePaymentHead onClose={closeModal} />,
+    "Edit-Services": (
-    "Edit-Payment Adjustment Head": <ManagePaymentHead data={item} onClose={closeModal} />
+      <ManageServices data={item} onClose={closeModal} />
+    ),
+    "Manage-Services": (
+      <ServiceGroups service={item} onClose={closeModal}/>
+    ),
   };
 
   return (
-    <div className="p-2 p-md-1">
+<>
-      <div className="text-center">
+    <div className="text-center">
-        <p className="fs-5 fw-semibold">{`${(masterType, " ", modalType)}`}</p>
+      <p className="fs-5 fw-semibold" >{`${masterType, " ",  modalType}`}</p>
-      </div>
-      {modalComponents[modalType] || null}
     </div>
+     { modalComponents[modalType] || null}
+</>
   );
 };
 

src/components/master/Services/ServicesGroups.jsx

@@ -81,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 && groups?.data?.map((group) => {
+                {groups?.data?.map((group) => {
                   const isOpen = activeGroupId === group.id;
 
                   return (

src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx

@@ -1,107 +0,0 @@
-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,14 +10,6 @@ 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"],
@@ -38,6 +30,7 @@ export const useActivitiesByGroups = (groupId) => {
     queryFn: async () => await MasterRespository.getActivitesByGroup(groupId),
    
     enabled: !!groupId,
+   
   });
 };
 export const useGlobalServices = () => {
@@ -303,8 +296,6 @@ 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 [
         {
@@ -457,6 +448,8 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
   });
 };
 
+
+
 //-----Create work Category-------------------------------
 export const useCreateWorkCategory = (onSuccessCallback) => {
   const queryClient = useQueryClient();
@@ -577,6 +570,7 @@ export const useUpdateContactTag = (onSuccessCallback) => {
 
   return useMutation({
     mutationFn: async ({ id, payload }) => {
+      debugger;
       const response = await MasterRespository.updateContactTag(id, payload);
       return response.data;
     },
@@ -710,11 +704,13 @@ 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");
@@ -722,12 +718,8 @@ export const useCreateService = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data?.data);
     },
     onError: (error) => {
-      showToast(
+      debugger;
-        error?.response?.data?.message ||
+      showToast( error?.response?.data?.message || error?.message  || "Something went wrong", "error");
-          error?.message ||
-          "Something went wrong",
-        "error"
-      );
     },
   });
 };
@@ -750,12 +742,7 @@ export const useUpdateService = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(
+      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
-        error?.response?.data?.message ||
-          error?.message ||
-          "Something went wrong",
-        "error"
-      );
     },
   });
 };
@@ -772,23 +759,16 @@ export const useCreateActivityGroup = (onSuccessCallback) => {
       queryClient.invalidateQueries({
         queryKey: ["groups"],
       });
-
+  debugger
-      showToast(
+      showToast( data?.message ||
-        data?.message ||
+        data?.response?.data?.message || "Activity Group created successfully.",
-          data?.response?.data?.message ||
-          "Activity Group created successfully.",
         "success"
       );
 
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(
+      showToast(error?.response?.data?.message || error?.message  || "Something went wrong", "error");
-        error?.response?.data?.message ||
-          error?.message ||
-          "Something went wrong",
-        "error"
-      );
     },
   });
 };
@@ -796,8 +776,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) => {
@@ -807,8 +787,7 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
 
       showToast(
         data?.message ||
-          data?.response?.data?.message ||
+        data?.response?.data?.message|| "Activity Group Updated successfully.",
-          "Activity Group Updated successfully.",
         "success"
       );
 
@@ -834,12 +813,7 @@ export const useCreateActivity = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(
+      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
-        error?.response?.data?.message ||
-          error?.message ||
-          "Something went wrong",
-        "error"
-      );
     },
   });
 };
@@ -861,12 +835,7 @@ export const useUpdateActivity = (onSuccessCallback) => {
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
-      showToast(
+      showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
-        error?.response?.data?.message ||
-          error?.message ||
-          "Something went wrong",
-        "error"
-      );
     },
   });
 };
@@ -1000,52 +969,7 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
     },
   });
 };
-// ------------------------------x-x--------x-x------------------------------------
+// -Delete Master --------
-
-// ==============================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();
 
@@ -1078,12 +1002,14 @@ export const useDeleteMasterItem = () => {
   });
 };
 
-export const useDeleteServiceGroup = () => {
+
-  const queryClient = useQueryClient();
+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");
@@ -1097,13 +1023,15 @@ export const useDeleteServiceGroup = () => {
       showToast(message, "error");
     },
   });
-};
+}
-export const useDeleteActivity = () => {
+export const useDeleteActivity =()=>{
-  const queryClient = useQueryClient();
+   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");
@@ -1117,4 +1045,4 @@ export const useDeleteActivity = () => {
       showToast(message, "error");
     },
   });
-};
+}

src/hooks/useAttendance.js

@@ -1,9 +1,5 @@
 import { useEffect, useState } from "react";
-import {
+import { cacheData, getCachedData, useSelectedProject } from "../slices/apiDataManager";
-  cacheData,
-  getCachedData,
-  useSelectedProject,
-} from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import showToast from "../services/toastService";
@@ -11,43 +7,14 @@ 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 {
-//     data: attendance = [],
-//     isLoading: loading,
-//     error,
-//     refetch: recall,
-//     isFetching
-//   } = useQuery({
-//     queryKey: ["attendance", projectId],
-//     queryFn: async () => {
-//       const response = await AttendanceRepository.getAttendance(projectId);
-//       return response.data;
-//     },
-//     enabled: !!projectId,
-//     onError: (error) => {
-//       showToast(error.message || "Error while fetching Attendance", "error");
-//     },
-//   });
 
-//   return {
+export const useAttendance = (projectId, organizationId, includeInactive = false, date = null) => {
-//     attendance,
-//     loading,
-//     error,
-//     recall,
-//     isFetching
-//   };
-// };
-
-export const useAttendance = (
-  projectId,
-  organizationId,
-) => {
   const dispatch = useDispatch();
-
+// queryKey: ["attendance", projectId, organizationId, includeInactive, date], 
   const {
     data: attendance = [],
     isLoading: loading,
@@ -55,15 +22,17 @@ export const useAttendance = (
     refetch: recall,
     isFetching,
   } = useQuery({
-    queryKey: ["attendance", projectId, organizationId], // include filters in cache key
+    queryKey: ["attendance", projectId ], 
     queryFn: async () => {
       const response = await AttendanceRepository.getAttendance(
         projectId,
         organizationId,
+        includeInactive,
+        date
       );
       return response.data;
     },
-    enabled: !!projectId, // only run if projectId exists
+    enabled: !!projectId, 
     onError: (error) => {
       showToast(error.message || "Error while fetching Attendance", "error");
     },
@@ -72,17 +41,12 @@ export const useAttendance = (
   return { attendance, loading, error, recall, isFetching };
 };
 
-export const useAttendancesLogs = (
+export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) => {
-  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,
@@ -108,6 +72,8 @@ export const useAttendancesLogs = (
   return query;
 };
 
+
+
 export const useEmployeeAttendacesLog = (id) => {
   const {
     data: logs = [],
@@ -122,10 +88,7 @@ export const useEmployeeAttendacesLog = (id) => {
     },
     enabled: !!id,
     onError: (error) => {
-      showToast(
+      showToast(error.message || "Error while fetching Attendance Logs", "error");
-        error.message || "Error while fetching Attendance Logs",
-        "error"
-      );
     },
   });
 
@@ -143,22 +106,15 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
   return useQuery({
     queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
     queryFn: async () => {
-      const res = await AttendanceRepository.getAttendanceByEmployee(
+      const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
-        employeeId,
-        fromDate,
-        toDate
-      );
       return res.data;
     },
-    enabled,
+    enabled: !!fromDate && !! toDate,
   });
 };
 
-export const useRegularizationRequests = (
+
-  projectId,
+export const useRegularizationRequests = (projectId, organizationId, IncludeInActive = false) => {
-  organizationId,
-  IncludeInActive = false
-) => {
   const dispatch = useDispatch();
 
   const {
@@ -173,7 +129,7 @@ export const useRegularizationRequests = (
       const response = await AttendanceRepository.getRegularizeList(
         projectId,
         organizationId,
-        IncludeInActive
+        IncludeInActive,      
       );
       return response.data;
     },
@@ -186,60 +142,49 @@ export const useRegularizationRequests = (
   return { regularizes, loading, error, recall, isFetching };
 };
 
+
 // -------------------Mutation--------------------------------------
 
 export const useMarkAttendance = () => {
   const queryClient = useQueryClient();
   const selectedProject = useSelectedProject();
-  const selectedDateRange = useSelector(
+  const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)
-    (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,selectedOrganization], (oldData) => {
+      queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
-          if (!oldData) return oldData;
+        if (!oldData) return oldData;
-          return oldData.map((emp) =>
+        return oldData.map((emp) =>
-            emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
-          );
-        });
-      } else if (variables.forWhichTab == 2) {
-        queryClient.setQueryData(
-          [
-            "attendanceLogs",
-            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:["attendance"]})
-        queryClient.setQueryData(
+    }else if(variables.forWhichTab == 2){
-          ["regularizedList", selectedProject],
+      queryClient.invalidateQueries({
-          (oldData) => {
+        queryKey: ["attendanceLogs"], 
-            if (!oldData) return oldData;
+     });
-            return oldData.filter((record) => record.id !== data.id);
+     queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
-          }
+        if (!oldData) return oldData;
-        ),
+        return oldData.map((record) =>
-          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+          record.id === data.id ? { ...record, ...data } : record
+        );
+      });
+       queryClient.invalidateQueries({queryKey:["regularizedList"]})
+    }else(
+       queryClient.setQueryData(["regularizedList",selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.filter((record) => record.id !== data.id)
+      }),
+      queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+    )
 
-      if (variables.forWhichTab !== 3)
+     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
-        showToast("Attendance marked successfully", "success");
     },
     onError: (error) => {
       showToast(error.message || "Failed to mark attendance", "error");

src/hooks/useAuth.jsx

@@ -10,39 +10,9 @@ 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 () => {
-      const resp = await AuthRepository.getSubscription(frequency);
-      return resp.data;
-    },
-  });
-};
-
-// -------------------APIHook-------------------------------------
 
 export const useTenants = () => {
   return useQuery({
@@ -92,34 +62,26 @@ export const useAuthModal = () => {
   };
 };
 
+
 export const useLogout = () => {
   const queryClient = useQueryClient();
-  const naviget = useNavigate();
-  const dispatch = useDispatch();
 
   return useMutation({
     mutationFn: async () => {
-      let payload = {
+      let payload = { refreshToken: localStorage.getItem("refreshToken") || sessionStorage.getItem("refreshToken") };
-        refreshToken:
-          localStorage.getItem("refreshToken") ||
-          sessionStorage.getItem("refreshToken"),
-      };
       return await AuthRepository.logout(payload);
     },
 
     onSuccess: (data) => {
-      queryClient.clear();
+      removeSession()
-      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

@@ -1,152 +0,0 @@
-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"
-      );
-    },
-  })
-}