Add extra spacing in Infra Work details.

public/assets/css/core-extend.css

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

public/assets/vendor/css/core.css

@@ -18613,10 +18613,6 @@ li:not(:first-child) .dropdown-item,
   min-height: 70vh !important;
 }
 
-.modal-min-h{
-   min-height: 60vh !important;
-}
-
 .flex-fill {
   flex: 1 1 auto !important;
 }

src/ModalProvider.jsx

@@ -1,23 +1,17 @@
 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 NewCollection from "./components/collections/ManageCollection";
 
 const ModalProvider = () => {
   const { isOpen, onClose } = useOrganizationModal();
   const { isOpen: isAuthOpen } = useAuthModal();
-  const {isOpen:isChangePass}  = useModal("ChangePassword")
-  const {isOpen:isCollectionNew}  = useModal("newCollection");
 
   return (
     <>
       {isOpen && <OrganizationModal />}
       {isAuthOpen && <SwitchTenant />}
-      {isChangePass && <ChangePasswordPage /> }
-      {isCollectionNew && <NewCollection/>}
     </>
   );
 };

src/components/Activities/Attendance.jsx

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

src/components/Activities/AttendcesLogs.jsx

@@ -5,11 +5,7 @@ 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";
@@ -37,142 +33,223 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
+const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
-const selectedProject = useSelectedProject();
+  // const selectedProject = useSelector(
-const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  //   (store) => store.localVariables.projectId
-const dispatch = useDispatch();
+  // );
-const [loading, setLoading] = useState(false);
+  const selectedProject = useSelectedProject();
-const [showPending, setShowPending] = useState(false);
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-const [isRefreshing, setIsRefreshing] = useState(false);
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState(false);
+  const [showPending, setShowPending] = useState(false)
 
-const today = new Date();
+  const [isRefreshing, setIsRefreshing] = useState(false);
-today.setHours(0, 0, 0, 0);
+  const [processedData, setProcessedData] = useState([]);
 
-const yesterday = new Date();
+  const today = new Date();
-yesterday.setDate(yesterday.getDate() - 1);
+  today.setHours(0, 0, 0, 0);
 
-const isSameDay = (dateStr) => {
+  const yesterday = new Date();
-  if (!dateStr) return false;
+  yesterday.setDate(yesterday.getDate() - 1);
-  const d = new Date(dateStr);
-  d.setHours(0, 0, 0, 0);
-  return d.getTime() === today.getTime();
-};
 
-const isBeforeToday = (dateStr) => {
+  const isSameDay = (dateStr) => {
-  if (!dateStr) return false;
+    if (!dateStr) return false;
-  const d = new Date(dateStr);
+    const d = new Date(dateStr);
-  d.setHours(0, 0, 0, 0);
+    d.setHours(0, 0, 0, 0);
-  return d.getTime() < today.getTime();
+    return d.getTime() === today.getTime();
-};
+  };
 
-const sortByName = (a, b) => {
+  const isBeforeToday = (dateStr) => {
-  const nameA = (a.firstName + a.lastName).toLowerCase();
+    if (!dateStr) return false;
-  const nameB = (b.firstName + b.lastName).toLowerCase();
+    const d = new Date(dateStr);
-  return nameA.localeCompare(nameB);
+    d.setHours(0, 0, 0, 0);
-};
+    return d.getTime() < today.getTime();
+  };
 
-const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const sortByName = (a, b) => {
-  selectedProject,
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
-  dateRange.startDate,
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-  dateRange.endDate,
+    return nameA?.localeCompare(nameB);
-  organizationId
+  };
-);
 
