Merge branch 'Collection_Management'

Reviewed-on: #487
Merged

public/assets/css/core-extend.css

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

public/assets/vendor/css/core.css

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

src/components/Activities/Attendance.jsx

@@ -12,22 +12,19 @@ import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 import { useSelectedProject } from "../../slices/apiDataManager";
 
-const Attendance = ({ getRole, handleModalData, searchTerm }) => {
+const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, }) => {
   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);
+  } = useAttendance(selectedProject, organizationId);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
       (att) => att?.checkInTime !== null && att?.checkOutTime === null
@@ -67,43 +64,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
     });
   }, [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
@@ -178,6 +138,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
                 <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
@@ -226,6 +187,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
                         </td>
 
                         <td>{item.jobRoleName}</td>
+                        <td>{item.organizationName || "--"}</td>
+
                         <td>
                           {item.checkInTime
                             ? convertShortTime(item.checkInTime)
@@ -249,7 +212,11 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
                     ))}
                 {!attendance && (
                   <tr>
-                    <td colSpan={6} className="text-center text-secondary" style={{ height: "200px" }}>
+                    <td
+                      colSpan={7}
+                      className="text-center text-secondary"
+                      style={{ height: "200px" }}
+                    >
                       No employees assigned to the project!
                     </td>
                   </tr>
@@ -257,6 +224,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
               </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,7 +5,11 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
 import DateRangePicker from "../common/DateRangePicker";
-import { clearCacheKey, getCachedData, useSelectedProject } from "../../slices/apiDataManager";
+import {
+  clearCacheKey,
+  getCachedData,
+  useSelectedProject,
+} from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
@@ -33,18 +37,13 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm }) => {
+const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-  // const selectedProject = useSelector(
-  //   (store) => store.localVariables.projectId
-  // );
 const selectedProject = useSelectedProject();
 const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
 const dispatch = useDispatch();
 const [loading, setLoading] = useState(false);
-  const [showPending, setShowPending] = useState(false)
+const [showPending, setShowPending] = useState(false);
-
 const [isRefreshing, setIsRefreshing] = useState(false);
-  const [processedData, setProcessedData] = useState([]);
 
 const today = new Date();
 today.setHours(0, 0, 0, 0);
@@ -67,56 +66,32 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
 };
 
 const sortByName = (a, b) => {
-    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+  const nameA = (a.firstName + a.lastName).toLowerCase();
-    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+  const nameB = (b.firstName + b.lastName).toLowerCase();
-    return nameA?.localeCompare(nameB);
+  return nameA.localeCompare(nameB);
 };
 
-  const {
+const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
-    data = [],
-    isLoading,
-    error,
-    refetch,
-    isFetching,
-  } = useAttendancesLogs(
   selectedProject,
   dateRange.startDate,
-    dateRange.endDate
+  dateRange.endDate,
+  organizationId
 );
