Calling API in Attendance Dropdown for showing Organization dropdown.

public/assets/css/core-extend.css

@@ -9,274 +9,4 @@
 }
 .table_header_border {
  border-bottom:2px solid var(--bs-table-border-color) ;
-}
+}
-
-
-.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,22 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react'
-import { useOrganizationModal } from "./hooks/useOrganization";
+import { useOrganizationModal } from './hooks/useOrganization';
-import OrganizationModal from "./components/Organization/OrganizationModal";
+import OrganizationModal from './components/Organization/OrganizationModal';
-import { useAuthModal, useModal } from "./hooks/useAuth";
-import SwitchTenant from "./pages/authentication/SwitchTenant";
-import ChangePasswordPage from "./pages/authentication/ChangePassword";
 
 const ModalProvider = () => {
-  const { isOpen, onClose } = useOrganizationModal();
+  const { isOpen,onClose } = useOrganizationModal();
-  const { isOpen: isAuthOpen } = useAuthModal();
+ 
-  const {isOpen:isChangePass}  = useModal("ChangePassword")
+  return <>{isOpen && <OrganizationModal />}</>; 
-
-  return (
-    <>
-      {isOpen && <OrganizationModal />}
-      {isAuthOpen && <SwitchTenant />}
-      {isChangePass && <ChangePasswordPage /> }
-    </>
-  );
 };
 
-export default ModalProvider;
+
+export default ModalProvider

src/components/Activities/Attendance.jsx

@@ -12,19 +12,22 @@ 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 }) => {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const [todayDate, setTodayDate] = useState(new Date());
   const [ShowPending, setShowPending] = useState(false);
+  // const selectedProject = useSelector(
+  //   (store) => store.localVariables.projectId
+  // );
   const selectedProject = useSelectedProject();
   const {
     attendance,
     loading: attLoading,
     recall: attrecall,
     isFetching
-  } = useAttendance(selectedProject, organizationId);
+  } = useAttendance(selectedProject);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
       (att) => att?.checkInTime !== null && att?.checkOutTime === null
@@ -64,6 +67,43 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     });
   }, [group1, group2, searchTerm]);
 
+  // const finalFilteredData = useMemo(() => {
+  //   const combinedData = [...group1, ...group2];
+
+  //   let tempData = combinedData;
+
+  //   // Search filter
+  //   if (searchTerm) {
+  //     const lowercasedSearchTerm = searchTerm.toLowerCase();
+  //     tempData = tempData.filter((item) => {
+  //       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+  //       const role = item.jobRoleName?.toLowerCase() || "";
+  //       return (
+  //         fullName.includes(lowercasedSearchTerm) ||
+  //         role.includes(lowercasedSearchTerm) // also search by role
+  //       );
+  //     });
+  //   }
+
+  //   // Organization filter
+  //   if (filters?.selectedOrganization) {
+  //     tempData = tempData.filter(
+  //       (item) => item.organization?.name === filters.selectedOrganization
+  //     );
+  //   }
+
+  //   // Services filter
+  //   if (filters?.selectedServices?.length > 0) {
+  //     tempData = tempData.filter((item) =>
+  //       filters.selectedServices.includes(item.service?.name)
+  //     );
+  //   }
+
+  //   return tempData;
+  // }, [group1, group2, searchTerm, filters]);
+
+
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     finalFilteredData,
     ITEMS_PER_PAGE
@@ -138,7 +178,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                 <tr className="border-top-1">
                   <th colSpan={2}>Name</th>
                   <th>Role</th>
-                  <th>Organization</th>
                   <th>
                     <i className="bx bxs-down-arrow-alt text-success"></i>
                     Check-In
@@ -187,8 +226,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                         </td>
 
                         <td>{item.jobRoleName}</td>