-const processedData = useMemo(() => {
+  const {
-  const filteredData = showPending
+    data = [],
-    ? data.filter((item) => item.checkOutTime === null)
+    isLoading,
-    : data;
+    error,
-
+    refetch,
-  const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+    isFetching,
-  const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
+  } = useAttendancesLogs(
-  const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+    selectedProject,
-  const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
+    dateRange.startDate,
-  const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
+    dateRange.endDate,
-  const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
+    organizationId
-
-  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-
-  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 sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-  return sortedDates.flatMap((date) => groupedByDate[date]);
-}, [data, showPending]);
-
-const filteredSearchData = useMemo(() => {
-  if (!searchTerm) return processedData;
-
-  const lowercased = searchTerm.toLowerCase();
-  return processedData.filter((item) =>
-    `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
   );
-}, [processedData, searchTerm]);
+  const filtering = (data) => {
+    const filteredData = showPending
+      ? data.filter((item) => item.checkOutTime === null)
+      : data;
 
-const {
+    const group1 = filteredData
-  currentPage,
+      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-  totalPages,
+      .sort(sortByName);
-  currentItems: paginatedAttendances,
+    const group2 = filteredData
-  paginate,
+      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-  resetPage,
+      .sort(sortByName);
-} = usePagination(filteredSearchData, 20);
+    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);
 
-useEffect(() => {
+    const sortedList = [
-  resetPage();
+      ...group1,
-}, [filteredSearchData]);
+      ...group2,
+      ...group3,
+      ...group4,
+      ...group5,
+      ...group6,
+    ];
 
-const handler = useCallback(
+    // Group by date
-  (msg) => {
+    const groupedByDate = sortedList.reduce((acc, item) => {
-    const { startDate, endDate } = dateRange;
+      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-    const checkIn = msg.response.checkInTime.substring(0, 10);
+      if (date) {
+        acc[date] = acc[date] || [];
+        acc[date].push(item);
+      }
+      return acc;
+    }, {});
 
-    if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
+    const sortedDates = Object.keys(groupedByDate).sort(
-      queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
+      (a, b) => new Date(b) - new Date(a)
-        if (!oldData) {
+    );
-          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+
-          return;
+    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-        }
+    setProcessedData(finalData);
-        return oldData.map((record) =>
+  };
-          record.id === msg.response.id ? { ...record, ...msg.response } : record
+
-        );
+  useEffect(() => {
-      });
+    filtering(data);
-      resetPage();
+  }, [data, showPending]);
+
+  // New useEffect to handle search filtering
+  const filteredSearchData = useMemo(() => {
+    if (!searchTerm) {
+      return processedData;
     }
-  },
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
-  [selectedProject, dateRange, resetPage]
+    return processedData.filter((item) => {
-);
+      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      return fullName.includes(lowercasedSearchTerm);
+    });
+  }, [processedData, searchTerm]);
 
-useEffect(() => {
+//   const filteredSearchData = useMemo(() => {
-  eventBus.on("attendance_log", handler);
+//   let tempData = processedData;
-  return () => eventBus.off("attendance_log", handler);
-}, [handler]);
 
-const employeeHandler = useCallback(
+//   if (searchTerm) {
-  (msg) => {
+//     const lowercasedSearchTerm = searchTerm.toLowerCase();
-    const { startDate, endDate } = dateRange;
+//     tempData = tempData.filter((item) => {
-    if (data.some((item) => item.employeeId == msg.employeeId)) {
+//       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-      refetch();
+//       return fullName.includes(lowercasedSearchTerm);
-    }
+//     });
-  },
+//   }
-  [data, refetch]
-);
 
-useEffect(() => {
+//   if (filters?.selectedOrganization) {
-  eventBus.on("employee", employeeHandler);
+//     tempData = tempData.filter(
-  return () => eventBus.off("employee", employeeHandler);
+//       (item) => item.organization?.name === filters.selectedOrganization
-}, [employeeHandler]);
+//     );
+//   }
+
+//   if (filters?.selectedServices?.length > 0) {
+//     tempData = tempData.filter((item) =>
+//       filters.selectedServices.includes(item.service?.name)
+//     );
+//   }
+
+//   return tempData;
+// }, [processedData, searchTerm, filters]);
 
 
+  const {
+    currentPage,
+    totalPages,
+    currentItems: paginatedAttendances,
+    paginate,
+    resetPage,
+  } = usePagination(filteredSearchData, 20);
+
+  useEffect(() => {
+    resetPage();
+  }, [filteredSearchData, resetPage]);
+
+  const handler = useCallback(
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      const checkIn = msg.response.checkInTime.substring(0, 10);
+      if (
+        selectedProject === msg.projectId &&
+        startDate <= checkIn &&
+        checkIn <= endDate
+      ) {
+        queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
+          if (!oldData) {
+            queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+            return;
+          }
+          const updatedAttendance = oldData.map((record) =>
+            record.id === msg.response.id
+              ? { ...record, ...msg.response }
+              : record
+          );
+          filtering(updatedAttendance);
+          return updatedAttendance;
+        });
+        resetPage();
+      }
+    },
+    [selectedProject, dateRange, filtering, resetPage]
+  );
+
+  useEffect(() => {
+    eventBus.on("attendance_log", handler);
+    return () => eventBus.off("attendance_log", handler);
+  }, [handler]);
+
+  const employeeHandler = useCallback(
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      if (data.some((item) => item.employeeId == msg.employeeId)) {
+        // dispatch(
+        //   fetchAttendanceData({
+        //     ,
+        //     fromDate: startDate,
+        //     toDate: endDate,
+        //   })
+        // );
+
+        refetch()
+      }
+    },
+    [selectedProject, dateRange, data, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
 
   return (
     <>
       <div
-        className="dataTables_length text-start py-2 d-flex justify-content-between "
+        className="dataTables_length text-start py-2 d-flex justify-content-between"
         id="DataTables_Table_0_length"
       >
         <div className="d-flex align-items-center my-0 ">
@@ -180,7 +257,7 @@ useEffect(() => {
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
+          <div className="form-check form-switch text-start m-0 ms-5">
             <input
               type="checkbox"
               className="form-check-input"
@@ -193,16 +270,11 @@ useEffect(() => {
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
+       
       </div>
-      <div
+      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
-        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 ? (
@@ -215,8 +287,7 @@ useEffect(() => {
                 <th className="border-top-1">Date</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
@@ -232,9 +303,9 @@ useEffect(() => {
                 const previousAttendance = arr[index - 1];
                 const previousDate = previousAttendance
                   ? moment(
-                      previousAttendance.checkInTime ||
+                    previousAttendance.checkInTime ||
-                        previousAttendance.checkOutTime
+                    previousAttendance.checkOutTime
-                    ).format("YYYY-MM-DD")
+                  ).format("YYYY-MM-DD")
                   : null;
 
                 if (!previousDate || currentDate !== previousDate) {
@@ -295,12 +366,7 @@ useEffect(() => {
             </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 data available for the selected date range. Please Select
-              another date.
-            </span>
-          </div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
@@ -326,9 +392,8 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
+                    }`}
-                  }`}
                 >
                   <button
                     className="page-link"
@@ -340,9 +405,8 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
+                }`}
-              }`}
             >
               <button
                 className="page-link"

src/components/Activities/CheckCheckOutForm.jsx

@@ -33,7 +33,7 @@ const createSchema = (modeldata) => {
         const checkOut = new Date(checkIn);
         checkOut.setHours(hour, minute, 0, 0);
 
-        return checkOut >= checkIn;
+        return checkOut > checkIn;
       }
       return true;
     }, {
@@ -96,12 +96,12 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
   };
 
   return (
-    <form className="row 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 :"
-            : "Check-In "}
+            : "Check-in :"}
         </label>
       </div>
 

src/components/Activities/Regularization.jsx

@@ -1,43 +1,25 @@
 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";
 
-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 { regularizes, loading, error, refetch } = useRegularizationRequests(
+  const { regularizes, loading, error, refetch } =
-    selectedProject,
+    useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
-    organizationId,
-    IncludeInActive
-  );
 
   useEffect(() => {
-    if(!regularizes) return
-    if(regularizes?.length) {
     setregularizedList(regularizes);
-
-    }
   }, [regularizes]);
 
   const sortByName = (a, b) => {
@@ -72,15 +54,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);
@@ -102,15 +117,9 @@ const Regularization = ({
   }, [employeeHandler]);
 
   return (
-    <div
+    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
-      className="table-responsive text-nowrap pb-4"
-      style={{ minHeight: "200px" }}
-    >
       {loading ? (
-        <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>
       ) : currentItems?.length > 0 ? (
@@ -126,21 +135,18 @@ const Regularization = ({
               <th>
                 <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
               </th>
-              <th colSpan={2}>
-                Requested By
-              </th>
-               <th >
-                Requested At
-              </th>
               <th>Action</th>
             </tr>
           </thead>
           <tbody>
             {currentItems?.map((att, index) => (
               <tr key={index}>
-                   <td colSpan={2}>
+                <td colSpan={2}>
                   <div className="d-flex justify-content-start align-items-center">
-                    <Avatar firstName={att.firstName} lastName={att.lastName} />
+                    <Avatar
+                      firstName={att.firstName}
+                      lastName={att.lastName}
+                    />
                     <div className="d-flex flex-column">
                       <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
@@ -156,23 +162,7 @@ const Regularization = ({
 
                 <td>{convertShortTime(att.checkInTime)}</td>
                 <td>
-                  {att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
+                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
-                </td>
-             
-                  <td colSpan={2}>
-                     {att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
-                    <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
-                    <div className="d-flex flex-column">
-                      <a href="#" className="text-heading text-truncate">
-                        <span className="fw-normal">
-                          {att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
-                        </span>
-                      </a>
-                    </div>
-                  </div>):(<small>--</small>)}
-                </td>
-                  <td>
-                  {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
                 </td>
                 <td className="text-center ">
                   <RegularizationActions
@@ -185,6 +175,7 @@ const Regularization = ({
             ))}
           </tbody>
         </table>
+
       ) : (
         <div
           className="d-flex justify-content-center align-items-center"
@@ -197,7 +188,7 @@ const Regularization = ({
           </span>
         </div>
       )}
-      {/* {!loading && totalPages > 1 && (
+      {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
             <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
@@ -235,14 +226,6 @@ const Regularization = ({
             </li>
           </ul>
         </nav>
-      )} */}
-
-      {totalPages > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={paginate}
-        />
       )}
     </div>
   );

src/components/Activities/ReportTask.jsx

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

src/components/Activities/ReportTaskComments.jsx

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

src/components/Activities/SubTask.jsx

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

src/components/Context/ChangePasswordContext.jsx

@@ -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,107 +1,69 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
-import { useCurrentService } from "../../hooks/useProjects";
+import { useCurrentService, useProjectInfra } from '../../hooks/useProjects'
-import { useSelectedProject } from "../../slices/apiDataManager";
+import { useSelectedProject } from '../../slices/apiDataManager';
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm } from 'react-hook-form';
-import { zodResolver } from "@hookform/resolvers/zod";
+import { zodResolver } from '@hookform/resolvers/zod';
-import {
+import { TaskReportDefaultValue, TaskReportFilterSchema } from './TaskRportScheam';
-  TaskReportDefaultValue,
+import { DateRangePicker1 } from '../common/DateRangePicker';
-  TaskReportFilterSchema,
+import SelectMultiple from '../common/SelectMultiple';
-} from "./TaskRportScheam";
-import { DateRangePicker1 } from "../common/DateRangePicker";
-import SelectMultiple from "../common/SelectMultiple";
-import { localToUtc } from "../../utils/appUtils";
-import { useTaskFilter } from "../../hooks/useTasks";
 
-const TaskReportFilterPanel = ({ handleFilter }) => {
+const TaskReportFilterPanel = () => {
-  const [resetKey, setResetKey] = useState(0);
+   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})
-  const methods = useForm({
+  const {register,reset,handleSubmit, formState:{errors}}  = methods;
-    resolver: zodResolver(TaskReportFilterSchema),
+  const onSubmit =(formData)=>{}
-    defaultValues: TaskReportDefaultValue,
-  });
-
-  const {
-    register,
-    reset,
-    handleSubmit,
-    formState: { errors },
-  } = methods;
-
-  const onSubmit = (formData) => {
-    const filterPayload = {
-      ...formData,
-      dateFrom: localToUtc(formData.dateFrom),
-      dateTo: localToUtc(formData.dateTo),
-    };
-    handleFilter(filterPayload);
-  };
-
-  const onClear = () => {
-    setResetKey((prev) => prev + 1);
-    handleFilter(TaskReportDefaultValue);
-    reset(TaskReportDefaultValue);
-  };
   return (
-    <FormProvider {...methods}>
+     <FormProvider {...methods}>
-      <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+        <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
-        <div className="mb-3 w-100">
+          <div className="mb-3 w-100">
-          <label className="fw-semibold">Choose Date Range:</label>
-          <DateRangePicker1
-            placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="dateFrom"
-            endField="dateTo"
-            resetSignal={resetKey}
-            defaultRange={false}
-            maxDate={new Date()}
-          />
-        </div>
             
-        <div className="row mb-2">
+            <label className="fw-semibold">Choose Date Range:</label>
-          <SelectMultiple
+            <DateRangePicker1
-            name="buildingIds"
+              placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            label="Building"
+              startField="startDate"
-            options={data?.buildings}
+              endField="endDate"
-            labelKey="name"
+              resetSignal={resetKey}
-            valueKey="id"
+              defaultRange={false}
-          />
+            />
-        </div>
+          </div>
-        <div className="row mb-2">
-          <SelectMultiple
-            name="floorIds"
-            label="Floor"
-            options={data?.floors}
-            labelKey="name"
-            valueKey="id"
-          />
-        </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">
+          <div className="row g-2">
-          <button
+            <SelectMultiple
-            type="button"
+              name="buildingIds"
-            className="btn btn-label-secondary btn-sm"
+              label="Projects"
-            onClick={onClear}
+              options={projectInfra}
-          >
+              labelKey="buildingName"
-            Clear
+              valueKey="id"
-          </button>
+            />
-          <button type="submit" className="btn btn-primary btn-sm">
+          </div>
-            Apply
+          <div className="row g-2">
-          </button>
+            <SelectMultiple
-        </div>
+              name="floorIds"
-      </form>
+              label="Floor"
-    </FormProvider>
+              options={projectInfra}
-  );
+              labelKey="floorName"
-};
+              valueKey="id"
+            />
+          </div>
          
-export default TaskReportFilterPanel;
+
+          <div className="d-flex justify-content-end py-3 gap-2">
+            <button
+              type="button"
+              className="btn btn-label-secondary btn-xs"
+            >
+              Clear
+            </button>
+            <button type="submit" className="btn btn-primary btn-xs">
+              Apply
+            </button>
+          </div>
+        </form>
+      </FormProvider>
+  )
+}
+
+export default TaskReportFilterPanel

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 } = useDailyProgrssContext();
   const selectedProject = useSelectedProject();
   const { projectNames } = useProjectName();
 
@@ -37,10 +37,10 @@ const TaskReportList = () => {
     selectedProject,
     ITEMS_PER_PAGE,
     currentPage,
-    service,filter
+    service
   );
 
-  const ProgrssReportColumn = [
+const ProgrssReportColumn = [
     {
       key: "activity",
       label: "Activity",
@@ -149,19 +149,20 @@ const TaskReportList = () => {
       data-bs-content={`
         <div class="border border-secondary rounded custom-popover p-2 px-3">
           ${task.teamMembers
-          .map(
+            .map(
-            (m) => `
+              (m) => `
             <div class="d-flex align-items-center gap-2 mb-2">
               <div class="avatar avatar-xs">
                 <span class="avatar-initial rounded-circle bg-label-primary">
-                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
+                  ${m?.firstName?.charAt(0) || ""}${
+                m?.lastName?.charAt(0) || ""
               }
                 </span>
               </div>
               <span>${m.firstName} ${m.lastName}</span>
             </div>`
-          )
+            )
-          .join("")}
+            .join("")}
         </div>
       `}
     >
@@ -192,28 +193,18 @@ const TaskReportList = () => {
   if (isLoading) return <TaskReportListSkeleton />;
   if (isError) return <div>Loading....</div>;
   return (
-    <div className="mt-2 table-responsive text-nowrap">
+    <div className="mt-2">
-      <table className="table">
+     <table className="table">
         <thead>
           <tr>
             <th className="text-start">Activity</th>
-            <th>
+            <th>Total Pending</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>}
+                  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>

src/components/DailyProgressRport/TaskRportScheam.jsx

@@ -3,15 +3,13 @@ import { z } from "zod";
 export const TaskReportFilterSchema = z.object({
   buildingIds: 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:[],
     floorIds:[],
-    activityIds:[],
+    startDate:null,
-    dateFrom:null,
+    endDate:null
-    dateTo:null
 }

src/components/Directory/ListViewContact.jsx

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

src/components/Directory/ManageBucket1.jsx

@@ -23,6 +23,7 @@ const ManageBucket1 = () => {
   const handleClose = () => {
     setAction(null);
     setSelectedBucket(null);
+    setDeleteId(null);
   };
   const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
     handleClose();
@@ -48,26 +49,23 @@ const ManageBucket1 = () => {
         <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
       </div>
 
-      {action ? (
+      {action == "create" ? (
         <>
-          {action && (
+          <BucketForm
-            <div>
+            selectedBucket={selectedBucket}
-              <BucketForm
+            mode={action} // pass create | edit
-                selectedBucket={selectedBucket}
+            onSubmit={handleSubmit}
-                mode={action} // pass create | edit
+            onCancel={() => {
-                onSubmit={handleSubmit}
+              setAction(null);
-                onCancel={() => {
+              setSelectedBucket(null);
-                  setAction(null);
+            }}
-                  setSelectedBucket(null);
+            isPending={creating || updating}
-                }}
+          />
-                isPending={creating || updating}
+          {action === "edit" && selectedBucket && (
-              />
+            <AssignedBucket
-              {action === "edit" && (
+              selectedBucket={selectedBucket}
-                <AssignedBucket
+              handleClose={handleClose}
-                selectedBucket={selectedBucket}
+            />
-                handleClose={handleClose}
-              />)}
-            </div>
           )}
         </>
       ) : (
@@ -93,19 +91,11 @@ const ManageBucket1 = () => {
             buckets={data}
             loading={isLoading}
             searchTerm={searchTerm}
-            onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
+            onDelete={(id) => setDeleteBucket({isOpen:true,bucketId:id})}
-            onEdit={(b) => {
-              setAction("edit")
-              setSelectedBucket(b)
-            }}
           />
         </>
       )}
-
     </div>
   );
 };
 export default ManageBucket1;
-
-
-

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 { projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { organizationList } = useOrganization();

src/components/Documents/DocumentFilterPanel.jsx

@@ -96,7 +96,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
             startField="startDate"
             endField="endDate"
-            defaultRange={false}
+            defaultRange={true}
             resetSignal={resetKey}
             maxDate={new Date()}
           />

src/components/Documents/Documents.jsx

@@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-5">
-        <div className="card page-min-h d-flex p-2">
+        <div className="card d-flex p-2">
           <div className="row align-items-center">
             {/* Search */}
             <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">

src/components/Employee/DemoTable.jsx

@@ -0,0 +1,172 @@
+import React from "react";
+
+const DemoTable = () => {
+  return (
+    <div className="content-wrapper">
+      <div className="container-fluid">
+        <div className="card">
+          <div className="card-datatable table-responsive">
+            <table className="datatables-basic table border-top">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th></th>
+                  <th>id</th>
+                  <th>Name</th>
+                  <th>Email</th>
+                  <th>Date</th>
+                  <th>Salary</th>
+                  <th>Status</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+        <div className="offcanvas offcanvas-end" id="add-new-record">
+          <div className="offcanvas-header border-bottom">
+            <h5 className="offcanvas-title" id="exampleModalLabel">
+              New Record
+            </h5>
+            <button
+              type="button"
+              className="btn-close text-reset"
+              data-bs-dismiss="offcanvas"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div className="offcanvas-body flex-grow-1">
+            <form
+              className="add-new-record pt-0 row g-2"
+              id="form-add-new-record"
+              onsubmit="return false"
+            >
+              <div className="col-sm-12">
+                <label className="form-label" for="basicFullname">
+                  Full Name
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicFullname2" className="input-group-text">
+                    <i className="bx bx-user"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicFullname"
+                    className="form-control dt-full-name"
+                    name="basicFullname"
+                    placeholder="John Doe"
+                    aria-label="John Doe"
+                    aria-describedby="basicFullname2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicPost">
+                  Post
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicPost2" className="input-group-text">
+                    <i className="bx bxs-briefcase"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicPost"
+                    name="basicPost"
+                    className="form-control dt-post"
+                    placeholder="Web Developer"
+                    aria-label="Web Developer"
+                    aria-describedby="basicPost2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicEmail">
+                  Email
+                </label>
+                <div className="input-group input-group-merge">
+                  <span className="input-group-text">
+                    <i className="bx bx-envelope"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicEmail"
+                    name="basicEmail"
+                    className="form-control dt-email"
+                    placeholder="john.doe@example.com"
+                    aria-label="john.doe@example.com"
+                  />
+                </div>
+                <div className="form-text">
+                  You can use letters, numbers & periods
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicDate">
+                  Joining Date
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicDate2" className="input-group-text">
+                    <i className="bx bx-calendar"></i>
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control dt-date"
+                    id="basicDate"
+                    name="basicDate"
+                    aria-describedby="basicDate2"
+                    placeholder="MM/DD/YYYY"
+                    aria-label="MM/DD/YYYY"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicSalary">
+                  Salary
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicSalary2" className="input-group-text">
+                    <i className="bx bx-dollar"></i>
+                  </span>
+                  <input
+                    type="number"
+                    id="basicSalary"
+                    name="basicSalary"
+                    className="form-control dt-salary"
+                    placeholder="12000"
+                    aria-label="12000"
+                    aria-describedby="basicSalary2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <button
+                  type="submit"
+                  className="btn btn-primary data-submit me-sm-4 me-1"
+                >
+                  Submit
+                </button>
+                <button
+                  type="reset"
+                  className="btn btn-outline-secondary"
+                  data-bs-dismiss="offcanvas"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <hr className="my-12" />
+
+        <hr className="my-12" />
+
+        <hr className="my-12" />
+      </div>
+
+      <div className="content-backdrop fade"></div>
+    </div>
+  );
+};
+
+export default DemoTable;

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,21 +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)
   );
 
-  console.log(sorted);
+  const currentDate = new Date().toLocaleDateString("en-CA");
-
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    sorted,
+    sortedFinalList,
     ITEMS_PER_PAGE
   );
 
@@ -64,6 +123,7 @@ const EmpAttendance = () => {
   };
   const closeModal = () => setIsModalOpen(false);
 
+  const onSubmit = (formData) => {};
   return (
     <>
       {isModalOpen && (
@@ -76,10 +136,20 @@ const EmpAttendance = () => {
           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>
@@ -164,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/EmployeeList.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const EmployeeList = () => {
+  return <div>EmployeeList</div>;
+};
+
+export default EmployeeList;

src/components/Employee/EmployeeSchema.jsx

@@ -1,124 +0,0 @@
-import { z } from "zod"
-
-
-const mobileNumberRegex = /^[0-9]\d{9}$/;
-
-export  const employeeSchema = 
-     z.object({
-    firstName: z.string().min(1, { message: "First Name is required" }),
-    middleName: z.string().optional(),
-    lastName: z.string().min(1, { message: "Last Name is required" }),
-    email: z
-      .string()
-      .max(80, "Email cannot exceed 80 characters")
-      .optional()
-      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
-        message: "Invalid email format",
-      })
-      .refine(
-        (val) => {
-          if (!val) return true;
-          const [local, domain] = val.split("@");
-          return (
-            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
-          );
-        },
-        {
-          message: "Email local or domain part is too long",
-        }
-      ),
-    currentAddress: z
-      .string()
-      .min(1, { message: "Current Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    birthDate: z
-      .string()
-      .min(1, { message: "Birth Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Birth date cannot be in the future",
-        }
-      ),
-    joiningDate: z
-      .string()
-      .min(1, { message: "Joining Date is required" })
-      .refine(
-        (date, ctx) => {
-          return new Date(date) <= new Date();
-        },
-        {
-          message: "Joining date cannot be in the future",
-        }
-      ),
-    emergencyPhoneNumber: z
-      .string()
-      .min(1, { message: "Phone Number is required" })
-      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-    emergencyContactPerson: z
-      .string()
-      .min(1, { message: "Emergency Contact Person is required" })
-      .regex(/^[A-Za-z\s]+$/, {
-        message: "Emergency Contact Person must contain only letters",
-      }),
-    aadharNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^\d{12}$/.test(val), {
-        message: "Aadhar card must be exactly 12 digits long",
-      }),
-    gender: z
-      .string()
-      .min(1, { message: "Gender is required" })
-      .refine((val) => val !== "Select Gender", {
-        message: "Please select a gender",
-      }),
-    panNumber: z
-      .string()
-      .optional()
-      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
-        message: "Invalid PAN number",
-      }),
-    permanentAddress: z
-      .string()
-      .min(1, { message: "Permanent Address is required" })
-      .max(500, { message: "Address cannot exceed 500 characters" }),
-    phoneNumber: z
-      .string()
-      .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"}),
-    hasApplicationAccess:z.boolean().default(false),
-  }).refine((data) => {
-  if (data.hasApplicationAccess) {
-    return data.email && data.email.trim() !== "";
-  }
-  return true; 
-}, {
-  message: "Email is required when employee has access",
-  path: ["email"], 
-});
-
- 
-export const defatEmployeeObj = {
-      firstName:  "",
-      middleName: "",
-      lastName: "",
-      email:  "",
-      currentAddress: "",
-      birthDate:  "",
-      joiningDate: "",
-      emergencyPhoneNumber: "",
-      emergencyContactPerson:  "",
-      aadharNumber: "",
-      gender:  "",
-      panNumber: "",
-      permanentAddress:  "",
-      phoneNumber:  "",
-      jobRoleId: null,
-      organizationId:"",
-      hasApplicationAccess:false
-    }

src/components/Employee/ManageEmployee.jsx

@@ -1,37 +1,36 @@
 import React, { useEffect, useState } from "react";
+import showToast from "../../services/toastService";
+import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-
+import { z } from "zod";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
+import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
 import {
-  useEmployeeProfile,
+  cacheData,
-  useUpdateEmployee,
+  clearCacheKey,
-} from "../../hooks/useEmployees";
+  getCachedData,
-
+} from "../../slices/apiDataManager";
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
+import { useMutation } from "@tanstack/react-query";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
-import { useOrganizationsList } from "../../hooks/useOrganization";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const ManageEmployee = ({ employeeId, onClosed }) => {
+const mobileNumberRegex = /^[0-9]\d{9}$/;
+
+const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
   const { mutate: updateEmployee, isPending } = useUpdateEmployee();
-  const {
+
-    data: organzationList,
-    isLoading,
-    isError,
-    error: EempError,
-  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
   const {
     employee,
     error,
     loading: empLoading,
-    refetch,
+    refetch
   } = useEmployeeProfile(employeeId);
 
   useEffect(() => {
@@ -39,7 +38,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
   }, [employeeId]);
 
   const [disabledEmail, setDisabledEmail] = useState(false);
-
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
@@ -47,9 +45,98 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
   const [currentAddressLength, setCurrentAddressLength] = useState(0);
   const [permanentAddressLength, setPermanentAddressLength] = useState(0);
 
+  const userSchema = z.object({
+    ...(employeeId ? { id: z.string().optional() } : {}),
+    firstName: z.string().min(1, { message: "First Name is required" }),
+    middleName: z.string().optional(),
+    lastName: z.string().min(1, { message: "Last Name is required" }),
+    email: z
+      .string()
+      .max(80, "Email cannot exceed 80 characters")
+      .optional()
+      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
+        message: "Invalid email format",
+      })
+      .refine(
+        (val) => {
+          if (!val) return true;
+          const [local, domain] = val.split("@");
+          return (
+            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
+          );
+        },
+        {
+          message: "Email local or domain part is too long",
+        }
+      ),
+    currentAddress: z
+      .string()
+      .min(1, { message: "Current Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    birthDate: z
+      .string()
+      .min(1, { message: "Birth Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Birth date cannot be in the future",
+        }
+      ),
+    joiningDate: z
+      .string()
+      .min(1, { message: "Joining Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Joining date cannot be in the future",
+        }
+      ),
+    emergencyPhoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    emergencyContactPerson: z
+      .string()
+      .min(1, { message: "Emergency Contact Person is required" })
+      .regex(/^[A-Za-z\s]+$/, {
+        message: "Emergency Contact Person must contain only letters",
+      }),
+    aadharNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^\d{12}$/.test(val), {
+        message: "Aadhar card must be exactly 12 digits long",
+      }),
+    gender: z
+      .string()
+      .min(1, { message: "Gender is required" })
+      .refine((val) => val !== "Select Gender", {
+        message: "Please select a gender",
+      }),
+    panNumber: z
+      .string()
+      .optional()
+      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
+        message: "Invalid PAN number",
+      }),
+    permanentAddress: z
+      .string()
+      .min(1, { message: "Permanent Address is required" })
+      .max(500, { message: "Address cannot exceed 500 characters" }),
+    phoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    jobRoleId: z.string().min(1, { message: "Role is required" }),
+  });
+
   useEffect(() => {
-    refetch();
+    refetch()
-  }, []);
+  }, [])
 
   const {
     register,
@@ -60,8 +147,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     reset,
     getValues,
   } = useForm({
-    resolver: zodResolver(employeeSchema),
+    resolver: zodResolver(userSchema),
-    defaultValues: defatEmployeeObj,
+    defaultValues: {
+      id: currentEmployee?.id || null,
+      firstName: currentEmployee?.firstName || "",
+      middleName: currentEmployee?.middleName || "",
+      lastName: currentEmployee?.lastName || "",
+      email: currentEmployee?.email || "",
+      currentAddress: currentEmployee?.currentAddress || "",
+      birthDate: formatDate(currentEmployee?.birthDate) || "",
+      joiningDate: formatDate(currentEmployee?.joiningDate) || "",
+      emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
+      emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
+      aadharNumber: currentEmployee?.aadharNumber || "",
+      gender: currentEmployee?.gender || "",
+      panNumber: currentEmployee?.panNumber || "",
+      permanentAddress: currentEmployee?.permanentAddress || "",
+      phoneNumber: currentEmployee?.phoneNumber || "",
+      jobRoleId: currentEmployee?.jobRoleId.toString() || null,
+    },
     mode: "onChange",
   });
 
@@ -72,13 +176,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
       data.email = null;
     }
 
-    const payload = { ...data };
+    updateEmployee({ ...data, IsAllEmployee }, {
-
-    if (employeeId) {
-      payload.id = employeeId;
-    }
-
-    updateEmployee(payload, {
       onSuccess: () => {
         reset();
         onClosed();
@@ -86,6 +184,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     });
   };
 
+
   useEffect(() => {
     if (!loading && !error && employee) {
       setCurrentEmployee(employee);
@@ -96,47 +195,37 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     reset(
       currentEmployee
         ? {
-            id: currentEmployee.id || null,
+          id: currentEmployee.id || null,
-            firstName: currentEmployee.firstName || "",
+          firstName: currentEmployee.firstName || "",
-            middleName: currentEmployee.middleName || "",
+          middleName: currentEmployee.middleName || "",
-            lastName: currentEmployee.lastName || "",
+          lastName: currentEmployee.lastName || "",
-            email: currentEmployee.email || "",
+          email: currentEmployee.email || "",
-            currentAddress: currentEmployee.currentAddress || "",
+          currentAddress: currentEmployee.currentAddress || "",
-            birthDate: formatDate(currentEmployee.birthDate) || "",
+          birthDate: formatDate(currentEmployee.birthDate) || "",
-            joiningDate: formatDate(currentEmployee.joiningDate) || "",
+          joiningDate: formatDate(currentEmployee.joiningDate) || "",
-            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-            emergencyContactPerson:
+          emergencyContactPerson:
-              currentEmployee.emergencyContactPerson || "",
+            currentEmployee.emergencyContactPerson || "",
-            aadharNumber: currentEmployee.aadharNumber || "",
+          aadharNumber: currentEmployee.aadharNumber || "",
-            gender: currentEmployee.gender || "",
+          gender: currentEmployee.gender || "",
-            panNumber: currentEmployee.panNumber || "",
+          panNumber: currentEmployee.panNumber || "",
-            permanentAddress: currentEmployee.permanentAddress || "",
+          permanentAddress: currentEmployee.permanentAddress || "",
-            phoneNumber: currentEmployee.phoneNumber || "",
+          phoneNumber: currentEmployee.phoneNumber || "",
-            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-            organizationId: currentEmployee.organizationId || "",
+        }
-            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
-          }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
     setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
   }, [currentEmployee, reset]);
 
-  const hasAccessAplication = watch("hasApplicationAccess");
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
-        <div className="text-center">
+        <div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
-          <p className="fs-5 fw-semibold">
-            {" "}
-            {employee ? "Update Employee" : "Create Employee"}
-          </p>{" "}
-        </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>First Name</Label>
-              First Name
-            </Label>
             <input
               type="text"
               name="firstName"
@@ -155,10 +244,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               }}
             />
             {errors.firstName && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.firstName.message}
               </div>
             )}
@@ -181,18 +267,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               }}
             />
             {errors.middleName && (
-              <div
+              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
-                className="danger-text text-start "
-                style={{ fontSize: "12px" }}
-              >
                 {errors.middleName.message}
               </div>
             )}
           </div>
+
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>Last Name</Label>
-              Last Name
-            </Label>
             <input
               type="text"
               {...register("lastName", {
@@ -209,24 +291,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               }}
             />
             {errors.lastName && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.lastName.message}
               </div>
             )}
           </div>
+
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <Label
+            <div className="form-text text-start">Email</div>
-              htmlFor="email"
-              className="text-start form-text"
-              required={hasAccessAplication}
-            >
-              Email
-            </Label>
             <input
               type="email"
               id="email"
@@ -247,9 +321,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             )}
           </div>
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>Phone Number</Label>
-              Phone Number
-            </Label>
             <input
               type="text"
               keyboardType="numeric"
@@ -273,9 +345,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         <div className="row mb-3"></div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>Gender</Label>
-              Gender
-            </Label>
 
             <div className="input-group">
               <select
@@ -317,10 +387,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             </div>
 
             {errors.birthDate && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.birthDate.message}
               </div>
             )}
@@ -341,10 +408,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             </div>
 
             {errors.joiningDate && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.joiningDate.message}
               </div>
             )}
@@ -352,9 +416,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>Current Address</Label>
-              Current Address
-            </Label>
 
             <textarea
               id="currentAddress"
@@ -366,11 +428,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               maxLength={500}
               onChange={(e) => {
                 setCurrentAddressLength(e.target.value.length);
+                // let react-hook-form still handle it
                 register("currentAddress").onChange(e);
               }}
             ></textarea>
             <div className="text-end muted">
-              <small> {500 - currentAddressLength} characters left</small>
+              <small>
+                {" "}
+                {500 - currentAddressLength} characters left
+              </small>
             </div>
             {errors.currentAddress && (
               <div
@@ -400,7 +466,9 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>{500 - permanentAddressLength} characters left</small>
+              <small>
+                {500 - permanentAddressLength} characters left
+              </small>
             </div>
             {errors.permanentAddress && (
               <div
@@ -412,55 +480,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             )}
           </div>
         </div>
-
-        {/* -------------- */}
-        <div className="row mb-3">
-          <div className="col-sm-6">
-            <Label className="form-text text-start" required>
-              Organization
-            </Label>
-            <div className="input-group">
-              <select
-                className="form-select form-select-sm"
-                {...register("organizationId")}
-                id="organizationId"
-                aria-label=""
-              >
-                <option disabled value="">
-                  Select Organization
-                </option>
-                {organzationList?.data
-                  .sort((a, b) => a?.name?.localeCompare(b?.name))
-                  .map((item) => (
-                    <option value={item?.id} key={item?.id}>
-                      {item?.name}
-                    </option>
-                  ))}
-              </select>
-            </div>
-            {errors.organizationId && (
-              <div
-                className="danger-text text-start justify-content-center"
-                style={{ fontSize: "12px" }}
-              >
-                {errors.organizationId.message}
-              </div>
-            )}
-          </div>
-
-          <div className="col-sm-6 d-flex align-items-center mt-2">
-            <label className="form-check-label d-flex align-items-center">
-              <input
-                type="checkbox"
-                className="form-check-input me-2"
-                {...register("hasApplicationAccess")}
-              />
-              Has Application Access ?
-            </label>
-          </div>
-        </div>
-
-        {/* --------------- */}
         <div className="row mb-3">
           {" "}
           <div className="divider">
@@ -469,9 +488,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>
+            <Label className="form-text text-start" required>Official Designation</Label>
-              Official Designation
-            </Label>
             <div className="input-group">
               <select
                 className="form-select form-select-sm"
@@ -584,6 +601,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             )}
           </div>
         </div>