-  const filtering = (data) => {
+
+const processedData = useMemo(() => {
   const filteredData = showPending
     ? data.filter((item) => item.checkOutTime === null)
     : data;
 
-    const group1 = filteredData
+  const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
-      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+  const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
-      .sort(sortByName);
+  const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
-    const group2 = filteredData
+  const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
-      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+  const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
-      .sort(sortByName);
+  const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
-    const group3 = filteredData
-      .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-      .sort(sortByName);
-    const group4 = filteredData.filter(
-      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
-    );
-    const group5 = filteredData
-      .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-      .sort(sortByName);
-    const group6 = filteredData
-      .filter((d) => d.activity === 5)
-      .sort(sortByName);
 
-    const sortedList = [
+  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-      ...group1,
-      ...group2,
-      ...group3,
-      ...group4,
-      ...group5,
-      ...group6,
-    ];
 
-    // Group by date
   const groupedByDate = sortedList.reduce((acc, item) => {
     const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
     if (date) {
@@ -126,57 +101,19 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
     return acc;
   }, {});
 
-    const sortedDates = Object.keys(groupedByDate).sort(
+  const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-      (a, b) => new Date(b) - new Date(a)
+  return sortedDates.flatMap((date) => groupedByDate[date]);
-    );
-
-    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-    setProcessedData(finalData);
-  };
-
-  useEffect(() => {
-    filtering(data);
 }, [data, showPending]);
 
-  // New useEffect to handle search filtering
 const filteredSearchData = useMemo(() => {
-    if (!searchTerm) {
+  if (!searchTerm) return processedData;
-      return processedData;
+
-    }
+  const lowercased = searchTerm.toLowerCase();
-    const lowercasedSearchTerm = searchTerm.toLowerCase();
+  return processedData.filter((item) =>
-    return processedData.filter((item) => {
+    `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+  );
-      return fullName.includes(lowercasedSearchTerm);
-    });
 }, [processedData, searchTerm]);
 
-//   const filteredSearchData = useMemo(() => {
-//   let tempData = processedData;
-
-//   if (searchTerm) {
-//     const lowercasedSearchTerm = searchTerm.toLowerCase();
-//     tempData = tempData.filter((item) => {
-//       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-//       return fullName.includes(lowercasedSearchTerm);
-//     });
-//   }
-
-//   if (filters?.selectedOrganization) {
-//     tempData = tempData.filter(
-//       (item) => item.organization?.name === filters.selectedOrganization
-//     );
-//   }
-
-//   if (filters?.selectedServices?.length > 0) {
-//     tempData = tempData.filter((item) =>
-//       filters.selectedServices.includes(item.service?.name)
-//     );
-//   }
-
-//   return tempData;
-// }, [processedData, searchTerm, filters]);
-
-
 const {
   currentPage,
   totalPages,
@@ -187,34 +124,27 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
 
 useEffect(() => {
   resetPage();
-  }, [filteredSearchData, resetPage]);
+}, [filteredSearchData]);
 
 const handler = useCallback(
   (msg) => {
     const { startDate, endDate } = dateRange;
     const checkIn = msg.response.checkInTime.substring(0, 10);
-      if (
+
-        selectedProject === msg.projectId &&
+    if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
-        startDate <= checkIn &&
-        checkIn <= endDate
-      ) {
       queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
         if (!oldData) {
           queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
           return;
         }
-          const updatedAttendance = oldData.map((record) =>
+        return oldData.map((record) =>
-            record.id === msg.response.id
+          record.id === msg.response.id ? { ...record, ...msg.response } : record
-              ? { ...record, ...msg.response }
-              : record
         );
-          filtering(updatedAttendance);
-          return updatedAttendance;
       });
       resetPage();
     }
   },
-    [selectedProject, dateRange, filtering, resetPage]
+  [selectedProject, dateRange, resetPage]
 );
 
 useEffect(() => {
@@ -226,18 +156,10 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
   (msg) => {
     const { startDate, endDate } = dateRange;
     if (data.some((item) => item.employeeId == msg.employeeId)) {
-        // dispatch(
+      refetch();
-        //   fetchAttendanceData({
-        //     ,
-        //     fromDate: startDate,
-        //     toDate: endDate,
-        //   })
-        // );
-
-        refetch()
     }
   },
-    [selectedProject, dateRange, data, refetch]
+  [data, refetch]
 );
 
 useEffect(() => {
@@ -245,6 +167,8 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
   return () => eventBus.off("employee", employeeHandler);
 }, [employeeHandler]);
 
+
+
   return (
     <>
       <div
@@ -256,7 +180,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start m-0 ms-5">
+          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
             <input
               type="checkbox"
               className="form-check-input"
@@ -269,11 +193,16 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-       
       </div>
-      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
+      <div
+        className="table-responsive text-nowrap"
+        style={{ minHeight: "200px" }}
+      >
         {isLoading ? (
-          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: "200px" }}
+          >
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -284,6 +213,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
                   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
@@ -313,7 +243,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
                       key={`header-${currentDate}`}
                       className="table-row-header"
                     >
-                      <td colSpan={6} className="text-start">
+                      <td colSpan={8} className="text-start">
                         <strong>
                           {moment(currentDate).format("DD-MM-YYYY")}
                         </strong>
@@ -343,6 +273,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
                         attendance.checkInTime || attendance.checkOutTime
                       ).format("DD-MMM-YYYY")}
                     </td>
+                    <td>{attendance.organizationName || "--"}</td>
                     <td>{convertShortTime(attendance.checkInTime)}</td>
                     <td>
                       {attendance.checkOutTime
@@ -364,7 +295,12 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
+          <div className="my-12">
+            <span className="text-secondary">
+              No data available for the selected date range. Please Select
+              another date.
+            </span>
+          </div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
@@ -390,7 +326,8 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${currentPage === pageNumber ? "active" : ""
+                  className={`page-item ${
+                    currentPage === pageNumber ? "active" : ""
                   }`}
                 >
                   <button
@@ -403,7 +340,8 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
               )
             )}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
               }`}
             >
               <button

src/components/Activities/CheckCheckOutForm.jsx

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

src/components/Activities/InfraPlanning.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from "react";
 import "../../components/Project/ProjectInfra.css";
 import BuildingModel from "../Project/Infrastructure/BuildingModel";
@@ -8,9 +7,18 @@ import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
 import TaskModel from "../Project/Infrastructure/TaskModel";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
+import {
+  useCurrentService,
+  useProjectDetails,
+  useProjectInfra,
+  useProjects,
+} from "../../hooks/useProjects";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
+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";
@@ -18,15 +26,14 @@ 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 } = useProjectInfra(selectedProject);
+  const { projectInfra, isLoading, isError, error, isFetched } =
+    useProjectInfra(selectedProject, selectedService || "" );
 
   const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const canApproveTask = useHasUserPermission(APPROVE_TASK);
@@ -73,4 +80,3 @@ const InfraPlanning = () => {
 };
 
 export default InfraPlanning;
-

src/components/Activities/Regularization.jsx

@@ -1,25 +1,43 @@
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import Avatar from "../common/Avatar";
-import { convertShortTime } from "../../utils/dateUtils";
+import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
 import RegularizationActions from "./RegularizationActions";
 import { useSelector } from "react-redux";
 import { useRegularizationRequests } from "../../hooks/useAttendance";
 import moment from "moment";
 import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
-import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
+import {
+  cacheData,
+  clearCacheKey,
+  useSelectedProject,
+} from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
+import Pagination from "../../components/common/Pagination";
 
-const Regularization = ({ handleRequest, searchTerm  }) => {
+const Regularization = ({
+  handleRequest,
+  searchTerm,
+  projectId,
+  organizationId,
+  IncludeInActive,
+}) => {
   const queryClient = useQueryClient();
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
-  const { regularizes, loading, error, refetch } =
+  const { regularizes, loading, error, refetch } = useRegularizationRequests(
-    useRegularizationRequests(selectedProject);
+    selectedProject,
+    organizationId,
+    IncludeInActive
+  );
 
   useEffect(() => {
+    if(!regularizes) return
+    if(regularizes?.length) {
     setregularizedList(regularizes);
+
+    }
   }, [regularizes]);
 
   const sortByName = (a, b) => {
@@ -54,48 +72,15 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
     }
     const lowercasedSearchTerm = searchTerm.toLowerCase();
     return sortedList.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
       return fullName.includes(lowercasedSearchTerm);
     });
   }, [regularizesList, searchTerm]);
 
-  // const filteredSearchData = useMemo(() => {
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-  //   let sortedList = [...regularizesList].sort(sortByName);
+    filteredSearchData,
-
+    20
-  //   // Search filter
+  );
-  //   if (searchTerm) {
-  //     const lowercasedSearchTerm = searchTerm.toLowerCase();
-  //     sortedList = sortedList.filter((item) => {
-  //       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-  //       return fullName.includes(lowercasedSearchTerm);
-  //     });
-  //   }
-
-  //   // Organization filter
-  //   if (filters?.selectedOrganization) {
-  //     sortedList = sortedList.filter(
-  //       (item) => item.organization?.name === filters.selectedOrganization
-  //     );
-  //   }
-
-  //   // Services filter
-  //   if (filters?.selectedServices?.length > 0) {
-  //     sortedList = sortedList.filter((item) =>
-  //       filters.selectedServices.includes(item.service?.name)
-  //     );
-  //   }
-
-  //   return sortedList;
-  // }, [regularizesList, searchTerm, filters]);
-
-
-  const { currentPage, totalPages, currentItems, paginate } =
-    usePagination(filteredSearchData, 20);
-
-  // Reset pagination when the search term or data changes
-  useEffect(() => {
-
-  }, [filteredSearchData]);
 
   useEffect(() => {
     eventBus.on("regularization", handler);
@@ -117,9 +102,15 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
   }, [employeeHandler]);
 
   return (
-    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
+    <div
+      className="table-responsive text-nowrap pb-4"
+      style={{ minHeight: "200px" }}
+    >
       {loading ? (
-        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ height: "200px" }}
+        >
           <p className="text-secondary">Loading...</p>
         </div>
       ) : currentItems?.length > 0 ? (
@@ -128,12 +119,19 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
             <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>
@@ -142,10 +140,7 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
               <tr key={index}>
                    <td colSpan={2}>
                   <div className="d-flex justify-content-start align-items-center">
-                    <Avatar
+                    <Avatar firstName={att.firstName} lastName={att.lastName} />
-                      firstName={att.firstName}
-                      lastName={att.lastName}
-                    ></Avatar>
                     <div className="d-flex flex-column">
                       <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
@@ -156,9 +151,28 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
                   </div>
                 </td>
                 <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
+
+                <td>{att.organizationName || "--"}</td>
+
                 <td>{convertShortTime(att.checkInTime)}</td>
                 <td>
-                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
+                  {att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
+                </td>
+             
+                  <td colSpan={2}>
+                     {att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
+                    <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
+                    <div className="d-flex flex-column">
+                      <a href="#" className="text-heading text-truncate">
+                        <span className="fw-normal">
+                          {att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
+                        </span>
+                      </a>
+                    </div>
+                  </div>):(<small>--</small>)}
+                </td>
+                  <td>
+                  {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
                 </td>
                 <td className="text-center ">
                   <RegularizationActions
@@ -166,7 +180,6 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
                     handleRequest={handleRequest}
                     refresh={refetch}
                   />
-                  {/* </div> */}
                 </td>
               </tr>
             ))}
@@ -184,7 +197,7 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
           </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" : ""}`}>
@@ -222,6 +235,14 @@ const Regularization = ({ handleRequest, searchTerm  }) => {
             </li>
           </ul>
         </nav>
+      )} */}
+
+      {totalPages > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={paginate}
+        />
       )}
     </div>
   );

src/components/Activities/ReportTask.jsx

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

src/components/Activities/ReportTaskComments.jsx

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

src/components/Activities/SubTask.jsx

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

src/components/Context/ChangePasswordContext.jsx

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

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

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

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

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

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

src/components/Dashboard/Projects.jsx

@@ -1,33 +1,28 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
-import GlobalRepository from "../../repositories/GlobalRepository";
 
 const Projects = () => {
-  const { projectsCardData } = useDashboardProjectsCardData();
+  const {
-  const [projectData, setProjectsData] = useState(projectsCardData);
+    data: projectsCardData,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useDashboardProjectsCardData();
 
   useEffect(() => {
-    setProjectsData(projectsCardData);
+    // When "project" event happens, just refetch
-  }, [projectsCardData]);
+    const handler = () => {
+      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);
-  }, [handler]);
+  }, [refetch]);
+
+  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">
@@ -37,20 +32,29 @@ const Projects = () => {
           Projects
         </h5>
       </div>
+
+      {isLoading ? (
+        <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 ? (
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
+          {error?.message || "Error loading data"}
+        </div>
+      ) : (
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
-          <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{totalProjects.toLocaleString()}</h4>
-            {projectData.totalProjects?.toLocaleString()}
-          </h4>
             <small className="text-muted">Total</small>
           </div>
           <div>
-          <h4 className="mb-0 fw-bold">
+            <h4 className="mb-0 fw-bold">{ongoingProjects.toLocaleString()}</h4>
-            {projectData.ongoingProjects?.toLocaleString()}
-          </h4>
             <small className="text-muted">Ongoing</small>
           </div>
         </div>
+      )}
     </div>
   );
 };

src/components/Dashboard/Tasks.jsx

