added expense graph

src/ModalProvider.jsx

@@ -3,15 +3,19 @@ import { useOrganizationModal } from "./hooks/useOrganization";
 import OrganizationModal from "./components/Organization/OrganizationModal";
 import { useAuthModal } from "./hooks/useAuth";
 import SwitchTenant from "./pages/authentication/SwitchTenant";
+import { useProjectModal } from "./hooks/useProjects";
+import { ProjectModal } from "./components/Project/ManageProjectInfo";
 
 const ModalProvider = () => {
   const { isOpen, onClose } = useOrganizationModal();
   const { isOpen: isAuthOpen } = useAuthModal();
+  const {isOpen:isOpenProject}  = useProjectModal()
 
   return (
     <>
       {isOpen && <OrganizationModal />}
       {isAuthOpen && <SwitchTenant />}
+      {isOpenProject && <ProjectModal/>}
     </>
   );
 };

src/components/Activities/Attendance.jsx

@@ -11,6 +11,7 @@ import { useSelector } from "react-redux";
 import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import Pagination from "../common/Pagination";
 
 const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
   const queryClient = useQueryClient();
@@ -108,6 +109,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
+  
   return (
     <>
       <div
@@ -138,7 +141,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                 <tr className="border-top-1">
                   <th colSpan={2}>Name</th>
                   <th>Role</th>
-                  <th>Organization</th>
+                  {/* <th>Organization</th> */}
                   <th>
                     <i className="bx bxs-down-arrow-alt text-success"></i>
                     Check-In
@@ -187,7 +190,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                         </td>
 
                         <td>{item.jobRoleName}</td>
-                        <td>{item.organizationName || "--"}</td>
+                        {/* <td>{item.organizationName || "--"}</td> */}
 
                         <td>
                           {item.checkInTime
@@ -226,46 +229,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
 
 
             {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
-              <nav aria-label="Page ">
-                <ul className="pagination pagination-sm justify-content-end py-1">
-                  <li
-                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
-                      }`}
-                  >
-                    <button
-                      className="page-link btn-xs"
-                      onClick={() => paginate(currentPage - 1)}
-                    >
-                      &laquo;
-                    </button>
-                  </li>
-                  {[...Array(totalPages)].map((_, index) => (
-                    <li
-                      key={index}
-                      className={`page-item ${currentPage === index + 1 ? "active" : ""
-                        }`}
-                    >
-                      <button
-                        className="page-link "
-                        onClick={() => paginate(index + 1)}
-                      >
-                        {index + 1}
-                      </button>
-                    </li>
-                  ))}
-                  <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                      }`}
-                  >
-                    <button
-                      className="page-link "
-                      onClick={() => paginate(currentPage + 1)}
-                    >
-                      &raquo;
-                    </button>
-                  </li>
-                </ul>
-              </nav>
+              
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={paginate}
+              />
             )}
           </>
         ) : (

src/components/Activities/AttendcesLogs.jsx

@@ -11,6 +11,7 @@ import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
 import { queryClient } from "../../layouts/AuthLayout";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Pagination from "../common/Pagination";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -84,56 +85,50 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
     dateRange.endDate,
     organizationId
   );
-  const filtering = (data) => {
-    const filteredData = showPending
-      ? data.filter((item) => item.checkOutTime === null)
-      : data;
+  const filtering = useCallback((dataToFilter) => {
+  const filteredData = showPending
+    ? dataToFilter.filter((item) => item.checkOutTime === null)
+    : dataToFilter;
 
-    const group1 = filteredData
-      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-      .sort(sortByName);
-    const group2 = filteredData
-      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-      .sort(sortByName);
-    const group3 = filteredData
-      .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-      .sort(sortByName);
-    const group4 = filteredData.filter(
-      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
-    );
-    const group5 = filteredData
-      .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-      .sort(sortByName);
-    const group6 = filteredData
-      .filter((d) => d.activity === 5)
-      .sort(sortByName);
+  const group1 = filteredData
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+    .sort(sortByName);
+  const group2 = filteredData
+    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+    .sort(sortByName);
+  const group3 = filteredData
+    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
+    .sort(sortByName);
+  const group4 = filteredData.filter(
+    (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
+  );
+  const group5 = filteredData
+    .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
+    .sort(sortByName);
+  const group6 = filteredData
+    .filter((d) => d.activity === 5)
+    .sort(sortByName);
 
-    const sortedList = [
-      ...group1,
-      ...group2,
-      ...group3,
-      ...group4,
-      ...group5,
-      ...group6,
-    ];
+  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
 
-    // Group by date
-    const groupedByDate = sortedList.reduce((acc, item) => {
-      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-      if (date) {
-        acc[date] = acc[date] || [];
-        acc[date].push(item);
-      }
-      return acc;
-    }, {});
+  // Group by date
+  const groupedByDate = sortedList.reduce((acc, item) => {
+    const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
+    if (date) {
+      acc[date] = acc[date] || [];
+      acc[date].push(item);
+    }
+    return acc;
+  }, {});
 
-    const sortedDates = Object.keys(groupedByDate).sort(
-      (a, b) => new Date(b) - new Date(a)
-    );
+  const sortedDates = Object.keys(groupedByDate).sort(
+    (a, b) => new Date(b) - new Date(a)
+  );
+
+  const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
+  setProcessedData(finalData);
+}, [showPending]);
 
-    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-    setProcessedData(finalData);
-  };
 
   useEffect(() => {
     filtering(data);
@@ -285,7 +280,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
                   Name
                 </th>
                 <th className="border-top-1">Date</th>
-                <th>Organization</th>
+                {/* <th>Organization</th> */}
                 <th>
                   <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
                 </th>
@@ -344,7 +339,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
                         attendance.checkInTime || attendance.checkOutTime
                       ).format("DD-MMM-YYYY")}
                     </td>
-                    <td>{attendance.organizationName || "--"}</td> 
+                    {/* <td>{attendance.organizationName || "--"}</td>  */}
                     <td>{convertShortTime(attendance.checkInTime)}</td>
                     <td>
                       {attendance.checkOutTime
@@ -378,45 +373,11 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
         </div>
       )}
       {filteredSearchData.length > ITEMS_PER_PAGE && (
-        <nav aria-label="Page ">
-          <ul className="pagination pagination-sm justify-content-end py-1">
-            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-              <button
-                className="page-link btn-xs"
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              (pageNumber) => (
-                <li
-                  key={pageNumber}
-                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    }`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => paginate(pageNumber)}
-                  >
-                    {pageNumber}
-                  </button>
-                </li>
-              )
-            )}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link"
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
+      <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={paginate}
+              />
       )}
     </>
   );

src/components/Activities/CheckCheckOutForm.jsx

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

src/components/Activities/Regularization.jsx

@@ -9,6 +9,7 @@ import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
 import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
+import Pagination from "../common/Pagination";
 
 const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
   const queryClient = useQueryClient();
@@ -128,7 +129,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             <tr>
               <th colSpan={2}>Name</th>
               <th>Date</th>
-              <th>Organization</th>
+              {/* <th>Organization</th> */}
               <th>
                 <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
               </th>
@@ -158,7 +159,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
                 </td>
                 <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
 
-                <td>{att.organizationName || "--"}</td>
+                {/* <td>{att.organizationName || "--"}</td> */}
 
                 <td>{convertShortTime(att.checkInTime)}</td>
                 <td>
@@ -189,43 +190,11 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
         </div>
       )}
       {!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" : ""}`}>
-              <button
-                className="page-link btn-xs"
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {[...Array(totalPages)].map((_, index) => (
-              <li
-                key={index}
-                className={`page-item ${currentPage === index + 1 ? "active" : ""
-                  }`}
-              >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(index + 1)}
-                >
-                  {index + 1}
-                </button>
-              </li>
-            ))}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link "
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
+        <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={paginate}
+              />
       )}
     </div>
   );

src/components/Dashboard/Attendance.jsx

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from "react";
 import ApexChart from "../Charts/Circle";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