+
+        {employeeId && (
+          <div className="row mb-3 d-none">
+            <div className="col-sm-12">
+              <input type="text" name="id" {...register("id")} />
+            </div>
+          </div>
+        )}
+
         <div className="row text-end">
           <div className="col-sm-12">
             <button
@@ -600,11 +626,18 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               className="btn btn-sm btn-primary"
               disabled={isPending}
             >
-              {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
+              {isPending
+                ? "Please Wait..."
+                : employeeId
+                  ? "Update"
+                  : "Create"}
             </button>
+
+
           </div>
         </div>
       </form>
+
     </>
   );
 };

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -117,7 +117,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
-              maxDate={new Date()}
             />
           </div>
 
@@ -201,12 +200,12 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           <div className="d-flex justify-content-end py-3 gap-2">
             <button
               type="button"
-              className="btn btn-label-secondary btn-sm"
+              className="btn btn-label-secondary btn-xs"
               onClick={onClear}
             >
               Clear
             </button>
-            <button type="submit" className="btn btn-primary btn-sm">
+            <button type="submit" className="btn btn-primary btn-xs">
               Apply
             </button>
           </div>

src/components/Expenses/ManageExpense.jsx

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

src/components/Expenses/PreviewDocument.jsx

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

src/components/Expenses/ViewExpense.jsx

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

src/components/Layout/Header.jsx

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

src/components/Organization/AssignOrg.jsx

@@ -93,15 +93,8 @@ const AssignOrg = ({ setStep }) => {
     <div className="row text-black text-start mb-3">
       {/* Organization Info Display */}
       <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+        <div className="d-flex justify-content-between align-items-center text-start mb-2">
-          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
+          <div className="fw-semibold text-wrap">{orgData.name}</div>
-            <img
-                    src="/public/assets/img/orgLogo.png"
-                    alt="logo"
-                    width={40}
-                    height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
-          </div>
           <div className="text-end">
             <button
               type="button"
@@ -113,7 +106,7 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+
       {/* Contact Info */}
       <div className="col-md-6 mb-3">
         <div className="d-flex">
@@ -121,7 +114,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className="bx bx-sm bx-user me-1" /> Contact Person :
+            Contact Person :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
@@ -132,7 +125,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+            Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
@@ -143,7 +136,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+            Email Address :
           </label>
           <div className="text-muted">{orgData.email}</div>
         </div>
@@ -154,8 +147,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-          <i className="bx bx-sm me-1 bx-barcode"></i>
+            Service provider Id (SPRID) :
-  Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
@@ -166,7 +158,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
@@ -241,11 +233,11 @@ const AssignOrg = ({ setStep }) => {
           <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
-              className="btn btn-sm btn-outline-secondary"
+              className="btn btn-xs btn-outline-secondary"
               onClick={handleBack}
               disabled={isPending}
             >
-              <i className="bx bx-chevron-left"></i>Back
+              <i className="bx bx-left-arrow-alt"></i> Back
             </button>
             <button
               type="submit"
@@ -255,8 +247,8 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                  ? "Assign to Organization"
+                  ? "Assign Organization"
-                  : "Assign to Project"}
+                  : "Assign Project"}
             </button>
           </div>
         </form>

src/components/Organization/ManagOrg.jsx

@@ -2,7 +2,6 @@ import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   useCreateOrganization,
-  useOrganization,
   useOrganizationModal,
   useUpdateOrganization,
 } from "../../hooks/useOrganization";
@@ -19,12 +18,6 @@ const ManagOrg = () => {
   const { data: service, isLoading } = useGlobalServices();
   const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
     useOrganizationModal();
-  const {
-    data: organization,
-    isLoading: organizationLoading,
-    isError,
-    error,
-  } = useOrganization(orgData?.id);
 
   const method = useForm({
     resolver: zodResolver(organizationSchema),
@@ -52,27 +45,25 @@ const ManagOrg = () => {
       onOpen({ startStep: 1 });
       onClose();
     });
+
   // Prefill form if editing
   useEffect(() => {
-    if (organization) {
+    if (orgData) {
+      console.log(orgData);
       reset({
-        name: organization.name || "",
+        name: orgData.name || "",
-        contactPerson: organization.contactPerson || "",
+        contactPerson: orgData.contactPerson || "",
-        contactNumber: organization.contactNumber || "",
+        contactNumber: orgData.contactNumber || "",
-        email: organization.email || "",
+        email: orgData.email || "",
-        serviceIds: organization.services?.map((s) => s.id) || [],
+        serviceIds: orgData.services?.map((s) => s.id) || [],
-        address: organization.address || "",
+        address: orgData.address || "",
       });
     }
-  }, [organization, reset, service?.data]);
+  }, [orgData, reset]);
 
-  const onSubmit = (formData) => {
+  const onSubmit = (payload) => {
-    let payload = { ...formData };
+    if (orgData?.id) {
-    if (organization?.id) {
+      updateOrganization({ id: orgData.id, ...payload });
-      updateOrganization({
-        orgId: organization.id,
-        payload: { ...payload, id: organization.id },
-      });
     } else {
       createOrganization(payload);
     }
@@ -151,11 +142,11 @@ const ManagOrg = () => {
         <div className="mb-1 text-start">
           <SelectMultiple
             name="serviceIds"
-            label="Select Service"
+            label="Services"
-            options={service?.data}
+            required
-            labelKey="name"
             valueKey="id"
-            IsLoading={isLoading}
+            options={service?.data || []}
+            required = {true}
           />
           {errors.serviceIds && (
             <span className="danger-text">{errors.serviceIds.message}</span>

src/components/Organization/OrgPicker.css

@@ -1,24 +0,0 @@
-/* Default: hide scrollbar */
-.scrollable-tbody {
-  max-height: 350px;
-  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-}
-.scrollable-tbody::-webkit-scrollbar {
-  width: 0; /* Chrome, Safari */
-}
-
-/* On hover: show scrollbar */
-.scrollable-tbody:hover {
-  scrollbar-width: thin; /* Firefox */
-}
-.scrollable-tbody:hover::-webkit-scrollbar {
-  width: 6px; /* Adjust width */
-}
-.scrollable-tbody:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-.scrollable-tbody:hover::-webkit-scrollbar-track {
-  background: transparent;
-}

src/components/Organization/OrgPickerFromSPId.jsx

@@ -10,15 +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,
@@ -38,10 +36,7 @@ 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">
@@ -83,7 +78,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
               <div className="d-flex flex-row gap-2 text-start text-black ">
                 <div className="mt-1">
                   <img
-                    src="/public/assets/img/orgLogo.png"
+                    src="/public/assets/img/SP-Placeholdeer.svg"
                     alt="logo"
                     width={50}
                     height={50}
@@ -131,7 +126,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <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/OrgPickerfromTenant.jsx

@@ -6,7 +6,6 @@ import {
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Label from "../common/Label";
 import Pagination from "../common/Pagination";
-import "./OrgPicker.css"
 
 const OrgPickerfromTenant = ({ title }) => {
   const [searchText, setSearchText] = useState("");
@@ -105,7 +104,7 @@ const OrgPickerfromTenant = ({ title }) => {
 
           <div
             className="scrollable-tbody overflow-y-auto"
-            style={{ maxHeight: "350px" }}
+            style={{ maxHeight: "350px", overflowY: "auto" }}
           >
             <table className="table dataTable text-nowrap mb-0">
               <tbody>

src/components/Organization/OrganizationModal.jsx

@@ -19,7 +19,6 @@ import AssignOrg from "./AssignOrg";
 import ManagOrg from "./ManagOrg";
 import OrgPickerFromSPId from "./OrgPickerFromSPId";
 import OrgPickerfromTenant from "./OrgPickerfromTenant";
-import ViewOrganization from "./ViewOrganization";
 
 const OrganizationModal = () => {
   const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
@@ -54,7 +53,7 @@ const OrganizationModal = () => {
   };
 
   const RenderTitle = useMemo(() => {
-    if (orgData && startStep === 3 ) {
+    if (orgData) {
       return "Assign Organization";
     }
 
@@ -71,11 +70,8 @@ const OrganizationModal = () => {
     if (startStep === 3) {
       return "Assign Organization";
     }
-    if(startStep === 5){
-      return "Organization Details"
-    }
 
-    return  `${orgData ? "Update":"Create"} Organization`;
+    return "Manage Organization";
   }, [startStep, orgData]);
 
   const contentBody = (
@@ -98,9 +94,6 @@ const OrganizationModal = () => {
 
       {/* ---------- STEP 3: Add New Organization ---------- */}
       {startStep === 4 && <ManagOrg />}
-
-        {/* ---------- STEP 3: View Organization ---------- */}
-      {startStep === 5 && <ViewOrganization orgId={orgData}/>}
     </div>
   );
 

src/components/Organization/OrganizationSchema.js

@@ -14,12 +14,12 @@ 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
     .array(z.string())
-    .min(1, { message: "Service isrequired" }),
+    .min(1, { message: "Please insert service id" }),
 });
 
 export const defaultOrganizationValues = {

src/components/Organization/OrganizationSkeleton.jsx

@@ -42,82 +42,3 @@ export const OrgCardSkeleton = () => {
     </div>
   );
 };
-
-
-export const OrgDetailsSkeleton = () => {
-  return (
-    <div className="row text-start p-3">
-      {/* Header */}
-      <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center">
-          {/* Logo + Name */}
-          <div className="d-flex flex-row gap-2 align-items-center">
-            <SkeletonLine height={40} width={40} className="rounded-circle" />
-            <SkeletonLine height={18} width="180px" />
-          </div>
-
-          {/* Status Badge */}
-          <SkeletonLine height={20} width="70px" className="rounded-pill" />
-        </div>
-      </div>
-
-      {/* Section Title */}
-      <div className="d-flex text-secondary mb-2">
-        <SkeletonLine height={16} width="140px" />
-      </div>
-
-      {/* Contact Person */}
-      <div className="col-md-6 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="140px" />
-        </div>
-      </div>
-
-      {/* Contact Number */}
-      <div className="col-md-6 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="140px" />
-        </div>
-      </div>
-
-      {/* Email */}
-      <div className="col-md-12 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="220px" />
-        </div>
-      </div>
-
-      {/* SPRID */}
-      <div className="col-6 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="160px" />
-        </div>
-      </div>
-
-      {/* Employees */}
-      <div className="col-6 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="60px" />
-        </div>
-      </div>
-
-      {/* Address */}
-      <div className="col-12 mb-3">
-        <div className="d-flex">
-          <SkeletonLine height={16} width="130px" className="me-2" />
-          <SkeletonLine height={16} width="100%" />
-        </div>
-      </div>
-
-      {/* Section Title 2 */}
-      <div className="d-flex text-secondary mb-2">
-        <SkeletonLine height={16} width="200px" />
-      </div>
-    </div>
-  );
-};

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" }}
@@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
                     ))}
                     <td className="sticky-action-column ">
                       <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-show text-primary cursor-pointer" ></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-pointer"></i>
                       </div>
@@ -142,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>
               )}

src/components/Organization/ViewOrganization.jsx

@@ -1,116 +0,0 @@
-import React from "react";
-import { useOrganization } from "../../hooks/useOrganization";
-import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
-
-const VieworgDataanization = ({ orgId }) => {
-  const { data, isLoading, isError, error } = useOrganization(orgId);
-  if (isLoading) return <OrgDetailsSkeleton />;
-  if (isError) return <div>{error.message}</div>;
-  return (
-    <div className="row text-black  text-black text-start ">
-      {/* Header */}
-      <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-1">
-          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
-            <img
-              src="/public/assets/img/orgLogo.png"
-              alt="logo"
-              width={40}
-              height={40}
-            />{" "}
-            <p className="fw-semibold fs-6 m-0">{data?.name}</p>
-          </div>
-          <div className="text-end">
-            <span
-              className={`badge bg-label-${
-                data?.isActive ? "primary" : "secondary"
-              } `}
-            >
-              {data?.isActive ? "Active" : "In-Active"}{" "}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div className="d-flex text-secondary mb-2">
-        {" "}
-        <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
-      </div>
-      {/* Contact Info */}
-      <div className="col-md-6 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
-            <i className="bx bx-sm bx-user me-1" /> Contact Person :
-          </label>
-          <div className="text-muted">{data?.contactPerson}</div>
-        </div>
-      </div>
-      <div className="col-md-6 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
-            <i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
-          </label>
-          <div className="text-muted">{data?.contactNumber}</div>
-        </div>
-      </div>
-      <div className="col-md-12 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
-            <i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
-          </label>
-          <div className="text-muted">{data?.email}</div>
-        </div>
-      </div>
-      <div className="col-6 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
-          >
-            <i className="bx bx-sm me-1 bx-barcode"></i>
-            Service Provider Id (SPRID) :
-          </label>
-          <div className="text-muted">{data?.sprid}</div>
-        </div>
-      </div>
-
-      <div className="col-6 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
-          >
-            <i className="bx bx-sm me-1 bx-group"></i>
-            Employees :
-          </label>
-          <div className="text-muted">{data?.activeEmployeeCount}</div>
-        </div>
-      </div>
-      <div className="col-12 mb-3">
-        <div className="d-flex">
-          <label
-            className="form-label me-1 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
-          >
-            <i className="bx bx-sm me-1 bx-map"></i> Address :
-          </label>
-          <div className="text-muted text-start">{data?.address}</div>
-        </div>
-      </div>
-      <div className="d-flex text-secondary mb-2">
-        {" "}
-        <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
-      </div>
-    </div>
-  );
-};
-
-export default VieworgDataanization;

src/components/Project/AboutProject.jsx

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

src/components/Project/AssignTask.jsx

@@ -1,26 +1,24 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster, { useServices } from "../../hooks/masterHook/useMaster";
+import useMaster from "../../hooks/masterHook/useMaster";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useSelectedProject } from "../../slices/apiDataManager";
+import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
-import {
+import { useProjectDetails } from "../../hooks/useProjects";
-  useEmployeeForTaskAssign,
-  useProjectAssignedOrganizationsName,
-  useProjectAssignedServices,
-  useProjectDetails,
-} from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useCreateTask } from "../../hooks/useTasks";
 import Label from "../common/Label";
 
-const TaskSchema = (maxPlanned) => {
+const AssignTask = ({ assignData, onClose, setAssigned }) => {
-  return z.object({
+  const maxPlanned =
+    assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
+
+  const schema = z.object({
     selectedEmployees: z
       .array(z.string())
       .min(1, { message: "At least one employee must be selected" }),
@@ -39,26 +37,20 @@ const TaskSchema = (maxPlanned) => {
         })
     ),
   });
-};
-
-const AssignTask = ({ assignData, onClose, setAssigned }) => {
-  const planned = assignData?.workItem?.plannedWork || 0;
-  const completed = assignData?.workItem?.completedWork || 0;
-  const maxPlanned = planned - completed;
 
   const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
   const helpPopupRefTarget = useRef(null);
   const [isHelpVisible, setIsHelpVisible] = useState(false);
-  const [selectedService, setSelectedService] = useState(null);
-  const [selectedOrganization, setSelectedOrganization] = useState(null);
-
   const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
-    onSuccessCallback: closedModel,
+    onSuccessCallback: () => {
+      closedModel();
+    },
   });
 
   const dropdownRef = useRef(null);
   const [open, setOpen] = useState(false);
 
+  // Close dropdown on outside click
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -71,47 +63,48 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
+
+  // State for search term
   const [searchTerm, setSearchTerm] = useState("");
 
   useEffect(() => {
     if (typeof bootstrap !== "undefined") {
-      infoRef.current &&
+      if (infoRef.current) {
         new bootstrap.Popover(infoRef.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Total Pending tasks of the Activity</div>`,
         });
+      }
 
-      infoRef1.current &&
+      if (infoRef1.current) {
         new bootstrap.Popover(infoRef1.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Target task for today</div>`,
         });
+      }
     } else {
       console.warn("Bootstrap is not available. Popovers might not function.");
     }
   }, []);
-
+  const selectedProject = useSelector(
-  const selectedProject = useSelectedProject();
+    (store) => store.localVariables.projectId
-  const { data: serviceList, isLoading: isServiceLoading } = useProjectAssignedServices(selectedProject);
+  );
-  const { data: organizationList, isLoading: isOrgLoading } =
+  const {
-    useProjectAssignedOrganizationsName(selectedProject);
+    employees,
-  const { data: employees, isLoading: isEmployeeLoading } =
+    loading: employeeLoading,
-    useEmployeeForTaskAssign(
+    recallEmployeeData,
-      selectedProject,
+  } = useEmployeesAllOrByProjectId(false, selectedProject, false);
-      selectedService,
-      selectedOrganization
-    );
-
   const dispatch = useDispatch();
-  const { loading, data: jobRoleData } = useMaster();
+  const { loading } = useMaster();
+  const { data: jobRoleData } = useMaster();
 
+  // Changed to an array to hold multiple selected roles
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
-
   const {
     handleSubmit,
     control,
@@ -121,98 +114,133 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     reset,
     trigger,
   } = useForm({
-    defaultValues: { selectedEmployees: [], description: "", plannedTask: "" },
+    defaultValues: {
-    resolver: zodResolver(TaskSchema(maxPlanned)),
+      selectedEmployees: [],
+      description: "",
+      plannedTask: "",
+    },
+    resolver: zodResolver(schema),
   });
 
   const handleCheckboxChange = (event, user) => {
-    const updatedSelectedEmployees = event.target.checked
+    const isChecked = event.target.checked;
-      ? [...(watch("selectedEmployees") || []), user.id].filter(
+    let updatedSelectedEmployees = watch("selectedEmployees") || [];
-          (v, i, a) => a.indexOf(v) === i
-        )
-      : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
 
+    if (isChecked) {
+      if (!updatedSelectedEmployees.includes(user.id)) {
+        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
+      }
+    } else {
+      updatedSelectedEmployees = updatedSelectedEmployees?.filter(
+        (id) => id !== user.id
+      );
+    }
     setValue("selectedEmployees", updatedSelectedEmployees);
     trigger("selectedEmployees");
   };
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
+    // Initial state should reflect "All Roles" selected
     setSelectedRoles(["all"]);
   }, [dispatch]);
 
+  // Modified handleRoleChange to handle multiple selections
   const handleRoleChange = (event, roleId) => {
-    setSelectedRoles((prev) => {
+    // If 'all' is selected, clear other selections
-      if (roleId === "all") return ["all"];
+    if (roleId === "all") {
-      const newRoles = prev.filter((r) => r !== "all");
+      setSelectedRoles(["all"]);
-      return newRoles.includes(roleId)
+    } else {
-        ? newRoles.filter((r) => r !== roleId)
+      setSelectedRoles((prevSelectedRoles) => {
-        : [...newRoles, roleId];
+        // If "all" was previously selected, remove it
-    });
+        const newRoles = prevSelectedRoles.filter((role) => role !== "all");
+        if (newRoles.includes(roleId)) {
+          // If role is already selected, unselect it
+          return newRoles.filter((id) => id !== roleId);
+        } else {
+          // If role is not selected, add it
+          return [...newRoles, roleId];
+        }
+      });
+    }
   };
 
   useEffect(() => {
+    // Update displayedSelection based on selectedRoles
     if (selectedRoles.includes("all")) {
       setDisplayedSelection("All Roles");
     } else if (selectedRoles.length > 0) {
-      setDisplayedSelection(
+      const selectedRoleNames = selectedRoles.map(roleId => {
-        selectedRoles
+        const role = jobRoleData?.find(r => String(r.id) === roleId);
-          .map((id) => jobRoleData?.find((r) => String(r.id) === id)?.name)
+        return role ? role.name : '';
-          .filter(Boolean)
+      }).filter(Boolean); // Filter out empty strings for roles not found
-          .join(", ")
+      setDisplayedSelection(selectedRoleNames.join(', '));
-      );
+    } else {
-    } else setDisplayedSelection("Select Roles");
+      setDisplayedSelection("Select Roles");
+    }
   }, [selectedRoles, jobRoleData]);
 
-  const handleSearchChange = (e) => setSearchTerm(e.target.value);
 
-  const filteredEmployees = employees?.data?.filter((emp) => {
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  // Filter employees first by role, then by search term AND job role name
+  const filteredEmployees = employees?.filter((emp) => {
     const matchesRole =
-      selectedRoles.includes("all") ||
+      selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
-      selectedRoles.includes(String(emp.jobRoleId));
+    // Convert both first and last names and job role name to lowercase for case-insensitive matching
-    const searchLower = searchTerm.toLowerCase();
     const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
-    const jobRoleName =
+
-      jobRoleData
+    const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
-        ?.find((role) => role.id === emp.jobRoleId)
+
-        ?.name?.toLowerCase() || "";
+    const searchLower = searchTerm.toLowerCase();
-    return (
+    // Check if the full name OR job role name includes the search term
-      matchesRole &&
+    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
-      (fullName.includes(searchLower) || jobRoleName.includes(searchLower))
+    return matchesRole && matchesSearch;
-    );
   });
 
-  const jobRolesForDropdown = jobRoleData?.filter((role) =>
+  // Determine unique job role IDs from the filtered employees (for dropdown options)
-    new Set(employees?.data?.map((emp) => emp.jobRoleId).filter(Boolean)).has(
+  const uniqueJobRoleIdsInFilteredEmployees = new Set(
-      role.id
+    employees?.map(emp => emp.jobRoleId).filter(Boolean)
-    )
   );
 
+  // Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
+  const jobRolesForDropdown = jobRoleData?.filter(role =>
+    uniqueJobRoleIdsInFilteredEmployees.has(role.id)
+  );
+
+  // Calculate the count of selected roles for display
   const selectedRolesCount = selectedRoles.includes("all")
-    ? 0
+    ? 0 // "All Roles" doesn't contribute to a specific count
     : selectedRoles.length;
 
   const onSubmit = (data) => {
+    const selectedEmployeeIds = data.selectedEmployees;
+
+    const taskTeamWithDetails = selectedEmployeeIds
+      ?.map((empId) => empId)
+      ?.filter(Boolean);
+    const formattedData = {
+      taskTeam: taskTeamWithDetails,
+      plannedTask: data.plannedTask,
+      description: data.description,
+      assignmentDate: new Date().toISOString(),
+      workItemId: assignData?.workItem.id,
+    };
     assignTask({
-      payload: {
+      payload: formattedData,
-        taskTeam: data.selectedEmployees.filter(Boolean),
-        plannedTask: data.plannedTask,
-        description: data.description,
-        assignmentDate: new Date().toISOString(),
-        workItemId: assignData?.workItem.id,
-      },
       workAreaId: assignData?.workArea?.id,
     });
   };
 
-  function closedModel() {
+  const closedModel = () => {
     reset();
     onClose();
-  }
+  };
-
   return (
     <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
-      <p className="align-items-center flex-wrap m-0">Assign Task</p>
+      <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
       <div className="container my-3">
         <div className="mb-1">
           <p className="mb-0">
@@ -224,7 +252,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 assignData?.workArea?.areaName,
                 assignData?.workItem?.activityMaster?.activityName,
               ]
-                .filter(Boolean)
+                .filter(Boolean) // Filter out any undefined/null values
                 .map((item, index, array) => (
                   <span key={index} className="d-flex align-items-center">
                     {item}
@@ -240,64 +268,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
             <div className="form-label text-start">
               <div className="row mb-1">
                 <div className="col-12">
-                  <div className="row text-start">
+                  <div className="form-text text-start">
-                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
-                      <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedOrganization || ""}
-                          onChange={(e) =>
-                            setSelectedOrganization(e.target.value)
-                          }
-                        >
-                          {isServiceLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Organization--</option>
-                              {organizationList?.map((org,index) => (
-                                <option key={`${org.id}-${index}`} value={org.id}>
-                                  {org.name}
-                                </option>
-                              ))}
-                            </>
-                          )}
-                        </select>
-                      </div>
-                      <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedService || ""}
-                          onChange={(e) => setSelectedService(e.target.value)}
-                        >
-                          {isOrgLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Service--</option>
-                              {serviceList?.map((service,index) => (
-                                <option key={`${service.id}-${index}`}  value={service.id}>
-                                  {service.name}
-                                </option>
-                              ))}
-                            </>
-                          )}
-                        </select>
-                      </div>
-                    </div>
                     <div
-                      className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
+                      className="d-flex align-items-center form-text fs-7"
                       ref={dropdownRef}
                     >
+                      <span className="text-dark">Select Team</span>
+
                       {/* Dropdown */}
                       <div className="dropdown position-relative d-inline-block">
                         <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
-                            selectedRoles.includes("all") ||
-                            selectedRoles.length === 0
                               ? "text-secondary"
                               : "text-primary"
-                          }`}
+                            }`}
                           onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