@@ -1,10 +1,16 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import { useSelectedProject } from "../../slices/apiDataManager";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
 
 const TasksCard = () => {
-  const projectId = useSelector((store) => store.localVariables?.projectId);
+  const projectId = useSelectedProject();
-  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">
@@ -14,28 +20,30 @@ const TasksCard = () => {
         </h5>
       </div>
 
-      {loading ? (
+      {isLoading ? (
-        // Loader will be displayed when loading is true
+        // Loader while fetching
         <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>
-      ) : error ? (
+      ) : isError ? (
-        // Error message if there's an error
+        // Show error
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
+          {error?.message || "Error loading data"}
+        </div>
       ) : (
-        // Actual data when loaded successfully
+        // Show data
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
             <h4 className="mb-0 fw-bold">
-              {tasksCardData?.totalTasks?.toLocaleString()}
+              {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
             </h4>
             <small className="text-muted">Total</small>
           </div>
           <div>
             <h4 className="mb-0 fw-bold">
-              {tasksCardData?.completedTasks?.toLocaleString()}
+              {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
             </h4>
             <small className="text-muted">Completed</small>
           </div>

src/components/Dashboard/Teams.jsx

@@ -1,33 +1,45 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } 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 projectId = useSelector((store) => store.localVariables?.projectId);
+  const queryClient = useQueryClient();
-  const { teamsCardData, loading, error } = useDashboardTeamsCardData(projectId);
+ const projectId = useSelectedProject()
 
-  const [totalEmployees, setTotalEmployee] = useState(0);
+  const {
-  const [inToday, setInToday] = useState(0);
+    data: teamsCardData,
-
+    isLoading,
-  // Update state when API data arrives
+    isError,
-  useEffect(() => {
+    error,
-    setTotalEmployee(teamsCardData?.totalEmployees || 0);
+  } = useDashboardTeamsCardData(projectId);
-    setInToday(teamsCardData?.inToday || 0);
-  }, [teamsCardData]);
 
   // Handle real-time updates via eventBus
-  const handler = useCallback((msg) => {
+  const handler = useCallback(
+    (msg) => {
       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">
@@ -36,18 +48,17 @@ const Teams = () => {
         </h5>
       </div>
 
-      {loading ? (
+      {isLoading ? (
-        // 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>
-      ) : error ? (
+      ) : isError ? (
-        // Error message if data fetching fails
+        <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>
       ) : (
-        // 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>

src/components/Directory/ListViewContact.jsx

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

src/components/Directory/ManageBucket1.jsx

@@ -23,7 +23,6 @@ const ManageBucket1 = () => {
   const handleClose = () => {
     setAction(null);
     setSelectedBucket(null);
-    setDeleteId(null);
   };
   const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
     handleClose();
@@ -49,8 +48,10 @@ const ManageBucket1 = () => {
         <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
       </div>
 
-      {action == "create" ? (
+      {action ? (
         <>
+          {action && (
+            <div>
               <BucketForm
                 selectedBucket={selectedBucket}
                 mode={action} // pass create | edit
@@ -61,11 +62,12 @@ const ManageBucket1 = () => {
                 }}
                 isPending={creating || updating}
               />
-          {action === "edit" && selectedBucket && (
+              {action === "edit" && (
                 <AssignedBucket
                 selectedBucket={selectedBucket}
                 handleClose={handleClose}
-            />
+              />)}
+            </div>
           )}
         </>
       ) : (
@@ -92,10 +94,18 @@ const ManageBucket1 = () => {
             loading={isLoading}
             searchTerm={searchTerm}
             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 { projects, loading: projectLoading } = useProjects();
+  const { data: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={true}
+            defaultRange={false}
             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 d-flex p-2">
+        <div className="card page-min-h 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,30 +149,11 @@ 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,
@@ -180,7 +161,10 @@ const Documents = ({ Document_Entity, Entity }) => {
                     })
                   }
                 >
-                  <i className="bx bx-plus fs-4 text-white"></i>
+                  <i className="bx bx-plus-circle me-2"></i>
+                  <span className="d-none d-md-inline-block">
+                    Add New Document
+                  </span>
                 </button>
               )}
             </div>

src/components/Employee/DemoTable.jsx

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

src/components/Employee/EmpBanner.jsx

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

src/components/Employee/EmployeeList.jsx

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

src/components/Employee/EmployeeSchema.jsx

@@ -0,0 +1,124 @@
+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,36 +1,37 @@
 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 {
-  cacheData,
+  useEmployeeProfile,
-  clearCacheKey,
+  useUpdateEmployee,
-  getCachedData,
+} from "../../hooks/useEmployees";
-} 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 mobileNumberRegex = /^[0-9]\d{9}$/;
+const ManageEmployee = ({ employeeId, onClosed }) => {
-
-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(() => {
@@ -38,6 +39,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   }, [employeeId]);
 
   const [disabledEmail, setDisabledEmail] = useState(false);
+
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
@@ -45,98 +47,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   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,
@@ -147,25 +60,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     reset,
     getValues,
   } = useForm({
-    resolver: zodResolver(userSchema),
+    resolver: zodResolver(employeeSchema),
-    defaultValues: {
+    defaultValues: defatEmployeeObj,
-      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",
   });
 
@@ -176,7 +72,13 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
       data.email = null;
     }
 
-    updateEmployee({ ...data, IsAllEmployee }, {
+    const payload = { ...data };
+
+    if (employeeId) {
+      payload.id = employeeId;
+    }
+
+    updateEmployee(payload, {
       onSuccess: () => {
         reset();
         onClosed();
@@ -184,7 +86,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     });
   };
 
-
   useEffect(() => {
     if (!loading && !error && employee) {
       setCurrentEmployee(employee);
@@ -212,6 +113,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             permanentAddress: currentEmployee.permanentAddress || "",
             phoneNumber: currentEmployee.phoneNumber || "",
             jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+            organizationId: currentEmployee.organizationId || "",
+            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
           }
         : {}
     );
@@ -219,13 +122,21 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
     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"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
+        <div className="text-center">
+          <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>First Name</Label>
+            <Label className="form-text text-start" required>
+              First Name
+            </Label>
             <input
               type="text"
               name="firstName"
@@ -244,7 +155,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.firstName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.firstName.message}
               </div>
             )}
@@ -267,14 +181,18 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.middleName && (
-              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
+              <div
+                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>Last Name</Label>
+            <Label className="form-text text-start" required>
+              Last Name
+            </Label>
             <input
               type="text"
               {...register("lastName", {
@@ -291,16 +209,24 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             />
             {errors.lastName && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.lastName.message}
               </div>
             )}
           </div>
-
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <div className="form-text text-start">Email</div>
+            <Label
+              htmlFor="email"
+              className="text-start form-text"
+              required={hasAccessAplication}
+            >
+              Email
+            </Label>
             <input
               type="email"
               id="email"
@@ -321,7 +247,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Phone Number</Label>
+            <Label className="form-text text-start" required>
+              Phone Number
+            </Label>
             <input
               type="text"
               keyboardType="numeric"
@@ -345,7 +273,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         <div className="row mb-3"></div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Gender</Label>
+            <Label className="form-text text-start" required>
+              Gender
+            </Label>
 
             <div className="input-group">
               <select
@@ -387,7 +317,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.birthDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.birthDate.message}
               </div>
             )}
@@ -408,7 +341,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             </div>
 
             {errors.joiningDate && (
-              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
                 {errors.joiningDate.message}
               </div>
             )}
@@ -416,7 +352,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">
-            <Label className="form-text text-start" required>Current Address</Label>
+            <Label className="form-text text-start" required>
+              Current Address
+            </Label>
 
             <textarea
               id="currentAddress"
@@ -428,15 +366,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               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>
+              <small> {500 - currentAddressLength} characters left</small>
-                {" "}
-                {500 - currentAddressLength} characters left
-              </small>
             </div>
             {errors.currentAddress && (
               <div
@@ -466,9 +400,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               }}
             ></textarea>
             <div className="text-end muted">
-              <small>
+              <small>{500 - permanentAddressLength} characters left</small>
-                {500 - permanentAddressLength} characters left
-              </small>
             </div>
             {errors.permanentAddress && (
               <div
@@ -480,6 +412,55 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </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">
@@ -488,7 +469,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
         </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Official Designation</Label>
+            <Label className="form-text text-start" required>
+              Official Designation
+            </Label>
             <div className="input-group">
               <select
                 className="form-select form-select-sm"
@@ -601,15 +584,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </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
@@ -626,18 +600,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
               className="btn btn-sm btn-primary"
               disabled={isPending}
             >
-              {isPending
+              {isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
-                ? "Please Wait..."
-                : employeeId
-                  ? "Update"
-                  : "Create"}
             </button>
-
-
           </div>
         </div>
       </form>
-
     </>
   );
 };

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -16,8 +16,11 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation } from "react-router-dom";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
-  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
+  const selectedProjectId = useSelector(
-  const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
+    (store) => store.localVariables.projectId
+  );
+  const { data, isLoading, isError, error, isFetching, isFetched } =
+    useExpenseFilter();
 
   const groupByList = useMemo(() => {
     return [
@@ -27,11 +30,10 @@ 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);
 
@@ -40,7 +42,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     defaultValues: defaultFilter,
   });
 
-  const { control, register, handleSubmit, reset, watch } = methods;
+  const { control, handleSubmit, reset, setValue, watch } = methods;
   const isTransactionDate = watch("isTransactionDate");
 
   const closePanel = () => {
@@ -78,34 +80,44 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   }, [location]);
 
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
+  if (isError && isFetched)
+    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">Choose Date:</label>
+              <label className="form-label me-2">Filter By:</label>
-              <div className="form-check form-switch m-0">
+              <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
-                <input
+                <button
-                  className="form-check-input"
+                  type="button"
-                  type="checkbox"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  id="switchOption1"
+                    isTransactionDate ? "active btn-primary text-white" : ""
-                  {...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>
 
@@ -169,7 +181,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
             </div>
           </div>
           <div className="mb-2 text-start ">
-        <label htmlFor="groupBySelect" className="form-label">Group By :</label>
+            <label htmlFor="groupBySelect" className="form-label">
+              Group By :
+            </label>
             <select
               id="groupBySelect"
               className="form-select form-select-sm"
@@ -187,18 +201,17 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           <div className="d-flex justify-content-end py-3 gap-2">
             <button
               type="button"
-              className="btn btn-label-secondary btn-xs"
+              className="btn btn-label-secondary btn-sm"
               onClick={onClear}
             >
               Clear
             </button>
-            <button type="submit" className="btn btn-primary btn-xs">
+            <button type="submit" className="btn btn-primary btn-sm">
               Apply
             </button>
           </div>
         </form>
       </FormProvider>
-      
     </>
   );
 };

src/components/Expenses/ManageExpense.jsx

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

src/components/Expenses/PreviewDocument.jsx

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

src/components/Expenses/ViewExpense.jsx

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

src/components/Layout/Header.jsx

@@ -12,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,14 +26,16 @@ 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);
   const isProjectPath = /^\/projects$/.test(location.pathname);
+    const isCollectionPath =
+    /^\/collection$/.test(location.pathname) || /^\/$/.test(location.pathname);
 
   const showProjectDropdown = (pathname) => {
     const isDirectoryPath = /^\/directory$/.test(pathname);
@@ -59,41 +61,9 @@ 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}`);
@@ -129,7 +99,7 @@ const Header = () => {
     }
   }
 
-  const { openChangePassword } = useChangePassword();
+
 
   useEffect(() => {
     if (
@@ -221,6 +191,7 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
+        <div className="d-flex align-items-center">
           {showProjectDropdown(location.pathname) && (
           <div className="align-items-center">
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
@@ -247,7 +218,7 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                    {isDashboardPath && (
+                    {(isDashboardPath|| isCollectionPath) &&(
                       <li>
                         <button
                           className="dropdown-item"
@@ -279,6 +250,7 @@ const Header = () => {
             </div>
           </div>
         )}
+        </div>
 
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
@@ -426,6 +398,15 @@ 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
@@ -445,7 +426,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              <li onClick={openChangePassword}>
+              <li onClick={changePass}>
                 {" "}
                 <a
                   aria-label="go to profile"
@@ -455,6 +436,8 @@ const Header = () => {
                   <span className="align-middle">Change Password</span>
                 </a>
               </li>
+
+             
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -462,11 +445,10 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  href="/logout"
+                  onClick={()=>logout()}
-                  onClick={handleLogout}
                 >
-                  <i className="bx bx-power-off me-2"></i>
+                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
-                  <span className="align-middle">Log Out</span>
+                  <span className="align-middle">SignOut</span></>}
                 </a>
               </li>
             </ul>

src/components/Organization/AssignOrg.jsx

@@ -93,8 +93,15 @@ 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-2">
+        <div className="d-flex justify-content-between align-items-center text-start mb-1">
-          <div className="fw-semibold text-wrap">{orgData.name}</div>
+          <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">{orgData.name}</p>
+          </div>
           <div className="text-end">
             <button
               type="button"
@@ -106,7 +113,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">
@@ -114,7 +121,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Person :
+           <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
@@ -125,7 +132,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Contact Number :
+           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
@@ -136,7 +143,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Email Address :
+          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
           </label>
           <div className="text-muted">{orgData.email}</div>
         </div>
@@ -147,7 +154,8 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-            Service provider Id (SPRID) :
+          <i className="bx bx-sm me-1 bx-barcode"></i>
+  Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
@@ -158,7 +166,7 @@ const AssignOrg = ({ setStep }) => {
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            Address :
+           <i className='bx bx-sm me-1 bx-map'></i> Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
@@ -171,8 +179,8 @@ const AssignOrg = ({ setStep }) => {
           {flowType !== "default" && (
             <>
               {/* Organization Type */}
-              <div className="mb-1 text-start">
+              <div className="mb-3 text-start">
-                <Label htmlFor="organizationTypeId" required>
+                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
                   Organization Type
                 </Label>
                 <div className="d-flex flex-wrap gap-3 mt-1">
@@ -206,11 +214,11 @@ const AssignOrg = ({ setStep }) => {
 
               {/* Services */}
               <div className="mb-3">
-                <Label htmlFor="serviceIds" required>
+                <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
                   Select Services
                 </Label>
                 {mergedServices?.map((service) => (
-                  <div key={service.id} className="form-check">
+                  <div key={service.id} className="form-check mb-3">
                     <input
                       type="checkbox"
                       value={service.id}
@@ -230,14 +238,14 @@ const AssignOrg = ({ setStep }) => {
           )}
 
           {/* Buttons: Always visible */}
-          <div className="d-flex justify-content-between mt-3">
+          <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
-              className="btn btn-xs btn-outline-secondary"
+              className="btn btn-sm btn-outline-secondary"
               onClick={handleBack}
               disabled={isPending}
             >
-              <i className="bx bx-left-arrow-alt"></i> Back
+              <i className="bx bx-chevron-left"></i>Back
             </button>
             <button
               type="submit"
@@ -247,8 +255,8 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                ? "Assign Organization"
+                  ? "Assign to Organization"
-                : "Add"}
+                  : "Assign to Project"}
             </button>
           </div>
         </form>

src/components/Organization/ManagOrg.jsx

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

src/components/Organization/OrgPicker.css

@@ -0,0 +1,24 @@
+/* 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,13 +10,15 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { spridSchema } from "./OrganizationSchema";
 import { OrgCardSkeleton } from "./OrganizationSkeleton";
+import { useQueryClient } from "@tanstack/react-query";
+
 
 // Zod schema: only allow exactly 4 digits
 
 const OrgPickerFromSPId = ({ title, placeholder }) => {
-  const { onClose, startStep, flowType, onOpen, prevStep } =
+  const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
     useOrganizationModal();
-
+ const clientQuery = useQueryClient()
   const {
     register,
     handleSubmit,
@@ -36,7 +38,10 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
     setSPRID(formdata.spridSearchText);
   };
   
-  const handleOrg = (orgId) => {};
+  const handleCrateOrg = () => {
+     clientQuery.removeQueries({queryKey:["organization"]})
+    onOpen({ startStep: 4,orgData:null })
+  };
   const SP = watch("spridSearchText");
   return (
     <div className="d-block">
@@ -78,16 +83,13 @@ 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/SP-Placeholdeer.svg"
+                    src="/public/assets/img/orgLogo.png"
                     alt="logo"
                     width={50}
                     height={50}
                   />
                 </div>
-                <div
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
-                  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
@@ -102,6 +104,16 @@ 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>
             ))}
@@ -119,7 +131,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <button
           type="button"
           className="btn btn-sm btn-primary mt-3"
-          onClick={() => onOpen({ startStep: 4 })}
+          onClick={handleCrateOrg}
         >
           <i className="bx bx-plus-circle me-2"></i>
           Create New Organization

src/components/Organization/OrgPickerfromTenant.jsx

@@ -6,6 +6,7 @@ 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("");
@@ -70,8 +71,8 @@ const OrgPickerfromTenant = ({ title }) => {
 
   return (
     <div className="d-block">
-      <div className="text-start mb-1">
+      <div className="d-flex align-items-center gap-2 mb-1">
-        <Label className="text-secondary">{title}</Label>
+        <Label className="mb-0">{title}</Label>
         <input
           type="text"
           value={searchText}
@@ -81,11 +82,12 @@ const OrgPickerfromTenant = ({ title }) => {
         />
       </div>
 
+
       {/* ---- Organization list ---- */}
       {isLoading ? (
         <div>Loading....</div>
       ) : data && data?.data?.length > 0 ? (
-        <div className="dataTables_wrapper no-footer  pb-2">
+        <div className="dataTables_wrapper no-footer pb-5">
           <table className="table dataTable text-nowrap">
             <thead>
               <tr className="table_header_border">
@@ -99,6 +101,13 @@ const OrgPickerfromTenant = ({ title }) => {
                 </th>
               </tr>
             </thead>
+          </table>
+
+          <div
+            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) => (
@@ -108,13 +117,18 @@ const OrgPickerfromTenant = ({ title }) => {
                           {col.getValue(row)}
                         </td>
                       ))}
-                      <td className="sticky-action-column bg-white">
+                      <td className="sticky-action-column p-0 bg-white">
-                        <button
+                        <div className="p-1">
-                          className="btn btn-sm btn-primary"
+                          <span
-                          onClick={() => onOpen({ startStep: 3, orgData: row })}
+                            type="submit"
+                            className="btn btn-sm"
+                            onClick={() =>
+                              onOpen({ startStep: 3, orgData: row })
+                            }
                           >
-                          Select
+                            <i class='bx bx-right-arrow-circle text-primary'></i>
-                        </button>
+                          </span>
+                        </div>
                       </td>
                     </tr>
                   ))
@@ -122,6 +136,7 @@ const OrgPickerfromTenant = ({ title }) => {
               </tbody>
             </table>
           </div>
+        </div>
       ) : null}
       <div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">
         <small className="mb-1">

src/components/Organization/OrganizationModal.jsx

@@ -19,6 +19,7 @@ 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 } =
@@ -53,14 +54,14 @@ const OrganizationModal = () => {
   };
 
   const RenderTitle = useMemo(() => {
-    if (orgData) {
+    if (orgData && startStep === 3 ) {
       return "Assign Organization";
     }
 
     if (startStep === 1) {
       return orgData && orgData !== null
         ? "Add Organization"
-        : "Choose Organization1";
+        : "Choose Organization";
     }
 
     if (startStep === 2) {
@@ -70,8 +71,11 @@ const OrganizationModal = () => {
     if (startStep === 3) {
       return "Assign Organization";
     }
+    if(startStep === 5){
+      return "Organization Details"
+    }
 
-    return "Manage Organization";
+    return  `${orgData ? "Update":"Create"} Organization`;
   }, [startStep, orgData]);
 
   const contentBody = (
@@ -94,6 +98,9 @@ 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()
+    .string().trim()
     .min(1, { message: "Email is required" })
     .email("Invalid email address"),
   serviceIds: z
     .array(z.string())
-    .min(1, { message: "Please insert service id" }),
+    .min(1, { message: "Service isrequired" }),
 });
 
 export const defaultOrganizationValues = {

src/components/Organization/OrganizationSkeleton.jsx

@@ -42,3 +42,82 @@ 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 class="bx bx-buildings"></i>
+          <i className="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">
+    <div className="card px-0 px-sm-4 pb-12 pt-5">
       <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" ></i>
+                        <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                         <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
                         <i className="bx bx-trash text-danger cursor-pointer"></i>
                       </div>
@@ -142,7 +142,7 @@ const OrganizationsList = ({searchText}) => {
                     colSpan={organizationsColumns.length + 1}
                     className="text-center"
                   >
-                    <p className="fw-semibold">Not Found</p>
+                    <p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
                   </td>
                 </tr>
               )}

src/components/Organization/ViewOrganization.jsx

@@ -0,0 +1,116 @@
+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}
+            project={projects_Details?.id}
             handleSubmitForm={handleFormSubmit}
             onClose={() => setIsOpenModal(false)}
             isPending={isPending}

src/components/Project/AssignTask.jsx

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

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -32,8 +32,7 @@ const EditActivityModal = ({
   building,
   floor,
   onClose,
-} ) =>
+}) => {
-{
 
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
@@ -58,8 +57,7 @@ const EditActivityModal = ({
     },
   });
   const { mutate: UpdateTask, isPending } = useManageTask({
-  onSuccessCallback: (response) =>
+    onSuccessCallback: (response) => {
-  {
       showToast(response?.message, "success")
       onClose()
     }
@@ -107,8 +105,7 @@ useEffect(() => {
     setSelectedActivity(selected || null);
   }, [activityID, activities]);
 
-  const onSubmitForm = (data) =>
+  const onSubmitForm = (data) => {
-  {
     const payload = {
       ...data,
       id: workItem?.workItem?.id ?? workItem?.id,
@@ -162,14 +159,26 @@ useEffect(() => {
           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 disabled>Select Activity</option>
+          <option >Select Activity</option>
           {loadingActivities ? (
             <option>Loading...</option>
           ) : (

src/components/Project/Infrastructure/TaskModel.jsx

@@ -3,10 +3,12 @@ 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, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
@@ -15,6 +17,8 @@ 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"),
@@ -27,6 +31,8 @@ const defaultModel = {
   buildingID: "",
   floorId: "",
   workAreaId: "",
+  serviceId: "",
+  activityGroupId: "",
   activityID: "",
   workCategoryId: "",
   plannedWork: 0,
@@ -35,18 +41,42 @@ 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) => {
-    setSelectedService(e.target.value);
+    const value = 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,
@@ -82,7 +112,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      onClose?.();
+      setValue("activityID",""),
+      setValue("plannedWork",0),
+      setValue("completedWork",0)
+      setValue("comment","")
     },
   });
   useEffect(() => {
@@ -188,15 +221,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
       {/* Services Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
-          <Label className="form-label">Select Services</Label>
+          <Label className="form-label" required>Select Service</Label>
           <select
-            name="DataTables_Table_0_length"
-            aria-controls="DataTables_Table_0"
             className="form-select form-select-sm"
-            aria-label="Select Service"
+            {...register("serviceId")}
             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}>
@@ -204,35 +240,46 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
               </option>
             ))}
           </select>
-          {errors.buildingID && (
-            <p className="danger-text">{errors.buildingID.message}</p>
-          )}
         </div>
       )}
 
-      {/* Activity Selection */}
+      {/* Activity Group (Organization) Selection */}
-      {selectedWorkArea && (
+      {selectedService && (
         <div className="col-12 text-start">
-          <Label className="form-label" required>Select Activity</Label>
+          <Label className="form-label" required>Select Activity Group</Label>
           <select
             className="form-select form-select-sm"
-            {...register("activityID")}
+            {...register("activityGroupId")}
+            value={selectedGroup}
+            onChange={handleGroupChange}
           >
-            <option value="">Select Activity</option>
+            <option value="">Select Group</option>
-            {activityData.map((a) => (
+            {groupsLoading && <option>Loading...</option>}
-              <option key={a.id} value={a.id}>
+            {groups?.map((g) => (
-                {a.activityName}
+              <option key={g.id} value={g.id}>{g.name}</option>
-              </option>
             ))}
           </select>
-          {errors.activityID && (
+          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
-            <p className="danger-text">{errors.activityID.message}</p>
-          )}
         </div>
       )}
 
 
-      {selectedWorkArea && (
+      {/* Activity Selection */}
+      {selectedGroup && (
+        <div className="col-12 text-start">
+          <Label className="form-label" required>Select Activity</Label>
+          <select className="form-select form-select-sm" {...register("activityID")}>
+            <option value="">Select Activity</option>
+            {activitiesLoading && <option>Loading...</option>}
+            {activities?.map((a) => (
+              <option key={a.id} value={a.id}>{a.activityName}</option>
+            ))}
+          </select>
+          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
+        </div>
+      )}
+
+      {watchActivityId && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>
           <select
@@ -312,9 +359,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         <button
           type="submit"
           className="btn btn-sm btn-primary"
-          disabled={isSubmitting}
+          // disabled={isSubmitting}
+           disabled={isPending}
         >
-          {isSubmitting ? "Please Wait..." : "Add Task"}
+          {isPending ? "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 { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
+import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
-import { cacheData } from "../../../slices/apiDataManager";
+import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -15,19 +15,19 @@ import {
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
 import { formatNumber } from "../../../utils/dateUtils";
+import { useServices } from "../../../hooks/masterHook/useMaster";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const selectedProject = useSelectedProject()
+  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,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   aria-controls={`collapse-${workArea.id}`}
                 >
                   <i
-                    className={`bx me-2 toggle-icon ${
+                    className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
-                      IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
                       }`}
                     style={{
                       fontSize: "1.2rem",
@@ -109,7 +108,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <ProgressBar
                         completedWork={formatNumber(workArea?.completedWork)}
                         plannedWork={formatNumber(workArea?.plannedWork)}
-                          className="m-0 text-info"
+                        className="m-0 my-2 " height="6px"rounded showLabel={true}
                       />
                     </div>
                   </div>
@@ -121,7 +120,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                 className="accordion-collapse collapse"
                 aria-labelledby={`heading-${workArea.id}`}
               >
-                <div className="accordion-body px-1">
+                <div className="accordion-body px-6">
                   {isLoading || ProjectTaskList === undefined ? (
                     <div className="text-center py-2 text-muted">Loading activities...</div>
                   ) : ProjectTaskList?.length === 0 ? (
@@ -131,6 +130,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <thead>
                         <tr>
                           <th className="infra-activity-table-header-first">Activity</th>
+                          <th className="infra-activity-table-header-second">Service</th>
                           <th className="infra-activity-table-header d-sm-table-cell d-md-none">
                             Status
                           </th>

src/components/Project/Infrastructure/WorkAreaModel.jsx

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

src/components/Project/Infrastructure/WorkItem.jsx

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

src/components/Project/ManageProject.jsx

@@ -77,13 +77,7 @@ 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,11 +1,24 @@
 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";
 
-const currentDate = new Date().toLocaleDateString('en-CA');
+import {
+  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;
@@ -14,54 +27,23 @@ const formatDate = (date) => {
   if (isNaN(d.getTime())) {
     return currentDate;
   }
-  return d.toLocaleDateString('en-CA');
+  return d.toLocaleDateString("en-CA");
 };
-const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
+const ManageProjectInfo = ({ project, onClose }) => {
-  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 projectSchema = z
+  const { projects_Details, loading } = useProjectDetails(project);
-    .object({
+  const { data, isLoading, isError, error } = useOrganizationsList(
-      ...(project?.id ? { id: z.string().optional() } : {}),
+    ITEMS_PER_PAGE,
-      name: z.string().min(1, { message: "Project Name is required" }),
+    1,
-      shortName: z.string().optional(),
+    true
-      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(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 { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
+  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
 
   const {
     register,
@@ -72,80 +54,66 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
     getValues,
   } = useForm({
     resolver: zodResolver(projectSchema),
-    defaultValues: {
+    defaultValues: projectDefault,
-      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(() => {
-    setCurrentProject(project);
+    if (project && projects_Details)
-    reset(
+      reset({
-      project
+        name: projects_Details?.name || "",
-        ? {
+        shortName: projects_Details?.shortName || "",
-          id: project?.id || "",
+        contactPerson: projects_Details?.contactPerson || "",
-          name: project?.name || "",
+        projectAddress: projects_Details?.projectAddress || "",
-          shortName: project?.shortName || "",
+        startDate: formatDate(projects_Details?.startDate) || "",
-          contactPerson: project?.contactPerson || "",
+        endDate: formatDate(projects_Details?.endDate) || "",
-          projectAddress: project?.projectAddress || "",
+        projectStatusId:
-          startDate: formatDate(project?.startDate) || "",
+          String(projects_Details?.projectStatus?.id) ||
-          endDate: formatDate(project?.endDate) || "",
+          DEFAULT_EMPTY_STATUS_IDF,
-          projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
+        promoterId: projects_Details?.promoter?.id || "",
+        pmcId: projects_Details?.pmc?.id || "",
+      });
+    setAddressLength(projects_Details?.projectAddress?.length || 0);
+  }, [project, projects_Details, reset,data]);
+
+  const onSubmitForm = (formData) => {
+    if (project) {
+      let payload = {
+        ...formData,
+        startDate: localToUtc(formData.startDate),
+        endDate: localToUtc(formData.endDate),
+        id: project,
+      };
+      UpdateProject({ projectId: project, payload: payload });
+    }else{
+       let payload = {
+        ...formData,
+        startDate: localToUtc(formData.startDate),
+        endDate: localToUtc(formData.endDate),
+      };
+      CeateProject(payload)
     }
-        : {}
-    );
-    setAddressLength(project?.projectAddress?.length || 0);
-  }, [project, reset]);
-
-  /**
-
- * Handles the form submission.
-
- * @param {object} updatedProject - The project data from the form.
-
- */
-
-  const onSubmitForm = (updatedProject) => {
-
-    handleSubmitForm(updatedProject);
   };
 
   const handleCancel = () => {
-    reset({
+    reset(projectDefault);
-      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">
+        <h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
-          {project?.id ? "Edit Project" : "Create Project"}
-        </h5>
       </div>
-      <form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
+      <form
+        className="row g-2 text-start"
+        onSubmit={handleSubmit(onSubmitForm)}
+      >
         <div className="col-12 col-md-12">
           <Label htmlFor="name" required>
             Project Name
@@ -225,7 +193,10 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
           />
 
           {errors.startDate && (
-            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
               {errors.startDate.message}
             </div>
           )}
@@ -245,13 +216,16 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
           />
 
           {errors.endDate && (
-            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
               {errors.endDate.message}
             </div>
           )}
         </div>
 
-        <div className="col-12 col-md-6">
+        <div className="col-12 ">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Status
           </label>
@@ -265,15 +239,11 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
               valueAsNumber: false,
             })}
           >
-            {/* <option disabled>Status</option>
+            {PROJECT_STATUS.map((status) => (
-                <option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
+              <option key={status.id} value={status.id}>
-            <option value={ACTIVE_STATUS_ID}>Active</option>
+                {status.label}
-            <option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
+              </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
@@ -284,6 +254,83 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
             </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>
@@ -301,6 +348,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
               }}
             />
           </div>
+
           <div className="text-end" style={{ fontSize: "12px" }}>
             {maxAddressLength - addressLength} characters left
           </div>
@@ -319,19 +367,18 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
             className="btn btn-label-secondary btn-sm me-2"
             onClick={handleCancel}
             aria-label="Close"
-            disabled={isPending}
+            disabled={isPending || isCreating || loading}
           >
             Cancel
           </button>
           <button
             type="submit"
             className="btn btn-primary btn-sm"
-            disabled={isPending}
+            disabled={isPending || isCreating || loading}
           >
-            {isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
+            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
           </button>
         </div>
-
       </form>
     </div>
   );

src/components/Project/MapUsers.jsx

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

@@ -16,39 +16,13 @@ import {
 import GlobalModel from "../common/GlobalModel";
 import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
+import { useProjectContext } from "../../pages/project/ProjectPage";
 
-const ProjectCard = ({ projectData, recall }) => {
+const ProjectCard = ({ project }) => {
-  const [ projectInfo, setProjectInfo ] = useState( projectData );
+  const dispatch = useDispatch();
- 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 {
+  const { setMangeProject } = useProjectContext();
-   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 + "%";
@@ -60,35 +34,17 @@ const ProjectCard = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    dispatch(setProjectId(projectInfo.id))
+    dispatch(setProjectId(project.id));
     navigate(`/projects/details`);
   };
-
+  const handleViewActivities = () => {
-  const handleFormSubmit = (updatedProject) => {
+    dispatch(setProjectId(project.id));
-  if (projectInfo?.id) {
+    navigate(`/activities/records?project=${project.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  ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
+        <div className={`card cursor-pointer`}>
           <div className="card-header pb-4">
             <div className="d-flex align-items-start">
               <div className="d-flex align-items-center">
@@ -103,12 +59,10 @@ const ProjectCard = ({ projectData, recall }) => {
                     className="mb-0 stretched-link text-heading text-start"
                     onClick={handleViewProject}
                   >
-                    {projectInfo.shortName
+                    {project?.shortName ? project?.shortName : project?.name}
-                      ? projectInfo.shortName
-                      : projectInfo.name}
                   </h5>
                   <div className="client-info text-body">
-                    <span>{projectInfo.shortName ? projectInfo.name : ""}</span>
+                    <span>{project?.shortName ? project?.name : ""}</span>
                   </div>
                 </div>
               </div>
@@ -120,14 +74,6 @@ const ProjectCard = ({ projectData, recall }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                        {loading ? (
-                <div
-                  className="spinner-border spinner-border-sm text-secondary"
-                  role="status"
-                >
-                  <span className="visually-hidden">Loading...</span>
-                </div>
-              ) : (
                     <i
                       className="bx bx-dots-vertical-rounded bx-sm text-muted"
                       data-bs-toggle="tooltip"
@@ -136,7 +82,6 @@ const ProjectCard = ({ projectData, recall }) => {
                       data-bs-custom-class="tooltip-dark"
                       title="More Action"
                     ></i>
-              )}
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
                     <li>
@@ -150,19 +95,18 @@ const ProjectCard = ({ projectData, recall }) => {
                       </a>
                     </li>
 
-                    <li onClick={handleShow}>
+                    <li>
-                      <a className="dropdown-item">
+                      <a className="dropdown-item"   onClick={() =>
+                          setMangeProject({
+                            isOpen: true,
+                            Project: project.id,
+                          })
+                        }>
                         <i className="bx bx-pencil me-2"></i>
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li
+                    <li onClick={handleViewActivities}>
-                      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>
@@ -180,22 +124,22 @@ const ProjectCard = ({ projectData, recall }) => {
                   <span className="text-heading fw-medium">
                     Contact Person:{" "}
                   </span>
-                  {projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
+                  {project?.contactPerson ? project.contactPerson : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Start Date: </span>
-                  {projectInfo.startDate
+                  {project.startDate
-                    ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
+                    ? moment(project?.startDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Deadline: </span>
 
-                  {projectInfo.endDate
+                  {project?.endDate
-                    ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
+                    ? moment(project?.endDate).format("DD-MMM-YYYY")
                     : "NA"}
                 </p>
-                <p className="mb-0">{projectInfo.projectAddress}</p>
+                <p className="mb-0">{project?.projectAddress}</p>
               </div>
             </div>
           </div>
@@ -205,36 +149,37 @@ const ProjectCard = ({ projectData, recall }) => {
                 <span
                   className={
                     `badge rounded-pill ` +
-                    getProjectStatusColor(projectInfo.projectStatusId)
+                    getProjectStatusColor(project?.projectStatusId)
                   }
                 >
-                  {getProjectStatusName(projectInfo.projectStatusId)}
+                  {getProjectStatusName(project?.projectStatusId)}
                 </span>
               </p>{" "}
-              {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
+              {getDateDifferenceInDays(project?.endDate,new Date() ) >= 0 && (
                 <span className="badge bg-label-success ms-auto">
-                  {projectInfo.endDate &&
+                  {project?.endDate &&
-                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
+                    getDateDifferenceInDays(project?.endDate, new Date())}{" "}
                   Days left
                 </span>
               )}
-              {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
+              {getDateDifferenceInDays(project?.endDate, new Date()) < 0 && (
                 <span className="badge bg-label-danger ms-auto">
-                  {projectInfo.endDate &&
+                  {project?.endDate &&
-                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
+                    getDateDifferenceInDays(project?.endDate, new  Date())}{" "}
                   Days overdue
                 </span>
               )}
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-body">
-                Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
+                Task: {formatNumber(project?.completedWork)} /{" "}
+                {formatNumber(project?.plannedWork)}
               </small>
               <small className="text-body">
                 {Math.floor(
                   getProgressInNumber(
-                    projectInfo.plannedWork,
+                    project?.plannedWork,
-                    projectInfo.completedWork
+                    project?.completedWork
                   )
                 ) || 0}{" "}
                 % Completed
@@ -246,22 +191,20 @@ const ProjectCard = ({ projectData, recall }) => {
                 role="progressbar"
                 style={{
                   width: getProgress(
-                    projectInfo.plannedWork,
+                    project?.plannedWork,
-                    projectInfo.completedWork
+                    project?.completedWork
                   ),
                 }}
-                aria-valuenow={projectInfo.completedWork}
+                aria-valuenow={project?.completedWork}
                 aria-valuemin="0"
-                aria-valuemax={projectInfo.plannedWork}
+                aria-valuemax={project?.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>
-                  {projectInfo?.teamSize} Members
+                  {project?.teamSize} Members
                 </a>
               </div>
               <div>

src/components/Project/ProjectCardView.jsx

@@ -0,0 +1,70 @@
+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,34 +17,39 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
+import {
+  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(projectId)
+  const { projectInfra, isLoading, error } = useProjectInfra(
+    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 } = useProjectAssignedServices(projectId);
+  const { data: assignedServices, isLoading: servicesLoading } =
-
+    useProjectAssignedServices(projectId);
-  const [selectedService, setSelectedService] = useState("");
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
 
   useEffect(() => {
     setProject(projectInfra);
@@ -52,34 +57,58 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
 
   const signalRHandler = (response) => {
     setProject(response);
-  }
+  };
 
   return (
     <>
-      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
+      {showModalBuilding && (
+        <GlobalModel
+          isOpen={showModalBuilding}
+          size="md"
+          closeModal={() => setshowModalBuilding(false)}
+        >
           <BuildingModel
             project={projectInfra}
             onClose={() => setshowModalBuilding(false)}
           />
-      </GlobalModel>}
+        </GlobalModel>
-      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
+      )}
+      {showModalFloor && (
+        <GlobalModel
+          isOpen={showModalFloor}
+          size="md"
+          closeModal={() => setshowModalFloor(false)}
+        >
           <FloorModel
             project={projectInfra}
             onClose={() => setshowModalFloor(false)}
           />
-      </GlobalModel>}
+        </GlobalModel>
-      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
+      )}
+      {showModalWorkArea && (
+        <GlobalModel
+          isOpen={showModalWorkArea}
+          size="lg"
+          closeModal={() => setshowModalWorkArea(false)}
+        >
           <WorkAreaModel
             project={projectInfra}
             onClose={() => setshowModalWorkArea(false)}
           />
-      </GlobalModel>}
+        </GlobalModel>
-      {showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
+      )}
+      {showModalTask && (
+        <GlobalModel
+          isOpen={showModalTask}
+          size="lg"
+          closeModal={() => setshowModalTask(false)}
+        >
           <TaskModel
             project={projectInfra}
             onClose={() => setshowModalTask(false)}
           />
-      </GlobalModel>)}
+        </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" }}>
@@ -89,9 +118,9 @@ 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 &&
-                    <span></span>
+                    assignedServices?.length > 0 &&
-                  ) : assignedServices?.length > 1 ? (
+                    (assignedServices.length > 1 ? (
                       <label>
                         <select
                           name="DataTables_Table_0_length"
@@ -99,8 +128,9 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                           className="form-select form-select-sm"
                           aria-label="Select Service"
                           value={selectedService}
-                        onChange={handleServiceChange}
+                          onChange={(e) => dispatch(setService(e.target.value))}
                         >
+                          <option value="">All Services</option>
                           {assignedServices.map((service) => (
                             <option key={service.id} value={service.id}>
                               {service.name}
@@ -109,17 +139,10 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                         </select>
                       </label>
                     ) : (
-                    <div
+                      <h5>{assignedServices[0].name}</h5>
-                      style={{
+                    ))}
+                </div>
 
-                      }}
-                    >
-                      {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 && (
@@ -147,16 +170,20 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Work Areas
-                      </button></>)}
+                      </button>
+                    </>
+                  )}
 
-                  {(ManageTask || ManageInfra) && (<button
+                  {(ManageTask || ManageInfra) && (
+                    <button
                       type="button"
                       className="link-button btn btn-xs rounded-md m-1 btn-primary"
                       onClick={() => setshowModalTask(true)}
                     >
                       <i className="bx bx-plus-circle me-2"></i>
                       Create Tasks
-                  </button>)}
+                    </button>
+                  )}
                 </div>
               </div>
               <div className="row ">
@@ -165,11 +192,14 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   <InfraTable
                     buildings={projectInfra}
                     projectId={projectId}
-                  // handleFloor={submitData}
+                    serviceId={selectedService}
-                  // signalRHandler ={signalRHandler}
                   />
                 )}
-                {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
+                {!isLoading && projectInfra?.length == 0 && (
+                  <div className="mt-5">
+                    <p>No Infra Avaiable</p>
+                  </div>
+                )}
               </div>
             </div>
           </div>

src/components/Project/ProjectListView.jsx

@@ -0,0 +1,285 @@
+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,8 +1,7 @@
-import React from 'react'
+import React from "react";
-import AssignRole from './AssignTask'
+import AssignRole from "./AssignTask";
 
 const ProjectModal = ({ modalConfig, closeModal }) => {
-   
   return (
     <div
       className="modal fade"
@@ -23,14 +22,14 @@ const ProjectModal = ({modalConfig,closeModal}) => {
             ></button>
             <div className="text-center mb-2"></div>
 
+            {modalConfig?.type === "assignRole" && (
+              <AssignRole assignData={modalConfig?.data} onClose={closeModal} />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-            {modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
+export default ProjectModal;
-            
-   </div>
-</div>
-</div>
-</div>
-  )
-}
-
-export default ProjectModal

src/components/Project/ProjectNav.jsx

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

src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx

@@ -1,13 +1,14 @@
 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 contactList = [
+  const orgList = [
     {
       key: "name",
       label: "Organization Name",
@@ -23,6 +24,16 @@ 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",
@@ -37,18 +48,33 @@ const ProjectAssignedOrgs = () => {
       ),
       align: "text-center",
     },
+
      {
-      key: "isActive",
+      key: "organizationType",
-      label: "Status",
+      label: "Organization Type",
       getValue: (org) => (
         <span
-          className={`text-truncate d-inline-block badge bg-label-${org.isActive ? "primary" :"secondary"}`}
+          className="text-truncate d-inline-block"
-          style={{ maxWidth: "80px" }}
+          style={{ maxWidth: "200px" }}
         >
-          {org?.isActive ? "Active" : "Inactive"}
+          {org?.organizationType || "N/A"}
         </span>
       ),
-      align: "text-start",
+      align: "text-center",
+    },
+   {
+      key: "assignedDate",
+      label: "Assigned Date",
+      getValue: (org) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {/* {org?.assignedDate || "N/A"} */}
+          {formatUTCToLocalTime(org?.assignedDate)}
+        </span>
+      ),
+      align: "text-center",
     },
   ];
 
@@ -57,11 +83,11 @@ const ProjectAssignedOrgs = () => {
 
   return (
     <div>
-      <div className="dataTables_wrapper no-footer mx-5 pb-2">
+      <div className="dataTables_wrapper no-footer mx-5 pb-2 page">
         <table className="table dataTable text-nowrap">
           <thead>
             <tr className="table_header_border">
-              {contactList.map((col) => (
+              {orgList.map((col) => (
                 <th key={col.key} className={col.align}>
                   {col.label}
                 </th>
@@ -72,7 +98,7 @@ const ProjectAssignedOrgs = () => {
             {Array.isArray(data) && data.length > 0 ? (
               data.map((row, i) => (
                 <tr key={i}>
-                  {contactList.map((col) => (
+                  {orgList.map((col) => (
                     <td key={col.key} className={col.align}>
                       {col.getValue(row)}
                     </td>
@@ -82,7 +108,7 @@ const ProjectAssignedOrgs = () => {
             ) : (
               <tr style={{ height: "200px" }}>
                 <td
-                  colSpan={contactList.length}
+                  colSpan={orgList.length}
                   className="text-center align-middle"
                 >
                   Not Assigned yet

src/components/Project/ProjectOrganization/ProjectServices.jsx

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

src/components/Project/ProjectOrganizations.jsx

@@ -7,12 +7,12 @@ const ProjectOrganizations = () => {
   const { onOpen, startStep, flowType } = useOrganizationModal();
   const selectedProject = useSelectedProject();
   return (
-    <div className="card">
+    <div className="card pb-10" >
       <div className="card-header">
         <div className="d-flex justify-content-end px-2">
           <button
             type="button"
-            className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
+            className="link-button btn btn-sm 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 { projects } = useProjects();
+  const { data } = useProjects();
   const [current_project, setCurrentProject] = useState(
-    projects.find((pro) => pro.id == project)
+    data?.find((pro) => pro.id == project)
   );
 
   const selectedProject = useSelector(
@@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
   }, [current_project]);
 
   useEffect(() => {
-    setCurrentProject(projects.find((pro) => pro.id == selectedProject));
+    setCurrentProject(data?.find((pro) => pro.id == selectedProject));
     if (current_project) {
       let val = getProgressInPercentage(
         current_project.plannedWork,

src/components/Project/ProjectSchema.jsx

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

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

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

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

@@ -1,451 +0,0 @@
-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)}>
-        <h6>Edit Tenant</h6>
+        <h5>Edit Tenant</h5>
 
-        <div className="col-sm-6 mt-1">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 mt-1 text-start">
           <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">
+        <div className="col-sm-6 text-start">
           <Label htmlFor="organizationSize" required>
             Organization Size
           </Label>
@@ -154,19 +154,19 @@ const EditProfile = ({ TenantId, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 mt-1">
+        <div className="col-12 mt-1 text-start">
           <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">
+        <div className="col-12 mt-1 text-start">
           <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">
+        <div className="col-sm-12 text-start">
           <Label htmlFor="logImage">Logo Image</Label>
           <LogoUpload
             preview={logoPreview}
@@ -176,9 +176,9 @@ const EditProfile = ({ TenantId, onClose }) => {
           />
         </div>
 
-        <div className="d-flex justify-content-center gap-2 mt-3">
+        <div className="d-flex justify-content-end 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 from "react";
+import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 const toBase64 = (file) =>
@@ -10,11 +10,15 @@ const toBase64 = (file) =>
   });
 
 export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
-  const {
+  const { register, setValue, watch, formState: { errors } } = useFormContext();
-    register,
+  const logoImage = watch("logoImage");
-    setValue,
+
-    formState: { errors },
+  // Sync preview when the form value changes
-  } = useFormContext();
+  useEffect(() => {
+    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, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
@@ -6,11 +6,14 @@ 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,
@@ -42,6 +45,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       "industryId",
       "reference",
       "logoImage",
+      "serviceIds",
     ]);
 
     if (valid) {
@@ -53,6 +57,13 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     }
   };
 
+  useEffect(() => {
+  const logoImage = getValues("logoImage"); 
+  if (logoImage) {
+    setLogoPreview(logoImage); 
+    setLogoName("Uploaded Logo"); 
+  }
+}, [getValues]);
 
 
   return (
@@ -181,7 +192,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="reference">Reference</Label>
+        <Label htmlFor="reference" required>Reference</Label>
         <select
           id="reference"
           className="form-select shadow-none border py-1 px-2 small"
@@ -198,6 +209,20 @@ 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 = hasUserPermission(MANAGE_TENANTS)
+  const canUpdateTenant = useHasUserPermission(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 class="alert alert-danger" role="alert">
+            <div 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="card p-2 mt-3">
+    <div className="p-2 mt-3">
       <div className="card-datatable text-nowrap table-responsive">
         <table className="table border-top dataTable text-nowrap">
           <thead>

src/components/Tenant/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-xs"
+            className="btn btn-label-secondary btn-sm"
             onClick={onClear}
 
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs" >
+          <button type="submit" className="btn btn-primary btn-sm" >
             Apply
           </button>
         </div>

src/components/Tenant/TenantSchema.js

@@ -33,6 +33,7 @@ export const newTenantSchema = z.object({
   organizationSize: z.string().nonempty("Organization size is required"),
   industryId: z.string().uuid("Invalid industry ID"),
   reference: z.string().nonempty("Reference is required"),
+  serviceIds: z.array(z.string()).optional(),
 });
 
 export const tenantDefaultValues = {
@@ -51,13 +52,14 @@ 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 Plan" }),
+    planId: z.string().min(1, { message: "Please select a plan to continue" }),
     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="card-datatable text-nowrap table-responsive">
+        <div className=" text-nowrap table-responsive">
           <table className="table border-top dataTable text-nowrap">
             <thead>
               <tr className="shadow-sm">

src/components/collections/AddPayment.jsx

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

src/components/collections/CollectionList.jsx

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

src/components/collections/CollectionSkeleton.jsx

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

src/components/collections/Comment.jsx

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

src/components/collections/ManageCollection.jsx

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

src/components/collections/PaymentHistoryTable.jsx

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

src/components/collections/ViewCollection.jsx

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

src/components/collections/collectionSchema.jsx

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

src/components/common/AccessDenied.jsx

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

src/components/common/Avatar.jsx

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

src/components/common/ConfirmModal.jsx

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

src/components/common/DatePicker.jsx

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

src/components/common/DateRangePicker.jsx

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

src/components/common/EmployeeSearchInput.jsx

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

src/components/common/HoverPopup.jsx

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

@@ -29,7 +29,7 @@ const Modal = ({
       >
         <div className="modal-content text-white shadow-lg">
           {/* Header */}
-          <div className="modal-header pb-2 border-0">
+          <div className="modal-header justify-content-center pb-2 border-0">
             <h5 className="modal-title">{title}</h5>
             <button
               type="button"