-                        <td>{item.organizationName || "--"}</td>
-
                         <td>
                           {item.checkInTime
                             ? convertShortTime(item.checkInTime)
@@ -212,11 +249,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                     ))}
                 {!attendance && (
                   <tr>
-                    <td
+                    <td colSpan={6} className="text-center text-secondary" style={{ height: "200px" }}>
-                      colSpan={7}
-                      className="text-center text-secondary"
-                      style={{ height: "200px" }}
-                    >
                       No employees assigned to the project!
                     </td>
                   </tr>
@@ -224,7 +257,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
               </tbody>
             </table>
 
-
             {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">

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,222 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
+const AttendanceLog = ({ handleModalData, searchTerm }) => {
-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);
-
-  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 +256,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 +269,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 ? (
@@ -213,7 +284,6 @@ useEffect(() => {
                   Name
                 </th>
                 <th className="border-top-1">Date</th>
-                <th>Organization</th>
                 <th>
                   <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
                   Check-In
@@ -232,9 +302,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) {
@@ -243,7 +313,7 @@ useEffect(() => {
                       key={`header-${currentDate}`}
                       className="table-row-header"
                     >
-                      <td colSpan={8} className="text-start">
+                      <td colSpan={6} className="text-start">
                         <strong>
                           {moment(currentDate).format("DD-MM-YYYY")}
                         </strong>
@@ -273,7 +343,6 @@ useEffect(() => {
                         attendance.checkInTime || attendance.checkOutTime
                       ).format("DD-MMM-YYYY")}
                     </td>
-                    <td>{attendance.organizationName || "--"}</td>
                     <td>{convertShortTime(attendance.checkInTime)}</td>
                     <td>
                       {attendance.checkOutTime
@@ -295,12 +364,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 +390,8 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
+                    }`}
-                  }`}
                 >
                   <button
                     className="page-link"
@@ -340,9 +403,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>
 
@@ -120,7 +120,7 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
             modeldata?.checkInTime && !modeldata?.checkOutTime
               ? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
               : formatDate(today)
-          } 
+          }
           disabled
         />
       </div>

src/components/Activities/InfraPlanning.jsx

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from "react";
 import "../../components/Project/ProjectInfra.css";
 import BuildingModel from "../Project/Infrastructure/BuildingModel";
@@ -7,33 +8,25 @@ import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
 import TaskModel from "../Project/Infrastructure/TaskModel";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import {
+import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
-  useCurrentService,
+import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-  useProjectDetails,
+import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
-  useProjectInfra,
+import {useDispatch, useSelector} from "react-redux";
-  useProjects,
+import {useProfile} from "../../hooks/useProfile";
-} from "../../hooks/useProjects";
+import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {
-  APPROVE_TASK,
-  ASSIGN_REPORT_TASK,
-  MANAGE_PROJECT_INFRA,
-} from "../../utils/constants";
-import { useDispatch, useSelector } from "react-redux";
-import { useProfile } from "../../hooks/useProfile";
-import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
 import InfraTable from "../Project/Infrastructure/InfraTable";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import Loader from "../common/Loader";
 
+
+
+
 const InfraPlanning = () => {
   const { profile: LoggedUser, refetch: fetchData } = useProfile();
   const dispatch = useDispatch();
   const selectedProject = useSelectedProject();
-  const selectedService = useCurrentService();
 
-  const { projectInfra, isLoading, isError, error, isFetched } =
+  const { projectInfra, isLoading, isError, error, isFetched } = useProjectInfra(selectedProject);
-    useProjectInfra(selectedProject, selectedService || "" );
 
   const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const canApproveTask = useHasUserPermission(APPROVE_TASK);
@@ -70,9 +63,9 @@ const InfraPlanning = () => {
 
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
-      <div className="card-body" style={{ padding: "0.5rem" }}>
+        <div className="card-body" style={{ padding: "0.5rem" }}>
-        <div className="row">
+          <div className="row">
-          <InfraTable buildings={projectInfra} projectId={selectedProject} />
+            <InfraTable buildings={projectInfra} projectId={selectedProject} />
         </div>
       </div>
     </div>
@@ -80,3 +73,4 @@ const InfraPlanning = () => {
 };
 
 export default InfraPlanning;
+

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  }) => {
-  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
-  );
 
   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 ? (
@@ -119,28 +128,24 @@ const Regularization = ({
             <tr>
               <th colSpan={2}>Name</th>
               <th>Date</th>
-              <th>Organization</th>
               <th>
                 <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
               </th>
               <th>
                 <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
               </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}
+                    ></Avatar>
                     <div className="d-flex flex-column">
                       <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
@@ -151,28 +156,9 @@ const Regularization = ({
                   </div>
                 </td>
                 <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
-
-                <td>{att.organizationName || "--"}</td>
-
                 <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
@@ -180,6 +166,7 @@ const Regularization = ({
                     handleRequest={handleRequest}
                     refresh={refetch}
                   />
+                  {/* </div> */}
                 </td>
               </tr>
             ))}
@@ -197,7 +184,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 +222,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
@@ -385,7 +383,7 @@ const ReportTaskComments = ({
                   : "Comment"}
               </button>
             </span>
-          </div>  
+          </div>
         </form>
 
         <ul

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,15 +128,27 @@ 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}
-          />
+          >
-        </div>        
+            <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>
           <select
@@ -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 +0,0 @@
-import React, { useState } from "react";
-import { useCurrentService } from "../../hooks/useProjects";
-import { useSelectedProject } from "../../slices/apiDataManager";
-import { FormProvider, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  TaskReportDefaultValue,
-  TaskReportFilterSchema,
-} 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 [resetKey, setResetKey] = useState(0);
-  const selectedProject = useSelectedProject();
-  const selectedService = useCurrentService();
-  const { data } = useTaskFilter(selectedProject);
-
-  const methods = useForm({
-    resolver: zodResolver(TaskReportFilterSchema),
-    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}>
-      <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
-        <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">
-          <SelectMultiple
-            name="buildingIds"
-            label="Building"
-            options={data?.buildings}
-            labelKey="name"
-            valueKey="id"
-          />
-        </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">
-          <button
-            type="button"
-            className="btn btn-label-secondary btn-sm"
-            onClick={onClear}
-          >
-            Clear
-          </button>
-          <button type="submit" className="btn btn-primary btn-sm">
-            Apply
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-};
-
-export default TaskReportFilterPanel;

src/components/DailyProgressRport/TaskReportList.jsx

@@ -1,301 +0,0 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { useTaskList } from "../../hooks/useTasks";
-import { useSelectedProject } from "../../slices/apiDataManager";
-import { useProjectName } from "../../hooks/useProjects";
-import DailyProgrssReport, {
-  useDailyProgrssContext,
-} from "../../pages/DailyProgressReport/DailyProgrssReport";
-import { useDispatch } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
-import {
-  APPROVE_TASK,
-  ASSIGN_REPORT_TASK,
-  ITEMS_PER_PAGE,
-} from "../../utils/constants";
-import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import Pagination from "../common/Pagination";
-import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
-import HoverPopup from "../common/HoverPopup";
-
-const TaskReportList = () => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [filters, setFilters] = useState({
-    selectedBuilding: "",
-    selectedFloors: [],
-    selectedActivities: [],
-  });
-  const dispatch = useDispatch();
-  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
-  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
-
-  const { service, openModal, closeModal,filter } = useDailyProgrssContext();
-  const selectedProject = useSelectedProject();
-  const { projectNames } = useProjectName();
-
-  const { data, isLoading, isError, error } = useTaskList(
-    selectedProject,
-    ITEMS_PER_PAGE,
-    currentPage,
-    service,filter
-  );
-
-  const ProgrssReportColumn = [
-    {
-      key: "activity",
-      label: "Activity",
-      getValue: (task) => task.workItem.activityMaster?.activityName || "N/A",
-      align: "text-start",
-    },
-    {
-      key: "assigned",
-      label: "Total Assigned",
-      getValue: (task) => task.plannedTask ?? "N/A",
-      align: "text-start",
-    },
-    {
-      key: "completed",
-      label: "Completed",
-      getValue: (task) => task.completedTask ?? "N/A",
-      align: "text-start",
-    },
-    {
-      key: "assignAt",
-      label: "Assign Date",
-      getValue: (task) =>
-        task.assignmentDate ? formatUTCToLocalTime(task.assignmentDate) : "N/A",
-      align: "text-start",
-    },
-    {
-      key: "team",
-      label: "Team",
-      getValue: (task) =>
-        task.teamMembers?.map((m) => `${m.firstName} ${m.lastName}`).join(", ") ||
-        "N/A",
-      align: "text-start",
-    },
-  ];
-
-  const paginate = (page) => {
-    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
-      setCurrentPage(page);
-    }
-  };
-
-  useEffect(() => {
-    if (!selectedProject && projectNames.length > 0) {
-      dispatch(setProjectId(projectNames[0].id));
-    }
-  }, [selectedProject, projectNames, dispatch]);
-
-  useEffect(() => {
-    setFilters({
-      selectedBuilding: "",
-      selectedFloors: [],
-      selectedActivities: [],
-    });
-  }, [selectedProject]);
-
-  // Filter and Group wise data
-
-  const filteredTasks = useMemo(() => {
-    if (!data?.data) return [];
-    return data?.data.filter((task) => {
-      const { selectedBuilding, selectedFloors, selectedActivities } = filters;
-
-      if (
-        selectedBuilding &&
-        task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding
-      )
-        return false;
-      if (
-        selectedFloors.length > 0 &&
-        !selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
-      )
-        return false;
-      if (
-        selectedActivities.length > 0 &&
-        !selectedActivities.includes(
-          task?.workItem?.activityMaster?.activityName
-        )
-      )
-        return false;
-
-      return true;
-    });
-  }, [data?.data, filters, currentPage]);
-
-  const groupedTasks = useMemo(() => {
-    const groups = {};
-    filteredTasks.forEach((task) => {
-      const date = task.assignmentDate.split("T")[0];
-      if (!groups[date]) groups[date] = [];
-      groups[date].push(task);
-    });
-    return Object.keys(groups)
-      .sort((a, b) => new Date(b) - new Date(a))
-      .map((date) => ({ date, tasks: groups[date] }));
-  }, [filteredTasks, paginate, currentPage, selectedProject]);
-
-  const renderTeamMembers = (task, refIndex) => (
-    <div
-      key={refIndex}
-      tabIndex="0"
-      className="d-flex align-items-center avatar-group justify-content-center"
-      data-bs-toggle="popover"
-      data-bs-trigger="focus"
-      data-bs-placement="left"
-      data-bs-html="true"
-      data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
-          ${task.teamMembers
-          .map(
-            (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) || ""
-              }
-                </span>
-              </div>
-              <span>${m.firstName} ${m.lastName}</span>
-            </div>`
-          )
-          .join("")}
-        </div>
-      `}
-    >
-      {task.teamMembers.slice(0, 3).map((m) => (
-        <div
-          key={m.id}
-          className="avatar avatar-xs"
-          title={`${m.firstName} ${m.lastName}`}
-        >
-          <span className="avatar-initial rounded-circle bg-label-primary">
-            {m?.firstName.slice(0, 1)}
-          </span>
-        </div>
-      ))}
-      {task.teamMembers.length > 3 && (
-        <div
-          className="avatar avatar-xs"
-          title={`${task.teamMembers.length - 3} more`}
-        >
-          <span className="avatar-initial rounded-circle bg-label-secondary">
-            +{task.teamMembers.length - 3}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-
-  if (isLoading) return <TaskReportListSkeleton />;
-  if (isError) return <div>Loading....</div>;
-  return (
-    <div className="mt-2 table-responsive text-nowrap">
-      <table className="table">
-        <thead>
-          <tr>
-            <th className="text-start">Activity</th>
-            <th>
-              <span>
-                Total Pending{" "}
-                <HoverPopup
-                  title="Total Pending Task"
-                  content={<p>This shows the total pending tasks for each activity on that date.</p>}
-                >
-                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                </HoverPopup>
-              </span>
-            </th>
-            <th>
-              <span>
-                Reported/Planned{" "}
-                <HoverPopup
-                  title="Reported and Planned Task"
-                  content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
-                >
-                  <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
-                </HoverPopup>
-              </span>
-            </th>
-            <th>Assign Date</th>
-            <th>Team</th>
-            <th className="text-center">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {groupedTasks.length === 0 && (
-            <tr>
-              <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
-                No reports available
-              </td>
-            </tr>
-          )}
-
-          {groupedTasks.map(({ date, tasks }) => (
-            <React.Fragment key={date}>
-              <tr className="table-row-header text-start">
-                <td colSpan={6}>
-                  <strong>{formatUTCToLocalTime(date)}</strong>
-                </td>
-              </tr>
-              {tasks.map((task, idx) => (
-                <tr key={task.id || idx}>
-                  <td className="flex-wrap text-start">
-                    <div>
-                      {task.workItem.activityMaster?.activityName || "No Activity Name"}
-                    </div>
-                    <div className="text-sm py-2">
-                      {task.workItem.workArea?.floor?.building?.name} ›{" "}
-                      {task.workItem.workArea?.floor?.floorName} ›{" "}
-                      {task.workItem.workArea?.areaName}
-                    </div>
-                  </td>
-                  <td>
-                    {formatNumber(task.workItem.plannedWork)}
-                  </td>
-                  <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
-                  <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                  <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                  <td className="text-center">
-                    <div className="d-flex justify-content-end gap-2">
-                      {ReportTaskRights && !task.reportedDate && (
-                        <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
-                          Report
-                        </button>
-                      )}
-                      {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                        <button
-                          className="btn btn-xs btn-warning"
-                          onClick={() => openModal("comments", { task, isActionAllow: true })}
-                        >
-                          QC
-                        </button>
-                      )}
-                      <button
-                        className="btn btn-xs btn-primary"
-                        onClick={() => openModal("comments", { task, isActionAllow: false })}
-                      >
-                        Comment
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </React.Fragment>
-          ))}
-        </tbody>
-      </table>
-      {data?.data?.length > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={data.totalPages}
-          onPageChange={paginate}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TaskReportList;

src/components/DailyProgressRport/TaskRepprtListSkeleton.jsx

@@ -1,62 +0,0 @@
-
-const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
-  <div
-    className={`skeleton mb-2 ${className}`}
-    style={{
-      height,
-      width,
-    }}
-  ></div>
-);
-export const TaskReportListSkeleton = () => {
-  const skeletonRows = 8; // Number of placeholder rows
-
-  return (
-    <div>
-      <table className="table">
-        <thead>
-          <tr>
-            <th>Activity</th>
-            <th>Assigned</th>
-            <th>Completed</th>
-            <th>Assign On</th>
-            <th>Team</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {[...Array(skeletonRows)].map((_, idx) => (
-            <tr key={idx}>
-              <td>
-                <SkeletonLine height={16} width="70%" />
-                <SkeletonLine height={12} width="50%" />
-              </td>
-              <td>
-                <SkeletonLine height={16} width="60%" />
-              </td>
-              <td>
-                <SkeletonLine height={16} width="60%" />
-              </td>
-              <td>
-                <SkeletonLine height={16} width="80%" />
-              </td>
-              <td className="text-center">
-                <div className="d-flex justify-content-center gap-1">
-                  {[...Array(3)].map((_, i) => (
-                    <SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
-                  ))}
-                </div>
-              </td>
-              <td>
-                <div className="d-flex justify-content-end gap-2">
-                  <SkeletonLine height={24} width="60px" />
-                  <SkeletonLine height={24} width="60px" />
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};

src/components/DailyProgressRport/TaskRportScheam.jsx

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

src/components/Dashboard/Activity.jsx

@@ -1,194 +1,194 @@
-// import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
-// import LineChart from "../Charts/LineChart";
+import LineChart from "../Charts/LineChart";
-// import { useProjects } from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects";
-// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
+import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
-// import ApexChart from "../Charts/Circlechart";
+import ApexChart from "../Charts/Circlechart";
 
-// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
+const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
 
-// const Activity = () => {
+const Activity = () => {
-//     const { projects } = useProjects();
+    const { projects } = useProjects();
-//     const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
+    const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
-//     const [selectedDate, setSelectedDate] = useState(today);
+    const [selectedDate, setSelectedDate] = useState(today);
-//     const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
+    const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
-//     const initialProjectId = storedProjectId || "all";
+    const initialProjectId = storedProjectId || "all";
-//     const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+    const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
-//     const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
+    const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
-//     const [activeTab, setActiveTab] = useState("all");
+    const [activeTab, setActiveTab] = useState("all");
 
-//     const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
+    const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
-//         useDashboard_ActivityData(selectedDate, selectedProjectId);
+        useDashboard_ActivityData(selectedDate, selectedProjectId);
 
-//     useEffect(() => {
+    useEffect(() => {
-//         if (selectedProjectId === "all") {
+        if (selectedProjectId === "all") {
-//             setDisplayedProjectName("All Projects");
+            setDisplayedProjectName("All Projects");
-//         } else if (projects) {
+        } else if (projects) {
-//             const foundProject = projects.find((p) => p.id === selectedProjectId);
+            const foundProject = projects.find((p) => p.id === selectedProjectId);
-//             setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
-//         } else {
+        } else {
-//             setDisplayedProjectName("Select Project");
+            setDisplayedProjectName("Select Project");
-//         }
+        }
 
-//         localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
+        localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
-//     }, [selectedProjectId, projects]);
+    }, [selectedProjectId, projects]);
 
-//     const handleProjectSelect = (projectId) => {
+    const handleProjectSelect = (projectId) => {
-//         setSelectedProjectId(projectId);
+        setSelectedProjectId(projectId);
-//     };
+    };
 
-//     const handleDateChange = (e) => {
+    const handleDateChange = (e) => {
-//         setSelectedDate(e.target.value);
+        setSelectedDate(e.target.value);
-//     };
+    };
 
-//     return (
+    return (
-//         <div className="card h-100">
+        <div className="card h-100">
-//             <div className="card-header">
+            <div className="card-header">
-//                 <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
-//                     <div className="card-title mb-0 text-start">
+                    <div className="card-title mb-0 text-start">
-//                         <h5 className="mb-1">Activity</h5>
+                        <h5 className="mb-1">Activity</h5>
-//                         <p className="card-subtitle text-primary">Activity Progress Chart</p>
+                        <p className="card-subtitle">Activity Progress Chart</p>
-//                     </div>
+                    </div>
 
-//                     <div className="btn-group">
+                    <div className="btn-group">
-//                         <button
+                        <button
-//                             className="btn btn-outline-primary btn-sm dropdown-toggle"
+                            className="btn btn-outline-primary btn-sm dropdown-toggle"
-//                             type="button"
+                            type="button"
-//                             data-bs-toggle="dropdown"
+                            data-bs-toggle="dropdown"
-//                             aria-expanded="false"
+                            aria-expanded="false"
-//                         >
+                        >
-//                             {displayedProjectName}
+                            {displayedProjectName}
-//                         </button>
+                        </button>
-//                         <ul className="dropdown-menu">
+                        <ul className="dropdown-menu">
-//                             <li>
+                            <li>
-//                                 <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
+                                <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
-//                                     All Projects
+                                    All Projects
-//                                 </button>
+                                </button>
-//                             </li>
+                            </li>
-//                             {projects?.map((project) => (
+                            {projects?.map((project) => (
-//                                 <li key={project.id}>
+                                <li key={project.id}>
-//                                     <button
+                                    <button
-//                                         className="dropdown-item"
+                                        className="dropdown-item"
-//                                         onClick={() => handleProjectSelect(project.id)}
+                                        onClick={() => handleProjectSelect(project.id)}
-//                                     >
+                                    >
-//                                         {project.name}
+                                        {project.name}
-//                                     </button>
+                                    </button>
-//                                 </li>
+                                </li>
-//                             ))}
+                            ))}
-//                         </ul>
+                        </ul>
-//                     </div>
+                    </div>
-//                 </div>
+                </div>
-//             </div>
+            </div>
 
-//             {/* ✅ Date Picker Aligned Left with Padding */}
+            {/* ✅ Date Picker Aligned Left with Padding */}
-//             <div className="d-flex justify-content-start ps-3 mb-3">
+            <div className="d-flex justify-content-start ps-3 mb-3">
-//                 <div style={{ width: "150px" }}>
+                <div style={{ width: "150px" }}>
-//                     <input
+                    <input
-//                         type="date"
+                        type="date"
-//                         className="form-control"
+                        className="form-control"
-//                         value={selectedDate}
+                        value={selectedDate}
-//                         onChange={handleDateChange}
+                        onChange={handleDateChange}
-//                     />
+                    />
-//                 </div>
+                </div>
-//             </div>
+            </div>
 
-//             {/* Tabs */}
+            {/* Tabs */}
-//             <ul className="nav nav-tabs " role="tablist">
+            <ul className="nav nav-tabs " role="tablist">
-//                 <li className="nav-item">
+                <li className="nav-item">
-//                     <button
+                    <button
-//                         type="button"
+                        type="button"
-//                         className={`nav-link ${activeTab === "all" ? "active" : ""}`}
+                        className={`nav-link ${activeTab === "all" ? "active" : ""}`}
-//                         onClick={() => setActiveTab("all")}
+                        onClick={() => setActiveTab("all")}
-//                         data-bs-toggle="tab"
+                        data-bs-toggle="tab"
-//                     >
+                    >
-//                         Summary
+                        Summary
-//                     </button>
+                    </button>
-//                 </li>
+                </li>
-//                 <li className="nav-item">
+                <li className="nav-item">
-//                     <button
+                    <button
-//                         type="button"
+                        type="button"
-//                         className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
+                        className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
-//                         onClick={() => setActiveTab("logs")}
+                        onClick={() => setActiveTab("logs")}
-//                         data-bs-toggle="tab"
+                        data-bs-toggle="tab"
-//                     >
+                    >
-//                         Details
+                        Details
-//                     </button>
+                    </button>
-//                 </li>
+                </li>
-//             </ul>
+            </ul>
 
-//             <div className="card-body">
+            <div className="card-body">
-//                 {activeTab === "all" && (
+                {activeTab === "all" && (
-//                     <div className="row justify-content-between">
+                    <div className="row justify-content-between">
-//                         <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
-//                             {isLoading ? (
+                            {isLoading ? (
-//                                 <p>Loading activity data...</p>
+                                <p>Loading activity data...</p>
-//                             ) : isError ? (
+                            ) : isError ? (
-//                                 <p>No data available.</p>
+                                <p>No data available.</p>
-//                             ) : (
+                            ) : (
-//                                 ActivityData && (
+                                ActivityData && (
-//                                     <>
+                                    <>
-//                                         <h5 className="fw-bold mb-0 text-start w-80">
+                                        <h5 className="fw-bold mb-0 text-start w-80">
-//                                             <i className="bx bx-task text-info"></i> Allocated Task
+                                            <i className="bx bx-task text-info"></i> Allocated Task
-//                                         </h5>
+                                        </h5>
-//                                         <h4 className="mb-0 fw-bold">
+                                        <h4 className="mb-0 fw-bold">
-//                                             {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                            {ActivityData.totalCompletedWork?.toLocaleString()}/
-//                                             {ActivityData.totalPlannedWork?.toLocaleString()}
+                                            {ActivityData.totalPlannedWork?.toLocaleString()}
-//                                         </h4>
+                                        </h4>
-//                                         <small className="text-muted">Completed / Assigned</small>
+                                        <small className="text-muted">Completed / Assigned</small>
-//                                         <div style={{ maxWidth: "180px" }}>
+                                        <div style={{ maxWidth: "180px" }}>
-//                                             <ApexChart />
+                                            <ApexChart />
-//                                         </div>
+                                        </div>
-//                                     </>
+                                    </>
-//                                 )
+                                )
-//                             )}
+                            )}
-//                         </div>
+                        </div>
 
-//                         <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
-//                             {!isLoading && !isError && ActivityData && (
+                            {!isLoading && !isError && ActivityData && (
-//                                 <>
+                                <>
-//                                     <h5 className="fw-bold mb-0 text-start w-110">
+                                    <h5 className="fw-bold mb-0 text-start w-110">
-//                                         <i className="bx bx-task text-info"></i> Activities
+                                        <i className="bx bx-task text-info"></i> Activities
-//                                     </h5>
+                                    </h5>
-//                                     <h4 className="mb-0 fw-bold">
+                                    <h4 className="mb-0 fw-bold">
-//                                         {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                        {ActivityData.totalCompletedWork?.toLocaleString()}/
-//                                         {ActivityData.totalPlannedWork?.toLocaleString()}
+                                        {ActivityData.totalPlannedWork?.toLocaleString()}
-//                                     </h4>
+                                    </h4>
-//                                     <small className="text-muted ">Pending / Assigned</small>
+                                    <small className="text-muted ">Pending / Assigned</small>
-//                                     <div style={{ maxWidth: "180px" }}>
+                                    <div style={{ maxWidth: "180px" }}>
-//                                         <ApexChart />
+                                        <ApexChart />
-//                                     </div>
+                                    </div>
-//                                 </>
+                                </>
-//                             )}
+                            )}
-//                         </div>
+                        </div>
-//                     </div>
+                    </div>
-//                 )}
+                )}
 
-//                 {activeTab === "logs" && (
+                {activeTab === "logs" && (
-//                     <div className="table-responsive">
+                    <div className="table-responsive">
-//                         <table className="table table-bordered table-hover">
+                        <table className="table table-bordered table-hover">
-//                             <thead>
+                            <thead>
-//                                 <tr>
+                                <tr>
-//                                     <th>Activity / Location</th>
+                                    <th>Activity / Location</th>
-//                                     <th>Assigned / Completed</th>
+                                    <th>Assigned / Completed</th>
-//                                 </tr>
+                                </tr>
-//                             </thead>
+                            </thead>
-//                             <tbody>
+                            <tbody>
-//                                 {[{
+                                {[{
-//                                     activity: "Code Review / Remote",
+                                    activity: "Code Review / Remote",
-//                                     assignedToday: 3,
+                                    assignedToday: 3,
-//                                     completed: 2
+                                    completed: 2
-//                                 }].map((log, index) => (
+                                }].map((log, index) => (
-//                                     <tr key={index}>
+                                    <tr key={index}>
-//                                         <td>{log.activity}</td>
+                                        <td>{log.activity}</td>
-//                                         <td>{log.assignedToday} / {log.completed}</td>
+                                        <td>{log.assignedToday} / {log.completed}</td>
-//                                     </tr>
+                                    </tr>
-//                                 ))}
+                                ))}
-//                             </tbody>
+                            </tbody>
-//                         </table>
+                        </table>
-//                     </div>
+                    </div>
-//                 )}
+                )}
-//             </div>
+            </div>
-//         </div>
+        </div>
-//     );
+    );
-// };
+};
 
-// export default Activity;
+export default Activity;

src/components/Dashboard/Attendance.jsx

@@ -1,16 +1,21 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useEffect } from "react";
-import ApexChart from "../Charts/Circle";
+import LineChart from "../Charts/LineChart";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
-import { useSelectedProject } from "../../hooks/useSelectedProject"; // ✅ your custom hook
+import ApexChart from "../Charts/Circle";
+
+const LOCAL_STORAGE_PROJECT_KEY = "selectedAttendanceProjectId";
 
 const Attendance = () => {
   const { projects } = useProjects();
-  const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
+  const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
   const [selectedDate, setSelectedDate] = useState(today);
-
+  const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
-  //  central project selection hook
+  const initialProjectId = storedProjectId || "all";
-const selectedProjectId = useSelectedProject()
+  const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+  const [displayedProjectName, setDisplayedProjectName] =
+    useState("Select Project");
+  const [activeTab, setActiveTab] = useState("Summary");
 
   const {
     dashboard_Attendancedata: AttendanceData,
@@ -18,24 +23,38 @@ const selectedProjectId = useSelectedProject()
     error: isError,
   } = useDashboard_AttendanceData(selectedDate, selectedProjectId);
 
-  // project name derived once
+  useEffect(() => {
-  const displayedProjectName = useMemo(() => {
+    if (selectedProjectId === "all") {
-    if (selectedProjectId === "all") return "All Projects";
+      setDisplayedProjectName("All Projects");
-    const found = projects?.find((p) => p.id === selectedProjectId);
+    } else if (projects) {
-    return found?.name || "Select Project";
+      const foundProject = projects.find((p) => p.id === selectedProjectId);
+      setDisplayedProjectName(
+        foundProject ? foundProject.name : "Select Project"
+      );
+    } else {
+      setDisplayedProjectName("Select Project");
+    }
+
+    localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
   }, [selectedProjectId, projects]);
 
+  const handleProjectSelect = (projectId) => {
+    setSelectedProjectId(projectId);
+  };
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
+
   return (
     <div className="card h-100">
-      {/* Header */}
+      <div className="card-header  mb-1 pb-0 ">
-      <div className="card-header mb-1 pb-0">
+        <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0 ">
-        <div className="d-flex flex-wrap justify-content-between align-items-center">
           <div className="card-title mb-0 text-start">
             <h5 className="mb-1">Attendance</h5>
             <p className="card-subtitle">Daily Attendance Data</p>
           </div>
 
-          {/* Project Dropdown */}
           <div className="btn-group">
             <button
               className="btn btn-outline-primary btn-sm dropdown-toggle"
@@ -49,7 +68,7 @@ const selectedProjectId = useSelectedProject()
               <li>
                 <button
                   className="dropdown-item"
-                  onClick={() => setSelectedProjectId("all")}
+                  onClick={() => handleProjectSelect("all")}
                 >
                   All Projects
                 </button>
@@ -58,7 +77,7 @@ const selectedProjectId = useSelectedProject()
                 <li key={project.id}>
                   <button
                     className="dropdown-item"
-                    onClick={() => setSelectedProjectId(project.id)}
+                    onClick={() => handleProjectSelect(project.id)}
                   >
                     {project.name}
                   </button>
@@ -69,43 +88,52 @@ const selectedProjectId = useSelectedProject()
         </div>
       </div>
 
-      {/* Tabs + Date Picker */}
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
-      <div className="d-flex flex-wrap justify-content-between align-items-center me-5 ms-5">
+        {/* Tabs */}
-        <ul className="nav nav-tabs">
+        <div>
-          <li className="nav-item">
+          <ul className="nav nav-tabs " role="tablist">
-            <button
+            <li className="nav-item">
-              type="button"
+              <button
-              className={`nav-link ${AttendanceData?.activeTab === "Summary" ? "active" : ""}`}
+                type="button"
-              onClick={() => (AttendanceData.activeTab = "Summary")}
+                className={`nav-link ${
-            >
+                  activeTab === "Summary" ? "active" : ""
-              Summary
+                }`}
-            </button>
+                onClick={() => setActiveTab("Summary")}
-          </li>
+                data-bs-toggle="tab"
-          <li className="nav-item">
+              >
-            <button
+                Summary
-              type="button"
+              </button>
-              className={`nav-link ${AttendanceData?.activeTab === "Details" ? "active" : ""}`}
+            </li>
-              onClick={() => (AttendanceData.activeTab = "Details")}
+            <li className="nav-item">
-            >
+              <button
-              Details
+                type="button"
-            </button>
+                className={`nav-link ${
-          </li>
+                  activeTab === "Details" ? "active" : ""
-        </ul>
+                }`}
-        <div className="ps-6 mb-3">
+                onClick={() => setActiveTab("Details")}
-          <input
+                data-bs-toggle="tab"
-            type="date"
+              >
-            className="form-control p-1"
+                Details
-            style={{ width: "120px" }}
+              </button>
-            value={selectedDate}
+            </li>
-            onChange={(e) => setSelectedDate(e.target.value)}
+          </ul>
-          />
+        </div>
+        {/* ✅ Date Picker Aligned Left with Padding */}
+        <div className="ps-6 mb-3 mt-0">
+          <div style={{ width: "120px" }}>
+            <input
+              type="date"
+              className="form-control p-1"
+              // style={{ fontSize: "1rem" }}
+              value={selectedDate}
+              onChange={handleDateChange}
+            />
+          </div>
         </div>
       </div>
 
-      {/* Body */}
       <div className="card-body">
-        {/* Summary */}
+        {activeTab === "Summary" && (
-        {AttendanceData?.activeTab === "Summary" && (
           <div className="row justify-content-center">
             <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
               {isLoading ? (
@@ -115,7 +143,7 @@ const selectedProjectId = useSelectedProject()
               ) : (
                 AttendanceData && (
                   <>
-                    <h5 className="fw-bold mb-0">
+                    <h5 className="fw-bold mb-0 text-center w-100">
                       <i className="bx bx-task text-info"></i> Attendance
                     </h5>
                     <h4 className="mb-0 fw-bold">
@@ -136,9 +164,11 @@ const selectedProjectId = useSelectedProject()
           </div>
         )}
 
-        {/* Details */}
+        {activeTab === "Details" && (
-        {AttendanceData?.activeTab === "Details" && (
+          <div
-          <div className="table-responsive" style={{ maxHeight: "300px" }}>
+            className="table-responsive"
+            style={{ maxHeight: "300px", overflowY: "auto" }}
+          >
             <table className="table table-hover mb-0 text-start">
               <thead>
                 <tr>
@@ -148,17 +178,32 @@ const selectedProjectId = useSelectedProject()
                 </tr>
               </thead>
               <tbody>
-                {AttendanceData?.attendanceTable?.length ? (
+                {AttendanceData?.attendanceTable &&
-                  AttendanceData.attendanceTable.map((r, i) => (
+                AttendanceData.attendanceTable.length > 0 ? (
-                    <tr key={i}>
+                  AttendanceData.attendanceTable.map((record, index) => (
-                      <td>{r.firstName} {r.lastName}</td>
+                    <tr key={index}>
-                      <td>{r.inTime ? new Date(r.inTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "-"}</td>
+                      <td>
-                      <td>{r.outTime ? new Date(r.outTime).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "-"}</td>
+                        {record.firstName} {record.lastName}
+                      </td>
+                      <td>
+                        {new Date(record.inTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
+                      <td>
+                        {new Date(record.outTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
                     </tr>
                   ))
                 ) : (
                   <tr>
-                    <td colSpan="3" className="text-center">No attendance data available</td>
+                    <td colSpan="3" className="text-center">
+                      No attendance data available
+                    </td>
                   </tr>
                 )}
               </tbody>

src/components/Dashboard/AttendanceChart.jsx

@@ -132,7 +132,7 @@ const AttendanceOverview = () => {
             onClick={() => setView("table")}
             title="Table View"
           >
-            <i className="bx bx-list-ul fs-5"></i>
+            <i class="bx bx-list-ul fs-5"></i>
           </button>
         </div>
       </div>

src/components/Dashboard/Projects.jsx

@@ -1,28 +1,33 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
+import GlobalRepository from "../../repositories/GlobalRepository";
 
 const Projects = () => {
-  const {
+  const { projectsCardData } = useDashboardProjectsCardData();
-    data: projectsCardData,
+  const [projectData, setProjectsData] = useState(projectsCardData);
-    isLoading,
-    isError,
-    error,
-    refetch,
-  } = useDashboardProjectsCardData();
 
   useEffect(() => {
-    // When "project" event happens, just refetch
+    setProjectsData(projectsCardData);
-    const handler = () => {
+  }, [projectsCardData]);
-      refetch();
-    };
 
+  const handler = useCallback(
+    async (msg) => {
+        try {
+          const response =
+            await GlobalRepository.getDashboardProjectsCardData();
+          setProjectsData(response.data);
+        } catch (err) {
+          console.error(err);
+        }
+    },
+    [GlobalRepository]
+  );
+
+  useEffect(() => {
     eventBus.on("project", handler);
     return () => eventBus.off("project", handler);
-  }, [refetch]);
+  }, [handler]);
-
-  const totalProjects = projectsCardData?.totalProjects ?? 0;
-  const ongoingProjects = projectsCardData?.ongoingProjects ?? 0;
 
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
@@ -32,29 +37,20 @@ const Projects = () => {
           Projects
         </h5>
       </div>
-
+      <div className="d-flex justify-content-around align-items-start mt-n2">
-      {isLoading ? (
+        <div>
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
+          <h4 className="mb-0 fw-bold">
-          <div className="spinner-border text-primary" role="status">
+            {projectData.totalProjects?.toLocaleString()}
-            <span className="visually-hidden">Loading...</span>
+          </h4>
-          </div>
+          <small className="text-muted">Total</small>
         </div>
-      ) : isError ? (
+        <div>
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
+          <h4 className="mb-0 fw-bold">
-          {error?.message || "Error loading data"}
+            {projectData.ongoingProjects?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Ongoing</small>
         </div>
-      ) : (
+      </div>
-        <div className="d-flex justify-content-around align-items-start mt-n2">
-          <div>
-            <h4 className="mb-0 fw-bold">{totalProjects.toLocaleString()}</h4>
-            <small className="text-muted">Total</small>
-          </div>
-          <div>
-            <h4 className="mb-0 fw-bold">{ongoingProjects.toLocaleString()}</h4>
-            <small className="text-muted">Ongoing</small>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/components/Dashboard/Tasks.jsx

@@ -1,16 +1,10 @@
 import React from "react";
-import { useSelectedProject } from "../../slices/apiDataManager";
+import { useSelector } from "react-redux";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
 
 const TasksCard = () => {
-  const projectId = useSelectedProject();
+  const projectId = useSelector((store) => store.localVariables?.projectId);
-
+  const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
-  const {
-    data: tasksCardData,
-    isLoading,
-    isError,
-    error,
-  } = useDashboardTasksCardData(projectId);
 
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
@@ -20,30 +14,28 @@ const TasksCard = () => {
         </h5>
       </div>
 
-      {isLoading ? (
+      {loading ? (
-        // Loader while fetching
+        // Loader will be displayed when loading is true
         <div className="d-flex justify-content-center align-items-center flex-grow-1">
           <div className="spinner-border text-primary" role="status">
             <span className="visually-hidden">Loading...</span>
           </div>
         </div>
-      ) : isError ? (
+      ) : error ? (
-        // Show error
+        // Error message if there's an error
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
-          {error?.message || "Error loading data"}
-        </div>
       ) : (
-        // Show data
+        // Actual data when loaded successfully
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
             <h4 className="mb-0 fw-bold">
-              {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
+              {tasksCardData?.totalTasks?.toLocaleString()}
             </h4>
             <small className="text-muted">Total</small>
           </div>
           <div>
             <h4 className="mb-0 fw-bold">
-              {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
+              {tasksCardData?.completedTasks?.toLocaleString()}
             </h4>
             <small className="text-muted">Completed</small>
           </div>
@@ -53,4 +45,4 @@ const TasksCard = () => {
   );
 };
 
-export default TasksCard;
+export default TasksCard;

src/components/Dashboard/Teams.jsx

@@ -1,45 +1,33 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
-import { useQueryClient } from "@tanstack/react-query";
-import { useSelectedProject } from "../../slices/apiDataManager";
 
 const Teams = () => {
-  const queryClient = useQueryClient();
+  const projectId = useSelector((store) => store.localVariables?.projectId);
- const projectId = useSelectedProject()
+  const { teamsCardData, loading, error } = useDashboardTeamsCardData(projectId);
 
-  const {
+  const [totalEmployees, setTotalEmployee] = useState(0);
-    data: teamsCardData,
+  const [inToday, setInToday] = useState(0);
-    isLoading,
+
-    isError,
+  // Update state when API data arrives
-    error,
+  useEffect(() => {
-  } = useDashboardTeamsCardData(projectId);
+    setTotalEmployee(teamsCardData?.totalEmployees || 0);
+    setInToday(teamsCardData?.inToday || 0);
+  }, [teamsCardData]);
 
   // Handle real-time updates via eventBus
-  const handler = useCallback(
+  const handler = useCallback((msg) => {
-    (msg) => {
+    if (msg.activity === 1) {
-      if (msg.activity === 1) {
+      setInToday((prev) => prev + 1);
-        queryClient.setQueryData(["dashboardTeams", projectId], (old) => {
+    }
-          if (!old) return old;
+  }, []);
-          return {
-            ...old,
-            inToday: (old.inToday || 0) + 1,
-          };
-        });
-      }
-    },
-    [queryClient, projectId]
-  );
 
   useEffect(() => {
     eventBus.on("attendance", handler);
     return () => eventBus.off("attendance", handler);
   }, [handler]);
 
-  const inToday = teamsCardData?.inToday ?? 0;
-  const totalEmployees = teamsCardData?.totalEmployees ?? 0;
-
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -48,17 +36,18 @@ const Teams = () => {
         </h5>
       </div>
 
-      {isLoading ? (
+      {loading ? (
+        // Blue spinner loader
         <div className="d-flex justify-content-center align-items-center flex-grow-1">
           <div className="spinner-border text-primary" role="status">
             <span className="visually-hidden">Loading...</span>
           </div>
         </div>
-      ) : isError ? (
+      ) : error ? (
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
+        // Error message if data fetching fails
-          {error?.message || "Error loading data"}
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
-        </div>
       ) : (
+        // Display data once loaded
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
             <h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
@@ -74,4 +63,4 @@ const Teams = () => {
   );
 };
 
-export default Teams;
+export default Teams;

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">
@@ -149,11 +149,30 @@ const Documents = ({ Document_Entity, Entity }) => {
               </label>
             </div>
 
+            {/* Actions */}
             <div className="col-6 col-md-6 col-lg-8 text-end">
+              {/* <span
+              className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
+              disabled={isRefetching}
+              onClick={() => {
+                setSearchText("");
+                setFilter(DocumentFilterDefaultValues);
+                refetchFn && refetchFn();
+              }}
+            >
+              Refresh
+              <i
+                className={`bx bx-refresh ms-1 ${
+                  isRefetching ? "bx-spin" : ""
+                }`}
+              ></i>
+            </span> */}
+
               {(isSelf || canUploadDocument) && (
                 <button
-                  className="btn btn-sm btn-primary me-3"
                   type="button"
+                  title="Add New Document"
+                  className="p-1 bg-primary rounded-circle cursor-pointer"
                   onClick={() =>
                     setManageDoc({
                       document: null,
@@ -161,10 +180,7 @@ const Documents = ({ Document_Entity, Entity }) => {
                     })
                   }
                 >
-                  <i className="bx bx-plus-circle me-2"></i>
+                  <i className="bx bx-plus fs-4 text-white"></i>
-                  <span className="d-none d-md-inline-block">
-                    Add New Document
-                  </span>
                 </button>
               )}
             </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState,useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -16,11 +16,8 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation } from "react-router-dom";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
-  const selectedProjectId = useSelector(
+  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-    (store) => store.localVariables.projectId
+  const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
-  );
-  const { data, isLoading, isError, error, isFetching, isFetched } =
-    useExpenseFilter();
 
   const groupByList = useMemo(() => {
     return [
@@ -30,10 +27,11 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       { id: "project", name: "Project" },
       { id: "paymentMode", name: "Payment Mode" },
       { id: "expensesType", name: "Expense Type" },
-      { id: "createdAt", name: "Submitted Date" },
+    { id: "createdAt", name: "Submitted Date" }
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
+
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);
 
@@ -42,7 +40,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     defaultValues: defaultFilter,
   });
 
-  const { control, handleSubmit, reset, setValue, watch } = methods;
+  const { control, register, handleSubmit, reset, watch } = methods;
   const isTransactionDate = watch("isTransactionDate");
 
   const closePanel = () => {
@@ -80,44 +78,34 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   }, [location]);
 
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if (isError && isFetched)
+  if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
-    return <div>Something went wrong Here- {error.message} </div>;
   return (
     <>
+
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
           <div className="mb-3 w-100">
             <div className="d-flex align-items-center mb-2">
-              <label className="form-label me-2">Filter By:</label>
+              <label className="form-label me-2">Choose Date:</label>
-              <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
+              <div className="form-check form-switch m-0">
-                <button
+                <input
-                  type="button"
+                  className="form-check-input"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                  type="checkbox"
-                    isTransactionDate ? "active btn-primary text-white" : ""
+                  id="switchOption1"
-                  }`}
+                  {...register("isTransactionDate")}
-                  onClick={() => setValue("isTransactionDate", true)}
+                />
-                >
-                  Transaction Date
-                </button>
-                <button
-                  type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                    !isTransactionDate ? "active btn-primary text-white" : ""
-                  }`}
-                  onClick={() => setValue("isTransactionDate", false)}
-                >
-                  Submitted Date
-                </button>
               </div>
+              <label className="form-label mb-0 ms-2">
+                {isTransactionDate ? "Submitted": "Transaction" }
+              </label>
             </div>
-            <label className="fw-semibold">Choose Date Range:</label>
+
             <DateRangePicker1
               placeholder="DD-MM-YYYY To DD-MM-YYYY"
               startField="startDate"
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
-              maxDate={new Date()}
             />
           </div>
 
@@ -181,9 +169,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
             </div>
           </div>
           <div className="mb-2 text-start ">
-            <label htmlFor="groupBySelect" className="form-label">
+        <label htmlFor="groupBySelect" className="form-label">Group By :</label>
-              Group By :
-            </label>
             <select
               id="groupBySelect"
               className="form-select form-select-sm"
@@ -201,19 +187,20 @@ 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>
         </form>
       </FormProvider>
+      
     </>
   );
 };
 
-export default ExpenseFilterPanel;
+export default ExpenseFilterPanel;

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 {
@@ -58,7 +57,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   });
 
   const selectedproject = watch("projectId");
-
+ 
   const {
     projectNames,
     loading: projectLoading,
@@ -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/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,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
 import { useProfile } from "../../hooks/useProfile";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
+import { useChangePassword } from "../Context/ChangePasswordContext";
 import { useProjects } from "../../hooks/useProjects";
 import { useCallback, useEffect, useState } from "react";
 import { useProjectName } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT } from "../../utils/constants";
-import { useAuthModal, useLogout, useModal } from "../../hooks/useAuth";
 
 const Header = () => {
   const { profile } = useProfile();
@@ -26,10 +26,10 @@ const Header = () => {
   const dispatch = useDispatch();
   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()
+  // {
+  //   console.log(location.pathname);
+  // }
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
@@ -59,9 +59,41 @@ const Header = () => {
     return role ? role.name : "User";
   };
 
- 
+  const handleLogout = (e) => {
+    e.preventDefault();
+    logout();
+  };
 
-  
+  const logout = async () => {
+    try {
+      let data = {
+        refreshToken: localStorage.getItem("refreshToken"),
+      };
+
+      AuthRepository.logout(data)
+        .then(() => {
+          localStorage.removeItem("jwtToken");
+          localStorage.removeItem("refreshToken");
+          localStorage.removeItem("user");
+          localStorage.clear();
+          clearAllCache();
+          window.location.href = "/auth/login";
+        })
+        .catch(() => {
+          localStorage.removeItem("jwtToken");
+          localStorage.removeItem("refreshToken");
+          localStorage.removeItem("user");
+          localStorage.clear();
+          clearAllCache();
+          window.location.href = "/auth/login";
+        });
+    } catch (error) {
+      console.error(
+        "Error during logout:",
+        error?.response?.data || error.message
+      );
+    }
+  };
 
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}`);
@@ -97,7 +129,7 @@ const Header = () => {
     }
   }
 
-
+  const { openChangePassword } = useChangePassword();
 
   useEffect(() => {
     if (
@@ -189,8 +221,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">
@@ -248,7 +279,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">
@@ -396,15 +426,6 @@ const Header = () => {
               </li>
               <li>
                 <div className="dropdown-divider"></div>
-              </li>
-               <li onClick={()=>onOpen()}>
-                {" "}
-                <a
-                  className="dropdown-item cusor-pointer"
-                >
-                  <i className="bx bx-transfer-alt me-2"></i>
-                  <span className="align-middle">Switch Workspace</span>
-                </a>
               </li>
               <li onClick={handleProfilePage}>
                 <a
@@ -424,7 +445,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              <li onClick={changePass}>
+              <li onClick={openChangePassword}>
                 {" "}
                 <a
                   aria-label="go to profile"
@@ -434,8 +455,6 @@ const Header = () => {
                   <span className="align-middle">Change Password</span>
                 </a>
               </li>
-
-             
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -443,10 +462,11 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  onClick={()=>logout()}
+                  href="/logout"
+                  onClick={handleLogout}
                 >
-                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
+                  <i className="bx bx-power-off me-2"></i>
-                  <span className="align-middle">SignOut</span></>}
+                  <span className="align-middle">Log Out</span>
                 </a>
               </li>
             </ul>

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>
@@ -179,8 +171,8 @@ const AssignOrg = ({ setStep }) => {
           {flowType !== "default" && (
             <>
               {/* Organization Type */}
-              <div className="mb-3 text-start">
+              <div className="mb-1 text-start">
-                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
+                <Label htmlFor="organizationTypeId" required>
                   Organization Type
                 </Label>
                 <div className="d-flex flex-wrap gap-3 mt-1">
@@ -214,11 +206,11 @@ const AssignOrg = ({ setStep }) => {
 
               {/* Services */}
               <div className="mb-3">
-                <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
+                <Label htmlFor="serviceIds" required>
                   Select Services
                 </Label>
                 {mergedServices?.map((service) => (
-                  <div key={service.id} className="form-check mb-3">
+                  <div key={service.id} className="form-check">
                     <input
                       type="checkbox"
                       value={service.id}
@@ -238,14 +230,14 @@ const AssignOrg = ({ setStep }) => {
           )}
 
           {/* Buttons: Always visible */}
-          <div className="d-flex justify-content-between mt-5">
+          <div className="d-flex justify-content-between mt-3">
             <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"}
+                : "Add"}
             </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,10 @@ 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 || []}
           />
           {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,
@@ -37,11 +35,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
   const onSubmit = (formdata) => {
     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,13 +78,16 @@ 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}
                   />
                 </div>
-                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
+                <div
+                  className="d-flex flex-column p-0 m-0 cursor-pointer"
+                  onClick={() => onOpen({ startStep: 3, orgData: org })}
+                >
                   <span className="fs-6 fw-semibold">{org.name}</span>
                   <div className="d-flex gap-2">
                     <small
@@ -104,16 +102,6 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     <small className="text-small fw-semibold">Address:</small>
                     <div className="d-flex text-wrap">{org.address}</div>
                   </div>
-                  <div className="m-0 p-0">
-                    {" "}
-                    <button
-                      type="submit"
-                      className="btn btn-sm btn-primary"
-                      onClick={() => onOpen({ startStep: 3, orgData: org })}
-                    >
-                      Select
-                    </button>
-                  </div>
                 </div>
               </div>
             ))}
@@ -131,7 +119,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("");
@@ -71,8 +70,8 @@ const OrgPickerfromTenant = ({ title }) => {
 
   return (
     <div className="d-block">
-      <div className="d-flex align-items-center gap-2 mb-1">
+      <div className="text-start mb-1">
-        <Label className="mb-0">{title}</Label>
+        <Label className="text-secondary">{title}</Label>
         <input
           type="text"
           value={searchText}
@@ -82,12 +81,11 @@ const OrgPickerfromTenant = ({ title }) => {
         />
       </div>
 
-
       {/* ---- Organization list ---- */}
       {isLoading ? (
         <div>Loading....</div>
       ) : data && data?.data?.length > 0 ? (
-        <div className="dataTables_wrapper no-footer pb-5">
+        <div className="dataTables_wrapper no-footer  pb-2">
           <table className="table dataTable text-nowrap">
             <thead>
               <tr className="table_header_border">
@@ -101,41 +99,28 @@ const OrgPickerfromTenant = ({ title }) => {
                 </th>
               </tr>
             </thead>
-          </table>
+            <tbody>
-
+              {Array.isArray(data.data) && data.data.length > 0
-          <div
+                ? data.data.map((row, i) => (
-            className="scrollable-tbody overflow-y-auto"
-            style={{ maxHeight: "350px" }}
-          >
-            <table className="table dataTable text-nowrap mb-0">
-              <tbody>
-                {Array.isArray(data.data) && data.data.length > 0
-                  ? data.data.map((row, i) => (
                     <tr key={i}>
                       {contactList.map((col) => (
                         <td key={col.key} className={col.align}>
                           {col.getValue(row)}
                         </td>
                       ))}
-                      <td className="sticky-action-column p-0 bg-white">
+                      <td className="sticky-action-column bg-white">
-                        <div className="p-1">
+                        <button
-                          <span
+                          className="btn btn-sm btn-primary"
-                            type="submit"
+                          onClick={() => onOpen({ startStep: 3, orgData: row })}
-                            className="btn btn-sm"
+                        >
-                            onClick={() =>
+                          Select
-                              onOpen({ startStep: 3, orgData: row })
+                        </button>
-                            }
-                          >
-                            <i class='bx bx-right-arrow-circle text-primary'></i>
-                          </span>
-                        </div>
                       </td>
                     </tr>
                   ))
-                  : null}
+                : null}
-              </tbody>
+            </tbody>
-            </table>
+          </table>
-          </div>
         </div>
       ) : null}
       <div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">

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,14 +53,14 @@ const OrganizationModal = () => {
   };
 
   const RenderTitle = useMemo(() => {
-    if (orgData && startStep === 3 ) {
+    if (orgData) {
       return "Assign Organization";
     }
 
     if (startStep === 1) {
       return orgData && orgData !== null
         ? "Add Organization"
-        : "Choose Organization";
+        : "Choose Organization1";
     }
 
     if (startStep === 2) {
@@ -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" }}
@@ -93,7 +93,7 @@ const OrganizationsList = ({searchText}) => {
   if (isError) return <div>{error?.message || "Something went wrong"}</div>;
 
   return (
-    <div className="card px-0 px-sm-4 pb-12 pt-5">
+    <div className="card px-0 px-sm-4">
       <div className="card-datatable table-responsive" id="horizontal-example">
         <div className="dataTables_wrapper no-footer px-2">
           <table className="table border-top dataTable text-nowrap">
@@ -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/EditActivityModal.jsx

@@ -32,8 +32,9 @@ const EditActivityModal = ({
   building,
   floor,
   onClose,
-}) => {
+} ) =>
-
+{
+  
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
@@ -56,12 +57,13 @@ const EditActivityModal = ({
       comment: "",
     },
   });
-  const { mutate: UpdateTask, isPending } = useManageTask({
+const { mutate: UpdateTask, isPending } = useManageTask({
-    onSuccessCallback: (response) => {
+  onSuccessCallback: (response) =>
-      showToast(response?.message, "success")
+  {
-      onClose()
+    showToast( response?.message, "success" )
-    }
+    onClose()
-  });
+  }
+} );
 
 
 
@@ -80,33 +82,34 @@ const EditActivityModal = ({
     [categories]
   );
 
-  useEffect(() => {
+useEffect(() => {
-    if (!workItem) return;
+  if (!workItem) return;
-    console.log(workItem)
+ console.log(workItem)
-    reset({
+  reset({
-      activityID: String(
+    activityID: String(
-        workItem?.workItem?.activityId || workItem?.activityMaster?.id
+      workItem?.workItem?.activityId || workItem?.activityMaster?.id
-      ),
+    ),
-      workCategoryId: String(
+    workCategoryId: String(
-        workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
+      workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
-      ),
+    ),
-      plannedWork:
+    plannedWork:
-        workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
+      workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
-      completedWork:
+    completedWork:
-        workItem?.workItem?.completedWork || workItem?.completedWork || 0,
+      workItem?.workItem?.completedWork || workItem?.completedWork || 0,
-      comment: workItem?.workItem?.description || workItem?.description || "",
+    comment: workItem?.workItem?.description || workItem?.description || "",
-    });
+  });
-  }, [workItem?.id, selectedActivity]);
+}, [workItem?.id,selectedActivity]);
 
 
 
   useEffect(() => {
     const selected = activities?.find((a) => a.id === activityID);
-    setSelectedActivity(selected || null);
+    setSelectedActivity( selected || null );
   }, [activityID, activities]);
 
-  const onSubmitForm = (data) => {
+  const onSubmitForm = (data) =>
-    const payload = {
+  {
+      const payload = {
       ...data,
       id: workItem?.workItem?.id ?? workItem?.id,
       buildingID: building?.id,
@@ -122,9 +125,9 @@ const EditActivityModal = ({
       buildingId: building?.id,
       floorId: floor?.id,
       workAreaId: workArea?.id,
-      previousCompletedWork: completedTask
+      previousCompletedWork:completedTask
     });
-  }
+ }
   return (
     <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
       <div className="text-center mb-1">
@@ -159,26 +162,14 @@ const EditActivityModal = ({
           disabled
         />
       </div>
-      <div className="col-12 text-start">
-        <label className="form-label">Select Service</label>
-        <input
-          className="form-control form-control-sm"
-          value={
-            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
-          }
-          disabled
-        />
-      </div>
-
 
       <div className="col-12 text-start">
         <label className="form-label">Select Activity</label>
         <select
           {...register("activityID")}
           className="form-select form-select-sm"
-          disabled
         >
-          <option >Select Activity</option>
+          <option disabled>Select Activity</option>
           {loadingActivities ? (
             <option>Loading...</option>
           ) : (
@@ -273,7 +264,7 @@ const EditActivityModal = ({
           disabled={isPending}
         >
           {isPending ? "Please Wait..." : "Edit Task"}
-        </button>
+        </button>        
       </div>
     </form>
   );

src/components/Project/Infrastructure/InfraTable.jsx

@@ -11,7 +11,7 @@ import {
   getCachedData,
 } from "../../../slices/apiDataManager";
 
-const InfraTable = ({ buildings, projectId }) => {
+const InfraTable = ({ buildings, projectId}) => {
   const [projectBuilding, setProjectBuilding] = useState([]);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [showFloorModal, setShowFloorModal] = useState(false);
@@ -100,7 +100,7 @@ const InfraTable = ({ buildings, projectId }) => {
               No floors have been added yet. Start by adding floors to manage
               this building.
             </p>
-
+        
           </div>
         </td>
       </tr>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -3,12 +3,10 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
-  useActivitiesByGroups,
   useActivitiesMaster,
-  useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
@@ -17,8 +15,6 @@ const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
   workAreaId: z.string().min(1, "Work Area is required"),
-  serviceId: z.string().min(1, "Service is required"),
-  activityGroupId: z.string().min(1, "Activity Group is required"),
   activityID: z.string().min(1, "Activity is required"),
   workCategoryId: z.string().min(1, "Work Category is required"),
   plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
@@ -31,8 +27,6 @@ const defaultModel = {
   buildingID: "",
   floorId: "",
   workAreaId: "",
-  serviceId: "",
-  activityGroupId: "",
   activityID: "",
   workCategoryId: "",
   plannedWork: 0,
@@ -41,42 +35,18 @@ const defaultModel = {
 };
 
 const TaskModel = ({ project, onSubmit, onClose }) => {
-  // const { activities, loading: activityLoading } = useActivitiesMaster();
+  const { activities, loading: activityLoading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
 
   const projectId = useSelectedProject();
 
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
-  const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizationsName(projectId);
-
-
 
   const [selectedService, setSelectedService] = useState("");
-  const [selectedGroup, setSelectedGroup] = useState("");
-  const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
-  const groups = groupsResponse?.data ?? [];
 
-  const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
-  const activities = activitiesResponse?.data ?? [];
-  // Fetch Assigned Organizations (Activity Groups)
-
-  const [selectedOrg, setSelectedOrg] = useState("");
   const handleServiceChange = (e) => {
-    const value = e.target.value;
+    setSelectedService(e.target.value);
-    setSelectedService(value);
-    setSelectedGroup("");
-    setValue("activityGroupId", "");
-    setValue("activityID", "");
   };
-
-  const handleGroupChange = (e) => {
-    const value = e.target.value;
-    setSelectedGroup(value);
-    setValue("activityGroupId", value);
-    setValue("activityID", "");
-  };
-
-
   const {
     register,
     handleSubmit,
@@ -112,10 +82,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(() => {
@@ -221,18 +188,15 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
       {/* Services Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
-          <Label className="form-label" required>Select Service</Label>
+          <Label className="form-label">Select Services</Label>
           <select
+            name="DataTables_Table_0_length"
+            aria-controls="DataTables_Table_0"
             className="form-select form-select-sm"
-            {...register("serviceId")}
+            aria-label="Select Service"
             value={selectedService}
-            // onChange={handleServiceChange}
+            onChange={handleServiceChange}
-            onChange={(e) => {
-              handleServiceChange(e);
-              setValue("serviceId", e.target.value);
-            }}
           >
-            <option value="">Select Service</option>
             {servicesLoading && <option>Loading...</option>}
             {assignedServices?.map((service) => (
               <option key={service.id} value={service.id}>
@@ -240,46 +204,35 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
               </option>
             ))}
           </select>
+          {errors.buildingID && (
+            <p className="danger-text">{errors.buildingID.message}</p>
+          )}
         </div>
       )}
 
-      {/* Activity Group (Organization) Selection */}
-      {selectedService && (
-        <div className="col-12 text-start">
-          <Label className="form-label" required>Select Activity Group</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("activityGroupId")}
-            value={selectedGroup}
-            onChange={handleGroupChange}
-          >
-            <option value="">Select Group</option>
-            {groupsLoading && <option>Loading...</option>}
-            {groups?.map((g) => (
-              <option key={g.id} value={g.id}>{g.name}</option>
-            ))}
-          </select>
-          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
-        </div>
-      )}
-
-
       {/* Activity Selection */}
-      {selectedGroup && (
+      {selectedWorkArea && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Activity</Label>
-          <select className="form-select form-select-sm" {...register("activityID")}>
+          <select
+            className="form-select form-select-sm"
+            {...register("activityID")}
+          >
             <option value="">Select Activity</option>
-            {activitiesLoading && <option>Loading...</option>}
+            {activityData.map((a) => (
-            {activities?.map((a) => (
+              <option key={a.id} value={a.id}>
-              <option key={a.id} value={a.id}>{a.activityName}</option>
+                {a.activityName}
+              </option>
             ))}
           </select>
-          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
+          {errors.activityID && (
+            <p className="danger-text">{errors.activityID.message}</p>
+          )}
         </div>
       )}
 
-      {watchActivityId && (
+
+      {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>
           <select
@@ -359,10 +312,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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import WorkItem from "./WorkItem";
-import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
+import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
-import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
+import { cacheData } from "../../../slices/apiDataManager";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -14,20 +14,20 @@ import {
 } from "../../../utils/constants";
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
-import { formatNumber } from "../../../utils/dateUtils";
+import {formatNumber} from "../../../utils/dateUtils";
-import { useServices } from "../../../hooks/masterHook/useMaster";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
-  const selectedProject = useSelectedProject()
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
-  const selectedService = useCurrentService()
   const { projects_Details, loading } = useProjectDetails(selectedProject);
   const [IsExpandedArea, setIsExpandedArea] = useState(false);
   const dispatch = useDispatch();
   const [Project, setProject] = useState();
+  // const { projectId } = useParams();
 
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
-  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, selectedService, IsExpandedArea);
+
+  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, IsExpandedArea);
 
   const [workAreaStatus, setWorkAreaStatus] = useState({
     completed: 0,
@@ -82,8 +82,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   aria-controls={`collapse-${workArea.id}`}
                 >
                   <i
-                    className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
+                    className={`bx me-2 toggle-icon ${
-                      }`}
+                      IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
+                    }`}
                     style={{
                       fontSize: "1.2rem",
                       color: "black",
@@ -104,13 +105,13 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       </span>
                     </div>
 
-                    <div className="col-2">
+                      <div className="col-2">
-                      <ProgressBar
+                        <ProgressBar
-                        completedWork={formatNumber(workArea?.completedWork)}
+                          completedWork={formatNumber(workArea?.completedWork)}
-                        plannedWork={formatNumber(workArea?.plannedWork)}
+                          plannedWork={formatNumber(workArea?.plannedWork)}
-                        className="m-0 my-2 " height="6px"rounded showLabel={true}
+                          className="m-0 text-info"
-                      />
+                        />
-                    </div>
+                      </div>
                   </div>
                 </button>
               </p>
@@ -120,17 +121,16 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                 className="accordion-collapse collapse"
                 aria-labelledby={`heading-${workArea.id}`}
               >
-                <div className="accordion-body px-6">
+                <div className="accordion-body px-1">
-                  {isLoading || ProjectTaskList === undefined ? (
+                  {isLoading  || ProjectTaskList === undefined  ? (
                     <div className="text-center py-2 text-muted">Loading activities...</div>
-                  ) : ProjectTaskList?.length === 0 ? (
+                  ) :  ProjectTaskList?.length ===  0 ? (
                     <div className="text-center py-2 text-muted">No activities available for this work area.</div>
-                  ) : ProjectTaskList?.length > 0 ? (
+                  ):ProjectTaskList?.length > 0 ? (
                     <table className="table table-sm mx-1">
                       <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>
@@ -152,9 +152,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                         </tr>
                       </thead>
                       <tbody className="table-border-bottom-0">
-                        {ProjectTaskList.map((workItem, index) => (
+                        {ProjectTaskList.map((workItem,index) => (
                           <WorkItem
-                            key={workItem.workItemId || `fallback-${index}`}
+                             key={workItem.workItemId || `fallback-${index}`}
                             workItem={workItem}
                             forBuilding={forBuilding}
                             forFloor={floor}

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?.();
     },
   });
 
@@ -194,7 +194,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
         <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
           {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
         </button>
-
+        
       </div>
     </form>
   );

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,54 @@ 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" })
+    })
+    .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 +72,80 @@ 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: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
+      projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
+
+        ? String(project.projectStatusId)
+
+        : ACTIVE_STATUS_ID,
+    },
     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 +225,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 +240,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 +265,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 +284,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 +301,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
               }}
             />
           </div>
-
           <div className="text-end" style={{ fontSize: "12px" }}>
             {maxAddressLength - addressLength} characters left
           </div>
@@ -367,21 +319,22 @@ 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>
   );
 };
 
-export default ManageProjectInfo;
+export default ManageProjectInfo;

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">Assign Employee</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

@@ -14,15 +14,41 @@ import {
   getProjectStatusName,
 } from "../../utils/projectStatus";
 import GlobalModel from "../common/GlobalModel";
-import { useDispatch } from "react-redux";
+	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,35 @@ 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));
+  const handleFormSubmit = (updatedProject) => {
-    navigate(`/activities/records?project=${project.id}`);
+  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">
@@ -58,11 +102,13 @@ const ProjectCard = ({ project }) => {
                   <h5
                     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 +120,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 +150,19 @@ 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={() =>
+                        navigate(
+                          `/activities/records?project=${projectInfo.id}`
+                        )
+                      }
+                    >
                       <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>
@@ -221,4 +278,4 @@ const ProjectCard = ({ project }) => {
   );
 };
 
-export default ProjectCard;
+export default ProjectCard;

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

@@ -17,39 +17,34 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import {
+import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
-  useCurrentService,
-  useProjectAssignedServices,
-  useProjectDetails,
-  useProjectInfra,
-} from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../slices/localVariablesSlice";
 import eventBus from "../../services/eventBus";
 import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
-import { setService } from "../../slices/globalVariablesSlice";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
+  // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedProject();
-  const selectedService = useCurrentService();
   const reloadedData = useSelector((store) => store.localVariables.reload);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const { projectInfra, isLoading, error } = useProjectInfra(
+  const { projectInfra, isLoading, error } = useProjectInfra(projectId)
-    projectId,
-    selectedService
-  );
   const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
   const [project, setProject] = useState(projects_Details);
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
-  const ManageTask = useHasUserPermission(MANAGE_TASK);
+  const ManageTask = useHasUserPermission(MANAGE_TASK)
   const [showModalFloor, setshowModalFloor] = useState(false);
   const [showModalWorkArea, setshowModalWorkArea] = useState(false);
   const [showModalTask, setshowModalTask] = useState(false);
   const [showModalBuilding, setshowModalBuilding] = useState(false);
   const dispatch = useDispatch();
-  const { data: assignedServices, isLoading: servicesLoading } =
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
-    useProjectAssignedServices(projectId);
+
+  const [selectedService, setSelectedService] = useState("");
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   useEffect(() => {
     setProject(projectInfra);
@@ -57,58 +52,34 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
 
   const signalRHandler = (response) => {
     setProject(response);
-  };
+  }
 
   return (
     <>
-      {showModalBuilding && (
+      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
-        <GlobalModel
+        <BuildingModel
-          isOpen={showModalBuilding}
+          project={projectInfra}
-          size="md"
+          onClose={() => setshowModalBuilding(false)}
-          closeModal={() => setshowModalBuilding(false)}
+        />
-        >
+      </GlobalModel>}
-          <BuildingModel
+      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
-            project={projectInfra}
+        <FloorModel
-            onClose={() => setshowModalBuilding(false)}
+          project={projectInfra}
-          />
+          onClose={() => setshowModalFloor(false)}
-        </GlobalModel>
+        />
-      )}
+      </GlobalModel>}
-      {showModalFloor && (
+      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
-        <GlobalModel
+        <WorkAreaModel
-          isOpen={showModalFloor}
+          project={projectInfra}
-          size="md"
+          onClose={() => setshowModalWorkArea(false)}
-          closeModal={() => setshowModalFloor(false)}
+        />
-        >
+      </GlobalModel>}
-          <FloorModel
+      {showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
-            project={projectInfra}
+        <TaskModel
-            onClose={() => setshowModalFloor(false)}
+          project={projectInfra}
-          />
+          onClose={() => setshowModalTask(false)}
-        </GlobalModel>
+        />
-      )}
+      </GlobalModel>)}
-      {showModalWorkArea && (
-        <GlobalModel
-          isOpen={showModalWorkArea}
-          size="lg"
-          closeModal={() => setshowModalWorkArea(false)}
-        >
-          <WorkAreaModel
-            project={projectInfra}
-            onClose={() => setshowModalWorkArea(false)}
-          />
-        </GlobalModel>
-      )}
-      {showModalTask && (
-        <GlobalModel
-          isOpen={showModalTask}
-          size="lg"
-          closeModal={() => setshowModalTask(false)}
-        >
-          <TaskModel
-            project={projectInfra}
-            onClose={() => setshowModalTask(false)}
-          />
-        </GlobalModel>
-      )}
       <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
         <div className="card">
           <div className="card-body" style={{ padding: "0.5rem" }}>
@@ -118,31 +89,37 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
                   id="DataTables_Table_0_length"
                 >
-                  {!servicesLoading &&
+                  {servicesLoading ? (
-                    assignedServices?.length > 0 &&
+                    <span></span>
-                    (assignedServices.length > 1 ? (
+                  ) : assignedServices?.length > 1 ? (
-                      <label>
+                    <label>
-                        <select
+                      <select
-                          name="DataTables_Table_0_length"
+                        name="DataTables_Table_0_length"
-                          aria-controls="DataTables_Table_0"
+                        aria-controls="DataTables_Table_0"
-                          className="form-select form-select-sm"
+                        className="form-select form-select-sm"
-                          aria-label="Select Service"
+                        aria-label="Select Service"
-                          value={selectedService}
+                        value={selectedService}
-                          onChange={(e) => dispatch(setService(e.target.value))}
+                        onChange={handleServiceChange}
-                        >
+                      >
-                          <option value="">All Services</option>
+                        {assignedServices.map((service) => (
-                          {assignedServices.map((service) => (
+                          <option key={service.id} value={service.id}>
-                            <option key={service.id} value={service.id}>
+                            {service.name}
-                              {service.name}
+                          </option>
-                            </option>
+                        ))}
-                          ))}
+                      </select>
-                        </select>
+                    </label>
-                      </label>
+                  ) : (
-                    ) : (
+                    <div
-                      <h5>{assignedServices[0].name}</h5>
+                      style={{
-                    ))}
+                        
+                      }}
+                    >
+                      {assignedServices?.length === 1
+                        ? <h5>{ assignedServices[0].name}</h5>
+                        : "No service available"}
+                    </div>
+                  )}
                 </div>
-
                 {/* Buttons Section (aligned to right) */}
                 <div className="col-md-8 col-12 text-end mb-1">
                   {ManageInfra && (
@@ -170,36 +147,29 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Work Areas
-                      </button>
+                      </button></>)}
-                    </>
-                  )}
 
-                  {(ManageTask || ManageInfra) && (
+                  {(ManageTask || ManageInfra) && (<button
-                    <button
+                    type="button"
-                      type="button"
+                    className="link-button btn btn-xs rounded-md m-1 btn-primary"
-                      className="link-button btn btn-xs rounded-md m-1 btn-primary"
+                    onClick={() => setshowModalTask(true)}
-                      onClick={() => setshowModalTask(true)}
+                  >
-                    >
+                    <i className="bx bx-plus-circle me-2"></i>
-                      <i className="bx bx-plus-circle me-2"></i>
+                    Create Tasks
-                      Create Tasks
+                  </button>)}
-                    </button>
-                  )}
                 </div>
               </div>
               <div className="row ">
                 {isLoading && <p>Loading....</p>}
                 {projectInfra && projectInfra?.length > 0 && (
-                  <InfraTable
+                  <InfraTable 
                     buildings={projectInfra}
                     projectId={projectId}
-                    serviceId={selectedService}
+                  // handleFloor={submitData}
+                  // signalRHandler ={signalRHandler}
                   />
                 )}
-                {!isLoading && projectInfra?.length == 0 && (
+                {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
-                  <div className="mt-5">
-                    <p>No Infra Avaiable</p>
-                  </div>
-                )}
               </div>
             </div>
           </div>

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>
+  )
+}
 
-            {modalConfig?.type === "assignRole" && (
+export default ProjectModal
-              <AssignRole assignData={modalConfig?.data} onClose={closeModal} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProjectModal;

src/components/Project/ProjectNav.jsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { hasUserPermission } from "../../utils/authUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
   DIRECTORY_ADMIN,
   DIRECTORY_MANAGER,
@@ -11,7 +13,6 @@ import {
   VIEW_DOCUMENT,
   VIEW_PROJECT_INFRA,
 } from "../../utils/constants";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
 const ProjectNav = ({ onPillClick, activePill }) => {
   const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
@@ -21,7 +22,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
   const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
   const DirUser = useHasUserPermission(DIRECTORY_USER);
   const isManageTeam = useHasUserPermission(MANAGE_TEAM)
-  const isViewDocuments = useHasUserPermission(VIEW_DOCUMENT);
+  const isViewDocuments = hasUserPermission(VIEW_DOCUMENT);
   const isUploadDocument = useHasUserPermission(UPLOAD_DOCUMENT)
   const isModifyDocument = useHasUserPermission(MODIFY_DOCUMENT)
 
@@ -41,8 +42,8 @@ const ProjectNav = ({ onPillClick, activePill }) => {
       hidden: !(DirAdmin || DireManager || DirUser),
     },
     { key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
-    { key: "organization", icon: "bx bx-buildings", label: "Organization"},
     { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
+     { key: "organization", icon: "bx bx-buildings", label: "Organization"},
   ];
   return (
     <div className="nav-align-top">

src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
-import { formatUTCToLocalTime } from "../../../utils/dateUtils";
 
 const ProjectAssignedOrgs = () => {
   const selectedProject = useSelectedProject();
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizations(selectedProject);
 
-  const orgList = [
+  const contactList = [
     {
       key: "name",
       label: "Organization Name",
@@ -24,16 +23,6 @@ const ProjectAssignedOrgs = () => {
         </div>
       ),
       align: "text-start",
-    },
-      {
-      key: "service",
-      label: "Service Name",
-      getValue: (org) => (
-        <div className="d-flex gap-2 py-1 ">
-        {org?.service?.name}
-        </div>
-      ),
-      align: "text-start",
     },
     {
       key: "sprid",
@@ -48,33 +37,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,11 +57,11 @@ 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">
-              {orgList.map((col) => (
+              {contactList.map((col) => (
                 <th key={col.key} className={col.align}>
                   {col.label}
                 </th>
@@ -98,7 +72,7 @@ const ProjectAssignedOrgs = () => {
             {Array.isArray(data) && data.length > 0 ? (
               data.map((row, i) => (
                 <tr key={i}>
-                  {orgList.map((col) => (
+                  {contactList.map((col) => (
                     <td key={col.key} className={col.align}>
                       {col.getValue(row)}
                     </td>
@@ -108,7 +82,7 @@ const ProjectAssignedOrgs = () => {
             ) : (
               <tr style={{ height: "200px" }}>
                 <td
-                  colSpan={orgList.length}
+                  colSpan={contactList.length}
                   className="text-center align-middle"
                 >
                   Not Assigned yet

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

@@ -7,12 +7,12 @@ const ProjectOrganizations = () => {
   const { onOpen, startStep, flowType } = useOrganizationModal();
   const selectedProject = useSelectedProject();
   return (
-    <div className="card pb-10" >
+    <div className="card">
       <div className="card-header">
         <div className="d-flex justify-content-end px-2">
           <button
             type="button"
-            className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
+            className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
             onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
           >
             <i className="bx bx-plus-circle me-2"></i>

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,451 @@
+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="Removed Employee"
+          message="Are you sure you want 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 ? null : assignedServices && assignedServices.length > 0 ? (
+                  assignedServices.length > 1 ? (
+                    <label>
+                      <select
+                        name="serviceFilter"
+                        aria-controls="DataTables_Table_0"
+                        className="form-select form-select-sm"
+                        aria-label="Select Service"
+                        value={selectedService}
+                        onChange={handleServiceChange}
+                        style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                      >
+                        <option value="">All Services</option>
+                        {assignedServices.map((service) => (
+                          <option key={service.id} value={service.id}>
+                            {service.name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : (
+                    <div>
+                      <h5>{assignedServices[0].name}</h5>
+                    </div>
+                  )
+                ) : (
+                  <div>
+                    
+                  </div>
+                )}
+              </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">
+                <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/EditProfile.jsx

@@ -72,15 +72,15 @@ const EditProfile = ({ TenantId, onClose }) => {
   return (
     <FormProvider {...methods}>
       <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
-        <h5>Edit Tenant</h5>
+        <h6>Edit Tenant</h6>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="firstName" required>First Name</Label>
           <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
           {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="lastName" required>Last Name</Label>
           <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
           {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
@@ -88,32 +88,32 @@ const EditProfile = ({ TenantId, onClose }) => {
 
 
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="contactNumber" required>Contact Number</Label>
           <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
             placeholder="+91 9876543210" />
           {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="domainName" >Domain Name</Label>
           <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
           {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="taxId" >Tax ID</Label>
           <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
           {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="officeNumber" >Office Number</Label>
           <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
           {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="industryId" required>Industry</Label>
           <select className="form-select form-select-sm" {...register("industryId")}>
             {industryLoading ? <option value="">Loading...</option> :
@@ -125,7 +125,7 @@ const EditProfile = ({ TenantId, onClose }) => {
           {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-1">
           <Label htmlFor="reference">Reference</Label>
           <select className="form-select form-select-sm" {...register("reference")}>
             {reference.map((org) => (
@@ -134,7 +134,7 @@ const EditProfile = ({ TenantId, onClose }) => {
           </select>
           {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
         </div>
-        <div className="col-sm-6 text-start">
+        <div className="col-sm-6">
           <Label htmlFor="organizationSize" required>
             Organization Size
           </Label>
@@ -154,19 +154,19 @@ const EditProfile = ({ TenantId, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 mt-1 text-start">
+        <div className="col-12 mt-1">
           <Label htmlFor="billingAddress" required>Billing Address</Label>
           <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
           {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
         </div>
 
-        <div className="col-12 mt-1 text-start">
+        <div className="col-12 mt-1">
           <Label htmlFor="description">Description</Label>
           <textarea id="description" className="form-control" {...register("description")} rows={2} />
           {errors.description && <div className="danger-text">{errors.description.message}</div>}
         </div>
 
-        <div className="col-sm-12 text-start">
+        <div className="col-sm-12">
           <Label htmlFor="logImage">Logo Image</Label>
           <LogoUpload
             preview={logoPreview}
@@ -176,9 +176,9 @@ const EditProfile = ({ TenantId, onClose }) => {
           />
         </div>
 
-        <div className="d-flex justify-content-end gap-2 mt-3">
+        <div className="d-flex justify-content-center gap-2 mt-3">
-          <button type="button" disabled={isPending} className="btn btn-sm btn-label-secondary" onClick={onClose}>Cancel</button>
           <button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
+          <button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
         </div>
       </form>
     </FormProvider>

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";
@@ -6,14 +6,11 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { LogoUpload } from "./LogoUpload";
 import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
-import { useGlobalServices } from "../../hooks/masterHook/useMaster";
-import SelectMultiple from "../common/SelectMultiple";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
-  const { data: services, isLoading: serviceLoading } = useGlobalServices();
   const {
     register,
     control,
@@ -45,7 +42,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       "industryId",
       "reference",
       "logoImage",
-      "serviceIds",
     ]);
 
     if (valid) {
@@ -57,13 +53,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     }
   };
 
-  useEffect(() => {
-  const logoImage = getValues("logoImage"); 
-  if (logoImage) {
-    setLogoPreview(logoImage); 
-    setLogoName("Uploaded Logo"); 
-  }
-}, [getValues]);
 
 
   return (
@@ -192,7 +181,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="reference" required>Reference</Label>
+        <Label htmlFor="reference">Reference</Label>
         <select
           id="reference"
           className="form-select shadow-none border py-1 px-2 small"
@@ -209,20 +198,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
-      <div className="col-sm-6">
-        <SelectMultiple          
-          name="serviceIds"
-          label="Services"
-          options={services?.data}
-          isLoading={serviceLoading}
-          labelKey="name"
-          valueKey="id"
-        />
-        {errors.serviceIds && (
-          <div className="danger-text">{errors.serviceIds.message}</div>
-        )}
-      </div>
-
 
       <div className="col-sm-12">
         <Label htmlFor="description">Description</Label>

src/components/Tenant/Profile.jsx

@@ -5,12 +5,12 @@ import GlobalModel from "../common/GlobalModel";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
 import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
 import IconButton from "../common/IconButton";
+import { hasUserPermission } from "../../utils/authUtils";
 import { MANAGE_TENANTS } from "../../utils/constants";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 
 const Profile = ({ data }) => {
   const {setEditTenant} = useTenantDetailsContext()
-  const canUpdateTenant = useHasUserPermission(MANAGE_TENANTS)
+  const canUpdateTenant = hasUserPermission(MANAGE_TENANTS)
   return (
     <>
       <div className="container-fuid">

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,6 @@ 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(),
 });
 
 export const tenantDefaultValues = {
@@ -52,14 +51,13 @@ export const tenantDefaultValues = {
   organizationSize: "",
   industryId: "", // should be a valid UUID if pre-filled
   reference: "",
-  serviceIds:[]
 };
 
 
 
 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/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,39 +1,27 @@
 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);
     }
 
-    const fp = flatpickr(inputRef.current, { 
+    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",
       altInput: true,
@@ -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>
   );
 };
 
@@ -88,7 +76,6 @@ export default DateRangePicker;
 
 
 
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -161,20 +148,10 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
+    if (defaultRange && resetSignal !== undefined) {
-    if (defaultRange) {
       applyDefaultDates();
-    } else {
-      setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
-
-      if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
-      }
     }
-  }
+  }, [resetSignal, defaultRange]);
-}, [resetSignal, defaultRange, setValue, startField, endField]);
-
 
   const start = getValues(startField);
   const end = getValues(endField);

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);
@@ -52,7 +46,7 @@ const EmployeeSearchInput = ({
         onChange={(e) => {
           setSearch(e.target.value);
           setShowDropdown(true);
-          onChange("");
+          onChange(""); 
         }}
         onFocus={() => {
           if (search) setShowDropdown(true);
@@ -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

@@ -1,65 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-const HoverPopup = ({ title, content, children }) => {
-  const [visible, setVisible] = useState(false);
-  const triggerRef = useRef(null);
-  const popupRef = useRef(null);
-
-  // Toggle on hover or click
-  const handleMouseEnter = () => setVisible(true);
-  const handleClick = () => setVisible((prev) => !prev);
-
-  // Hide on outside click
-  useEffect(() => {
-    const handleDocumentClick = (e) => {
-      if (
-        !popupRef.current?.contains(e.target) &&
-        !triggerRef.current?.contains(e.target)
-      ) {
-        setVisible(false);
-      }
-    };
-
-    if (visible) {
-      document.addEventListener("click", handleDocumentClick);
-    }
-
-    return () => {
-      document.removeEventListener("click", handleDocumentClick);
-    };
-  }, [visible]);
-
-  return (
-    <div
-      className="d-inline-block position-relative"
-      ref={triggerRef}
-      onMouseEnter={handleMouseEnter}
-      onClick={handleClick}
-      style={{ cursor: "pointer" }}
-    >
-      {children}
-
-      {visible && (
-        <div
-          ref={popupRef}
-          className="bg-white border rounded shadow-sm py-1 px-2 text-start text-lowercase"
-          style={{
-            position: "absolute",
-            top: "100%",
-            left: "50%",
-            transform: "translateX(-50%)",
-            zIndex: 1050,
-            minWidth: "220px",
-            marginTop: "8px",
-          }}
-        >
-          {title && <h6 className="mb-2 text-capitalize">{title}</h6>}
-          <div className="text-capitalize">{content}</div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default HoverPopup;
-

src/components/common/Modal.jsx

@@ -27,9 +27,9 @@ const Modal = ({
         className={`modal-dialog modal-${size} modal-dialog-${position}`}
         role="document"
       >
-        <div className="modal-content text-white shadow-lg">
+        <div className="modal-content  text-white shadow-lg">
           {/* Header */}
-          <div className="modal-header justify-content-center pb-2 border-0">
+          <div className="modal-header pb-2 border-0">
             <h5 className="modal-title">{title}</h5>
             <button
               type="button"

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

@@ -8,24 +8,24 @@ const SelectMultiple = ({
   name,
   options = [],
   label = "Select options",
-  labelKey = "name", 
+  labelKey = "name",
   valueKey = "id",
   placeholder = "Please select...",
-  IsLoading = false,required = false
+  IsLoading = 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 +64,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 +105,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 +141,12 @@ 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>{label}</label>
 
         <div
           className="multi-select-dropdown-header"
@@ -150,7 +155,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 +166,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

@@ -3,23 +3,20 @@ import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import {
+import { MasterRespository } from "../../repositories/MastersRepository";
-  useCreateActivity,
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-  useUpdateActivity,
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
-} from "../../../hooks/masterHook/useMaster";
+import showToast from "../../services/toastService";
-import Label from "../../common/Label";
+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
+  unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
-    .string()
-    .min(1, { message: "Unit of Measurement is required" }),
   checkList: z
     .array(
       z.object({
-        description: z
+        description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
-          .string()
-          .min(1, { message: "descriptionlist item cannot be empty" }),
         isMandatory: z.boolean().default(false),
         id: z.any().default(null),
       })
@@ -27,14 +24,9 @@ const schema = z.object({
     .optional(),
 });
 
-const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
+const CreateActivity = ({ onClose }) => {
   const maxDescriptionLength = 255;
-  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(
+  const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
-    () => close?.()
-  );
-  const { mutate: UpdateActivity, isPending: isUpdating } = useUpdateActivity(
-    () => close?.()
-  );
 
   const {
     register,
@@ -83,107 +75,82 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
     append({ id: null, description: "", isMandatory: false });
   }, [checkListItems, getValues, append, setError, clearErrors]);
 
-  const removeChecklistItem = useCallback(
+  const removeChecklistItem = useCallback((index) => {
-    (index) => {
+    remove(index);
-      remove(index);
+  }, [remove]);
-    },
-    [remove]
-  );
 
-  const handleChecklistChange = useCallback(
+  const handleChecklistChange = useCallback((index, value) => {
-    (index, value) => {
+    setValue(`checkList.${index}`, value);
-      setValue(`checkList.${index}`, value);
+  }, [setValue]);
-    },
-    [setValue]
-  );
 
   const onSubmit = (formData) => {
-    let payload = {
+    createActivity(formData);
-      ...formData,
-      activityGroupId: whichGroup,
-    };
-    if (activity) {
-      UpdateActivity({ id: activity.id, payload: payload });
-    } else {
-      createActivity(payload);
-    }
   };
+  // const onSubmit = (data) => {
+  //   setIsLoading(true);
 
-  useEffect(() => {
+  //   MasterRespository.createActivity(data)
-    if (activity) {
+  //     .then( ( resp ) =>
-      reset({
+  //     {
-        activityName: activity.activityName || "",
+
-        unitOfMeasurement: activity.unitOfMeasurement || "",
+  //       const cachedData = getCachedData("Activity");
-        checkList: activity.checkLists?.map((check) => ({
+  //       const updatedData = [ ...cachedData, resp?.data ];
-          id: check.id || null, // Use the ID provided in the checklist
+  //       cacheData("Activity", updatedData);
-          description: check.description || "",
+  //       showToast("Activity Successfully Added.", "success");
-          isMandatory: check.isMandatory || false,
+  //       setIsLoading(false);
-        })) || [{ description: "", isMandatory: false }], // Default to an empty checklist item
+  //       handleClose()
-      });
+  //     })
-    }
+  //     .catch((error) => {
-  }, [activity, reset]);
+  //       showToast(error.message, "error");
+  //       setIsLoading(false);
+  //     });
+  // };
   const handleClose = useCallback(() => {
     reset();
-    close();
+    onClose();
-  }, [reset, close]);
+  }, [reset, onClose]);
 
   useEffect(() => {
-    const tooltipTriggerList = Array.from(
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-      document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
-  let isPending = isLoading || isUpdating;
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="px-7">
+    <form onSubmit={handleSubmit(onSubmit)}>
       {/* <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>
+          <Label className="form-label" required>Activity</Label>
-            Activity
-          </Label>
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${
+            className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
-              errors.activityName ? "is-invalid" : ""
+              }`}
-            }`}
           />
           {errors.activityName && (
             <p className="danger-text">{errors.activityName.message}</p>
           )}
         </div>
 
-        <div className="col-6 text-start mt-3">
+        <div className="col-6 text-start">
-          <Label className="form-label" required>
+          <Label className="form-label" required>Measurement</Label>
-            Measurement
-          </Label>
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${
+            className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
-              errors.unitOfMeasurement ? "is-invalid" : ""
+              }`}
-            }`}
           />
           {errors.unitOfMeasurement && (
             <p className="danger-text">{errors.unitOfMeasurement.message}</p>
           )}
         </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">
+          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
-            Add Check List <i
+          {checkListItems.length > 0 && (
-              className="bx bx-plus-circle text-primary cursor-pointer"
+            <table className="table mt-1  border-0">
-              data-bs-toggle="tooltip"
+              <thead className="py-0 my-0 table-border-top-0">
-              title="Add Check"
+                <tr className="py-1">
-              data-bs-original-title="Add check"
-               onClick={addChecklistItem}
-            ></i>
-          </label>
-          {checkListItems.length > 0 ? (
-            <table className="table mt-1  border-none">
-              <thead className="py-0 my-0  border-none  ">
-                <tr className="py-1 border-secondary ">
                   <th colSpan={2} className="py-1">
                     <small>Name</small>
                   </th>
@@ -193,10 +160,10 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
                   <th className="text-center py-1">Action</th>
                 </tr>
               </thead>
-              <tbody className="table-border-bottom-0 border-secondary ">
+              <tbody className="table-border-bottom-0 ">
                 {checkListItems.map((item, index) => (
-                  <tr key={index}>
+                  <tr key={index} className="border-top-0">
-                    <td colSpan={2} className="border-none" >
+                    <td colSpan={2} className="border-top-0 border-0">
                       <input
                         className="d-none"
                         {...register(`checkList.${index}.id`)}
@@ -218,7 +185,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
                         </small>
                       )}
                     </td>
-                    <td colSpan={2} className="text-center border-none">
+                    <td colSpan={2} className="text-center border-0">
                       <input
                         className="form-check-input"
                         type="checkbox"
@@ -226,44 +193,49 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
                         defaultChecked={item.isMandatory}
                       />
                     </td>
-                    <td className="text-center border-none">
+                    <td className="text-center border-0">
                       <button
                         type="button"
                         onClick={() => removeChecklistItem(index)}
                         className="btn btn-xs btn-icon btn-text-secondary"
                       >
-                        <i
+                        <i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
-                          className="bx bxs-minus-circle text-danger"
-                          data-bs-toggle="tooltip"
                           title="Remove Check"
-                          data-bs-original-title="Remove check"
+                          data-bs-original-title="Remove check"></i>
-                        ></i>
                       </button>
                     </td>
                   </tr>
                 ))}
               </tbody>
             </table>
-          ):(<div className="d-flex justify-content-center my-0"><p className="text-secondary m-0">Not Yet Added</p> </div>)}
+          )}
-        
+          <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 mb-4">
+        <div className="col-12 text-end mt-3">
           <button
             type="reset"
             className="btn btn-sm btn-label-secondary me-3"
             onClick={handleClose}
-            disabled={isPending}
           >
             Cancel
           </button>
           <button type="submit" className="btn btn-sm btn-primary">
-            {isPending ? "Please Wait" : activity ? "Update" : "Submit"}
+            {isLoading ? "Please Wait" : "Submit"}
           </button>
+
         </div>
       </div>
     </form>
   );
 };
 
-export default ManageActivity;
+export default CreateActivity;

src/components/master/EditActivity.jsx

@@ -0,0 +1,258 @@
+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 = ({ activityData, onClose }) => {
+  const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset,
+    setError,
+    clearErrors,
+    getValues,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      id: activityData?.id,
+      activityName: activityData?.activityName,
+      unitOfMeasurement: activityData?.unitOfMeasurement,
+      checkList: activityData?.checkLists || [],
+    },
+  });
+
+  const { fields: checkListItems, append, remove } = useFieldArray({
+    control,
+    name: "checkList",
+  });
+
+  useEffect(() => {
+    if (activityData) {
+      reset({
+        id: activityData.id,
+        activityName: activityData.activityName,
+        unitOfMeasurement: activityData.unitOfMeasurement,
+        checkList: activityData.checkLists || [],
+      });
+    }
+  }, [activityData, 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: activityData.id };
+    updateActivity({ id: activityData.id, payload });
+  };
+  // const onSubmit = async(data) => {
+  //   setIsLoading(true);
+
+  //   const Activity = {...data, id:activityData.id}
+  //   try
+  //   {
+  //     const response = await MasterRespository.updateActivity( activityData?.id, Activity );
+  //     const updatedActivity = response.data;
+  //     const cachedData = getCachedData("Activity")
+
+  //     if (cachedData) {
+  //       const updatedActivities = cachedData.map((activity) =>
+  //         activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
+  //       );
+
+  //       cacheData( "Activity", updatedActivities );
+  //       onClose()
+  //     }
+  //     setIsLoading( false )
+  //     showToast("Activity Successfully Updated", "success");
+  //   } catch ( err )
+  //   {
+  //     setIsLoading( false )
+
+  //     showToast("error.message", "error");
+  //   }
+  // };
+
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* <h6>Update Activity</h6> */}
+      <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>