@@ -306,7 +290,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {/* Badge */}
                         {selectedRolesCount > 0 && (
                           <span
-                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
+                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
                             style={{
                               fontSize: "0.65rem",
                               minWidth: "18px",
@@ -336,9 +320,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                   id="checkboxAllRoles"
                                   value="all"
                                   checked={selectedRoles.includes("all")}
-                                  onChange={(e) =>
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
-                                    handleRoleChange(e, e.target.value)
-                                  }
                                 />
                                 <label
                                   className="form-check-label ms-2"
@@ -358,12 +340,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                     type="checkbox"
                                     id={`checkboxRole-${role.id}`}
                                     value={role.id}
-                                    checked={selectedRoles.includes(
+                                    checked={selectedRoles.includes(String(role.id))}
-                                      String(role.id)
+                                    onChange={(e) => handleRoleChange(e, e.target.value)}
-                                    )}
-                                    onChange={(e) =>
-                                      handleRoleChange(e, e.target.value)
-                                    }
                                   />
                                   <label
                                     className="form-check-label ms-2"
@@ -379,15 +357,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       </div>
 
                       {/* Search Box */}
-                      <div>
+                      <input
-                        <input
+                        type="text"
-                          type="text"
+                        className="form-control form-control-sm ms-auto mb-2 mt-2"
-                          className="form-control form-control-sm ms-auto mb-2 mt-2"
+                        placeholder="Search employees or roles..."
-                          placeholder="Search employees or roles..."
+                        value={searchTerm}
-                          value={searchTerm}
+                        onChange={handleSearchChange}
-                          onChange={handleSearchChange}
+                        style={{ maxWidth: "200px" }}
-                        />
+                      />
-                      </div>
                     </div>
                   </div>
                 </div>
@@ -404,19 +381,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               >
                 {selectedRoles?.length > 0 && (
                   <div className="row">
-                    {isEmployeeLoading ? (
+                    {employeeLoading ? (
                       <div className="col-12">
                         <p className="text-center">Loading employees...</p>
                       </div>
                     ) : filteredEmployees?.length > 0 ? (
-                      filteredEmployees.map((emp,index) => {
+                      filteredEmployees.map((emp) => {
                         const jobRole = jobRoleData?.find(
                           (role) => role?.id === emp?.jobRoleId
                         );
 
                         return (
                           <div
-                            key={`${emp.index}-${index}`}
+                            key={emp.id}
                             className="col-6 col-md-4 col-lg-3 mb-3"
                           >
                             <div className="form-check d-flex align-items-start">
@@ -464,7 +441,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                     ) : (
                       <div className="col-12">
                         <p className="text-center">
-                          No employees found for the selected filter.
+                          No employees found for the selected role.
                         </p>
                       </div>
                     )}
@@ -479,14 +456,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {watch("selectedEmployees")?.length > 0 && (
                   <div className="mt-1">
                     <div className="text-start px-2">
-                      {watch("selectedEmployees")?.map((empId,ind) => {
+                      {watch("selectedEmployees")?.map((empId) => {
-                        const emp = employees?.data?.find(
+                        const emp = employees.find((emp) => emp.id === empId);
-                          (emp) => emp.id === empId
-                        );
                         return (
                           emp && (
                             <span
-                               key={`${empId}-${ind}`}
+                              key={empId}
                               className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                             >
                               {emp.firstName} {emp.lastName}
@@ -531,12 +506,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {assignData?.workItem?.plannedWork -
                           assignData?.workItem?.completedWork}
                       </strong>{" "}
-                      <u>
+                      <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
-                        {
-                          assignData?.workItem?.activityMaster
-                            ?.unitOfMeasurement
-                        }
-                      </u>
                     </label>
                   </label>
                 </div>
@@ -567,15 +537,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="form-control form-control-sm"
                           {...field}
                         />
-                        <span
+                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
-                          style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}
+                          <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
-                        >
-                          <u>
-                            {
-                              assignData?.workItem?.activityMaster
-                                ?.unitOfMeasurement
-                            }
-                          </u>
                         </span>
                       </div>
                     )}
@@ -583,17 +546,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 </div>
 
                 {errors.plannedTask && (
-                  <div className="danger-text mt-1">
+                  <div className="danger-text mt-1">{errors.plannedTask.message}</div>
-                    {errors.plannedTask.message}
-                  </div>
                 )}
               </div>
-              <Label
+
+              {/* <label
                 className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea"
+                htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
-                required
               >
                 Description
+              </label> */}
+              <Label className="form-text fs-7 m-1 text-lg text-dark"
+                htmlFor="descriptionTextarea" required>
+                Description
               </Label>
               <Controller
                 name="description"
@@ -627,6 +592,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {isSubmitting ? "Please Wait" : "Submit"}
               </button>
             </div>
+
           </form>
         </div>
       </div>

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);
 
 
 
@@ -112,10 +112,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      setValue("activityID",""),
+      onClose?.();
-      setValue("plannedWork",0),
-      setValue("completedWork",0)
-      setValue("comment","")
     },
   });
   useEffect(() => {
@@ -279,7 +276,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
-      {watchActivityId && (
+      {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>
           <select
@@ -359,10 +356,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         <button
           type="submit"
           className="btn btn-sm btn-primary"
-          // disabled={isSubmitting}
+          disabled={isSubmitting}
-           disabled={isPending}
         >
-          {isPending ? "Please Wait..." : "Add Task"}
+          {isSubmitting ? "Please Wait..." : "Add Task"}
         </button>
       </div>
     </form>

src/components/Project/Infrastructure/WorkArea.jsx

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

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -50,8 +50,8 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
           : "Work Area created Successfully",
         "success"
       );
-      setValue("id", "0");
+      reset({ id: "0", buildingId: "0", areaName: "", floorId: "0" });
-      setValue("areaName", "");
+      // onClose?.();
     },
   });
 

src/components/Project/Infrastructure/WorkItem.jsx

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

src/components/Project/ManageProject.jsx

@@ -77,7 +77,13 @@ const ManageProject = () => {
         </div>
       )}
 
-   
+      {isProjectCreated && (
+        <div>
+          <h3>Additional Content</h3>
+          <p>Now that the project is created, you can access this content.</p>
+          {/* Add more content here */}
+        </div>
+      )}
     </div>
   );
 };

src/components/Project/ManageProjectInfo.jsx

@@ -1,24 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { projectSchema, projectDefault } from "./ProjectSchema";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-
+import { z } from "zod";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 
-import {
+const currentDate = new Date().toLocaleDateString('en-CA');
-  DEFAULT_EMPTY_STATUS_ID,
-  ITEMS_PER_PAGE,
-  PROJECT_STATUS,
-} from "../../utils/constants";
-import {
-  useOrganizationModal,
-  useOrganizationsList,
-} from "../../hooks/useOrganization";
-import { localToUtc } from "../../utils/appUtils";
-
-const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
   if (!date) {
     return currentDate;
@@ -27,23 +14,56 @@ const formatDate = (date) => {
   if (isNaN(d.getTime())) {
     return currentDate;
   }
-  return d.toLocaleDateString("en-CA");
+  return d.toLocaleDateString('en-CA');
 };
-const ManageProjectInfo = ({ project, onClose }) => {
+const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
+  const [CurrentProject, setCurrentProject] = useState();
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
-  const { onOpen, startStep, flowType } = useOrganizationModal();
 
   const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
+  const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
-  const { projects_Details, loading } = useProjectDetails(project);
+  const projectSchema = z
-  const { data, isLoading, isError, error } = useOrganizationsList(
+    .object({
-    ITEMS_PER_PAGE,
+      ...(project?.id ? { id: z.string().optional() } : {}),
-    1,
+      name: z.string().min(1, { message: "Project Name is required" }),
-    true
+      shortName: z.string().optional(),
-  );
+      contactPerson: z
-  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
+        .string()
-  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
+        .min(1, { message: "Contact Person Name is required" })
+        .regex(/^[A-Za-z\s]+$/, {
+          message: "Contact Person must contain only letters",
+        }),
+      projectAddress: z
+        .string()
+        .min(1, { message: "Address is required" })
+        .max(500, "Address must not exceed 150 characters"),
+      startDate: z
+        .string()
+        .min(1, { message: "Start Date is required" })
+        .default(currentDate),
+      endDate: z
+        .string()
+        .min(1, { message: "End Date is required" })
+        .default(currentDate),
+      projectStatusId: z
+        .string()
+        .min(1, { message: "Status is required" }),
+        promoterId:z.string().min(1,{message:"Promoter is required"}),
+         pmcId:z.string().min(1,{message:"PMC is required"})
+    })
+    .refine(
+      (data) => {
+        const start = new Date(data.startDate);
+        const end = new Date(data.endDate);
+        return end >= start;
+      },
+      {
+        path: ["endDate"], // attaches the error to the endDate field
+        message: "End Date must be greater than Start Date",
+      }
+    );
 
   const {
     register,
@@ -54,66 +74,81 @@ const ManageProjectInfo = ({ project, onClose }) => {
     getValues,
   } = useForm({
     resolver: zodResolver(projectSchema),
-    defaultValues: projectDefault,
+    defaultValues: {
+      id: project?.id || "",
+      name: project?.name || "",
+      shortName: project?.shortName || "",
+      contactPerson: project?.contactPerson || "",
+      projectAddress: project?.projectAddress || "",
+      startDate: formatDate(project?.startDate) || currentDate,
+      endDate: formatDate(project?.endDate) || currentDate,
+      projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
+
+        ? String(project.projectStatusId)
+
+        : ACTIVE_STATUS_ID,
+        promoterId:project.promoterId,
+        pmcId:project.pmcId
+    },
     mode: "onChange",
   });
 
   useEffect(() => {
-    if (project && projects_Details)
+    setCurrentProject(project);
-      reset({
+    reset(
-        name: projects_Details?.name || "",
+      project
-        shortName: projects_Details?.shortName || "",
+        ? {
-        contactPerson: projects_Details?.contactPerson || "",
+          id: project?.id || "",
-        projectAddress: projects_Details?.projectAddress || "",
+          name: project?.name || "",
-        startDate: formatDate(projects_Details?.startDate) || "",
+          shortName: project?.shortName || "",
-        endDate: formatDate(projects_Details?.endDate) || "",
+          contactPerson: project?.contactPerson || "",
-        projectStatusId:
+          projectAddress: project?.projectAddress || "",
-          String(projects_Details?.projectStatus?.id) ||
+          startDate: formatDate(project?.startDate) || "",
-          DEFAULT_EMPTY_STATUS_IDF,
+          endDate: formatDate(project?.endDate) || "",
-        promoterId: projects_Details?.promoter?.id || "",
+          projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
-        pmcId: projects_Details?.pmc?.id || "",
+        }
-      });
+        : {}
-    setAddressLength(projects_Details?.projectAddress?.length || 0);
+    );
-  }, [project, projects_Details, reset,data]);
+    setAddressLength(project?.projectAddress?.length || 0);
+  }, [project, reset]);
 
-  const onSubmitForm = (formData) => {
+  /**
-    if (project) {
+
-      let payload = {
+ * Handles the form submission.
-        ...formData,
+
-        startDate: localToUtc(formData.startDate),
+ * @param {object} updatedProject - The project data from the form.
-        endDate: localToUtc(formData.endDate),
+
-        id: project,
+ */
-      };
+
-      UpdateProject({ projectId: project, payload: payload });
+  const onSubmitForm = (updatedProject) => {
-    }else{
+
-       let payload = {
+    handleSubmitForm(updatedProject);
-        ...formData,
-        startDate: localToUtc(formData.startDate),
-        endDate: localToUtc(formData.endDate),
-      };
-      CeateProject(payload)
-    }
   };
 
   const handleCancel = () => {
-    reset(projectDefault);
+    reset({
+      id: project?.id || "",
+      name: project?.name || "",
+      shortName: project?.shortName || "",
+      contactPerson: project?.contactPerson || "",
+      projectAddress: project?.projectAddress || "",
+      startDate: formatDate(project?.startDate) || currentDate,
+      endDate: formatDate(project?.endDate) || currentDate,
+      projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
+    });
     onClose();
   };
-  const handleOrganizaioFinder = () => {
-    onClose();
-    onOpen({ startStep: 2, flowType: "default" });
-  };
-
 
   return (
+
     <div className="p-sm-2 p-2">
+
       <div className="text-center mb-2">
-        <h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
+        <h5 className="mb-2">
+          {project?.id ? "Edit Project" : "Create Project"}
+        </h5>
       </div>
-      <form
+      <form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
-        className="row g-2 text-start"
-        onSubmit={handleSubmit(onSubmitForm)}
-      >
         <div className="col-12 col-md-12">
           <Label htmlFor="name" required>
             Project Name
@@ -193,10 +228,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
           />
 
           {errors.startDate && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
               {errors.startDate.message}
             </div>
           )}
@@ -211,21 +243,18 @@ const ManageProjectInfo = ({ project, onClose }) => {
             name="endDate"
             control={control}
             placeholder="DD-MM-YYYY"
-            minDate={getValues("startDate")} // optional: restrict future dates
+           minDate={getValues("startDate")} // optional: restrict future dates
             className="w-100"
           />
 
           {errors.endDate && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
               {errors.endDate.message}
             </div>
           )}
         </div>
 
-        <div className="col-12 ">
+        <div className="col-12 col-md-6">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Status
           </label>
@@ -239,11 +268,15 @@ const ManageProjectInfo = ({ project, onClose }) => {
               valueAsNumber: false,
             })}
           >
-            {PROJECT_STATUS.map((status) => (
+            {/* <option disabled>Status</option>
-              <option key={status.id} value={status.id}>
+                <option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
-                {status.label}
+            <option value={ACTIVE_STATUS_ID}>Active</option>
-              </option>
+            <option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
-            ))}
+
+            <option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
+            <option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
+
+            <option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
           </select>
           {errors.projectStatusId && (
             <div
@@ -254,83 +287,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
             </div>
           )}
         </div>
-        <div className="col-12 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
-            Promoter
-          </label>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("promoterId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select Promoter</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
-            )}
-          </select>
-          {errors.promoterId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.promoterId.message}
-            </div>
-          )}
-        </div>
-        <div className="col-12 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
-            PMC
-          </label>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("pmcId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select PMC</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
-            )}
-          </select>
-          {errors.pmcId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.pmcId.message}
-            </div>
-          )}
-        </div>
-        <div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
-          <span>
-            <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} >
-            <i className="bx  bx-plus-circle text-primary"></i>
-          </small>
-        </div>
 
         <div className="col-12 col-md-12">
           <Label htmlFor="projectAddress" required>
@@ -348,7 +304,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
               }}
             />
           </div>
-
           <div className="text-end" style={{ fontSize: "12px" }}>
             {maxAddressLength - addressLength} characters left
           </div>
@@ -367,18 +322,19 @@ const ManageProjectInfo = ({ project, onClose }) => {
             className="btn btn-label-secondary btn-sm me-2"
             onClick={handleCancel}
             aria-label="Close"
-            disabled={isPending || isCreating || loading}
+            disabled={isPending}
           >
             Cancel
           </button>
           <button
             type="submit"
             className="btn btn-primary btn-sm"
-            disabled={isPending || isCreating || loading}
+            disabled={isPending}
           >
-            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
+            {isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
           </button>
         </div>
+
       </form>
     </div>
   );

src/components/Project/MapUsers.jsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from "react";
+import EmployeeRepository from "../../repositories/EmployeeRepository";
+import { useAllEmployees } from "../../hooks/useEmployees";
+import useSearch from "../../hooks/useSearch";
+import AssignEmployeeTable from "./AssignEmployeeTable";
+import showToast from "../../services/toastService";
+import "./MapUser.css";
+
+const MapUsers = ({
+  projectId,
+  onClose,
+  empJobRoles,
+  onSubmit,
+  allocation,
+  assignedLoading,
+  setAssignedLoading,
+}) => {
+  const {
+    employeesList,
+    loading: employeeLoading,
+    error,
+  } = useAllEmployees(false);
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
+  const [searchText, setSearchText] = useState("");
+
+  const handleAllocationData = Array.isArray(allocation) ? allocation : [];
+
+  const allocationEmployees = employeesList.map((employee) => {
+    const allocationItem = handleAllocationData.find(
+      (alloc) => alloc.employeeId === employee.id
+    );
+    return {
+      ...employee,
+      isActive: allocationItem ? allocationItem.isActive : false,
+      jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
+    };
+  });
+
+  function parseDate(dateStr) {
+    return new Date(dateStr.split(".")[0]);
+  }
+
+  const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
+    const existingAlloc = acc[alloc.employeeId];
+
+    if (!existingAlloc) {
+      acc[alloc.employeeId] = alloc;
+    } else {
+      const existingDate = parseDate(
+        existingAlloc.reAllocationDate || existingAlloc.allocationDate
+      );
+      const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
+
+      if (newDate > existingDate) {
+        acc[alloc.employeeId] = alloc;
+      }
+    }
+    return acc;
+  }, {});
+
+  const allocationEmployeesData = employeesList
+    .map((employee) => {
+      const allocationItem = latestAllocations[employee.id];
+      return {
+        ...employee,
+        isActive: allocationItem ? allocationItem.isActive : false,
+      };
+    })
+    .filter((employee) => employee.isActive === false);
+
+  const { filteredData, setSearchQuery } = useSearch(
+    allocationEmployeesData,
+    searchText
+  );
+
+  const handleRoleChange = (employeeId, newRoleId) => {
+    setSelectedEmployees((prevSelectedEmployees) =>
+      prevSelectedEmployees.map((emp) =>
+        emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
+      )
+    );
+  };
+
+  const handleCheckboxChange = (employeeId) => {
+    setSelectedEmployees((prevSelectedEmployees) => {
+      const updatedEmployees = [...prevSelectedEmployees];
+      const employeeIndex = updatedEmployees.findIndex(
+        (emp) => emp.id === employeeId
+      );
+
+      if (employeeIndex !== -1) {
+        const isSelected = !updatedEmployees[employeeIndex].isSelected;
+        updatedEmployees[employeeIndex].isSelected = isSelected;
+      } else {
+        updatedEmployees.push({
+          id: employeeId,
+          isSelected: true,
+        });
+      }
+      return updatedEmployees;
+    });
+  };
+
+  const handleSubmit = () => {
+    setAssignedLoading(true);
+    const selected = selectedEmployees
+      .filter((emp) => emp.isSelected)
+      .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
+    if (selected.length > 0) {
+      onSubmit(selected);
+      setSelectedEmployees([]);
+    } else {
+      showToast("Please select Employee", "error");
+    }
+  };
+  return (
+    <>
+      <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
+        <div className="modal-content">
+          <div className="modal-header text-center">
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            </button>
+          </div>
+          <p className="m-0 fw-semibold fs-5">Add Employee To Project</p>
+
+          <div className="px-4 mt-4 col-md-4 text-start">
+            {(filteredData.length > 0 ||
+              allocationEmployeesData.length > 0) && (
+                <div className="input-group input-group-sm mb-2">
+                  <input
+                    type="search"
+                    className="form-control"
+                    placeholder="Search employees..."
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+              )}
+
+            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
+          </div>
+
+          <div className="modal-body p-sm-4 p-0">
+            <table
+              className="datatables-users table border-top dataTable no-footer dtr-column "
+              id="DataTables_Table_0"
+              aria-describedby="DataTables_Table_0_info"
+              style={{ width: "100%" }}
+            >
+              <tbody>
+                {employeeLoading && allocationEmployeesData.length === 0 && (
+                  <tr>
+                    <td>Loading..</td>
+                  </tr>
+                )}
+
+                {!employeeLoading &&
+                  allocationEmployeesData.length === 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>All employee assigned to Project.</td>
+                    </tr>
+                  )}
+
+                {!employeeLoading &&
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
+                  )}
+
+                {(filteredData.length > 0 ||
+                  allocationEmployeesData.length > 0) &&
+                  filteredData.map((emp) => (
+                    <AssignEmployeeTable
+                      key={emp.id}
+                      employee={emp}
+                      jobRoles={empJobRoles}
+                      isChecked={emp.isSelected}
+                      onRoleChange={handleRoleChange}
+                      onCheckboxChange={handleCheckboxChange}
+                    />
+                  ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="modal-footer mt-5 d-flex justify-content-end gap-0">
+            <button
+              type="button"
+              className="btn btn-sm btn-label-secondary"
+              data-dismiss="modal"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+
+            {(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
+              <button className="btn btn-sm btn-primary" onClick={handleSubmit}>
+                {assignedLoading ? "Please Wait..." : "Assign to Project"}
+              </button>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MapUsers;

src/components/Project/ProjectCard.jsx

@@ -16,13 +16,39 @@ import {
 import GlobalModel from "../common/GlobalModel";
 import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
-import { useProjectContext } from "../../pages/project/ProjectPage";
 
-const ProjectCard = ({ project }) => {
+const ProjectCard = ({ projectData, recall }) => {
-  const dispatch = useDispatch();
+  const [projectInfo, setProjectInfo] = useState(projectData);
+  const { projects_Details, loading, error, refetch } = useProjectDetails(
+    projectInfo?.id, false
+  );
+  const [showModal, setShowModal] = useState(false);
+  const dispatch = useDispatch()
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
-  const { setMangeProject } = useProjectContext();
+  const {
+    mutate: updateProject,
+    isPending,
+    isSuccess,
+    isError,
+  } = useUpdateProject({
+    onSuccessCallback: () => {
+      setShowModal(false);
+    },
+  })
+
+  useEffect(() => {
+    setProjectInfo(projectData);
+  }, [projectData])
+
+  const handleShow = async () => {
+    try {
+      const { data } = await refetch();
+      setShowModal(true);
+    } catch (err) {
+      showToast("Failed to load project details", "error");
+    }
+  };
 
   const getProgress = (planned, completed) => {
     return (completed * 100) / planned + "%";
@@ -34,17 +60,39 @@ const ProjectCard = ({ project }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    dispatch(setProjectId(project.id));
+    dispatch(setProjectId(projectInfo.id))
     navigate(`/projects/details`);
   };
   const handleViewActivities = () => {
-    dispatch(setProjectId(project.id));
+    dispatch(setProjectId(projectInfo.id))
-    navigate(`/activities/records?project=${project.id}`);
+    navigate(`/activities/records?project=${projectInfo.id}`);
   };
+
+  const handleFormSubmit = (updatedProject) => {
+    if (projectInfo?.id) {
+      updateProject({
+        projectId: projectInfo.id,
+        updatedData: updatedProject,
+      });
+    }
+  };
+
   return (
     <>
+
+      {showModal && projects_Details && (
+        <GlobalModel isOpen={showModal} closeModal={handleClose}>
+          <ManageProjectInfo
+            project={projects_Details}
+            handleSubmitForm={handleFormSubmit}
+            onClose={handleClose}
+            isPending={isPending}
+          />
+        </GlobalModel>
+      )}
+
       <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
-        <div className={`card cursor-pointer`}>
+        <div className={`card cursor-pointer  ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
           <div className="card-header pb-4">
             <div className="d-flex align-items-start">
               <div className="d-flex align-items-center">
@@ -59,10 +107,12 @@ const ProjectCard = ({ project }) => {
                     className="mb-0 stretched-link text-heading text-start"
                     onClick={handleViewProject}
                   >
-                    {project?.shortName ? project?.shortName : project?.name}
+                    {projectInfo.shortName
+                      ? projectInfo.shortName
+                      : projectInfo.name}
                   </h5>
                   <div className="client-info text-body">
-                    <span>{project?.shortName ? project?.name : ""}</span>
+                    <span>{projectInfo.shortName ? projectInfo.name : ""}</span>
                   </div>
                 </div>
               </div>
@@ -74,14 +124,23 @@ const ProjectCard = ({ project }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                    <i
+                    {loading ? (
-                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                      <div
-                      data-bs-toggle="tooltip"
+                        className="spinner-border spinner-border-sm text-secondary"
-                      data-bs-offset="0,8"
+                        role="status"
-                      data-bs-placement="top"
+                      >
-                      data-bs-custom-class="tooltip-dark"
+                        <span className="visually-hidden">Loading...</span>
-                      title="More Action"
+                      </div>
-                    ></i>
+                    ) : (
+                      <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">
                     <li>
@@ -95,18 +154,15 @@ const ProjectCard = ({ project }) => {
                       </a>
                     </li>
 
-                    <li>
+                    <li onClick={handleShow}>
-                      <a className="dropdown-item"   onClick={() =>
+                      <a className="dropdown-item">
-                          setMangeProject({
-                            isOpen: true,
-                            Project: project.id,
-                          })
-                        }>
                         <i className="bx bx-pencil me-2"></i>
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={handleViewActivities}>
+                    <li
+                      onClick={handleViewActivities}
+                    >
                       <a className="dropdown-item">
                         <i className="bx bx-task me-2"></i>
                         <span className="align-left">Activities</span>
@@ -124,22 +180,22 @@ const ProjectCard = ({ project }) => {
                   <span className="text-heading fw-medium">
                     Contact Person:{" "}
                   </span>
-                  {project?.contactPerson ? project.contactPerson : "NA"}
+                  {projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Start Date: </span>
-                  {project.startDate
+                  {projectInfo.startDate
-                    ? moment(project?.startDate).format("DD-MMM-YYYY")
+                    ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Deadline: </span>
 
-                  {project?.endDate
+                  {projectInfo.endDate
-                    ? moment(project?.endDate).format("DD-MMM-YYYY")
+                    ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
-                <p className="mb-0">{project?.projectAddress}</p>
+                <p className="mb-0">{projectInfo.projectAddress}</p>
               </div>
             </div>
           </div>
@@ -149,37 +205,36 @@ const ProjectCard = ({ project }) => {
                 <span
                   className={
                     `badge rounded-pill ` +
-                    getProjectStatusColor(project?.projectStatusId)
+                    getProjectStatusColor(projectInfo.projectStatusId)
                   }
                 >
-                  {getProjectStatusName(project?.projectStatusId)}
+                  {getProjectStatusName(projectInfo.projectStatusId)}
                 </span>
               </p>{" "}
-              {getDateDifferenceInDays(project?.endDate,new Date() ) >= 0 && (
+              {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
                 <span className="badge bg-label-success ms-auto">
-                  {project?.endDate &&
+                  {projectInfo.endDate &&
-                    getDateDifferenceInDays(project?.endDate, new Date())}{" "}
+                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
                   Days left
                 </span>
               )}
-              {getDateDifferenceInDays(project?.endDate, new Date()) < 0 && (
+              {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
                 <span className="badge bg-label-danger ms-auto">
-                  {project?.endDate &&
+                  {projectInfo.endDate &&
-                    getDateDifferenceInDays(project?.endDate, new  Date())}{" "}
+                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
                   Days overdue
                 </span>
               )}
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-body">
-                Task: {formatNumber(project?.completedWork)} /{" "}
+                Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
-                {formatNumber(project?.plannedWork)}
               </small>
               <small className="text-body">
                 {Math.floor(
                   getProgressInNumber(
-                    project?.plannedWork,
+                    projectInfo.plannedWork,
-                    project?.completedWork
+                    projectInfo.completedWork
                   )
                 ) || 0}{" "}
                 % Completed
@@ -191,20 +246,22 @@ const ProjectCard = ({ project }) => {
                 role="progressbar"
                 style={{
                   width: getProgress(
-                    project?.plannedWork,
+                    projectInfo.plannedWork,
-                    project?.completedWork
+                    projectInfo.completedWork
                   ),
                 }}
-                aria-valuenow={project?.completedWork}
+                aria-valuenow={projectInfo.completedWork}
                 aria-valuemin="0"
-                aria-valuemax={project?.plannedWork}
+                aria-valuemax={projectInfo.plannedWork}
               ></div>
             </div>
             <div className="d-flex align-items-center justify-content-between">
+              {/* <div className="d-flex align-items-center ">
+            </div> */}
               <div>
                 <a className="text-muted d-flex " alt="Active team size">
                   <i className="bx bx-group bx-sm me-1_5"></i>
-                  {project?.teamSize} Members
+                  {projectInfo?.teamSize} Members
                 </a>
               </div>
               <div>

src/components/Project/ProjectCardView.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import { useProjects } from '../../hooks/useProjects'
-import Loader from '../common/Loader'
-import ProjectCard from './ProjectCard'
-
-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>
-          )}
-     
-            {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-              />
-            ))}
-
-
-             {  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"
-                  }`}
-              >
-                <button
-                  className="page-link"
-                  onClick={() =>
-                    setCurrentPage((p) => Math.min(totalPages, p + 1))
-                  }
-                >
-                  &raquo;
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
-          </div>
-  
-  )
-}
-
-export default ProjectCardView

src/components/Project/ProjectListView.jsx

@@ -1,285 +0,0 @@
-import React, { useState } from "react";
-import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
-import { useProjects } from "../../hooks/useProjects";
-import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
-import ProgressBar from "../common/ProgressBar";
-import {
-  getProjectStatusColor,
-  getProjectStatusName,
-} from "../../utils/projectStatus";
-import { useDispatch } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
-import { useNavigate } from "react-router-dom";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { useProjectContext } from "../../pages/project/ProjectPage";
-import usePagination from "../../hooks/usePagination";
-
-const ProjectListView = ({
-  currentItems,
-  selectedStatuses,
-  handleStatusChange,
-  setCurrentPage,
-  totalPages,
-  isLoading,
-}) => {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const { setMangeProject } = useProjectContext();
-  // const { data, isLoading, isError, error } = useProjects();
-
-  //   check Permissions
-  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
-
-  const projectColumns = [
-    {
-      key: "projectName",
-      label: "Project Name",
-      className: "text-start py-3",
-      getValue: (p) => (
-        <div
-          className="text-primary cursor-pointer fw-bold py-3"
-          onClick={() => {
-            dispatch(setProjectId(p.id));
-            navigate(`/projects/details`);
-          }}
-        >
-          {p.shortName ? `${p.name} (${p.shortName})` : p.name}
-        </div>
-      ),
-    },
-    {
-      key: "contactPerson",
-      label: "Contact Person",
-      className: "text-start small",
-      getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
-    },
-    {
-      key: "startDate",
-      label: "Start Date",
-      className: "text-center small",
-      getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
-    },
-    {
-      key: "deadline",
-      label: "Deadline",
-      className: "text-center small",
-      getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
-    },
-    {
-      key: "task",
-      label: "Task",
-      colSpan: 2,
-      className: "text-center small",
-      getValue: (p) => formatNumber(p?.plannedWork) || "0",
-    },
-    {
-      key: "progress",
-      label: "Progress",
-      className: "text-start small",
-
-      getValue: (p) => (
-        <ProgressBar
-          plannedWork={p.plannedWork}
-          completedWork={p.completedWork}
-          className="mb-0"
-          height="6px"
-        />
-      ),
-    },
-    {
-      key: "status",
-      label: "Status",
-      className: "text-center small",
-      isFilter: true,
-      customRender: (_, selectedStatuses, handleStatusChange) => (
-        <div className="dropdown">
-          <a
-            className="dropdown-toggle hide-arrow cursor-pointer"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-          >
-            Status <i className="bx bx-filter bx-sm"></i>
-          </a>
-          <ul className="dropdown-menu p-2 text-capitalize">
-            {PROJECT_STATUS.map(({ id, label }) => (
-              <li key={id}>
-                <div className="form-check">
-                  <input
-                    className="form-check-input"
-                    type="checkbox"
-                    checked={selectedStatuses.includes(id)}
-                    onChange={() => handleStatusChange(id)}
-                  />
-                  <label className="form-check-label">{label}</label>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ),
-      getValue: (p) => (
-        <span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
-          {getProjectStatusName(p.projectStatusId)}
-        </span>
-      ),
-    },
-  ];
-
-  const handleViewActivities = (project) => {
-    dispatch(setProjectId(project));
-    navigate(`/activities/records?project=${project}`);
-  };
-
-  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 ">
-          <tr>
-            {projectColumns.map((col) => (
-              <th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
-                {col.label}
-              </th>
-            ))}
-            <th className="text-center py-3">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          {currentItems?.map((project) => (
-            <tr key={project.id}>
-              {projectColumns.map((col) => (
-                <td
-                  key={col.key}
-                  colSpan={col.colSpan}
-                  className={`${col.className} py-5`}
-                  style={{ paddingTop: "20px", paddingBottom: "20px" }}
-                >
-                  {col.getValue
-                    ? col.getValue(project)
-                    : project[col.key] || "N/A"}
-                </td>
-              ))}
-              <td
-                className={`mx-2 ${
-                  canManageProject ? "d-sm-table-cell" : "d-none"
-                }`}
-              >
-                <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">
-                    <li>
-                      <a
-                        aria-label="click to  View details"
-                        className="dropdown-item cursor-pointer"
-                      >
-                        <i className="bx bx-detail me-2"></i>
-                        <span className="align-left">View details</span>
-                      </a>
-                    </li>
-
-                    <li>
-                      <a
-                        className="dropdown-item cursor-pointer"
-                        onClick={() =>
-                          setMangeProject({
-                            isOpen: true,
-                            Project: project.id,
-                          })
-                        }
-                      >
-                        <i className="bx bx-pencil me-2"></i>
-                        <span className="align-left">Modify</span>
-                      </a>
-                    </li>
-                    <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>
-                  </ul>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      </div>
-
-      {isLoading && (
-        <div className="py-4">
-          {" "}
-          {isLoading && <p className="text-center">Loading...</p>}
-          {!isLoading && filteredProjects.length === 0 && (
-            <p className="text-center text-muted">No projects found.</p>
-          )}
-        </div>
-      )}
-      {!isLoading && currentItems.length === 0 && (
-        <div className="py-6">
-          <p className="text-center text-muted">No projects found.</p>
-        </div>
-      )}
-      {!isLoading && 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"
-              }`}
-            >
-              <button
-                className="page-link"
-                onClick={() =>
-                  setCurrentPage((p) => Math.min(totalPages, p + 1))
-                }
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
-      )}
-    </div>
-  );
-};
-
-export default ProjectListView;

src/components/Project/ProjectModal.jsx

@@ -1,35 +1,36 @@
-import React from "react";
+import React from 'react'
-import AssignRole from "./AssignTask";
+import AssignRole from './AssignTask'
+
+const ProjectModal = ({modalConfig,closeModal}) => {
    
-const ProjectModal = ({ modalConfig, closeModal }) => {
   return (
     <div
-      className="modal fade"
+    className="modal fade"
-      id="project-modal"
+    id="project-modal"
-      tabindex="-1"
+    tabindex="-1"
-      aria-hidden="true"
+    aria-hidden="true"
-      role="dialog"
+    role="dialog"  
-    >
+   >
-      <div className="modal-dialog modal-lg modal-simple">
+   <div className="modal-dialog modal-lg modal-simple">
-        <div className="modal-content">
+  <div className="modal-content">
-          <div className="modal-body">
+  <div className="modal-body">
-            <button
+    <button
-              type="button"
+      type="button"
-              className="btn-close"
+      className="btn-close"
-              data-bs-dismiss="modal"
+      data-bs-dismiss="modal"
-              aria-label="Close"
+      aria-label="Close"
-              onClick={closeModal}
+      onClick={closeModal}
-            ></button>
+    ></button>
-            <div className="text-center mb-2"></div>
+    <div className="text-center mb-2"></div>
      
-            {modalConfig?.type === "assignRole" && (
-              <AssignRole assignData={modalConfig?.data} onClose={closeModal} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
      
-export default ProjectModal;
+            {modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
+            
+   </div>
+</div>
+</div>
+</div>
+  )
+}
+
+export default ProjectModal

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",
     },
   ];
 
@@ -83,7 +67,7 @@ const ProjectAssignedOrgs = () => {
 
   return (
     <div>
-      <div className="dataTables_wrapper no-footer mx-5 pb-2 page">
+      <div className="dataTables_wrapper no-footer mx-5 pb-2">
         <table className="table dataTable text-nowrap">
           <thead>
             <tr className="table_header_border">

src/components/Project/ProjectOrganization/ProjectServices.jsx

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

src/components/Project/ProjectOverview.jsx

@@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
 import Chart from "react-apexcharts";
 
 const ProjectOverview = ({ project }) => {
-  const { data } = useProjects();
+  const { projects } = useProjects();
   const [current_project, setCurrentProject] = useState(
-    data?.find((pro) => pro.id == project)
+    projects.find((pro) => pro.id == project)
   );
 
   const selectedProject = useSelector(
@@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
   }, [current_project]);
 
   useEffect(() => {
-    setCurrentProject(data?.find((pro) => pro.id == selectedProject));
+    setCurrentProject(projects.find((pro) => pro.id == selectedProject));
     if (current_project) {
       let val = getProgressInPercentage(
         current_project.plannedWork,

src/components/Project/ProjectSchema.jsx

@@ -1,59 +0,0 @@
-import { z } from "zod";
-import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
-const currentDate = new Date()
-
-
-export const projectDefault = {
-  name: "",
-  shortName: "",
-  contactPerson: "",
-  projectAddress: "",
-  startDate: currentDate.toISOString().split("T")[0],
-  endDate: currentDate.toISOString().split("T")[0],
-  projectStatusId: DEFAULT_EMPTY_STATUS_ID,
-  promoterId: "",
-  pmcId: "",
-};
-
-
-export const projectSchema = z
-  .object({
-    name: z.string().min(1, { message: "Project Name is required" }),
-    shortName: z.string().optional(),
-    contactPerson: z
-      .string()
-      .min(1, { message: "Contact Person Name is required" })
-      .regex(/^[A-Za-z\s]+$/, {
-        message: "Contact Person must contain only letters",
-      }),
-    projectAddress: z
-      .string()
-      .min(1, { message: "Address is required" })
-      .max(500, "Address must not exceed 150 characters"),
-    startDate: z
-      .string()
-      .min(1, { message: "Start Date is required" })
-      .default(projectDefault),
-    endDate: z
-      .string()
-      .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" }),
-    pmcId: z.string().min(1, { message: "PMC is required" }),
-  })
-  .refine(
-    (data) => {
-      const start = new Date(data.startDate);
-      const end = new Date(data.endDate);
-      return end >= start;
-    },
-    {
-      path: ["endDate"],
-      message: "End Date must be greater than Start Date",
-    }
-  );
-
-
-
-

src/components/Project/Team/TeamAssignToProject.jsx

@@ -1,80 +0,0 @@
-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 { useSelectedProject } from "../../../slices/apiDataManager";
-
-const TeamAssignToProject = ({ closeModal }) => {
-  const [searchText, setSearchText] = useState("");
-  const [selectedOrg, setSelectedOrg] = useState(null);
-  const project = useSelectedProject();
-  const { data, isLoading, isError, error } =
-    useProjectAssignedOrganizationsName(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 className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            {isLoading ? (
-              <select className="form-select form-select-sm w-100" disabled>
-                <option value="">Loading...</option>
-              </select>
-            ) : data?.length === 0 ? (
-              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
-            ) : (
-              <>
-                <label
-                  htmlFor="organization"
-                  className="form-label mb-0 text-nowrap"
-                >
-                  Select Organization
-                </label>
-                <select
-                  id="organization"
-                  className="form-select form-select-sm w-100"
-                  value={selectedOrg || ""}
-                  onChange={(e) => setSelectedOrg(e.target.value)}
-                >
-                  <option value="">Select</option>
-                  {data.map((org) => (
-                    <option key={org.id} value={org.id}>
-                      {org.name}
-                    </option>
-                  ))}
-                </select>
-              </>
-            )}
-          </div>
-        </div>
-        <div className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            <label htmlFor="search" className="form-label mb-0 text-nowrap">
-              Search Employee
-            </label>
-            <input
-              id="search"
-              type="search"
-              className="form-control form-control-sm w-100"
-              placeholder="Search..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div >
-        <TeamEmployeeList
-          organizationId={selectedOrg}
-          searchTerm={searchText}
-          closeModal={closeModal}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default TeamAssignToProject;

src/components/Project/Team/TeamEmployeeList.jsx

@@ -1,251 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Avatar from "../../common/Avatar";
-import { useDebounce } from "../../../utils/appUtils";
-import { useSelectedProject } from "../../../slices/apiDataManager";
-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();
-  const debounceSearchTerm = useDebounce(searchTerm, 500);
-
-  const {
-    data: employeesData = [],
-    isLoading,
-    isError,
-    error,
-  } = useOrganizationEmployees(
-    selectedProject,
-    organizationId,
-    debounceSearchTerm
-  );
-
-  const { projectEmployees, loading: employeeLodaing } =
-    useEmployeesByProjectAllocated(selectedProject, null);
-
-  const { data: jobRoles } = useMaster();
-  const { data: services } = useProjectAssignedServices(selectedProject);
-
-  const [employees, setEmployees] = useState([]);
-
-  const { mutate: handleAssignEmployee, isPending } =
-    useManageProjectAllocation({
-      onSuccessCallback: () => {
-        closeModal();
-      },
-      onErrorCallback: () => {
-        closeModal();
-      },
-    });
-
-  useEffect(() => {
-    if (employeesData?.data?.length > 0) {
-      const available = employeesData.data.filter((emp) => {
-        const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
-        return !projEmp || projEmp.isActive === false;
-      });
-
-      setEmployees(
-        available.map((emp) => ({
-          ...emp,
-          isChecked: false,
-          jobRole: emp?.jobRoleId || null,
-          serviceId: "",
-          errors: {},
-        }))
-      );
-    }
-  }, [employeesData, projectEmployees, organizationId]);
-
-  const handleCheckboxChange = (index) => {
-    setEmployees((prev) => {
-      const newArr = [...prev];
-      newArr[index].isChecked = !newArr[index].isChecked;
-      newArr[index].errors = {};
-      return newArr;
-    });
-  };
-
-  const handleSelectChange = (index, field, value) => {
-    setEmployees((prev) => {
-      const newArr = [...prev];
-      newArr[index][field] = value;
-      newArr[index].errors[field] = "";
-      return newArr;
-    });
-  };
-
-  const onSubmit = () => {
-    const checkedEmployees = employees.filter((emp) => emp.isChecked);
-
-    setEmployees((prev) => prev.map((emp) => ({ ...emp, errors: {} })));
-
-    if (checkedEmployees.length === 0) {
-      showToast("Select at least one employee", "info");
-      return;
-    }
-
-    let hasError = false;
-    const newEmployees = employees.map((emp) => {
-      const empErrors = {};
-      if (emp.isChecked) {
-        if (!emp.jobRole) {
-          empErrors.jobRole = "Job role is required";
-          hasError = true;
-        }
-        if (!emp.serviceId) {
-          empErrors.serviceId = "Service is required";
-          hasError = true;
-        }
-      }
-      return { ...emp, errors: empErrors };
-    });
-
-    setEmployees(newEmployees);
-
-    if (hasError) return; // stop submit if validation fails
-
-    const payload = checkedEmployees.map((emp) => ({
-      employeeId: emp.id,
-      jobRoleId: emp.jobRole,
-      serviceId: emp.serviceId,
-      projectId: selectedProject,
-      status: true,
-    }));
-
-    handleAssignEmployee({ payload,actionType:"assign"} );
-
-    setEmployees((prev) =>
-      prev.map((emp) => ({
-        ...emp,
-        isChecked: false,
-        jobRole: "",
-        serviceId: "",
-        errors: {},
-      }))
-    );
-  };
-
-if (isLoading) {
-  return (   <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
-}
-
-if (isError) {
-  return (
-    <div className="page-min-h d-flex justify-content-center align-items-center ">
-  {error?.status === 400 ? (
-    <p className="m-0">Enter employee you want to find.</p>
-  ) : (
-    <p className="m-0 dange-text">Something went wrong. Please try again later.</p>
-  )}
-</div>
-
-  );
-}
-
-if (employees.length === 0) {
-  return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
-}
-
-
-  return (
-    <div className=" position-relative">
-      <table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
-        <thead className=" position-sticky top-0">
-          <tr>
-            <th>Employee</th>
-            <th>Service</th>
-            <th>Job Role</th>
-            <th>Select</th>
-          </tr>
-        </thead>
-        <tbody>
-          {employees.map((emp, index) => (
-            <tr key={emp.id}>
-              <td>
-                <div className="d-flex align-items-center">
-                  <Avatar firstName={emp.firstName} lastName={emp.lastName} />
-                  <span className="ms-2 fw-semibold">
-                    {emp.firstName} {emp.lastName}
-                  </span>
-                </div>
-              </td>
-              <td>
-                <select
-                  value={emp.serviceId}
-                  disabled={!emp.isChecked}
-                  onChange={(e) =>
-                    handleSelectChange(index, "serviceId", e.target.value)
-                  }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
-                    emp.errors.serviceId ? "is-invalid" : ""
-                  }`}
-                >
-                  <option value="">Select Service</option>
-                  {services?.map((s) => (
-                    <option key={s.id} value={s.id}>
-                      {s.name}
-                    </option>
-                  ))}
-                </select>
-                {emp.errors.serviceId && (
-                  <div className="danger-text">{emp.errors.serviceId}</div>
-                )}
-              </td>
-              <td>
-                <select
-                  value={emp.jobRole}
-                  disabled={!emp.isChecked}
-                  onChange={(e) =>
-                    handleSelectChange(index, "jobRole", e.target.value)
-                  }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
-                    emp.errors.jobRole ? "is-invalid" : ""
-                  }`}
-                >
-                  <option value="">Select Job Role</option>
-                  {jobRoles?.map((r) => (
-                    <option key={r.id} value={r.id}>
-                      {r.name}
-                    </option>
-                  ))}
-                </select>
-                {emp.errors.jobRole && (
-                  <div className="danger-text">{emp.errors.jobRole}</div>
-                )}
-              </td>
-              <td>
-                <input
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={emp.isChecked}
-                  onChange={() => handleCheckboxChange(index)}
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="position-sticky bottom-0 bg-white  d-flex justify-content-end gap-3 z-25 ">
-        <button
-          type="button"
-          className="btn btn-sm btn-label-secondary"
-          onClick={() => closeModal()}
-        >
-          Cancel
-        </button>
-        <button onClick={onSubmit} className="btn btn-primary">
-          {isPending ? "Please Wait..." : "Assign to Project"}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default TeamEmployeeList;

src/components/Project/Team/Teams.jsx

@@ -1,339 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
-
-import showToast from "../../../services/toastService";
-import Avatar from "../../common/Avatar";
-import moment from "moment";
-
-import ProjectRepository from "../../../repositories/ProjectRepository";
-import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../../slices/localVariablesSlice";
-import useMaster from "../../../hooks/masterHook/useMaster";
-import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
-import { ASSIGN_TO_PROJECT } from "../../../utils/constants";
-import ConfirmModal from "../../common/ConfirmModal";
-import eventBus from "../../../services/eventBus";
-import {
-  useEmployeesByProjectAllocated,
-  useManageProjectAllocation,
-  useProjectAssignedServices,
-} from "../../../hooks/useProjects";
-import { useSelectedProject } from "../../../slices/apiDataManager";
-import GlobalModel from "../../common/GlobalModel";
-import TeamAssignToProject from "./TeamAssignToProject";
-
-const Teams = () => {
-  const selectedProject = useSelectedProject();
-  const dispatch = useDispatch();
-  const [AssigTeam, setAssignTeam] = useState(false);
-  const [employees, setEmployees] = useState([]);
-  const [selectedEmployee, setSelectedEmployee] = useState(null);
-  const [deleteEmployee, setDeleteEmplyee] = useState(null);
-  const [searchTerm, setSearchTerm] = useState(""); // State for search term
-  const [selectedService, setSelectedService] = useState(null);
-  const [activeEmployee, setActiveEmployee] = useState(false);
-
-  const { data: assignedServices, isLoading: servicesLoading } =
-    useProjectAssignedServices(selectedProject);
-  const { data: empJobRoles, loading } = useMaster();
-  const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
-
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
-
-  const navigate = useNavigate();
-
-  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
-  const [IsDeleteModal, setIsDeleteModal] = useState(false);
-  const {
-    projectEmployees,
-    loading: employeeLodaing,
-    refetch,
-  } = useEmployeesByProjectAllocated(
-    selectedProject,
-    selectedService,
-    null,
-    activeEmployee
-  );
-  const {
-    mutate: submitAllocations,
-    isPending,
-    isSuccess,
-    isError,
-  } = useManageProjectAllocation({
-    onSuccessCallback: () => {
-      setSelectedEmployee(null);
-    },
-    onErrorCallback: () => {
-      setSelectedEmployee(null);
-    },
-  });
-
-  const handleDelete = (employee) => {
-    let payload = [
-      {
-        employeeId: employee?.employeeId,
-        jobRoleId: employee?.jobRoleId,
-        projectId: selectedProject,
-        serviceId: employee?.serviceId,
-        status: false,
-      },
-    ];
-
-    submitAllocations({ payload: payload, actionType: "remove" });
-  };
-  const getJobRole = (jobRoleId) => {
-    if (loading) return "Loading...";
-    if (!Array.isArray(empJobRoles)) return "Unassigned";
-    if (!jobRoleId) return "Unassigned";
-
-    const role = empJobRoles.find((b) => b.id == jobRoleId);
-    return role ? role.name : "Unassigned";
-  };
-
-  const filteredEmployees = useMemo(() => {
-    if (!projectEmployees) return [];
-
-    let filtered = projectEmployees;
-
-    if (activeEmployee) {
-      filtered = projectEmployees.filter((emp) => !emp.isActive);
-    }
-
-    // Apply search filter if present
-    if (searchTerm?.trim()) {
-      const lower = searchTerm.toLowerCase();
-      filtered = filtered.filter((emp) => {
-        const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-        return fullName.includes(lower) || jobRole.includes(lower);
-      });
-    }
-
-    return filtered;
-  }, [projectEmployees, searchTerm, activeEmployee]);
-  const handleSearch = (e) => setSearchTerm(e.target.value);
-  const employeeHandler = useCallback(
-    (msg) => {
-      if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
-        refetch();
-      }
-    },
-    [filteredEmployees, refetch]
-  );
-
-  useEffect(() => {
-    eventBus.on("employee", employeeHandler);
-    return () => eventBus.off("employee", employeeHandler);
-  }, [employeeHandler]);
-
-  return (
-    <>
-      {AssigTeam && (
-        <GlobalModel
-          size="lg"
-          isOpen={AssigTeam}
-          closeModal={() => setAssignTeam(false)}
-        >
-          <TeamAssignToProject closeModal={() => setAssignTeam(false)} />
-        </GlobalModel>
-      )}
-
-      <ConfirmModal
-        type="delete"
-        header={"Remove Employee"}
-        message={"Are you sure you want to remove?"}
-        isOpen={!!selectedEmployee}
-        loading={isPending}
-        onSubmit={() => handleDelete(selectedEmployee)}
-        onClose={() => setSelectedEmployee(null)}
-      />
-
-      <div className="card card-action mb-6">
-        <div className="card-body">
-          <div className="row align-items-center justify-content-between mb-4 g-3">
-            <div className="col-md-6 col-12 algin-items-center">
-              <div className="d-flex flex-wrap align-items-center gap-3">
-                <div>
-                  {!servicesLoading && (
-                    <>
-                      {(!assignedServices || assignedServices.length === 0) && (
-                        <span className="badge bg-label-secondary">
-                          Not Service Assigned
-                        </span>
-                      )}
-
-                      {assignedServices?.length === 1 && (
-                        <span className="badge bg-label-secondary">
-                          {assignedServices[0].name}
-                        </span>
-                      )}
-
-                      {assignedServices?.length > 1 && (
-                        <select
-                          className="form-select form-select-sm"
-                          aria-label="Select Service"
-                          value={selectedService}
-                          onChange={handleServiceChange}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      )}
-                    </>
-                  )}
-                </div>
-
-                <div className="form-check form-switch d-flex align-items-center text-nowrap">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="activeEmployeeSwitch"
-                    checked={activeEmployee}
-                    onChange={handleToggleActive}
-                  />
-                  <label
-                    className="form-check-label ms-2"
-                    htmlFor="activeEmployeeSwitch"
-                  >
-                    {activeEmployee ? "Active Employees" : "Include Inactive Employees"}
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
-              <input
-                type="search"
-                className="form-control form-control-sm"
-                placeholder="Search by Name or Role"
-                aria-controls="DataTables_Table_0"
-                style={{ maxWidth: "200px" }}
-                value={searchTerm}
-                onChange={handleSearch}
-              />
-
-              {HasAssignUserPermission && (
-                <button
-                  type="button"
-                  className="btn btn-primary btn-sm text-nowrap"
-                  onClick={() => setAssignTeam(true)}
-                >
-                  <i className="bx bx-plus-circle me-1"></i>
-                  Assign Employee
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div className="table-responsive text-nowrap modal-min-h">
-            {employeeLodaing && <p>Loading..</p>}
-            {projectEmployees && projectEmployees.length > 0 && (
-              <table className="table ">
-                <thead>
-                  <tr>
-                    <th>
-                      <div className="text-start ms-5">Name</div>
-                    </th>
-                    <th>Services</th>
-                    <th>Organization</th>
-                    <th>Assigned Date</th>
-                    {activeEmployee && <th>Release Date</th>}
-                    <th>Project Role</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
-                    filteredEmployees
-                      .sort((a, b) =>
-                        (a.firstName || "").localeCompare(b.firstName || "")
-                      )
-                      .map((emp) => (
-                        <tr key={emp.id}>
-                          <td>
-                            <div className="d-flex justify-content-start align-items-center">
-                              <Avatar
-                                firstName={emp.firstName}
-                                lastName={emp.lastName}
-                              />
-                              <div className="d-flex flex-column">
-                                <a
-                                  onClick={() =>
-                                    navigate(
-                                      `/employee/${emp.employeeId}?for=attendance`
-                                    )
-                                  }
-                                  className="text-heading text-truncate cursor-pointer"
-                                >
-                                  <span className="fw-normal">
-                                    {emp.firstName}{"  "}
-                                    {emp.lastName}
-                                  </span>
-                                </a>
-                              </div>
-                            </div>
-                          </td>
-
-                          <td>{emp.serviceName || "N/A"}</td>
-                          <td>{emp.organizationName || "N/A"}</td>
-
-                          <td>
-                            {moment(emp.allocationDate).format("DD-MMM-YYYY")}
-                          </td>
-                          {activeEmployee && (
-                            <td>
-                              {emp.reAllocationDate
-                                ? moment(emp.reAllocationDate).format(
-                                    "DD-MMM-YYYY"
-                                  )
-                                : "Present"}
-                            </td>
-                          )}
-                          <td>
-                            <span className="badge bg-label-primary me-1">
-                              {getJobRole(emp.jobRoleId)}
-                            </span>
-                          </td>
-                          <td>
-                            {emp.isActive ? (
-                              <button
-                                aria-label="Delete"
-                                type="button"
-                                title="Remove from project"
-                                className="btn p-0 dropdown-toggle hide-arrow"
-                                onClick={() => setSelectedEmployee(emp)}
-                              >
-                                <i className="bx bx-trash me-1 text-danger"></i>
-                              </button>
-                            ) : (
-                              <span>Not in project</span>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                </tbody>
-              </table>
-            )}
-            {!employeeLodaing && filteredEmployees.length === 0 && (
-              <div className="text-center text-muted py-3  d-flex justify-content-center align-items-center py-12">
-                <p>
-                  {activeEmployee
-                    ? "No active employees assigned to the project"
-                    : "No inactive employees assigned to the project"}
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Teams;

src/components/Project/Teams.jsx

@@ -0,0 +1,443 @@
+import React, { useState, useEffect, useCallback } from "react";
+import MapUsers from "./MapUsers";
+import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
+
+import showToast from "../../services/toastService";
+import Avatar from "../common/Avatar";
+import moment from "moment";
+
+import ProjectRepository from "../../repositories/ProjectRepository";
+import { useDispatch, useSelector } from "react-redux";
+import { changeMaster } from "../../slices/localVariablesSlice";
+import useMaster from "../../hooks/masterHook/useMaster";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { ASSIGN_TO_PROJECT } from "../../utils/constants";
+import ConfirmModal from "../common/ConfirmModal";
+import eventBus from "../../services/eventBus";
+import {
+  useEmployeesByProjectAllocated,
+  useManageProjectAllocation,
+  useProjectAssignedServices,
+} from "../../hooks/useProjects";
+import { useSelectedProject } from "../../slices/apiDataManager";
+
+const Teams = () => {
+  const projectId = useSelectedProject();
+  const dispatch = useDispatch();
+
+  const { data, loading } = useMaster();
+  const [isModalOpen, setIsModelOpen] = useState(false);
+  const [error, setError] = useState("");
+  const [empJobRoles, setEmpJobRoles] = useState(null);
+  const [employees, setEmployees] = useState([]);
+  const [filteredEmployees, setFilteredEmployees] = useState([]);
+  const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
+  const [assignedLoading, setAssignedLoading] = useState(false);
+  const [activeEmployee, setActiveEmployee] = useState(true);
+  const [deleteEmployee, setDeleteEmplyee] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const [selectedService, setSelectedService] = useState(null);
+
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const handleToggleActive = e => setActiveEmployee(e.target.checked);
+
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
+
+  const navigate = useNavigate();
+
+  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
+  const [IsDeleteModal, setIsDeleteModal] = useState(false);
+  const {
+    projectEmployees,
+    loading: employeeLodaing,
+    refetch,
+  } = useEmployeesByProjectAllocated(projectId, selectedService);
+  const {
+    mutate: submitAllocations,
+    isPending,
+    isSuccess,
+    isError,
+  } = useManageProjectAllocation({
+    onSuccessCallback: () => {
+      setRemovingEmployeeId(null);
+      setAssignedLoading(false);
+      setDeleteEmplyee(null);
+      closeDeleteModal();
+    },
+    onErrorCallback: () => {
+      closeDeleteModal();
+    },
+  });
+
+  const removeAllocation = (item) => {
+    setRemovingEmployeeId(item.id);
+
+    submitAllocations({
+      items: [
+        {
+          empID: item.employeeId,
+          jobRoleId: item.jobRoleId,
+          projectId: projectId,
+          status: false,
+        },
+      ],
+      added: false,
+    });
+  };
+
+  const handleEmpAlicationFormSubmit = (allocaionObj) => {
+    let items = allocaionObj.map((item) => {
+      return {
+        empID: item.empID,
+        jobRoleId: item.jobRoleId,
+        projectId: projectId,
+        status: true,
+      };
+    });
+
+    submitAllocations({ items, added: true });
+
+    setActiveEmployee(true);
+    setFilteredEmployees(employees.filter((emp) => emp.isActive));
+
+    const dropdown = document.querySelector(
+      'select[name="DataTables_Table_0_length"]'
+    );
+    if (dropdown) dropdown.value = "true";
+  };
+
+  const getRole = (jobRoleId) => {
+    if (loading) return "Loading...";
+    if (!Array.isArray(empJobRoles)) return "Unassigned";
+    if (!jobRoleId) return "Unassigned";
+
+    const role = empJobRoles.find((b) => b.id == jobRoleId);
+    return role ? role.name : "Unassigned";
+  };
+  const openModel = () => {
+    setIsModelOpen(true);
+  };
+
+  const onModelClose = () => {
+    setIsModelOpen(false);
+    const modalElement = document.getElementById("user-model");
+    if (modalElement) {
+      modalElement.classList.remove("show");
+      modalElement.style.display = "none";
+      document.body.classList.remove("modal-open");
+      document.querySelector(".modal-backdrop").remove();
+    }
+    const modalBackdropElement = document.querySelector(".modal-backdrop");
+    if (modalBackdropElement) {
+      modalBackdropElement.remove();
+    }
+    document.body.style.overflow = "auto";
+  };
+
+  useEffect(() => {
+    dispatch(changeMaster("Job Role"));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (projectEmployees) {
+      setEmployees(projectEmployees);
+      const filtered = projectEmployees.filter((emp) => emp.isActive);
+      setFilteredEmployees(filtered);
+    }
+  }, [projectEmployees, employeeLodaing]);
+
+  useEffect(() => {
+    if (data) {
+      setEmpJobRoles(data);
+    }
+  }, [data]);
+  const filterAndSearchEmployees = useCallback(() => {
+    const statusFiltered = employees.filter((emp) =>
+      activeEmployee ? emp.isActive : !emp.isActive
+    );
+
+    if (searchTerm === "") {
+      setFilteredEmployees(statusFiltered);
+      return;
+    }
+
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+
+    const searchedAndFiltered = statusFiltered.filter((item) => {
+      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      const roleName = getRole(item.jobRoleId).toLowerCase();
+      const orgName = (item.organizationName || "").toLowerCase();
+      const serviceName = (item.serviceName || "").toLowerCase();
+
+      return (
+        fullName.includes(lowercasedSearchTerm) ||
+        roleName.includes(lowercasedSearchTerm) ||
+        orgName.includes(lowercasedSearchTerm) ||
+        serviceName.includes(lowercasedSearchTerm)
+      );
+    });
+
+    setFilteredEmployees(searchedAndFiltered);
+  }, [employees, activeEmployee, searchTerm, getRole]);
+
+
+  useEffect(() => {
+    filterAndSearchEmployees();
+  }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
+
+  const handleFilterEmployee = (e) => {
+    const filterValue = e.target.value;
+    setActiveEmployee(filterValue === "true");
+    setSearchTerm("");
+  };
+
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const deleteModalOpen = (item) => {
+    setDeleteEmplyee(item);
+    setIsDeleteModal(true);
+  };
+  const closeDeleteModal = () => setIsDeleteModal(false);
+
+  const handler = useCallback(
+    (msg) => {
+      if (msg.projectIds.some((item) => item === projectId)) {
+        refetch();
+      }
+    },
+    [projectId, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("assign_project_all", handler);
+    return () => eventBus.off("assign_project_all", handler);
+  }, [handler]);
+
+  const employeeHandler = useCallback(
+    (msg) => {
+      if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
+        refetch();
+      }
+    },
+    [filteredEmployees, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
+
+  return (
+    <>
+      <div
+        className="modal fade"
+        id="user-model"
+        tabIndex="-1"
+        aria-labelledby="userModalLabel"
+        aria-hidden="true"
+      >
+        <MapUsers
+          projectId={projectId}
+          onClose={onModelClose}
+          empJobRoles={empJobRoles}
+          onSubmit={handleEmpAlicationFormSubmit}
+          allocation={employees}
+          assignedLoading={assignedLoading}
+          setAssignedLoading={setAssignedLoading}
+        ></MapUsers>
+      </div>
+
+      {IsDeleteModal && (
+        <ConfirmModal
+          isOpen={IsDeleteModal}
+          type="delete"
+          header="Remove Employee"
+          message="Are you sure you want to delete?"
+          onSubmit={() => removeAllocation(deleteEmployee)}
+          onClose={closeDeleteModal}
+          loading={isPending}
+        />
+      )}
+
+      <div className="card card-action mb-6">
+        <div className="card-body">
+          <div className="row d-flex justify-content-between mb-4">
+            <div className="col-md-6 col-12 d-flex align-items-center">
+              <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
+                {!servicesLoading && assignedServices?.length > 0 && (
+                  assignedServices.length > 1 ? (
+                    <label>
+                      <select
+                        name="DataTables_Table_0_length"
+                        aria-controls="DataTables_Table_0"
+                        className="form-select form-select-sm"
+                        aria-label="Select Service"
+                        value={selectedService}
+                        onChange={handleServiceChange}
+                        style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
+                      >
+                        <option value="">All Services</option>
+                        {assignedServices.map((service) => (
+                          <option key={service.id} value={service.id}>
+                            {service.name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : (
+                    <h5>{assignedServices[0].name}</h5>
+                  )
+                )}
+              </div>
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
+              <div className="form-check form-switch me-2 mt-2">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={activeEmployee}
+                  onChange={handleToggleActive}
+                  id="activeEmployeeSwitch"
+                />
+                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
+                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
+                </label>
+              </div>
+              <div className="dataTables_filter d-inline-flex align-items-center ms-2">x``
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div>
+
+              <button
+                type="button"
+                className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
+                  }`}
+                data-bs-toggle="modal"
+                data-bs-target="#user-model"
+              >
+                <i className="bx bx-plus-circle me-2"></i>
+                Assign Employee
+              </button>
+            </div>
+          </div>
+          <div className="table-responsive text-nowrap">
+            {employeeLodaing && <p>Loading..</p>}
+            {!employeeLodaing &&
+              filteredEmployees &&
+              filteredEmployees.length > 0 && (
+                <table className="table ">
+                  <thead>
+                    <tr>
+                      <th>
+                        <div className="text-start ms-5">Name</div>
+                      </th>
+                      <th>Services</th>
+                      <th>Organization</th>
+                      <th>Assigned Date</th>
+                      {!activeEmployee && <th>Release Date</th>}
+                      <th>Project Role</th>
+                      <th>Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="table-border-bottom-0">
+                    {filteredEmployees &&
+                      filteredEmployees.map((item) => (
+                        <tr key={item.id}>
+                          <td>
+                            <div className="d-flex justify-content-start align-items-center">
+                              <Avatar
+                                firstName={item.firstName}
+                                lastName={item.lastName}
+                              />
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() =>
+                                    navigate(
+                                      `/employee/${item.employeeId}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
+                                >
+                                  <span className="fw-normal">
+                                    {item.firstName} {item.middleName}{" "}
+                                    {item.lastName}
+                                  </span>
+                                </a>
+                              </div>
+                            </div>
+                          </td>
+
+                          <td>{item.serviceName || "N/A"}</td>
+                          <td>{item.organizationName || "N/A"}</td>
+
+                          <td>
+                            {moment(item.allocationDate).format("DD-MMM-YYYY")}
+                          </td>
+                          {!activeEmployee && (
+                            <td>
+                              {item.reAllocationDate
+                                ? moment(item.reAllocationDate).format("DD-MMM-YYYY")
+                                : "Present"}
+                            </td>
+                          )}
+                          <td>
+                            <span className="badge bg-label-primary me-1">
+                              {getRole(item.jobRoleId)}
+                            </span>
+                          </td>
+                          <td>
+                            {item.isActive ? (
+                              <button
+                                aria-label="Delete"
+                                type="button"
+                                title="Remove from project"
+                                className="btn p-0 dropdown-toggle hide-arrow"
+                                onClick={() => deleteModalOpen(item)}
+                              >
+                                {removingEmployeeId === item.id ? (
+                                  <div
+                                    className="spinner-border spinner-border-sm text-primary"
+                                    role="status"
+                                  >
+                                    <span className="visually-hidden">Loading...</span>
+                                  </div>
+                                ) : (
+                                  <i className="bx bx-trash me-1 text-danger"></i>
+                                )}
+                              </button>
+                            ) : (
+                              <span>Not in project</span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+
+              )}
+            {!employeeLodaing && filteredEmployees.length === 0 && (
+              <div className="text-center text-muted py-3">
+                {activeEmployee
+                  ? "No active employees assigned to the project"
+                  : "No inactive employees assigned to the project"}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Teams;

src/components/Tenant/LogoUpload.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useFormContext } from "react-hook-form";
 
 const toBase64 = (file) =>
@@ -10,15 +10,11 @@ const toBase64 = (file) =>
   });
 
 export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
-  const { register, setValue, watch, formState: { errors } } = useFormContext();
+  const {
-  const logoImage = watch("logoImage");
+    register,
-
+    setValue,
-  // Sync preview when the form value changes
+    formState: { errors },
-  useEffect(() => {
+  } = useFormContext();
-    if (logoImage && !preview) {
-      setPreview(logoImage); // Use base64 as preview
-    }
-  }, [logoImage, preview, setPreview]);
 
   const handleUpload = async (e) => {
     const file = e.target.files?.[0];

src/components/Tenant/OrganizationInfo.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
@@ -57,13 +57,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     }
   };
 
-  useEffect(() => {
-  const logoImage = getValues("logoImage"); 
-  if (logoImage) {
-    setLogoPreview(logoImage); 
-    setLogoName("Uploaded Logo"); 
-  }
-}, [getValues]);
 
 
   return (
@@ -211,6 +204,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
       <div className="col-sm-6">
         <SelectMultiple
+          required
           name="serviceIds"
           label="Services"
           options={services?.data}

src/components/Tenant/SubScription.jsx

@@ -224,7 +224,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
           </div>
 
           {Object.keys(errors).length > 0 && (
-            <div role="alert">
+            <div class="alert alert-danger" role="alert">
               {Object.entries(errors).map(([key, error]) => (
                 <div key={key} className="danger-text">
                   {error?.message}

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/TenantFilterPanel.jsx

@@ -38,7 +38,7 @@ const TenantFilterPanel = ({ onApply }) => {
   );
 
 
-  // Close popup when navigating to another component
+  // ✅ Close popup when navigating to another component
   const location = useLocation();
   useEffect(() => {
     handleClosePanel();
@@ -106,13 +106,13 @@ const TenantFilterPanel = ({ onApply }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-label-secondary btn-sm"
+            className="btn btn-label-secondary btn-xs"
             onClick={onClear}
 
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-sm" >
+          <button type="submit" className="btn btn-primary btn-xs" >
             Apply
           </button>
         </div>

src/components/Tenant/TenantSchema.js

@@ -33,7 +33,7 @@ export const newTenantSchema = z.object({
   organizationSize: z.string().nonempty("Organization size is required"),
   industryId: z.string().uuid("Invalid industry ID"),
   reference: z.string().nonempty("Reference is required"),
-  serviceIds: z.array(z.string()).optional(),
+  serviceIds: z.array(z.string()).nonempty("Services is required"),
 });
 
 export const tenantDefaultValues = {
@@ -59,7 +59,7 @@ export const tenantDefaultValues = {
 
 export const getSubscriptionSchema = (minUsers) =>
   z.object({
-    planId: z.string().min(1, { message: "Please select a plan to continue" }),
+    planId: z.string().min(1, { message: "Please select Plan" }),
     currencyId: z.string().uuid("Invalid currency"),
     maxUsers: z
       .number({ invalid_type_error: "Must be a number" })

src/components/Tenant/TenantsList.jsx

@@ -137,7 +137,7 @@ const TenantsList = ({
   return (
     <>
       <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 ">
-      <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,258 +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?.includes("image");
-
-              return (
-                <div
-                  key={doc.documentId}
-                  className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                  style={{
-                    width: "80px",
-                    cursor: isImage ? "pointer" : "default",
-                  }}
-                  onClick={() => {
-                    if (isImage) {
-                      setDocumentView({
-                        IsOpen: true,
-                        Image: doc.preSignedUrl,
-                      });
-                    }
-                  }}
-                >
-                  <i
-                    className={`bx ${getIconByFileType(doc.contentType)}`}
-                    style={{ fontSize: "30px" }}
-                  ></i>
-                  <small
-                    className="text-center text-tiny text-truncate w-100"
-                    title={doc.fileName}
-                  >
-                    {doc.fileName}
-                  </small>
-                </div>
-              );
-            }) ?? "No Attachment"}
-          </div>
-        </div>
-
-        <div className="container px-1">
-          {/* Tabs Navigation */}
-          <ul className="nav nav-tabs" role="tablist">
-            <li className="nav-item">
-              <button
-                className={`nav-link ${
-                  activeTab === "payments" ? "active" : ""
-                }`}
-                onClick={() => setActiveTab("payments")}
-                type="button"
-              >
-                <i className="bx bx-history bx-sm me-1"></i> Payments History
-              </button>
-            </li>
-            <li className="nav-item">
-              <button
-                className={`nav-link ${
-                  activeTab === "details" ? "active" : ""
-                }`}
-                onClick={() => setActiveTab("details")}
-                type="button"
-              >
-                <i className="bx bx-message-dots bx-sm me-2"></i> Comments (
-                {data?.comments?.length ?? "0"})
-              </button>
-            </li>
-          </ul>
-
-          {/* Tab Content */}
-          <div className="tab-content px-1 py-0 border-top-0">
-            {activeTab === "payments" && (
-              <div className="tab-pane fade show active">
-                <PaymentHistoryTable data={data} />
-              </div>
-            )}
-
-            {activeTab === "details" && (
-              <div className="tab-pane fade show active">
-                <Comment invoice={data} />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ViewCollection;

src/components/collections/collectionSchema.jsx

@@ -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/DatePicker.jsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from "react";
 import { useController } from "react-hook-form";
 
+
 const DatePicker = ({
   name,
   control,
   placeholder = "DD-MM-YYYY",
   className = "",
   allowText = false,
-  maxDate,
+  maxDate,   // removed default new Date()
   minDate,
   ...rest
 }) => {
@@ -21,43 +22,43 @@ const DatePicker = ({
   });
 
   useEffect(() => {
-    if (!inputRef.current) return;
+    if (inputRef.current) {
-
+      flatpickr(inputRef.current, {
-    const fp = flatpickr(inputRef.current, {
+        dateFormat: "d-m-Y",
-      dateFormat: "d-m-Y",
+        allowInput: allowText,
-      allowInput: allowText,
+        defaultDate: value
-      defaultDate: value ? new Date(value) : null, // safely convert to Date
+          ? flatpickr.parseDate(value, "Y-m-d")
-      maxDate: maxDate ? new Date(maxDate) : undefined,
+          : null,
-      minDate: minDate ? new Date(minDate) : undefined,
+        maxDate: maxDate ?? undefined, // only applied if passed
-      onChange: (selectedDates) => {
+        minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
-        if (selectedDates.length > 0) {
+        onChange: function (selectedDates) {
-          onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
+          if (selectedDates.length > 0) {
-        } else {
+            // store in YYYY-MM-DD
-          onChange("");
+            const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
-        }
+            onChange(formatted);
-      },
+          } else {
-      ...rest
+            onChange("");
-    });
+          }
-
+        },
-    return () => {
+        ...rest
-      fp.destroy(); // clean up on unmount
+      });
-    };
+    }
   }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
 
-  const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
-
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={` position-relative ${className}`}>
       <input
         type="text"
-        className="form-control form-control-sm"
+        className="form-control form-control-sm " 
         placeholder={placeholder}
-        value={displayValue}
+        defaultValue={
-        onChange={(e) => {
+          value
-          if (allowText) {
+            ? flatpickr.formatDate(
-            onChange(e.target.value); // allow manual typing if enabled
+                flatpickr.parseDate(value, "Y-m-d"),
-          }
+                "d-m-Y"
-        }}
+              )
+            : ""
+        }
         ref={(el) => {
           inputRef.current = el;
           ref(el);
@@ -69,7 +70,7 @@ const DatePicker = ({
       <span
         className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
         onClick={() => {
-          if (inputRef.current?._flatpickr) {
+          if (inputRef.current && inputRef.current._flatpickr) {
             inputRef.current._flatpickr.open();
           }
         }}

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 top-50 end-0 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,6 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
-  howManyDay = 6,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -107,13 +94,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 +114,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 +135,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,19 +148,10 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-    if (resetSignal !== undefined) {
+    if (defaultRange && resetSignal !== undefined) {
-      if (defaultRange) {
+      applyDefaultDates();
-        applyDefaultDates();
-      } else {
-        setValue(startField, "", { shouldValidate: true });
-        setValue(endField, "", { shouldValidate: true });
-
-        if (inputRef.current?._flatpickr) {
-          inputRef.current._flatpickr.clear();
-        }
-      }
     }
-  }, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange]);
 
   const start = getValues(startField);
   const end = getValues(endField);
@@ -188,7 +163,7 @@ export const DateRangePicker1 = ({
         type="text"
         className="form-control form-control-sm"
         placeholder={placeholder}
-        value={formattedValue}
+        defaultValue={formattedValue}
         ref={(el) => {
           inputRef.current = el;
           ref(el);

src/components/common/EmployeeSearchInput.jsx

@@ -4,13 +4,10 @@ import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
 
-const EmployeeSearchInput = ({
+
-  control,
+
-  name,
+
-  projectId,
+const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
-  placeholder,
-  forAll,
-}) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -20,20 +17,17 @@ const EmployeeSearchInput = ({
   const [showDropdown, setShowDropdown] = useState(false);
   const debouncedSearch = useDebounce(search, 500);
 
-  const { data: employees, isLoading } = useEmployeesName(
+  const {
-    projectId,
+    data: employees,
-    debouncedSearch,
+    isLoading,
-    forAll
+  } = 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]);
 
   const handleSelect = (employee) => {
     onChange(employee.id);
@@ -67,27 +61,28 @@ const EmployeeSearchInput = ({
           {isLoading ? (
             <li className="list-group-item">
               <a>Searching...</a>
+              
             </li>
           ) : (
             employees?.data?.map((emp) => (
-              <li
+             <li
-                key={emp.id}
+        key={emp.id}
-                className="list-group-item list-group-item-action py-1 px-1"
+        className="list-group-item list-group-item-action py-1 px-1"
-                style={{ cursor: "pointer" }}
+        style={{ cursor: "pointer" }}
-                onClick={() => handleSelect(emp)}
+        onClick={() => handleSelect(emp)}
-              >
+      >
-                <div className="d-flex align-items-center px-0">
+        <div className="d-flex align-items-center px-0">
-                  <Avatar
+          <Avatar
-                    size="xs"
+            size="xs"
-                    classAvatar="m-0 me-2"
+            classAvatar="m-0 me-2"
-                    firstName={emp.firstName}
+            firstName={emp.firstName}
-                    lastName={emp.lastName}
+            lastName={emp.lastName}
-                  />
+          />
-                  <span className="text-muted">
+          <span className="text-muted">
-                    {`${emp?.firstName} ${emp?.lastName}`.trim()}
+            {`${emp?.firstName} ${emp?.lastName}`.trim()}
-                  </span>
+          </span>
-                </div>
+        </div>
-              </li>
+      </li>
             ))
           )}
         </ul>

src/components/common/HoverPopup.jsx

@@ -53,8 +53,8 @@ const HoverPopup = ({ title, content, children }) => {
             marginTop: "8px",
           }}
         >
-          {title && <h6 className="mb-2 text-capitalize">{title}</h6>}
+          {title && <h6 className="mb-2">{title}</h6>}
-          <div className="text-capitalize">{content}</div>
+          <div>{content}</div>
         </div>
       )}
     </div>

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

@@ -11,21 +11,22 @@ 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 } = useFormContext();
-  useEffect(() => {
+  const selectedValues = watch(name) || [];
-  register(name, { value: [] });
-}, [register, name]);
-
-const selectedValues = watch(name) || [];
 
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const containerRef = useRef(null);
   const dropdownRef = useRef(null);
 
-  const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
+  const [dropdownStyles, setDropdownStyles] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -64,14 +65,10 @@ const selectedValues = watch(name) || [];
     setValue(name, updated, { shouldValidate: true });
   };
 
-  const filteredOptions = (options || []).filter((item) => {
+  const filteredOptions = options.filter((item) => {
-  const label = getLabel(item);
+    const label = getLabel(item);
-  return (
+    return label?.toLowerCase().includes(searchText.toLowerCase());
-    typeof label === "string" &&
+  });
-    label.toLowerCase().includes(searchText.toLowerCase())
-  );
-});
-
 
   const dropdownElement = (
     <div
@@ -109,8 +106,14 @@ const selectedValues = watch(name) || [];
         return (
           <div
             key={valueVal}
-            className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
+            className={`multi-select-dropdown-option ${
-            style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
+              isChecked ? "selected" : ""
+            }`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              padding: "4px 8px",
+            }}
           >
             <input
               type="checkbox"
@@ -139,9 +142,13 @@ const selectedValues = watch(name) || [];
 
   return (
     <>
-      <div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
+      <div
-        <label className="form-label mb-1">{label}</label>
+        ref={containerRef}
-        <Label className={name} required={required}></Label>
+        className="multi-select-dropdown-container"
+        style={{ position: "relative" }}
+      >
+      <Label required={required}>{label}</Label>
+
 
         <div
           className="multi-select-dropdown-header"
@@ -150,7 +157,9 @@ const selectedValues = watch(name) || [];
         >
           <span
             className={
-              selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
+              selectedValues.length > 0
+                ? "placeholder-style-selected"
+                : "placeholder-style"
             }
           >
             <div className="selected-badges-container">
@@ -159,7 +168,10 @@ const selectedValues = watch(name) || [];
                   const found = options.find((opt) => opt[valueKey] === val);
                   const label = found ? getLabel(found) : "";
                   return (
-                    <span key={val} className="badge badge-selected-item mx-1 mb-1">
+                    <span
+                      key={val}
+                      className="badge badge-selected-item mx-1 mb-1"
+                    >
                       {label}
                     </span>
                   );

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

src/components/gallary/ViewGallery.jsx

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

src/components/master/CreateActivity.jsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { MasterRespository } from "../../repositories/MastersRepository";
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
+import { useCreateActivity } from "../../hooks/masterHook/useMaster";
+import Label from "../common/Label";
+
+const schema = z.object({
+  activityName: z.string().min(1, { message: "Activity Name is required" }),
+  unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
+  checkList: z
+    .array(
+      z.object({
+        description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
+        isMandatory: z.boolean().default(false),
+        id: z.any().default(null),
+      })
+    )
+    .optional(),
+});
+
+const CreateActivity = ({ activity = null, whichGroup = null, close  }) => {
+  const maxDescriptionLength = 255;
+  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    clearErrors,
+    setError,
+    getValues,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      activityName: "",
+      unitOfMeasurement: "",
+      checkList: [],
+    },
+  });
+
+  const {
+    fields: checkListItems,
+    append,
+    remove,
+  } = useFieldArray({
+    control,
+    name: "checkList",
+  });
+
+  const addChecklistItem = useCallback(() => {
+    const values = getValues("checkList");
+    const lastIndex = checkListItems.length - 1;
+
+    if (
+      checkListItems.length > 0 &&
+      (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
+    ) {
+      setError(`checkList.${lastIndex}.description`, {
+        type: "manual",
+        message: "Please fill this checklist item before adding another.",
+      });
+      return;
+    }
+
+    clearErrors(`checkList.${lastIndex}.description`);
+    append({ id: null, description: "", isMandatory: false });
+  }, [checkListItems, getValues, append, setError, clearErrors]);
+
+  const removeChecklistItem = useCallback((index) => {
+    remove(index);
+  }, [remove]);
+
+  const handleChecklistChange = useCallback((index, value) => {
+    setValue(`checkList.${index}`, value);
+  }, [setValue]);
+
+  const onSubmit = (formData) => {
+    createActivity(formData);
+  };
+  
+  useEffect(()=>{
+      if (activity) {
+      reset({
+        activityName: activity.activityName || '',
+        unitOfMeasurement: activity.unitOfMeasurement || '',
+        checkList: activity.checkList?.map((check) => ({
+          description: check.description || '',
+          isMandatory: check.isMandatory || false,
+        })) || [{ description: '', isMandatory: false }],
+      });
+    }
+  },[activity,reset])
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
+
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* <h6>Create Activity</h6> */}
+      <div className="row">
+        <div className="col-6 text-start">
+          <Label className="form-label" required>Activity</Label>
+          <input
+            type="text"
+            {...register("activityName")}
+            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
+              }`}
+          />
+          {errors.activityName && (
+            <p className="danger-text">{errors.activityName.message}</p>
+          )}
+        </div>
+
+        <div className="col-6 text-start">
+          <Label className="form-label" required>Measurement</Label>
+          <input
+            type="text"
+            {...register("unitOfMeasurement")}
+            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
+              }`}
+          />
+          {errors.unitOfMeasurement && (
+            <p className="danger-text">{errors.unitOfMeasurement.message}</p>
+          )}
+        </div>
+
+        <div className="col-md-12 text-start mt-1">
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
+          {checkListItems.length > 0 && (
+            <table className="table mt-1  border-0">
+              <thead className="py-0 my-0 table-border-top-0">
+                <tr className="py-1">
+                  <th colSpan={2} className="py-1">
+                    <small>Name</small>
+                  </th>
+                  <th colSpan={2} className="py-1 text-center">
+                    <small>Is Mandatory</small>
+                  </th>
+                  <th className="text-center py-1">Action</th>
+                </tr>
+              </thead>
+              <tbody className="table-border-bottom-0 ">
+                {checkListItems.map((item, index) => (
+                  <tr key={index} className="border-top-0">
+                    <td colSpan={2} className="border-top-0 border-0">
+                      <input
+                        className="d-none"
+                        {...register(`checkList.${index}.id`)}
+                      ></input>
+                      <input
+                        {...register(`checkList.${index}.description`)}
+                        className="form-control form-control-sm"
+                        placeholder={`Checklist item ${index + 1}`}
+                        onChange={(e) =>
+                          handleChecklistChange(index, e.target.value)
+                        }
+                      />
+                      {errors.checkList?.[index]?.description && (
+                        <small
+                          style={{ fontSize: "10px" }}
+                          className="danger-text"
+                        >
+                          {errors.checkList[index]?.description?.message}
+                        </small>
+                      )}
+                    </td>
+                    <td colSpan={2} className="text-center border-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        {...register(`checkList.${index}.isMandatory`)}
+                        defaultChecked={item.isMandatory}
+                      />
+                    </td>
+                    <td className="text-center border-0">
+                      <button
+                        type="button"
+                        onClick={() => removeChecklistItem(index)}
+                        className="btn btn-xs btn-icon btn-text-secondary"
+                      >
+                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
+                          title="Remove Check"
+                          data-bs-original-title="Remove check"></i>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+          <button
+            type="button"
+            className="btn btn-xs btn-primary mt-2"
+            onClick={addChecklistItem}
+          >
+            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
+              title="Add Check"
+              data-bs-original-title="Add check" ></i>
+          </button>
+        </div>
+
+        <div className="col-12 text-end mt-3">
+          <button
+            type="reset"
+            className="btn btn-sm btn-label-secondary me-3"
+            onClick={handleClose}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary">
+            {isLoading ? "Please Wait" : "Submit"}
+          </button>
+
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default CreateActivity;

src/components/master/EditActivity.jsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { MasterRespository } from "../../repositories/MastersRepository";
+import showToast from "../../services/toastService";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
+import { useUpdateActivity } from "../../hooks/masterHook/useMaster";
+import Label from "../common/Label";
+
+
+const schema = z.object({
+  activityName: z.string().min(1, { message: "Activity name is required" }),
+  unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
+  checkList: z
+    .array(
+      z.object({
+        id: z.any().default(null),
+        description: z.string().min(1, { message: "Checklist item cannot be empty" }),
+        isMandatory: z.boolean().default(false),
+      })
+    )
+    .optional(),
+});
+
+
+const UpdateActivity = ({ activity = null, whichService = null, close }) => {
+  const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset,
+    setError,
+    clearErrors,
+    getValues,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      id: activity?.id,
+      activityName: activity?.activityName,
+      unitOfMeasurement: activity?.unitOfMeasurement,
+      checkList: activity?.checkLists || [],
+    },
+  });
+
+  const { fields: checkListItems, append, remove } = useFieldArray({
+    control,
+    name: "checkList",
+  });
+
+  useEffect(() => {
+    if (activity) {
+      reset({
+        id: activity.id,
+        activityName: activity.activityName,
+        unitOfMeasurement: activity.unitOfMeasurement,
+        checkList: activity.checkLists || [],
+      });
+    }
+  }, [activity, reset]);
+
+  const addChecklistItem = () => {
+    const values = getValues("checkList");
+    const lastIndex = checkListItems.length - 1;
+
+    if (
+      checkListItems.length > 0 &&
+      (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
+    ) {
+      setError(`checkList.${lastIndex}.description`, {
+        type: "manual",
+        message: "Please fill this checklist item before adding another.",
+      });
+      return;
+    }
+
+    clearErrors(`checkList.${lastIndex}.description`);
+    append({ id: null, description: "", isMandatory: false });
+  };
+
+  const removeChecklistItem = (index) => {
+    remove(index);
+  };
+
+  const handleChecklistChange = (index, value) => {
+    setValue(`checkList.${index}`, value);
+  };
+
+  const onSubmit = (formData) => {
+    const payload = { ...formData, id: activity.id };
+    updateActivity({ id: activity.id, payload });
+  };
+
+
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="row">
+        {/* Activity Name */}
+        <div className="col-md-6 text-start">
+          <Label className="form-label" required>Activity Name</Label>
+          <input
+            type="text"
+            {...register("activityName")}
+            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
+          />
+          {errors.activityName && (
+            <div className="text-danger">{errors.activityName.message}</div>
+          )}
+        </div>
+
+        {/* Unit of Measurement */}
+        <div className="col-md-6 text-start">
+          <Label className="form-label" required>Measurement</Label>
+          <input
+            type="text"
+            {...register("unitOfMeasurement")}
+            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
+          />
+          {errors.unitOfMeasurement && (
+            <div className="text-danger">{errors.unitOfMeasurement.message}</div>
+          )}
+        </div>
+
+        {/* Checklist */}
+        <div className="col-md-12 text-start mt-1">
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
+          {checkListItems.length > 0 && (
+            <table className="table mt-1  border-0">
+              <thead className="py-0 my-0 table-border-top-0">
+                <tr className="py-1">
+                  <th colSpan={2} className="py-1">
+                    <small>Name</small>
+                  </th>
+                  <th colSpan={2} className="py-1 text-center">
+                    <small>Is Mandatory</small>
+                  </th>
+                  <th className="text-center py-1">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {checkListItems.map((item, index) => (
+                  <tr key={item.id} className="border-top-0">
+                    <td colSpan={2} className=" border-0">
+                      <input
+                        className="d-none"
+                        {...register(`checkList.${index}.id`)}
+                      ></input>
+                      <input
+                        {...register(`checkList.${index}.description`)}
+                        className="form-control form-control-sm"
+                        placeholder={`Checklist item ${index + 1}`}
+                        onChange={(e) =>
+                          handleChecklistChange(index, e.target.value)
+                        }
+                      />
+                      {errors.checkList?.[index]?.description && (
+                        <small
+                          style={{ fontSize: "10px" }}
+                          className="danger-text"
+                        >
+                          {errors.checkList[index]?.description?.message}
+                        </small>
+                      )}
+                    </td>
+                    <td colSpan={2} className="text-center border-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        {...register(`checkList.${index}.isMandatory`)}
+                        defaultChecked={item.isMandatory}
+                      />
+                    </td>
+                    <td className="text-center border-0">
+                      <button
+                        type="button"
+                        onClick={() => removeChecklistItem(index)}
+                        className="btn btn-xs btn-icon btn-text-secondary"
+
+                      >
+                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
+                          title="Add Check"
+                          data-bs-original-title="Add check"  ></i>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+
+
+          <button
+            type="button"
+            className="btn btn-xs btn-primary mt-2"
+            onClick={addChecklistItem}
+          >
+            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
+              title="Add Check"
+              data-bs-original-title="Add check" ></i>
+          </button>
+        </div>
+
+        {/* Submit / Cancel */}
+        <div className="col-12 text-end mt-3">
+          <button
+            type="button"
+            className="btn btn-sm btn-label-secondary me-3"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary">
+            {isLoading ? "Please Wait" : "Submit"}
+          </button>
+
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default UpdateActivity;

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/ManageDocumentCategory.jsx

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

src/components/master/ManageDocumentType.jsx

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

src/components/master/MasterModal.jsx

@@ -3,6 +3,8 @@ import CreateRole from "./CreateRole";
 import EditRole from "./EditRole";
 import CreateJobRole from "./CreateJobRole";
 import EditJobRole from "./EditJobRole";
+import CreateActivity from "./CreateActivity";
+import EditActivity from "./EditActivity";
 import CreateWorkCategory from "./CreateWorkCategory";
 import EditWorkCategory from "./EditWorkCategory";
 import CreateCategory from "./CreateContactCategory";
@@ -16,10 +18,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;
   }
 
@@ -34,6 +36,8 @@ const MasterModal = ({ modaldata, closeModal }) => {
     ),
     "Job Role": <CreateJobRole onClose={closeModal} />,
     "Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
+    "Activity": <CreateActivity onClose={closeModal} />,
+    "Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
     "Work Category": <CreateWorkCategory onClose={closeModal} />,
     "Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
     "Contact Category": <CreateCategory data={item} onClose={closeModal} />,
@@ -58,21 +62,18 @@ 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 (
+  return modalComponents[modalType] || null;
-    <div className="p-2 p-md-1">
-      <div className="text-center">
-        <p className="fs-5 fw-semibold">{`${(masterType, " ", modalType)}`}</p>
-      </div>
-      {modalComponents[modalType] || null}
-    </div>
-  );
 };
 
 export default MasterModal;

src/components/master/Services/ManageActivity.jsx

@@ -137,8 +137,8 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="px-7">
       {/* <h6>Create Activity</h6> */}
-      <div className="row border border-1 border-secondary rounded-3 mt-2">
+      <div className="row">
-        <div className="col-6 text-start mt-3">
+        <div className="col-6 text-start">
           <Label className="form-label" required>
             Activity
           </Label>
@@ -154,7 +154,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           )}
         </div>
 
-        <div className="col-6 text-start mt-3">
+        <div className="col-6 text-start">
           <Label className="form-label" required>
             Measurement
           </Label>
@@ -170,7 +170,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           )}
         </div>
 
-        <div className="col-md-12 text-start mt-3">
+        <div className="col-md-12 text-start mt-1">
           <label className="py-1 form-label my-0">
             Add Check List <i
               className="bx bx-plus-circle text-primary cursor-pointer"
@@ -248,7 +248,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
         
         </div>
 
-        <div className="col-12 text-end mt-3 mb-4">
+        <div className="col-12 text-end mt-3">
           <button
             type="reset"
             className="btn btn-sm btn-label-secondary me-3"

src/components/master/Services/ManageGroup.jsx

@@ -53,55 +53,55 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
 
   let isPending = isCreating || isUpdating;
   return (
-    <form className="row px-12" onSubmit={handleSubmit(onSubmit)} >
+    <form className="row px-12" onSubmit={handleSubmit(onSubmit)} cl>
-      <div className="border border-1 border-secondary rounded-3 p-2 mt-2">
+      <div className="col-12 col-md-12 text-start">
-        <div className="col-12 col-md-12 text-start">
+        <Label className="form-label" required>
-          <Label className="form-label" required>
+          Group Name
-            Group Name
+        </Label>
-          </Label>
+        <input
-          <input
+          type="text"
-            type="text"
+          {...register("name")}
-            {...register("name")}
+          className={`form-control form-control-sm ${
-            className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
+            errors.name ? "is-invalids" : ""
-              }`}
+          }`}
-          />
+        />
-          {errors.name && (
+        {errors.name && (
-            <p className="danger-text m-0">{errors.name.message}</p>
+          <p className="danger-text m-0">{errors.name.message}</p>
-          )}
+        )}
-        </div>
+      </div>
-        <div className="col-12 col-md-12 text-start mb-2">
+      <div className="col-12 col-md-12 text-start mb-2">
-          <Label className="form-label" htmlFor="description" required>
+        <Label className="form-label" htmlFor="description" required>
-            Description
+          Description
-          </Label>
+        </Label>
-          <textarea
+        <textarea
-            rows="3"
+          rows="3"
-            {...register("description")}
+          {...register("description")}
-            className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
+          className={`form-control form-control-sm ${
-              }`}
+            errors.description ? "is-invalids" : ""
-          ></textarea>
+          }`}
+        ></textarea>
 
-          {errors.description && (
+        {errors.description && (
-            <p className="danger-text m-0">{errors.description.message}</p>
+          <p className="danger-text m-0">{errors.description.message}</p>
-          )}
+        )}
-        </div>
+      </div>
 
-        <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end">
-          <button
+        <button
-            className="btn btn-sm btn-label-secondary me-3"
+          className="btn btn-xs btn-label-secondary me-3"
-            aria-label="Close"
+          aria-label="Close"
-            disabled={isPending}
+          disabled={isPending}
-            onClick={close}
+          onClick={close}
-          >
+        >
-            Cancel
+          Cancel
-          </button>
+        </button>
-          <button
+        <button
-            type="submit"
+          type="submit"
-            className="btn btn-sm btn-primary"
+          className="btn btn-xs btn-primary"
-            disabled={isPending}
+          disabled={isPending}
-          >
+        >
-            {isPending ? "Please Wait..." : group ? "Update" : "Submit"}
+          {isPending ? "Please Wait..." : group ? "Update" : "Submit"}
-          </button>
+        </button>
-        </div>
       </div>
     </form>
   );

src/components/master/Services/ServicesGroups.jsx

@@ -37,6 +37,7 @@ const ServiceGroups = ({ service }) => {
 
     <div className="w-100 my-2">
       
+      <p className="fs-5 fw-semibold">Manage Service</p>
       <div className="accordion" id="accordionExample">
         <div className="accordion-item active shadow-none">
           {/* Service Header */}
@@ -81,8 +82,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;