-import { useSelectedProject } from "../../hooks/useSelectedProject"; // ✅ your custom hook
+import { useSelectedProject } from "../../hooks/useSelectedProject"; 
 
 const Attendance = () => {
   const { projects } = useProjects();

src/components/Dashboard/AttendanceChart.jsx

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

src/components/Dashboard/Dashboard.jsx

@@ -1,69 +1,45 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import {
-    useDashboardProjectsCardData,
-    useDashboardTeamsCardData,
-    useDashboardTasksCardData,
-    useAttendanceOverviewData
-} from "../../hooks/useDashboard_Data";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+// import {
+//     useDashboardProjectsCardData,
+//     useDashboardTeamsCardData,
+//     useDashboardTasksCardData,
+//     useAttendanceOverviewData
+// } from "../../hooks/useDashboard_Data";
 
-import Projects from "./Projects";
-import Teams from "./Teams";
-import TasksCard from "./Tasks";
-import ProjectCompletionChart from "./ProjectCompletionChart";
-import ProjectProgressChart from "./ProjectProgressChart";
-import ProjectOverview from "../Project/ProjectOverview";
+// import Projects from "./Projects";
+// import Teams from "./Teams";
+// import TasksCard from "./Tasks";
+// import ProjectCompletionChart from "./ProjectCompletionChart";
+// import ProjectProgressChart from "./ProjectProgressChart";
+// import ProjectOverview from "../Project/ProjectOverview";
 import AttendanceOverview from "./AttendanceChart";
+import ExpenseChartDesign from "./ExpenseChartDesign";
 
 const Dashboard = () => {
-    const { projectsCardData } = useDashboardProjectsCardData();
-    const { teamsCardData } = useDashboardTeamsCardData();
-    const { tasksCardData } = useDashboardTasksCardData();
+  // const { projectsCardData } = useDashboardProjectsCardData();
+  // const { teamsCardData } = useDashboardTeamsCardData();
+  // const { tasksCardData } = useDashboardTasksCardData();
 
-    // Get the selected project ID from Redux store
-    const projectId = useSelector((store) => store.localVariables.projectId);
-    const isAllProjectsSelected = projectId === null;
+  // Get the selected project ID from Redux store
+  const projectId = useSelector((store) => store.localVariables.projectId);
+  const isAllProjectsSelected = projectId === null;
 
-    return (
-        <div className="container-fluid mt-5">
-            <div className="row gy-4">
-                {isAllProjectsSelected && (
-                    <div className="col-sm-6 col-lg-4">
-                        <Projects projectsCardData={projectsCardData} />
-                    </div>
-                )}
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <Teams teamsCardData={teamsCardData} />
-                </div>
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <TasksCard tasksCardData={tasksCardData} />
-                </div>
-
-                {isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectCompletionChart />
-                    </div>
-                )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectOverview />
-                    </div>
-                )}
-
-                <div className="col-xxl-6 col-lg-6">
-                    <ProjectProgressChart />
-                </div>
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <AttendanceOverview /> {/* ✅ Removed unnecessary projectId prop */}
-                    </div>
-                )}
-            </div>
+  return (
+    <div className="container-fluid mt-5">
+      <div className="row gy-4">
+        <div className="col-xxl-6 col-lg-6">
+          <ExpenseChartDesign />
         </div>
-    );
+
+        {!isAllProjectsSelected && (
+          <div className="col-xxl-6 col-lg-6">
+            <AttendanceOverview /> {/* Removed unnecessary projectId prop */}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 };
 
-export default Dashboard;
+export default Dashboard;

src/components/Dashboard/ExpenseChartDesign.jsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import Chart from "react-apexcharts";
+import { useDashboard_ExpenseData } from "../../hooks/useDashboard_Data";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { DateRangePicker1 } from "../common/DateRangePicker";
+import { FormProvider, useForm } from "react-hook-form";
+import { localToUtc } from "../../utils/appUtils";
+
+const ExpenseChartDesign = () => {
+  const projectId = useSelectedProject();
+
+  const methods = useForm({
+    defaultValues: {
+      startDate: "",
+      endDate: "",
+    },
+  });
+
+  const { watch } = methods;
+
+  const [startDate, endDate] = watch(["startDate", "endDate"]);
+ console.log(startDate,endDate)
+ const { data, isLoading, isError, error, isFetching } = useDashboard_ExpenseData(
+  projectId,
+  localToUtc(startDate),
+  localToUtc(endDate)
+);
+
+  if (isError) return <div>{error.message}</div>;
+
+  const report = data?.report || [];
+
+  const labels = report.map((item) => item.projectName);
+  const series = report.map((item) => item.totalApprovedAmount || 0);
+  const total = data?.totalAmount || 0;
+
+  const donutOptions = {
+    chart: { type: "donut" },
+    labels,
+    legend: { show: false },
+    dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
+    colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
+    plotOptions: {
+      pie: {
+        donut: {
+          size: "70%",
+          labels: {
+            show: true,
+            total: {
+              show: true,
+              label: "Total",
+              fontSize: "16px",
+              formatter: () => `${total}`,
+            },
+          },
+        },
+      },
+    },
+  };
+
+
+  if (data?.report === 0) {
+    return <div>No data found</div>;
+  }
+
+  return (
+      <div className="card shadow-sm" style={{ minHeight: "500px" }}>
+    <div className="card-header d-flex justify-content-between align-items-center mt-3">
+      <div>
+        <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
+        <p className="card-subtitle me-3">Detailed project expenses</p>
+      </div>
+      
+        <div className="text-end">
+            <FormProvider {...methods}>
+          <DateRangePicker1 />
+          </FormProvider>
+        </div>
+    </div>
+
+    <div className="card-body position-relative">
+      {/* Initial loading: show full loader */}
+      {isLoading && (
+        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <span>Loading...</span>
+        </div>
+      )}
+
+      {/* Data display */}
+      {!isLoading && report.length === 0 && (
+        <div className="text-center text-muted py-5">No data found</div>
+      )}
+
+      {!isLoading && report.length > 0 && (
+        <>
+          {/* Overlay spinner for refetch */}
+          {isFetching && (
+            <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
+              <span>Loading...</span>
+            </div>
+          )}
+
+          <div className="d-flex justify-content-center mb-8">
+            <Chart
+              options={donutOptions}
+              series={report.map((item) => item.totalApprovedAmount || 0)}
+              type="donut"
+              width="320"
+            />
+          </div>
+
+          <div className="mb-2 w-100">
+            <div className="row">
+              {report.map((item, idx) => (
+                <div className="col-6 d-flex justify-content-start align-items-start mb-2" key={idx}>
+                  <div className="avatar me-2">
+                    <span
+                      className="avatar-initial rounded-2"
+                      style={{
+                        backgroundColor: donutOptions.colors[idx % donutOptions.colors.length],
+                      }}
+                    >
+                      <i className="bx bx-receipt fs-4"></i>
+                    </span>
+                  </div>
+                  <div className="d-flex flex-column gap-1 text-start">
+                    <small className="fw-bold fs-6">{item.projectName}</small>
+                    <span className="fw-bold text-muted ms-1">{item.totalApprovedAmount}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  </div>
+
+  );
+};
+
+export default ExpenseChartDesign;

src/components/Directory/AssignedBucket.jsx

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

src/components/Directory/ListViewContact.jsx

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

src/components/Directory/ManageContact.jsx

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

src/components/Documents/DocumentFilterPanel.jsx

@@ -189,12 +189,12 @@ const DocumentFilterPanel = ({ entityTypeId, 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/Documents/DocumentSkeleton.jsx

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

src/components/Documents/Documents.jsx

@@ -117,7 +117,7 @@ const Documents = ({ Document_Entity, Entity }) => {
   }, [Document_Entity]);
   return (
     <DocumentContext.Provider value={contextValues}>
-      <div className="mt-5">
+      <div className="mt-2">
         <div className="card page-min-h d-flex p-2">
           <div className="row align-items-center">
             {/* Search */}

src/components/Documents/DocumentsList.jsx

@@ -82,9 +82,9 @@ const DocumentsList = ({
   if (isLoading || isFetching) return <DocumentTableSkeleton />;
   if (isError)
     return <div>Error: {error?.message || "Something went wrong"}</div>;
-  if (isInitialEmpty) return <div>No documents found yet.</div>;
-  if (isSearchEmpty) return <div>No results found for "{debouncedSearch}"</div>;
-  if (isFilterEmpty) return <div>No documents match your filter.</div>;
+  if (isInitialEmpty) return <div className="py-12 my-12">No documents found yet.</div>;
+  if (isSearchEmpty) return <div className="py-12 my-12">No results found for "{debouncedSearch}"</div>;
+  if (isFilterEmpty) return <div  className="py-12 my-12">No documents match your filter.</div>;
 
   const handleDelete = () => {
     ActiveInActive(
@@ -180,10 +180,10 @@ const DocumentsList = ({
         />
       )}
 
-      <div className="table-responsive">
+      <div className="table-responsive p-2">
         <table className="table border-top dataTable text-nowrap">
-          <thead>
-            <tr className="shadow-sm">
+          <thead className="">
+            <tr className="py-2 ">
               {DocumentColumns.map((col) => (
                 <th key={col.key} className={`sorting ${col.align}`}>
                   {col.label}

src/components/Employee/EmpAttendance.jsx

@@ -131,7 +131,7 @@ const EmpAttendance = ({ employee }) => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-2 py-2 page-min-h ">
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"

src/components/Employee/EmpDashboard.jsx

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

src/components/Employee/EmployeeNav.jsx

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

src/components/Employee/EmployeeSchema.jsx

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

src/components/Employee/ManageEmployee.jsx

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

src/components/Expenses/ActiveFilters.jsx

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

src/components/Expenses/ExpenseFilterPanel.jsx

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

src/components/Expenses/ExpenseList.jsx

@@ -61,33 +61,33 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       let key;
       switch (field) {
         case "transactionDate":
-          key = item.transactionDate?.split("T")[0];
+          key = item?.transactionDate?.split("T")[0];
           break;
         case "status":
-          key = item.status?.displayName || "Unknown";
+          key = item?.status?.displayName || "Unknown";
           break;
         case "submittedBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
+          key = `${item?.createdBy?.firstName ?? ""} ${
             item.createdBy?.lastName ?? ""
           }`.trim();
           break;
         case "project":
-          key = item.project?.name || "Unknown Project";
+          key = item?.project?.name || "Unknown Project";
           break;
         case "paymentMode":
-          key = item.paymentMode?.name || "Unknown Mode";
+          key = item?.paymentMode?.name || "Unknown Mode";
           break;
         case "expensesType":
-          key = item.expensesType?.name || "Unknown Type";
+          key = item?.expensesType?.name || "Unknown Type";
           break;
         case "createdAt":
-          key = item.createdAt?.split("T")[0] || "Unknown Type";
+          key = item?.createdAt?.split("T")[0] || "Unknown Type";
           break;
         default:
           key = "Others";
       }
       if (!acc[key]) acc[key] = [];
-      acc[key].push(item);
+      acc[key]?.push(item);
       return acc;
     }, {});
   };
@@ -163,23 +163,23 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   ];
 
   if (isInitialLoading) return <ExpenseTableSkeleton />;
-  if (isError) return <div>{error.message}</div>;
+  if (isError) return <div>{error?.message}</div>;
 
   const grouped = groupBy
     ? groupByField(data?.data ?? [], groupBy)
     : { All: data?.data ?? [] };
-  const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
+  const IsGroupedByDate = ["transactionDate", "createdAt"]?.includes(groupBy);
   const canEditExpense = (expense) => {
     return (
-      (expense.status.id === EXPENSE_DRAFT ||
-        EXPENSE_REJECTEDBY.includes(expense.status.id)) &&
-      expense.createdBy?.id === SelfId
+      (expense?.status?.id === EXPENSE_DRAFT ||
+        EXPENSE_REJECTEDBY.includes(expense?.status?.id)) &&
+      expense?.createdBy?.id === SelfId
     );
   };
 
   const canDetetExpense = (expense) => {
     return (
-      expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId
+      expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
     );
   };
 
@@ -198,7 +198,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         />
       )}
 
-      <div className="card px-0 px-sm-4">
+      <div className="card page-min-h px-sm-4">
         <div
           className="card-datatable table-responsive "
           id="horizontal-example"
@@ -292,8 +292,10 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                   ))
                 ) : (
                   <tr>
-                    <td colSpan={8} className="text-center py-4">
-                      No Expense Found
+                    <td colSpan={8} className="text-center border-0 ">
+                    <div className="py-8">
+                        <p>No Expense Found</p>
+                    </div>
                     </td>
                   </tr>
                 )}

src/components/Expenses/ExpenseSchema.js

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

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 {
@@ -57,7 +58,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   });
 
   const selectedproject = watch("projectId");
- 
+
   const {
     projectNames,
     loading: projectLoading,
@@ -142,8 +143,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   };
 
   useEffect(() => {
-    if (expenseToEdit && data ) {
-   
+    if (expenseToEdit && data) {
       reset({
         projectId: data.project.id || "",
         expensesTypeId: data.expensesType.id || "",
@@ -156,7 +156,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         supplerName: data.supplerName || "",
         amount: data.amount || "",
         noOfPersons: data.noOfPersons || "",
-        gstNumber:data.gstNumber || "",
+        gstNumber: data.gstNumber || "",
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
               fileName: doc.fileName,
@@ -183,8 +183,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const onSubmit = (fromdata) => {
     let payload = {
       ...fromdata,
-      transactionDate: localToUtc(fromdata.transactionDate)
-
+      transactionDate: localToUtc(fromdata.transactionDate),
     };
     if (expenseToEdit) {
       const editPayload = { ...payload, id: data.id };
@@ -206,7 +205,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
     return <ExpenseSkeleton />;
 
-
   return (
     <div className="container p-3">
       <h5 className="m-0">
@@ -215,7 +213,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>Select Project</Label>
+            <Label className="form-label" required>
+              Select Project
+            </Label>
             <select
               className="form-select form-select-sm"
               {...register("projectId")}
@@ -296,7 +296,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
 
-          <div className="col-md-6">
+          {/* <div className="col-md-6">
             <Label htmlFor="paidById" className="form-label" required>
               Paid By
             </Label>
@@ -322,6 +322,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {errors.paidById && (
               <small className="danger-text">{errors.paidById.message}</small>
             )}
+          </div> */}
+
+          <div className="col-12 col-md-6 text-start">
+            <label className="form-label">Paid By </label>
+            <EmployeeSearchInput
+              control={control}
+              name="paidById"
+              projectId={null}
+            />
           </div>
         </div>
 
@@ -330,7 +339,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">
@@ -409,9 +422,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
-              <div className="col-md-6">
+          <div className="col-md-6">
             <label htmlFor="statusId" className="form-label ">
-             GST Number
+              GST Number
             </label>
             <input
               type="text"
@@ -421,9 +434,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               {...register("gstNumber")}
             />
             {errors.gstNumber && (
-              <small className="danger-text">
-                {errors.gstNumber.message}
-              </small>
+              <small className="danger-text">{errors.gstNumber.message}</small>
             )}
           </div>
 
@@ -448,7 +459,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 +478,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"
@@ -549,7 +564,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
 
         <div className="d-flex justify-content-end gap-3">
           {" "}
-           <button
+          <button
             type="reset"
             disabled={isPending || createPending}
             onClick={handleClose}
@@ -568,7 +583,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               ? "Update"
               : "Submit"}
           </button>
-         
         </div>
       </form>
     </div>

src/components/Expenses/ViewExpense.jsx

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
+import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -38,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-  const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
+  const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
   const navigate = useNavigate();
   const {
     register,
@@ -91,9 +91,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate: moment
-        .utc(formData.reimburseDate, "DD-MM-YYYY")
-        .toISOString(),
+      reimburseDate:localToUtc(formData.reimburseDate),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -397,7 +395,8 @@ const ViewExpense = ({ ExpenseId }) => {
                 <DatePicker
                   name="reimburseDate"
                   control={control}
-                  minDate={data?.transactionDate}
+                  minDate={data?.createdAt}
+                  maxDate={new Date()}
                 />
                 {errors.reimburseDate && (
                   <small className="danger-text">
@@ -410,7 +409,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 <EmployeeSearchInput
                   control={control}
                   name="reimburseById"
-                  projectId={null}
+                  projectId={null}                
                 />
               </div>
             </div>

src/components/Layout/Header.jsx

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

src/components/Project/ManageProjectInfo.jsx

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

src/components/Project/ProjectCard.jsx

@@ -66,7 +66,7 @@ const ProjectCard = ({ project }) => {
                   </div>
                 </div>
               </div>
-              <div className={`ms-auto ${!ManageProject && "d-none"}`}>
+              <div className={`ms-auto `}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -106,12 +106,6 @@ const ProjectCard = ({ project }) => {
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={handleViewActivities}>
-                      <a className="dropdown-item">
-                        <i className="bx bx-task me-2"></i>
-                        <span className="align-left">Activities</span>
-                      </a>
-                    </li>
                   </ul>
                 </div>
               </div>

src/components/Project/ProjectCardView.jsx

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

src/components/Project/ProjectListView.jsx

@@ -26,9 +26,8 @@ const ProjectListView = ({
   const navigate = useNavigate();
   const { setMangeProject } = useProjectContext();
   // const { data, isLoading, isError, error } = useProjects();
-
   //   check Permissions
-  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+  // const canManageProject = useHasUserPermission(MANAGE_PROJECT);
 
   const projectColumns = [
     {
@@ -125,11 +124,15 @@ const ProjectListView = ({
     },
   ];
 
-  const handleViewActivities = (project) => {
-    dispatch(setProjectId(project));
-    navigate(`/activities/records?project=${project}`);
-  };
+  // const handleViewActivities = (project) => {
+  //   dispatch(setProjectId(project));
+  //   navigate(`/activities/records?project=${project}`);
+  // };
 
+  const handleMoveDetails = (project) => {
+    dispatch(setProjectId(project));
+    navigate("/projects/details");
+  };
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
       <table className="table  table-hover align-middle m-0">
@@ -158,11 +161,7 @@ const ProjectListView = ({
                     : project[col.key] || "N/A"}
                 </td>
               ))}
-              <td
-                className={`mx-2 ${
-                  canManageProject ? "d-sm-table-cell" : "d-none"
-                }`}
-              >
+              <td className={`mx-2 ${"d-sm-table-cell"}`}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -180,7 +179,7 @@ const ProjectListView = ({
                     ></i>
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
-                    <li>
+                    <li onClick={() => handleMoveDetails(project.id)}>
                       <a
                         aria-label="click to  View details"
                         className="dropdown-item cursor-pointer"
@@ -204,12 +203,12 @@ const ProjectListView = ({
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={() => handleViewActivities(project.id)}>
+                    {/* <li onClick={() => handleViewActivities(project.id)}>
                       <a className="dropdown-item cursor-pointer">
                         <i className="bx bx-task me-2"></i>
                         <span className="align-left">Activities</span>
                       </a>
-                    </li>
+                    </li> */}
                   </ul>
                 </div>
               </td>

src/components/Project/ProjectNav.jsx

@@ -27,13 +27,13 @@ const ProjectNav = ({ onPillClick, activePill }) => {
 
   const ProjectTab = [
     { key: "profile", icon: "bx bx-user", label: "Profile" },
-    { key: "teams", icon: "bx bx-group", label: "Teams" },
-    {
-      key: "infra",
-      icon: "bx bx-grid-alt",
-      label: "Infrastructure",
-      hidden: !(HasViewInfraStructure || HasManageInfra || HasManageTask),
-    },
+    // { key: "teams", icon: "bx bx-group", label: "Teams" },
+    // {
+    //   key: "infra",
+    //   icon: "bx bx-grid-alt",
+    //   label: "Infrastructure",
+    //   hidden: !(HasViewInfraStructure || HasManageInfra || HasManageTask),
+    // },
     {
       key: "directory",
       icon: "bx bxs-contact",
@@ -41,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: "organization", icon: "bx bx-buildings", label: "Organization"},
-    { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
+    // { key: "organization", icon: "bx bx-buildings", label: "Organization"},
+    // { key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
   ];
   return (
     <div className="nav-align-top">

src/components/Project/ProjectSchema.jsx

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

src/components/Tenant/OrganizationInfo.jsx

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

src/components/common/DateRangePicker.jsx

@@ -14,7 +14,6 @@ const DateRangePicker = ({
     if (endDateMode === "yesterday") {
       endDate.setDate(endDate.getDate() - 1);
     }
-
     endDate.setHours(0, 0, 0, 0);
 
     const startDate = new Date(endDate);
@@ -30,9 +29,14 @@ const DateRangePicker = ({
       static: true,
       clickOpens: true,
       maxDate: endDate,
-      onChange: (selectedDates, dateStr) => {
-        const [startDateString, endDateString] = dateStr.split(" to ");
-        onRangeChange?.({ startDate: startDateString, endDate: endDateString });
+      onChange: (selectedDates) => {
+        if (selectedDates.length === 2) {
+          const [start, end] = selectedDates;
+          onRangeChange?.({
+            startDate: start.toLocaleDateString("en-CA"),
+            endDate: end.toLocaleDateString("en-CA"),
+          });
+        }
       },
     });
 
@@ -47,9 +51,7 @@ const DateRangePicker = ({
   }, [onRangeChange, DateDifference, endDateMode]);
 
   const handleIconClick = () => {
-    if (inputRef.current) {
-      inputRef.current._flatpickr.open(); // directly opens flatpickr
-    }
+    inputRef.current?._flatpickr?.open();
   };
 
   return (
@@ -61,9 +63,9 @@ const DateRangePicker = ({
         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-relative top-50 translate-middle-y"
+        onClick={handleIconClick}
         style={{ right: "22px", bottom: "-8px" }}
       ></i>
     </div>
@@ -72,10 +74,6 @@ const DateRangePicker = ({
 
 export default DateRangePicker;
 
-
-
-
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -85,6 +83,8 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
+  sm,
+  md,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -118,7 +118,7 @@ export const DateRangePicker1 = ({
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
@@ -148,31 +148,31 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
-    if (defaultRange) {
-      applyDefaultDates();
-    } else {
-      setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
+    if (resetSignal !== undefined) {
+      if (defaultRange) {
+        applyDefaultDates();
+      } else {
+        setValue(startField, "", { shouldValidate: true });
+        setValue(endField, "", { shouldValidate: true });
 
-      if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
+        if (inputRef.current?._flatpickr) {
+          inputRef.current._flatpickr.clear();
+        }
       }
     }
-  }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
-
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
 
   const start = getValues(startField);
   const end = getValues(endField);
   const formattedValue = start && end ? `${start} To ${end}` : "";
 
   return (
-    <div className={`position-relative ${className}`}>
+    <div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
       <input
         type="text"
-        className="form-control form-control-sm"
-        placeholder={placeholder}
+        className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
+        placeholder="From to End"
+        id="flatpickr-range"
         defaultValue={formattedValue}
         ref={(el) => {
           inputRef.current = el;
@@ -181,13 +181,10 @@ export const DateRangePicker1 = ({
         readOnly={!allowText}
         autoComplete="off"
       />
-      <span
-        className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
+      <i
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2"
         onClick={() => inputRef.current?._flatpickr?.open()}
-      >
-        <i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
-      </span>
+      ></i>
     </div>
   );
 };
-

src/components/common/EmployeeSearchInput.jsx

@@ -1,13 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
 
 
-
-
-const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
+const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -17,6 +15,8 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const debouncedSearch = useDebounce(search, 500);
 
+  const wrapperRef = useRef(null);
+
   const {
     data: employees,
     isLoading,
@@ -29,6 +29,19 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
     }
   }, [value, employees]);
 
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   const handleSelect = (employee) => {
     onChange(employee.id);
     setSearch(employee.firstName + " " + employee.lastName);
@@ -36,17 +49,17 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
   };
 
   return (
-    <div className="position-relative">
+    <div className="position-relative" ref={wrapperRef}>
       <input
         type="text"
         ref={ref}
-        className={`form-control form-control-sm`}
+        className="form-control form-control-sm"
         placeholder={placeholder}
         value={search}
         onChange={(e) => {
           setSearch(e.target.value);
           setShowDropdown(true);
-          onChange(""); 
+          onChange("");
         }}
         onFocus={() => {
           if (search) setShowDropdown(true);
@@ -55,34 +68,33 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
 
       {showDropdown && (employees?.data?.length > 0 || isLoading) && (
         <ul
-          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
+          className="list-group position-absolute bg-white w-100 shadow z-3 px-0"
           style={{ maxHeight: 200, overflowY: "auto" }}
         >
           {isLoading ? (
             <li className="list-group-item">
               <a>Searching...</a>
-              
             </li>
           ) : (
             employees?.data?.map((emp) => (
-             <li
-        key={emp.id}
-        className="list-group-item list-group-item-action py-1 px-1"
-        style={{ cursor: "pointer" }}
-        onClick={() => handleSelect(emp)}
-      >
-        <div className="d-flex align-items-center px-0">
-          <Avatar
-            size="xs"
-            classAvatar="m-0 me-2"
-            firstName={emp.firstName}
-            lastName={emp.lastName}
-          />
-          <span className="text-muted">
-            {`${emp?.firstName} ${emp?.lastName}`.trim()}
-          </span>
-        </div>
-      </li>
+              <li
+                key={emp.id}
+                className="list-group-item list-group-item-action py-1 px-1"
+                style={{ cursor: "pointer" }}
+                onClick={() => handleSelect(emp)}
+              >
+                <div className="d-flex align-items-center px-0">
+                  <Avatar
+                    size="xs"
+                    classAvatar="m-0 me-2"
+                    firstName={emp.firstName}
+                    lastName={emp.lastName}
+                  />
+                  <span className="text-muted">
+                    {`${emp?.firstName} ${emp?.lastName}`.trim()}
+                  </span>
+                </div>
+              </li>
             ))
           )}
         </ul>
@@ -94,3 +106,4 @@ const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
 };
 
 export default EmployeeSearchInput;
+

src/components/common/SelectMultiple.jsx

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

src/components/common/TagInput.jsx

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

src/components/master/Services/ServicesGroups.jsx

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

src/hooks/useAttendance.js

@@ -12,38 +12,9 @@ import { setDefaultDateRange } from "../slices/localVariablesSlice";
 // ----------------------------Query-----------------------------
 
 
-// export const useAttendance = (projectId) => {
-//   const dispatch = useDispatch()
-//   const {
-//     data: attendance = [],
-//     isLoading: loading,
-//     error,
-//     refetch: recall,
-//     isFetching
-//   } = useQuery({
-//     queryKey: ["attendance", projectId],
-//     queryFn: async () => {
-//       const response = await AttendanceRepository.getAttendance(projectId);
-//       return response.data;
-//     },
-//     enabled: !!projectId,
-//     onError: (error) => {
-//       showToast(error.message || "Error while fetching Attendance", "error");
-//     },
-//   });
-
-//   return {
-//     attendance,
-//     loading,
-//     error,
-//     recall,
-//     isFetching
-//   };
-// };
-
 export const useAttendance = (projectId, organizationId, includeInactive = false, date = null) => {
   const dispatch = useDispatch();
-
+// queryKey: ["attendance", projectId, organizationId, includeInactive, date], 
   const {
     data: attendance = [],
     isLoading: loading,
@@ -51,7 +22,7 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
     refetch: recall,
     isFetching,
   } = useQuery({
-    queryKey: ["attendance", projectId, organizationId, includeInactive, date], // include filters in cache key
+    queryKey: ["attendance", projectId ], 
     queryFn: async () => {
       const response = await AttendanceRepository.getAttendance(
         projectId,
@@ -61,7 +32,7 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
       );
       return response.data;
     },
-    enabled: !!projectId, // only run if projectId exists
+    enabled: !!projectId, 
     onError: (error) => {
       showToast(error.message || "Error while fetching Attendance", "error");
     },
@@ -142,31 +113,6 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
   });
 };
 
-// export const useRegularizationRequests = (projectId) => {
-//   const {
-//     data: regularizes = [],
-//     isLoading: loading,
-//     error,
-//     refetch,
-//   } = useQuery({
-//     queryKey: ["regularizedList", projectId],
-//     queryFn: async () => {
-//       const response = await AttendanceRepository.getRegularizeList(projectId);
-//       return response.data;
-//     },
-//     enabled: !!projectId,
-//     onError: (error) => {
-//       showToast(error.message || "Error while fetching Regularization Requests", "error");
-//     },
-//   });
-
-//   return {
-//     regularizes,
-//     loading,
-//     error,
-//     refetch,
-//   };
-// };
 
 export const useRegularizationRequests = (projectId, organizationId, IncludeInActive = false) => {
   const dispatch = useDispatch();
@@ -218,10 +164,11 @@ export const useMarkAttendance = () => {
           emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
         );
       });
+      // queryClient.invalidateQueries({queryKey:["attendance"]})
     }else if(variables.forWhichTab == 2){
-    //   queryClient.invalidateQueries({
-    //     queryKey: ["attendanceLogs"], 
-    //  });
+      queryClient.invalidateQueries({
+        queryKey: ["attendanceLogs"], 
+     });
      queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
         if (!oldData) return oldData;
         return oldData.map((record) =>

src/hooks/useDashboard_Data.jsx

@@ -155,32 +155,32 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
 // };
 
 
-export const useAttendanceOverviewData = (projectId, days) => {
-  const [attendanceOverviewData, setAttendanceOverviewData] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+// export const useAttendanceOverviewData = (projectId, days) => {
+//   const [attendanceOverviewData, setAttendanceOverviewData] = useState([]);
+//   const [loading, setLoading] = useState(false);
+//   const [error, setError] = useState("");
 
-  useEffect(() => {
-    if (!projectId || !days) return;
-    const fetchAttendanceOverview = async () => {
-      setLoading(true);
-      setError("");
+//   useEffect(() => {
+//     if (!projectId || !days) return;
+//     const fetchAttendanceOverview = async () => {
+//       setLoading(true);
+//       setError("");
 
-      try {
-        const response = await GlobalRepository.getAttendanceOverview(projectId, days);
-        setAttendanceOverviewData(response.data);
-      } catch (err) {
-        setError("Failed to fetch attendance overview data.");
-      } finally {
-        setLoading(false);
-      }
-    };
+//       try {
+//         const response = await GlobalRepository.getAttendanceOverview(projectId, days);
+//         setAttendanceOverviewData(response.data);
+//       } catch (err) {
+//         setError("Failed to fetch attendance overview data.");
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
 
-    fetchAttendanceOverview();
-  }, [projectId, days]);
+//     fetchAttendanceOverview();
+//   }, [projectId, days]);
 
-  return { attendanceOverviewData, loading, error };
-};
+//   return { attendanceOverviewData, loading, error };
+// };
 
 
 // -------------------Query----------------------------
@@ -200,56 +200,74 @@ export const useAttendanceOverviewData = (projectId, days) => {
 //   })
 // }
 
-export const useDashboard_AttendanceData = (date,projectId)=>{
-    return useQuery({
-    queryKey:["dashboardAttendances",date,projectId],
-    queryFn:async()=> {
-     
-     const resp =  await await GlobalRepository.getDashboardAttendanceData(date, projectId)
-     return resp.data;
+export const useDashboard_AttendanceData = (date, projectId) => {
+  return useQuery({
+    queryKey: ["dashboardAttendances", date, projectId],
+    queryFn: async () => {
+
+      const resp = await await GlobalRepository.getDashboardAttendanceData(date, projectId)
+      return resp.data;
     }
   })
 }
 
-export const useDashboardTeamsCardData =(projectId)=>{
-    return useQuery({
-    queryKey:["dashboardTeams",projectId],
-    queryFn:async()=> {
-     
-     const resp =  await GlobalRepository.getDashboardTeamsCardData(projectId)
-     return resp.data;
+export const useDashboard_ExpenseData = (projectId, startDate, endDate) => {
+   const hasBothDates = !!startDate && !!endDate;
+  const noDatesSelected = !startDate && !endDate;
+
+  const shouldFetch =
+    noDatesSelected ||
+    hasBothDates;
+  return useQuery({
+    queryKey: ["dashboardExpenses", projectId, startDate, endDate],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate);
+      return resp.data; 
+    },
+    enabled:shouldFetch
+  });
+};
+
+export const useDashboardTeamsCardData = (projectId) => {
+  return useQuery({
+    queryKey: ["dashboardTeams", projectId],
+    queryFn: async () => {
+
+      const resp = await GlobalRepository.getDashboardTeamsCardData(projectId)
+      return resp.data;
     }
   })
 }
 
 export const useDashboardTasksCardData = (projectId) => {
-    return useQuery({
-    queryKey:["dashboardTasks",projectId],
-    queryFn:async()=> {
-     
-     const resp =  await GlobalRepository.getDashboardTasksCardData(projectId)
-     return resp.data;
+  return useQuery({
+    queryKey: ["dashboardTasks", projectId],
+    queryFn: async () => {
+
+      const resp = await GlobalRepository.getDashboardTasksCardData(projectId)
+      return resp.data;
     }
   })
 }
-// export const useAttendanceOverviewData = (projectId, days) => {
-//    return useQuery({
-//     queryKey:["dashboardAttendanceOverView",projectId],
-//     queryFn:async()=> {
-     
-//      const resp =  await GlobalRepository.getAttendanceOverview(projectId, days);
-//      return resp.data;
-//     }
-//   })
-// }
+export const useAttendanceOverviewData = (projectId, days) => {
+  return useQuery({
+    queryKey: ["dashboardAttendanceOverView", projectId, days],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getAttendanceOverview(projectId, days);
+      return resp.data;
+    },
+    enabled: !!projectId, 
+  });
+};
+
 
 export const useDashboardProjectsCardData = () => {
-    return useQuery({
-    queryKey:["dashboardProjects"],
-    queryFn:async()=> {
-     
-     const resp = await GlobalRepository.getDashboardProjectsCardData();
-     return resp.data;
+  return useQuery({
+    queryKey: ["dashboardProjects"],
+    queryFn: async () => {
+
+      const resp = await GlobalRepository.getDashboardProjectsCardData();
+      return resp.data;
     }
   })
 }

src/hooks/useDirectory.js

@@ -399,7 +399,6 @@ export const useUpdateBucket = (onSuccessCallBack) => {
     mutationFn: async ({ bucketId, BucketPayload }) =>
       await DirectoryRepository.UpdateBuckets(bucketId, BucketPayload),
     onSuccess: (_, variables) => {
-      debugger;
       queryClient.invalidateQueries({ queryKey: ["bucketList"] });
       showToast("Bucket updated successfully", "success");
       if (onSuccessCallBack) onSuccessCallBack();
@@ -415,7 +414,7 @@ export const useUpdateBucket = (onSuccessCallBack) => {
   });
 };
 
-export const useAssignEmpToBucket = () => {
+export const useAssignEmpToBucket = (onSuccessCallBack) => {
   return useMutation({
     mutationFn: async ({ bucketId, EmployeePayload }) =>
       await DirectoryRepository.AssignedBuckets(bucketId, EmployeePayload),
@@ -464,6 +463,7 @@ export const useCreateContact = (onSuccessCallBack) => {
       await DirectoryRepository.CreateContact(contactPayload),
     onSuccess: (_, variables) => {
       queryClient.invalidateQueries({ queryKey: ["contacts"] });
+      queryClient.invalidateQueries({ queryKey: ["bucketList"] });
       showToast("Contact created Successfully", "success");
       if (onSuccessCallBack) onSuccessCallBack();
     },
@@ -483,6 +483,7 @@ export const useUpdateContact = (onSuccessCallBack) => {
     mutationFn: async ({ contactId, contactPayload }) =>
       await DirectoryRepository.UpdateContact(contactId, contactPayload),
     onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["Contact"] });
       queryClient.invalidateQueries({ queryKey: ["contacts"] });
       showToast("Contact updated Successfully", "success");
       if (onSuccessCallBack) onSuccessCallBack();

src/hooks/useDocument.js

@@ -120,7 +120,7 @@ export const useUploadDocument = (onSuccessCallBack) => {
       DocumentRepository.uploadDocument(DocumentPayload),
     onSuccess: (data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
-
+      queryClient.invalidateQueries({ queryKey: ["Document"] });
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
@@ -141,7 +141,7 @@ export const useUpdateDocument = (onSuccessCallBack) => {
     onSuccess: (data, variables) => {
       const { documentId } = variables;
       queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
-      queryClient.invalidateQueries({ queryKey: ["Document", documentId] });
+      queryClient.invalidateQueries({ queryKey: ["Document"] });
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
@@ -187,6 +187,7 @@ export const useActiveInActiveDocument = ()=>{
     onSuccess: (data, variables) => {
       const {isActive} = variables;
      queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
+     queryClient.invalidateQueries({ queryKey: ["Document"] });
       showToast(`Document ${isActive ? "restored":"Deleted"} successfully`,"success")
     },
     onError: (error) => {

src/hooks/useEmployees.js

@@ -12,14 +12,14 @@ import { queryClient } from "../layouts/AuthLayout";
 // Query ---------------------------------------------------------------------------
 
 export const useEmployee = (employeeId) => {
-  return  useQuery({
+  return useQuery({
     queryKey: ["employeeProfile", employeeId],
     queryFn: async () => {
-      const res = await EmployeeRepository.getEmployeeProfile(employeeId)
+      const res = await EmployeeRepository.getEmployeeProfile(employeeId);
       return res.data;
     },
-    enabled:!!employeeId
-  });  
+    enabled: !!employeeId,
+  });
 };
 
 export const useAllEmployees = (showInactive) => {
@@ -208,9 +208,6 @@ export const useEmployeesNameByProject = (projectId) => {
 
 // Mutation------------------------------------------------------------------
 
-
-
-
 export const useUpdateEmployee = () => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -218,14 +215,15 @@ export const useUpdateEmployee = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (employeeData) =>
-      EmployeeRepository.manageEmployee(employeeData),
+    mutationFn: async (employeeData) =>
+      await EmployeeRepository.manageEmployee(employeeData),
     onSuccess: (_, variables) => {
+      debugger;
       const id = variables?.id || variables?.employeeId;
       const isAllEmployee = variables.IsAllEmployee;
 
       // Cache invalidation
-      queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
+      queryClient.invalidateQueries({ queryKey: ["employeeProfile"] });
       queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
       // queryClient.invalidateQueries(['employeeProfile', id]);
       queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
@@ -247,7 +245,6 @@ export const useUpdateEmployee = () => {
   });
 };
 
-
 export const useSuspendEmployee = ({
   setIsDeleteModalOpen,
   setemployeeLodaing,
@@ -300,7 +297,6 @@ export const useSuspendEmployee = ({
   });
 };
 
-
 export const useUpdateEmployeeRoles = ({
   onClose,
   resetForm,
@@ -334,4 +330,4 @@ export const useUpdateEmployeeRoles = ({
     isError: mutation.isError,
     error: mutation.error,
   };
-};
+};

src/hooks/useHasUserPermission.js

@@ -8,19 +8,20 @@ export const useHasUserPermission = (permission) => {
     data: projectPermissions = [],
     isLoading,
     isError,
-  } = useAllProjectLevelPermissions(selectedProject);
-
+  } = useAllProjectLevelPermissions();
+  // set selectedProject to call api- selectedProject
   if (isLoading || !permission) return false;
 
   const globalPerms = profile?.featurePermissions ?? [];
-  const projectPerms = projectPermissions ?? [];
-  if (selectedProject) {
-    if (projectPerms.length === 0) {
-      return projectPerms.includes(permission);
-    } else {
-      return projectPerms.includes(permission);
-    }
-  } else {
-    return globalPerms.includes(permission);
-  }
+  // const projectPerms = projectPermissions ?? [];
+  // if (selectedProject) {
+  //   if (projectPerms.length === 0) {
+  //     return projectPerms.includes(permission);
+  //   } else {
+  //     return projectPerms.includes(permission);
+  //   }
+  // } else {
+  //   return globalPerms.includes(permission);
+  // }
+  return globalPerms.includes(permission);
 };

src/hooks/useProjectAccess.js

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

src/hooks/useProjects.js

@@ -3,7 +3,7 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
 import { useDispatch, useSelector } from "react-redux";
-import { setProjectId } from "../slices/localVariablesSlice";
+import { closeProjectModal, openProjectModal, setProjectId } from "../slices/localVariablesSlice";
 import EmployeeList from "../components/Directory/EmployeeList";
 import eventBus from "../services/eventBus";
 import {
@@ -18,6 +18,18 @@ export const useCurrentService = () => {
   return useSelector((store) => store.globalVariables.selectedServiceId);
 };
 
+export const useProjectModal = () => {
+  const dispatch = useDispatch();
+  const { isOpen, data } = useSelector((state) => state.localVariables.ProjectModal);
+
+  return {
+    isOpen,
+    data,
+    openModal: (payload = null) => dispatch(openProjectModal(payload)),
+    closeModal: () => dispatch(closeProjectModal()),
+  };
+};
+
 // ------------------------------Query-------------------
 
 export const useProjects = () => {

src/hooks/useTenant.js

@@ -6,6 +6,7 @@ import { useDispatch } from "react-redux";
 import { setCurrentTenant } from "../slices/globalVariablesSlice";
 import { ITEMS_PER_PAGE } from "../utils/constants";
 import moment from "moment";
+import { queryClient } from "../layouts/AuthLayout";
 
 const cleanFilter = (filter) => {
   const cleaned = { ...filter };
@@ -71,6 +72,7 @@ export const useSubscriptionPlan = (freq) => {
 // ------------Mutation---------------------
 
 export const useCreateTenant = (onSuccessCallback) => {
+  const clinet = queryClient()
   const dispatch = useDispatch();
   return useMutation({
     mutationFn: async (tenantPayload) => {
@@ -87,6 +89,9 @@ export const useCreateTenant = (onSuccessCallback) => {
         operationMode = 2; // tenant exists but subscription not added yet
       }
 
+     clinet.invalidateQueries({queryKey:["Tenants"]})
+
+
       dispatch(setCurrentTenant({ operationMode, data }));
 
       if (onSuccessCallback) onSuccessCallback();

src/pages/Activities/AttendancePage.jsx

@@ -174,7 +174,7 @@ const AttendancePage = () => {
               {/* Search + Organization filter */}
               <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
                 {/* Organization Dropdown */}
-                <select
+                {/* <select
                   className="form-select form-select-sm"
                   style={{ minWidth: "180px" }}
                   value={appliedFilters.selectedOrganization}
@@ -192,7 +192,7 @@ const AttendancePage = () => {
                       {org.name}
                     </option>
                   ))}
-                </select>
+                </select> */}
 
                 {/* Search Input */}
                 <input

src/pages/Directory/ContactsPage.jsx

@@ -9,18 +9,24 @@ import { defaultContactFilter } from "../../components/Directory/DirectorySchema
 import { useDebounce } from "../../utils/appUtils";
 import Pagination from "../../components/common/Pagination";
 import ListViewContact from "../../components/Directory/ListViewContact";
-import { CardViewContactSkeleton, ListViewContactSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
+import {
+  CardViewContactSkeleton,
+  ListViewContactSkeleton,
+} from "../../components/Directory/DirectoryPageSkeleton";
+import Loader from "../../components/common/Loader";
 
 // Utility function to format contacts for CSV export
 const formatExportData = (contacts) => {
-  return contacts.map(contact => ({
-    Email: contact.contactEmails?.map(e => e.emailAddress).join(", ") || "",
-    Phone: contact.contactPhones?.map(p => p.phoneNumber).join(", ") || "",
-    Created: contact.createdAt ? new Date(contact.createdAt).toLocaleString() : "",
+  return contacts.map((contact) => ({
+    Email: contact.contactEmails?.map((e) => e.emailAddress).join(", ") || "",
+    Phone: contact.contactPhones?.map((p) => p.phoneNumber).join(", ") || "",
+    Created: contact.createdAt
+      ? new Date(contact.createdAt).toLocaleString()
+      : "",
     Location: contact.address || "",
     Organization: contact.organization || "",
     Category: contact.contactCategory?.name || "",
-    Tags: contact.tags?.map(t => t.name).join(", ") || "",
+    Tags: contact.tags?.map((t) => t.name).join(", ") || "",
     Buckets: contact.bucketIds?.join(", ") || "",
   }));
 };
@@ -75,8 +81,21 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
     <div className="row mt-5">
       {gridView ? (
         <>
+          {isLoading && (
+            <div>
+              <Loader />
+            </div>
+          )}
+
+
+          {data?.data?.length === 0 && (<div className="py-12 ">
+            {searchText ? `No contact found for "${searchText}"`:"No contacts found" }
+          </div>)}
           {data?.data?.map((contact) => (
-            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+            <div
+              key={contact.id}
+              className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+            >
               <CardViewContact IsActive={showActive} contact={contact} />
             </div>
           ))}
@@ -95,6 +114,7 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
         <div className="col-12">
           <ListViewContact
             data={data?.data}
+            isLoading={isLoading}
             Pagination={
               <Pagination
                 currentPage={currentPage}

src/pages/Directory/DirectoryPage.jsx

@@ -44,7 +44,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [searchNote, setSearchNote] = useState("");
   const [activeTab, setActiveTab] = useState("notes");
   const { setActions } = useFab();
-  const [gridView, setGridView] = useState(false);
+  const [gridView, setGridView] = useState(true);
   const [isOpenBucket, setOpenBucket] = useState(false);
   const [isManageContact, setManageContact] = useState({
     isOpen: false,
@@ -133,7 +133,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
               ]}
             ></Breadcrumb>
           )}
-          <div className="card">
+          <div className="card ">
             <div className="d-flex-row px-2">
               <div className="d-flex justify-content-between align-items-center mb-1">
                 <ul className="nav nav-tabs">
@@ -185,14 +185,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                             value={searchContact}
                             onChange={(e) => setsearchContact(e.target.value)}
                           />
-                          <button
-                            className={`btn btn-sm p-1 ${
-                              !gridView ? "btn-primary" : "btn-outline-primary"
-                            }`}
-                            onClick={() => setGridView(false)}
-                          >
-                            <i className="bx bx-list-ul"></i>
-                          </button>
+                         
 
                           <button
                             className={`btn btn-sm p-1 ${
@@ -202,6 +195,15 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           >
                             <i className="bx bx-grid-alt"></i>
                           </button>
+
+                           <button
+                            className={`btn btn-sm p-1 ${
+                              !gridView ? "btn-primary" : "btn-outline-primary"
+                            }`}
+                            onClick={() => setGridView(false)}
+                          >
+                            <i className="bx bx-list-ul"></i>
+                          </button>
                         </div>
 
                         <div className="form-check form-switch d-flex align-items-center">

src/pages/Directory/NoteFilterPanel.jsx

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

src/pages/authentication/LoginPage.jsx

@@ -41,21 +41,24 @@ const LoginPage = () => {
           password: data.password,
         };
         const response = await AuthRepository.login(userCredential);
-        if (data.rememberMe) {
-          localStorage.setItem("jwtToken", response.data.token);
-          localStorage.setItem("refreshToken", response.data.refreshToken);
-        } else {
-          sessionStorage.setItem("jwtToken", response.data.token);
-          sessionStorage.setItem("refreshToken", response.data.refreshToken);
-        }
+        // if (data.rememberMe) {
+        //   localStorage.setItem("jwtToken", response.data.token);
+        //   localStorage.setItem("refreshToken", response.data.refreshToken);
+        // } else {
+        //   sessionStorage.setItem("jwtToken", response.data.token);
+        //   sessionStorage.setItem("refreshToken", response.data.refreshToken);
+        // }
         setLoading(false);
-        navigate("/auth/switch/org");
+                  localStorage.setItem("jwtToken", response.data.token);
+          localStorage.setItem("refreshToken", response.data.refreshToken);
+        navigate("/dashboard",{ replace: true });
       } else {
         await AuthRepository.sendOTP({ email: data.username });
         showToast("OTP has been sent to your email.", "success");
         localStorage.setItem("otpUsername", data.username);
         localStorage.setItem("otpSentTime", now.toString());
-        navigate("/auth/login-otp");
+        // navigate("/auth/login-otp");
+         navigate("/dashboard",{ replace: true });
       }
     } catch (err) {
       showToast("Invalid username or password.", "error");

src/pages/employee/EmployeeList.jsx

@@ -36,31 +36,26 @@ import GlobalModel from "../../components/common/GlobalModel";
 import usePagination from "../../hooks/usePagination";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import Pagination from "../../components/common/Pagination";
 
 const EmployeeList = () => {
-  const selectedProjectId = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const { projectNames, loading: projectLoading, fetchData } = useProjectName();
+  // const selectedProjectId = useSelector(
+  //   (store) => store.localVariables.projectId
+  // );
+  // const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
   const dispatch = useDispatch();
 
   const [showInactive, setShowInactive] = useState(false);
-  const [showAllEmployees, setShowAllEmployees] = useState(false);
+  const [showAllEmployees, setShowAllEmployees] = useState(true);
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    useEmployeesAllOrByProjectId(
-      showAllEmployees,
-      selectedProjectId,
-      showInactive
-    );
+    useEmployeesAllOrByProjectId(showAllEmployees, null, showInactive);
 
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [EmpForManageRole, setEmpForManageRole] = useState(null);
-  // const [currentPage, setCurrentPage] = useState(1);
-  // const [itemsPerPage] = useState(ITEMS_PER_PAGE);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
@@ -78,11 +73,11 @@ const EmployeeList = () => {
     }
   );
 
-  useEffect(() => {
-    if (selectedProjectId === null) {
-      dispatch(setProjectId(projectNames[0]?.id));
-    }
-  }, [selectedProjectId]);
+  // useEffect(() => {
+  //   if (selectedProjectId === null) {
+  //     dispatch(setProjectId(projectNames[0]?.id));
+  //   }
+  // }, [selectedProjectId]);
   const navigate = useNavigate();
 
   const applySearchFilter = (data, text) => {
@@ -205,25 +200,16 @@ const EmployeeList = () => {
 
       setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
     }
-  }, [loading, employees, selectedProjectId, showAllEmployees]);
-
-  useEffect(() => {
-    if (!showAllEmployees) {
-      recallEmployeeData(showInactive, selectedProjectId);
-    }
-  }, [selectedProjectId, showInactive, showAllEmployees, recallEmployeeData]);
+  }, [loading, employees, showAllEmployees]);
 
   const handler = useCallback(
     (msg) => {
       if (employees.some((item) => item.id == msg.employeeId)) {
         setEmployeeList([]);
-        recallEmployeeData(
-          showInactive,
-          showAllEmployees ? null : selectedProjectId
-        ); // Use selectedProjectId here
+        recallEmployeeData(showInactive, null, showAllEmployees);
       }
     },
-    [employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
+    [employees, showInactive, showAllEmployees]
   );
 
   useEffect(() => {
@@ -293,18 +279,16 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-          <div className="card p-1">
-            <div className="card-datatable table-responsive pt-5 mx-5 py-10">
-              <div
-                id="DataTables_Table_0_wrapper"
-                className="dataTables_wrapper dt-bootstrap5 no-footer"
-                style={{ width: "100%" }}
-              >
-                <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
-                  {/* Switches: All Employees + Inactive */}
-                  <div className="d-flex flex-wrap align-items-center gap-3">
-                    {/* All Employees Switch */}
-                    {ViewAllEmployee && (
+          <div className="card page-min-h ">
+            <div
+              id="DataTables_Table_0_wrapper"
+              className="dataTables_wrapper dt-bootstrap5 no-footer p-1 pt-5 mx-5 py-10"
+            >
+              <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+                {/* Switches: All Employees + Inactive */}
+                <div className="d-flex flex-wrap align-items-center gap-3">
+                  {/* All Employees Switch */}
+                  {/* {ViewAllEmployee && (
                       <div className="form-check form-switch text-start">
                         <input
                           type="checkbox"
@@ -321,433 +305,382 @@ const EmployeeList = () => {
                           Show All Employees
                         </label>
                       </div>
-                    )}
+                    )} */}
 
-                    {/* Show Inactive Employees Switch */}
-                    {showAllEmployees && (
-                      <div className="form-check form-switch text-start">
-                        <input
-                          type="checkbox"
-                          className="form-check-input"
-                          role="switch"
-                          id="inactiveEmployeesCheckbox"
-                          checked={showInactive}
-                          onChange={(e) => setShowInactive(e.target.checked)}
-                        />
-                        <label
-                          className="form-check-label ms-0"
-                          htmlFor="inactiveEmployeesCheckbox"
-                        >
-                          Show Inactive Employees
-                        </label>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Right side: Search + Export + Add Employee */}
-                  <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
-                    {/* Search Input - ALWAYS ENABLED */}
-                    <div className="dataTables_filter">
-                      <label className="mb-0">
-                        <input
-                          type="search"
-                          value={searchText}
-                          onChange={handleSearch}
-                          className="form-control form-control-sm"
-                          placeholder="Search Employee"
-                          aria-controls="DataTables_Table_0"
-                        />
-                      </label>
-                    </div>
-
-                    {/* Export Dropdown */}
-                    <div className="dropdown">
-                      <button
-                        aria-label="Click me"
-                        className="btn btn-sm btn-label-secondary dropdown-toggle"
-                        type="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        <i className="bx bx-export me-2 bx-sm"></i>Export
-                      </button>
-                      <ul className="dropdown-menu">
-                        <li>
-                          <a
-                            className="dropdown-item"
-                            href="#"
-                            onClick={() => handleExport("print")}
-                          >
-                            <i className="bx bx-printer me-1"></i> Print
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            className="dropdown-item"
-                            href="#"
-                            onClick={() => handleExport("csv")}
-                          >
-                            <i className="bx bx-file me-1"></i> CSV
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            className="dropdown-item"
-                            href="#"
-                            onClick={() => handleExport("excel")}
-                          >
-                            <i className="bx bxs-file-export me-1"></i> Excel
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            className="dropdown-item"
-                            href="#"
-                            onClick={() => handleExport("pdf")}
-                          >
-                            <i className="bx bxs-file-pdf me-1"></i> PDF
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-
-                    {/* Add Employee Button */}
-                    {Manage_Employee && (
-                      <button
-                        className="btn btn-sm btn-primary"
-                        type="button"
-                        onClick={() => handleEmployeeModel(null)}
-                      >
-                        <i className="bx bx-plus-circle me-2"></i>
-                        <span className="d-none d-md-inline-block">
-                          Add New Employee
-                        </span>
-                      </button>
-                    )}
+                  {/* Show Inactive Employees Switch */}
+                  {/* {showAllEmployees && ( */}
+                  <div className="form-check form-switch text-start">
+                    <input
+                      type="checkbox"
+                      className="form-check-input"
+                      role="switch"
+                      id="inactiveEmployeesCheckbox"
+                      checked={showInactive}
+                      onChange={(e) => setShowInactive(e.target.checked)}
+                    />
+                    <label
+                      className="form-check-label ms-0"
+                      htmlFor="inactiveEmployeesCheckbox"
+                    >
+                      Show Inactive Employees
+                    </label>
                   </div>
+                  {/* )} */}
                 </div>
 
-                <table
-                  className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
-                  id="DataTables_Table_0"
-                  aria-describedby="DataTables_Table_0_info"
-                  style={{ width: "100%" }}
-                  ref={tableRef}
-                >
-                  <thead>
-                    <tr>
-                      <th
-                        className="sorting sorting_desc"
-                        tabIndex="0"
+                {/* Right side: Search + Export + Add Employee */}
+                <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                  {/* Search Input - ALWAYS ENABLED */}
+                  <div className="dataTables_filter">
+                    <label className="mb-0">
+                      <input
+                        type="search"
+                        value={searchText}
+                        onChange={handleSearch}
+                        className="form-control form-control-sm"
+                        placeholder="Search Employee"
                         aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="2"
-                        aria-label="User: activate to sort column ascending"
-                        aria-sort="descending"
-                      >
-                        <div className="text-start ms-6">Name</div>
-                      </th>
-                      <th
-                        className="sorting sorting_desc d-none d-sm-table-cell"
-                        tabIndex="0"
-                        aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="1"
-                        aria-label="User: activate to sort column ascending"
-                        aria-sort="descending"
-                      >
-                        <div className="text-start ms-5">Email</div>
-                      </th>
-                      <th
-                        className="sorting sorting_desc d-none d-sm-table-cell"
-                        tabIndex="0"
-                        aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="1"
-                        aria-label="User: activate to sort column ascending"
-                        aria-sort="descending"
-                      >
-                        <div className="text-start ms-5">Contact</div>
-                      </th>
-                      <th
-                        className="sorting sorting_desc  d-none  d-sm-table-cell"
-                        tabIndex="0"
-                        aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="1"
-                        aria-label="User: activate to sort column ascending"
-                        aria-sort="descending"
-                      >
-                        <div className="text-start ms-5">Designation</div>
-                      </th>
+                      />
+                    </label>
+                  </div>
 
-                      <th
-                        className="sorting  d-none  d-md-table-cell"
-                        tabIndex="0"
-                        aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="1"
-                        aria-label="Plan: activate to sort column ascending"
-                      >
-                        Joining Date
-                      </th>
-                      <th
-                        className="sorting"
-                        tabIndex="0"
-                        aria-controls="DataTables_Table_0"
-                        rowSpan="1"
-                        colSpan="1"
-                        aria-label="Billing: activate to sort column ascending"
-                      >
-                        Status
-                      </th>
-                      <th
-                        className={`sorting_disabled  ${
-                          !Manage_Employee && "d-none"
-                        }`}
-                        rowSpan="1"
-                        colSpan="1"
-                        style={{ width: "50px" }}
-                        aria-label="Actions"
-                      >
-                        Actions
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {loading && (
-                      <tr>
-                        <td colSpan={8}>
-                          <p>Loading...</p>
-                        </td>
-                      </tr>
-                    )}
-                    {/* Conditional messages for no data or no search results */}
-                    {!loading &&
-                    displayData?.length === 0 &&
-                    searchText &&
-                    !showAllEmployees ? (
-                      <tr>
-                        <td colSpan={8}>
-                          <small className="muted">
-                            '{searchText}' employee not found
-                          </small>{" "}
-                        </td>
-                      </tr>
-                    ) : null}
-                    {!loading &&
-                    displayData?.length === 0 &&
-                    (!searchText || showAllEmployees) ? (
-                      <tr>
-                        <td
-                          colSpan={8}
-                          style={{ paddingTop: "20px", textAlign: "center" }}
+                  {/* Export Dropdown */}
+                  <div className="dropdown">
+                    <button
+                      aria-label="Click me"
+                      className="btn btn-sm btn-label-secondary dropdown-toggle"
+                      type="button"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      <i className="bx bx-export me-2 bx-sm"></i>Export
+                    </button>
+                    <ul className="dropdown-menu">
+                      <li>
+                        <a
+                          className="dropdown-item"
+                          href="#"
+                          onClick={() => handleExport("print")}
                         >
-                          No Data Found
-                        </td>
-                      </tr>
-                    ) : null}
+                          <i className="bx bx-printer me-1"></i> Print
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          className="dropdown-item"
+                          href="#"
+                          onClick={() => handleExport("csv")}
+                        >
+                          <i className="bx bx-file me-1"></i> CSV
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          className="dropdown-item"
+                          href="#"
+                          onClick={() => handleExport("excel")}
+                        >
+                          <i className="bx bxs-file-export me-1"></i> Excel
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          className="dropdown-item"
+                          href="#"
+                          onClick={() => handleExport("pdf")}
+                        >
+                          <i className="bx bxs-file-pdf me-1"></i> PDF
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
 
-                    {/* Render current items */}
-                    {currentItems &&
-                      !loading &&
-                      currentItems.map((item) => (
-                        <tr className="odd" key={item.id}>
-                          <td className="sorting_1" colSpan={2}>
-                            <div className="d-flex justify-content-start align-items-center user-name">
-                              <Avatar
-                                firstName={item.firstName}
-                                lastName={item.lastName}
-                              ></Avatar>
-                              <div className="d-flex flex-column">
-                                <a
+                  {/* Add Employee Button */}
+                  {Manage_Employee && (
+                    <button
+                      className="btn btn-sm btn-primary"
+                      type="button"
+                      onClick={() => handleEmployeeModel(null)}
+                    >
+                      <i className="bx bx-plus-circle me-2"></i>
+                      <span className="d-none d-md-inline-block">
+                        Add New Employee
+                      </span>
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              <table
+                className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+                id="DataTables_Table_0"
+                aria-describedby="DataTables_Table_0_info"
+                style={{ width: "100%" }}
+                ref={tableRef}
+              >
+                <thead>
+                  <tr>
+                    <th
+                      className="sorting sorting_desc"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="2"
+                      aria-label="User: activate to sort column ascending"
+                      aria-sort="descending"
+                    >
+                      <div className="text-start ms-6">Name</div>
+                    </th>
+                    <th
+                      className="sorting sorting_desc d-none d-sm-table-cell"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="1"
+                      aria-label="User: activate to sort column ascending"
+                      aria-sort="descending"
+                    >
+                      <div className="text-start ms-5">Email</div>
+                    </th>
+                    <th
+                      className="sorting sorting_desc d-none d-sm-table-cell"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="1"
+                      aria-label="User: activate to sort column ascending"
+                      aria-sort="descending"
+                    >
+                      <div className="text-start ms-5">Contact</div>
+                    </th>
+                    <th
+                      className="sorting sorting_desc  d-none  d-sm-table-cell"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="1"
+                      aria-label="User: activate to sort column ascending"
+                      aria-sort="descending"
+                    >
+                      <div className="text-start ms-5">Designation</div>
+                    </th>
+
+                    <th
+                      className="sorting  d-none  d-md-table-cell"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="1"
+                      aria-label="Plan: activate to sort column ascending"
+                    >
+                      Joining Date
+                    </th>
+                    <th
+                      className="sorting"
+                      tabIndex="0"
+                      aria-controls="DataTables_Table_0"
+                      rowSpan="1"
+                      colSpan="1"
+                      aria-label="Billing: activate to sort column ascending"
+                    >
+                      Status
+                    </th>
+                    <th
+                      className={`sorting_disabled  ${
+                        !Manage_Employee && "d-none"
+                      }`}
+                      rowSpan="1"
+                      colSpan="1"
+                      style={{ width: "50px" }}
+                      aria-label="Actions"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {loading && (
+                    <tr>
+                      <td colSpan={8}>
+                        <p>Loading...</p>
+                      </td>
+                    </tr>
+                  )}
+                  {/* Conditional messages for no data or no search results */}
+                  {!loading &&
+                  displayData?.length === 0 &&
+                  searchText  ? (
+                    <tr>
+                      <td colSpan={8} className="border-0">
+                             <div className="py-12">
+                                 <small className="muted">
+                          '{searchText}' employee not found
+                        </small>{" "}
+                             </div>
+                      </td>
+                    </tr>
+                  ) : null}
+                  {!loading &&
+                  displayData?.length === 0 &&
+                  (!searchText ) ? (
+                    <tr>
+                      <td colSpan={8} className="border-0">
+                        <div className="py-12">{showInactive ? "No In-active Employeee Found"  : "No Employeee Found" }</div>
+                      </td>
+                    </tr>
+                  ) : null}
+
+                  {/* Render current items */}
+                  {currentItems &&
+                    !loading &&
+                    currentItems.map((item) => (
+                      <tr className="odd" key={item.id}>
+                        <td className="sorting_1" colSpan={2}>
+                          <div className="d-flex justify-content-start align-items-center user-name">
+                            <Avatar
+                              firstName={item.firstName}
+                              lastName={item.lastName}
+                            ></Avatar>
+                            <div className="d-flex flex-column">
+                              <a
+                                onClick={() => navigate(`/employee/${item.id}`)}
+                                className="text-heading text-truncate cursor-pointer"
+                              >
+                                <span className="fw-normal">
+                                  {item.firstName} {item.middleName}{" "}
+                                  {item.lastName}
+                                </span>
+                              </a>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="text-start  d-none  d-sm-table-cell">
+                          {item.email ? (
+                            <span className="text-truncate">
+                              <i className="bx bxs-envelope text-primary me-2"></i>
+                              {item.email}
+                            </span>
+                          ) : (
+                            <span className="text-truncate text-italic">-</span>
+                          )}
+                        </td>
+                        <td className="text-start  d-none  d-sm-table-cell">
+                          <span className="text-truncate">
+                            <i className="bx bxs-phone-call text-primary me-2"></i>
+                            {item.phoneNumber}
+                          </span>
+                        </td>
+                        <td className=" d-none  d-sm-table-cell text-start">
+                          <span className="text-truncate">
+                            <i className="bx bxs-wrench text-success  me-2"></i>
+                            {item.jobRole || "Not Assign Yet"}
+                          </span>
+                        </td>
+
+                        <td className=" d-none  d-md-table-cell">
+                          {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
+                        </td>
+                        <td>
+                          {showInactive ? (
+                            <span
+                              className="badge bg-label-danger"
+                              text-capitalized=""
+                            >
+                              Inactive
+                            </span>
+                          ) : (
+                            <span
+                              className="badge bg-label-success"
+                              text-capitalized=""
+                            >
+                              Active
+                            </span>
+                          )}
+                        </td>
+                        {Manage_Employee && (
+                          <td className="text-end">
+                            <div className="dropdown">
+                              <button
+                                className="btn btn-icon dropdown-toggle hide-arrow"
+                                data-bs-toggle="dropdown"
+                              >
+                                <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                              </button>
+                              <div className="dropdown-menu dropdown-menu-end">
+                                {/* View always visible */}
+                                <button
                                   onClick={() =>
                                     navigate(`/employee/${item.id}`)
                                   }
-                                  className="text-heading text-truncate cursor-pointer"
+                                  className="dropdown-item py-1"
                                 >
-                                  <span className="fw-normal">
-                                    {item.firstName} {item.middleName}{" "}
-                                    {item.lastName}
-                                  </span>
-                                </a>
+                                  <i className="bx bx-detail bx-sm"></i> View
+                                </button>
+
+                                {/* If ACTIVE employee */}
+                                {item.isActive && (
+                                  <>
+                                    <button
+                                      className="dropdown-item py-1"
+                                      onClick={() =>
+                                        handleEmployeeModel(item.id)
+                                      }
+                                    >
+                                      <i className="bx bx-edit bx-sm"></i> Edit
+                                    </button>
+
+                                    {/* Suspend only when active */}
+                                    {item.isActive && (
+                                      <button
+                                        className="dropdown-item py-1"
+                                        onClick={() => handleOpenDelete(item)}
+                                      >
+                                        <i className="bx bx-task-x bx-sm"></i>{" "}
+                                        Suspend
+                                      </button>
+                                    )}
+
+                                    <button
+                                      className="dropdown-item py-1"
+                                      type="button"
+                                      data-bs-toggle="modal"
+                                      data-bs-target="#managerole-modal"
+                                      onClick={() =>
+                                        setEmpForManageRole(item.id)
+                                      }
+                                    >
+                                      <i className="bx bx-cog bx-sm"></i> Manage
+                                      Role
+                                    </button>
+                                  </>
+                                )}
+
+                                {/* If INACTIVE employee AND inactive toggle is ON */}
+                                {!item.isActive && showInactive && (
+                                  <button
+                                    className="dropdown-item py-1"
+                                    onClick={() => handleOpenDelete(item)}
+                                  >
+                                    <i className="bx bx-refresh bx-sm me-1"></i>{" "}
+                                    Re-activate
+                                  </button>
+                                )}
                               </div>
                             </div>
                           </td>
-                          <td className="text-start  d-none  d-sm-table-cell">
-                            {item.email ? (
-                              <span className="text-truncate">
-                                <i className="bx bxs-envelope text-primary me-2"></i>
-                                {item.email}
-                              </span>
-                            ) : (
-                              <span className="text-truncate text-italic">
-                                -
-                              </span>
-                            )}
-                          </td>
-                          <td className="text-start  d-none  d-sm-table-cell">
-                            <span className="text-truncate">
-                              <i className="bx bxs-phone-call text-primary me-2"></i>
-                              {item.phoneNumber}
-                            </span>
-                          </td>
-                          <td className=" d-none  d-sm-table-cell text-start">
-                            <span className="text-truncate">
-                              <i className="bx bxs-wrench text-success  me-2"></i>
-                              {item.jobRole || "Not Assign Yet"}
-                            </span>
-                          </td>
+                        )}
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
 
-                          <td className=" d-none  d-md-table-cell">
-                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
-                          </td>
-                          <td>
-                            {showInactive ? (
-                              <span
-                                className="badge bg-label-danger"
-                                text-capitalized=""
-                              >
-                                Inactive
-                              </span>
-                            ) : (
-                              <span
-                                className="badge bg-label-success"
-                                text-capitalized=""
-                              >
-                                Active
-                              </span>
-                            )}
-                          </td>
-                          {Manage_Employee && (
-                            <td className="text-end">
-                              <div className="dropdown">
-                                <button
-                                  className="btn btn-icon dropdown-toggle hide-arrow"
-                                  data-bs-toggle="dropdown"
-                                >
-                                  <i className="bx bx-dots-vertical-rounded bx-md"></i>
-                                </button>
-                                <div className="dropdown-menu dropdown-menu-end">
-                                  {/* View always visible */}
-                                  <button
-                                    onClick={() =>
-                                      navigate(`/employee/${item.id}`)
-                                    }
-                                    className="dropdown-item py-1"
-                                  >
-                                    <i className="bx bx-detail bx-sm"></i> View
-                                  </button>
-
-                                  {/* If ACTIVE employee */}
-                                  {item.isActive && (
-                                    <>
-                                      <button
-                                        className="dropdown-item py-1"
-                                        onClick={() =>
-                                          handleEmployeeModel(item.id)
-                                        }
-                                      >
-                                        <i className="bx bx-edit bx-sm"></i>{" "}
-                                        Edit
-                                      </button>
-
-                                      {/* Suspend only when active */}
-                                      {item.isActive && (
-                                        <button
-                                          className="dropdown-item py-1"
-                                          onClick={() => handleOpenDelete(item)}
-                                        >
-                                          <i className="bx bx-task-x bx-sm"></i>{" "}
-                                          Suspend
-                                        </button>
-                                      )}
-
-                                      <button
-                                        className="dropdown-item py-1"
-                                        type="button"
-                                        data-bs-toggle="modal"
-                                        data-bs-target="#managerole-modal"
-                                        onClick={() =>
-                                          setEmpForManageRole(item.id)
-                                        }
-                                      >
-                                        <i className="bx bx-cog bx-sm"></i>{" "}
-                                        Manage Role
-                                      </button>
-                                    </>
-                                  )}
-
-                                  {/* If INACTIVE employee AND inactive toggle is ON */}
-                                  {!item.isActive && showInactive && (
-                                    <button
-                                      className="dropdown-item py-1"
-                                      onClick={() => handleOpenDelete(item)}
-                                    >
-                                      <i className="bx bx-refresh bx-sm me-1"></i>{" "}
-                                      Re-activate
-                                    </button>
-                                  )}
-                                </div>
-                              </div>
-                            </td>
-                          )}
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-
-                <div style={{ width: "1%" }}></div>
-
-                {/* Pagination */}
-                {!loading && displayData.length > ITEMS_PER_PAGE && (
-                  <nav aria-label="Page">
-                    <ul className="pagination pagination-sm justify-content-end py-1">
-                      <li
-                        className={`page-item ${
-                          currentPage === 1 ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link btn-xs"
-                          onClick={() => paginate(currentPage - 1)}
-                        >
-                          &laquo;
-                        </button>
-                      </li>
-
-                      {[...Array(totalPages)]?.map((_, index) => (
-                        <li
-                          key={index}
-                          className={`page-item ${
-                            currentPage === index + 1 ? "active" : ""
-                          }`}
-                        >
-                          <button
-                            className="page-link"
-                            onClick={() => paginate(index + 1)}
-                          >
-                            {index + 1}
-                          </button>
-                        </li>
-                      ))}
-
-                      <li
-                        className={`page-item ${
-                          currentPage === totalPages ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link"
-                          onClick={() => paginate(currentPage + 1)}
-                        >
-                          &raquo;
-                        </button>
-                      </li>
-                    </ul>
-                  </nav>
-                )}
-              </div>
+              {displayData.length > 0 && (
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={paginate}
+                />
+              )}
             </div>
           </div>
         ) : (

src/pages/master/MasterPage.jsx

@@ -161,8 +161,8 @@ const MasterPage = () => {
           data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
         />
 
-        <div className="row">
-          <div className="card">
+
+          <div className="card page-min-h">
             <div
               className="card-datatable table-responsive py-10 mx-5 "
               style={{ overflow: "hidden" }}
@@ -221,7 +221,6 @@ const MasterPage = () => {
                 handleModalData={handleModalData}
               />
             </div>
-          </div>
         </div>
       </div>
      </MasterContext.Provider>

src/pages/master/MasterTable.jsx

@@ -109,11 +109,11 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
                 <tr key={index}>
-                  <td style={{ width: "20px" }}>
-                    <i className="bx bx-right-arrow-alt"></i>
+                  <td style={{ width: "20px", }} className="py-5">
+                    <div className="py-2 px-3"><i className="bx bx-right-arrow-alt"></i></div>
                   </td>
                   {updatedColumns.map((col) => (
-                    <td className="text-start mx-2" key={col.key}>
+                    <td className="text-start mx-2 p-3" key={col.key} style={{ padding: "12px 16px" }} >
                       {col.key === "description" ? (
                         item[col.key] !== undefined &&
                         item[col.key] !== null ? (

src/pages/project/ProjectDetails.jsx

@@ -20,7 +20,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
 import ProjectDocuments from "../../components/Project/ProjectDocuments";
 import ProjectSetting from "../../components/Project/ProjectSetting";
 import DirectoryPage from "../Directory/DirectoryPage";
-import { useProjectAccess } from "../../hooks/useProjectAccess"; 
+import { useProjectAccess } from "../../hooks/useProjectAccess";
 
 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
@@ -30,10 +30,13 @@ const ProjectDetails = () => {
   const dispatch = useDispatch();
 
   const { projectNames } = useProjectName();
-  const { projects_Details, loading: projectLoading, refetch } =
-    useProjectDetails(projectId);
+  const {
+    projects_Details,
+    loading: projectLoading,
+    refetch,
+  } = useProjectDetails(projectId);
 
-  const { canView, loading: permsLoading } = useProjectAccess(projectId);
+  // const { canView, loading: permsLoading } = useProjectAccess(projectId);
 
   useEffect(() => {
     if (!projectId && projectNames.length > 0) {
@@ -47,7 +50,10 @@ const ProjectDetails = () => {
 
   const handler = useCallback(
     (msg) => {
-      if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) {
+      if (
+        msg.keyword === "Update_Project" &&
+        projects_Details?.id === msg.response.id
+      ) {
         refetch();
       }
     },
@@ -64,7 +70,7 @@ const ProjectDetails = () => {
     localStorage.setItem("lastActiveProjectTab", pillKey);
   };
 
-  if (projectLoading || permsLoading || !projects_Details) {
+  if (projectLoading ||  !projects_Details) {
     return <Loader />;
   }
 
@@ -75,13 +81,10 @@ const ProjectDetails = () => {
           <div className="row">
             <div className="col-lg-4 col-md-5 mt-2">
               <AboutProject />
-              <ProjectOverview project={projectId} />
+              {/* <ProjectOverview project={projectId} /> */}
             </div>
-            <div className="col-lg-8 col-md-7 mt-5">
-              <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
-              <div className="mt-5">
-                <AttendanceOverview />
-              </div>
+            <div className="col-lg-8 col-md-7 mt-2">
+              <AttendanceOverview />
             </div>
           </div>
         );

src/pages/project/ProjectPage.jsx

@@ -181,7 +181,7 @@ const ProjectPage = () => {
               </div>
 
               <div>
-              {HasManageProject && (  <button
+              {/* {HasManageProject && (  <button
                   className="btn btn-sm btn-primary"
                   type="button"
                   onClick={() =>
@@ -192,7 +192,7 @@ const ProjectPage = () => {
                   <span className="d-none d-md-inline-block">
                     Add New Project
                   </span>
-                </button>)}
+                </button>)} */}
               </div>
             </div>
           </div>

src/repositories/AuthRepository.jsx

@@ -2,12 +2,12 @@ import { api } from "../utils/axiosClient";
 
 const AuthRepository = {
   //  Public routes (no auth token required)
-  login: (data) => api.postPublic("/api/auth/login", data),
+  login: (data) => api.postPublic("/api/auth/login/v1", data),
   refreshToken: (data) => api.postPublic("/api/auth/refresh-token", data),
   forgotPassword: (data) => api.postPublic("/api/auth/forgot-password", data),
   resetPassword: (data) => api.postPublic("/api/auth/reset-password", data),
   sendOTP: (data) => api.postPublic("/api/auth/send-otp", data),
-  verifyOTP: (data) => api.postPublic("/api/auth/login-otp", data),
+  verifyOTP: (data) => api.postPublic("/api/auth/login-otp/v1", data),
   register: (data) => api.postPublic("/api/auth/register", data),
   sendMail: (data) => api.postPublic("/api/auth/sendmail", data),
 

src/repositories/GlobalRepository.jsx

@@ -3,12 +3,12 @@ import { api } from "../utils/axiosClient";
 const GlobalRepository = {
   getDashboardProgressionData: ({ days = '', FromDate = '', projectId = '' }) => {
     let params;
-    if(projectId == null){
+    if (projectId == null) {
       params = new URLSearchParams({
         days: days.toString(),
         FromDate,
       });
-    }else{
+    } else {
       params = new URLSearchParams({
         days: days.toString(),
         FromDate,
@@ -19,30 +19,54 @@ const GlobalRepository = {
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
 
-  getDashboardAttendanceData: ( date,projectId ) => {  
+  getDashboardAttendanceData: (date, projectId) => {
 
-  return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
-},
+    return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
+  },
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },
-  
+
   getDashboardTeamsCardData: (projectId) => {
-  const url = projectId
-    ? `/api/Dashboard/teams?projectId=${projectId}`
-    : `/api/Dashboard/teams`;
-  return api.get(url);
-},
+    const url = projectId
+      ? `/api/Dashboard/teams?projectId=${projectId}`
+      : `/api/Dashboard/teams`;
+    return api.get(url);
+  },
 
   getDashboardTasksCardData: (projectId) => {
-  const url = projectId
-    ? `/api/Dashboard/tasks?projectId=${projectId}`
-    : `/api/Dashboard/tasks`;
-  return api.get(url);
-},
+    const url = projectId
+      ? `/api/Dashboard/tasks?projectId=${projectId}`
+      : `/api/Dashboard/tasks`;
+    return api.get(url);
+  },
 
- getAttendanceOverview:(projectId,days)=>api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`)
+  getAttendanceOverview: (projectId, days) => api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`),
 
+
+
+  getExpenseData: (projectId, startDate, endDate) => {
+    let url =  `api/Dashboard/expense/type`
+      
+  const queryParams = [];
+
+    if (projectId) {
+      queryParams.push(`projectId=${projectId}`);
+    }
+
+    if (startDate) {
+      queryParams.push(`startDate=${startDate}`);
+    }
+     if (endDate) {
+      queryParams.push(`endDate=${endDate}`);
+    }
+
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+
+    return api.get(url  );
+  },
 };
 
 export default GlobalRepository;

src/services/signalRService.js

@@ -22,7 +22,7 @@ export function startSignalR(loggedUser) {
       accessTokenFactory: () => jwtToken,
       transport: signalR.HttpTransportType.LongPolling,
       withCredentials: false,
-    })
+    })                      
     .withAutomaticReconnect()
     .build();
   const todayDate = new Date();
@@ -32,100 +32,104 @@ export function startSignalR(loggedUser) {
     .toISOString()
     .split("T")[0];
   connection.on("NotificationEventHandler", (data) => {
-    if (data.loggedInUserId != loggedUser?.employeeInfo.id) {
-      // console.log("Notification received:", data);
-      // if action taken on attendance module
-      if (data.keyword == "Attendance") {
-        const checkIn = data.response.checkInTime.substring(0, 10);
-        if (today === checkIn) {
-          eventBus.emit("attendance", data);
-        }
-        var onlyDate = Number(checkIn.substring(8, 10));
+  const { loggedInUserId, keyword, response, employeeList, numberOfImages } = data;
+  const loggedInId = loggedUser?.employeeInfo?.id;
 
-        var afterTwoDay =
-          checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");
-        if (
-          afterTwoDay <= today &&
-          (data.response.activity == 4 || data.response.activity == 5)
-        ) {
-          eventBus.emit("regularization", data);
-        }
-        eventBus.emit("attendance_log", data);
-      }
-         if(data.keyword == "Expanse"){
-        queryClient.invalidateQueries({queryKey:["Expenses"]})
-      }
-      // if create or update project
-      if (
-        data.keyword == "Create_Project" ||
-        data.keyword == "Update_Project"
-      ) {
-        // clearCacheKey("projectslist");
-        queryClient.invalidateQueries(['projectslist']);  
-        eventBus.emit("project", data);
-      }
+  if (loggedInUserId === loggedInId) return;
 
-      // if assign or deassign employee to any project
-      if (data.keyword == "Assign_Project") {
-        if (
-          data.employeeList.some((item) => item === loggedUser?.employeeInfo.id)
-        ) {
-          try {
-            cacheData("hasReceived", false);
-            eventBus.emit("assign_project_one", data);
-          } catch (e) {
-            // console.error("Error in cacheData:", e);
-          }
-        }
-        eventBus.emit("assign_project_all", data);
-      }
-      // if created or updated infra
-      if (data.keyword == "Infra") {
-        queryClient.removeQueries({queryKey:["ProjectInfra"]})
-        // eventBus.emit("infra", data);
-      }
-      if (data.keyword == "Task_Report") {
-        queryClient.removeQueries({queryKey:["Infra"]})
-        // eventBus.emit("infra", data);
-      }
-
-      if ( data.keyword == "WorkItem" )
-      {
-        queryClient.removeQueries({queryKey:["WorkItems"]})
-      }
-
-      // if created or updated Employee
-      if (data.keyword == "Employee") {
-        // clearCacheKey("employeeListByProject");
-        // clearCacheKey("allEmployeeList");
-        // clearCacheKey("allInactiveEmployeeList");
-        // clearCacheKey("employeeProfile");
-        clearCacheKey("Attendance");
-        clearCacheKey("regularizedList")
-        clearCacheKey("AttendanceLogs")
-
-        // ---we can do also----
-        // queryClient.removeQueries(['allEmployee', true]);
-        //  but best practies is refetch
-          queryClient.invalidateQueries(['allEmployee', true]);  
-          queryClient.invalidateQueries(['allEmployee', false]); 
-          queryClient.invalidateQueries(['employeeProfile', data.response?.employeeId]);
-          queryClient.invalidateQueries(['employeeListByProject']); // optional if scope
-          eventBus.emit("employee", data);
-      }
-
-      if (data.keyword == "Task_Report") {
-        if(data.numberOfImages > 0){
-        eventBus.emit("image_gallery", data);
-        }
-      }
-      if (data.keyword == "Task_Comment") {
-        if(data.numberOfImages > 0){
-        eventBus.emit("image_gallery", data);
-        }
-      }
+  // ---- Handlers for invalidate or remove ----
+  const queryInvalidators = {
+    Expanse: () => {
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] }),
+      queryClient.invalidateQueries({ queryKey: ["Expense"] })
+    },
+    Create_Project: () => queryClient.invalidateQueries(["projectslist"]),
+    Update_Project: () => queryClient.invalidateQueries(["projectslist"]),
+    Infra: () => queryClient.removeQueries({ queryKey: ["ProjectInfra"] }),
+    Task_Report: () => queryClient.invalidateQueries({ queryKey: ["Infra"] }),
+    WorkItem: () => queryClient.invalidateQueries({ queryKey: ["WorkItems"] }),
+    Directory_Notes:()=>{
+      queryClient.invalidateQueries({queryKey:["directoryNotes"]})
+      queryClient.invalidateQueries({queryKey:["Notes"]})
+    },
+    Directory_Buckets:()=>{
+      queryClient.invalidateQueries({queryKey:["bucketList"]})
+    },
+    Directory:()=>{
+      queryClient.invalidateQueries({queryKey:["contacts"]})
+      queryClient.invalidateQueries({queryKey:["Contact"]})
+      queryClient.invalidateQueries({queryKey:["ContactProfile"]})
     }
-  });
+
+  };
+
+  // ---- Keyword based event emitters ----
+  const emitters = {
+    employee: () => eventBus.emit("employee", data),
+    project: () => eventBus.emit("project", data),
+    infra: () => eventBus.emit("infra", data),
+    assign_project_all: () => eventBus.emit("assign_project_all", data),
+    image_gallery: () => eventBus.emit("image_gallery", data),
+  };
+
+  // ---- Handle Attendance ----
+  if (keyword === "Attendance") {
+    const checkIn = response.checkInTime.substring(0, 10);
+    if (today === checkIn) eventBus.emit("attendance", data);
+
+    const onlyDate = Number(checkIn.substring(8, 10));
+    const afterTwoDay =
+      checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");
+
+    if (
+      afterTwoDay <= today &&
+      (response.activity === 4 || response.activity === 5)
+    ) {
+      eventBus.emit("regularization", data);
+    }
+    eventBus.emit("attendance_log", data);
+  }
+
+  // ---- Invalidate/Remove cache by keywords ----
+  if (queryInvalidators[keyword]) {
+    queryInvalidators[keyword]();
+  }
+
+  // ---- Project creation/update ----
+  if (keyword === "Create_Project" || keyword === "Update_Project") {
+    emitters.project();
+  }
+
+  // ---- Assign/deassign project ----
+  if (keyword === "Assign_Project") {
+    if (employeeList?.includes(loggedInId)) {
+      try {
+        cacheData("hasReceived", false);
+        eventBus.emit("assign_project_one", data);
+      } catch {}
+    }
+    emitters.assign_project_all();
+  }
+
+  // ---- Employee update ----
+  if (keyword === "Employee") {
+    clearCacheKey("Attendance");
+    clearCacheKey("regularizedList");
+    clearCacheKey("AttendanceLogs");
+
+    queryClient.invalidateQueries(["allEmployee", true]);
+    queryClient.invalidateQueries(["allEmployee", false]);
+    queryClient.invalidateQueries(["employeeProfile", response?.employeeId]);
+    queryClient.invalidateQueries(["employeeListByProject"]);
+
+    emitters.employee();
+  }
+
+  // ---- Image related events ----
+  if (["Task_Report", "Task_Comment"].includes(keyword) && numberOfImages > 0) {
+    emitters.image_gallery();
+  }
+});
 
   connection
     .start();

src/slices/localVariablesSlice.jsx

@@ -19,6 +19,10 @@ const localVariablesSlice = createSlice({
       startStep: 1,
       flowType: "default",
     },
+    ProjectModal:{
+       isOpen: false,
+       data: null,
+    },
 
     AuthModal: {
       isOpen: false,
@@ -70,6 +74,17 @@ const localVariablesSlice = createSlice({
     closeAuthModal: (state, action) => {
       state.AuthModal.isOpen = false;
     },
+
+
+    // project modal 
+    openProjectModal: (state, action) => {
+      state.ProjectModal.isOpen = true;
+      state.ProjectModal.data = action.payload || null;
+    },
+    closeProjectModal: (state) => {
+      state.ProjectModal.isOpen = false;
+      state.ProjectModal.data = null;
+    },
   },
 });
 
@@ -84,5 +99,6 @@ export const {
   toggleOrgModal,
   openAuthModal,
   closeAuthModal,
+  openProjectModal, closeProjectModal
 } = localVariablesSlice.actions;
 export default localVariablesSlice.reducer;

src/utils/appUtils.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { format, parseISO } from "date-fns";
+import { parseISO, formatISO } from "date-fns";
 export const formatFileSize = (bytes) => {
   if (bytes < 1024) return bytes + " B";
   else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
@@ -72,12 +72,11 @@ export const normalizeAllowedContentTypes = (allowedContentType) => {
 export function localToUtc(localDateString) {
   if (!localDateString || typeof localDateString !== "string") return null;
 
-  const [year, month, day] = localDateString.trim().split("-");
+  const [day, month, year] = localDateString.trim().split("-");
+  if (!day || !month || !year) return null;
 
-  if (!year || !month || !day) return null;
-
-
-  const date = new Date(Number(year), Number(month) - 1, Number(day), 0, 0, 0);
+  // Create date in UTC
+  const date = new Date(Date.UTC(Number(year), Number(month) - 1, Number(day), 0, 0, 0));
 
   return isNaN(date.getTime()) ? null : date.toISOString();
 }

src/utils/axiosClient.jsx

@@ -4,6 +4,7 @@ import axiosRetry from "axios-retry";
 import showToast from "../services/toastService";
 import { startSignalR, stopSignalR } from "../services/signalRService";
 import { BASE_URL } from "./constants";
+import { removeSession } from "./authUtils";
 const base_Url = BASE_URL;
 
 export const axiosClient = axios.create({
@@ -77,8 +78,10 @@ axiosClient.interceptors.response.use(
           if (
             !refreshToken ||
             error.response.data?.errors === "Invalid or expired refresh token."
+           
           ) {
             redirectToLogin();
+             removeSession()
             return Promise.reject(error);
           }
 
@@ -107,6 +110,7 @@ axiosClient.interceptors.response.use(
             originalRequest.headers["Authorization"] = `Bearer ${token}`;
             return axiosClient(originalRequest);
           } catch (refreshError) {
+             removeSession()
             redirectToLogin();
             return Promise.reject(refreshError);
           }

src/utils/constants.jsx

@@ -1,3 +1,8 @@
+export const BASE_URL = process.env.VITE_BASE_URL;
+
+// export const BASE_URL = "https://api.marcoaiot.com";
+
+
 export const THRESH_HOLD = 48; //  hours
 export const DURATION_TIME = 10; // minutes
 export const ITEMS_PER_PAGE = 20;
@@ -140,8 +145,17 @@ export const PROJECT_STATUS = [
     label: "Completed",
   },
 ];
+
+
+export const UUID_REGEX =
+  /^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+
+export const ALLOW_PROJECTSTATUS_ID = [
+  "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+  "cdad86aa-8a56-4ff4-b633-9c629057dfef",
+  "b74da4c2-d07e-46f2-9919-e75e49b12731",
+];
+
 export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
-export const BASE_URL = process.env.VITE_BASE_URL;
 
-// export const BASE_URL = "https://api.marcoaiot.com";