Merge branch 'landing_page_with_new_theme' into OnFieldWork_V1

Reviewed-on: #473
Merged

index.html

@@ -9,6 +9,8 @@
 
   <meta name="description" content="" />
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+
   <!-- Favicon -->
   <link rel="icon" type="image/svg+xml" href="/img/favicon.ico" />
 
@@ -105,6 +107,9 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> -->
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+
   <!-- Flatpickr JS -->
 
 </body>

public/assets/css/core-extend.css

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

public/assets/vendor/css/core.css

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

src/App.tsx

@@ -6,7 +6,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { queryClient } from "./layouts/AuthLayout";
 import  ModalProvider  from "./ModalProvider";
 
-
+window.addEventListener("unhandledrejection", (event) => {
+  if (event.reason?.message?.includes("Failed to fetch")) {
+    event.preventDefault();
+    console.debug("Network issue (fetch failed) - suppressed");
+  }
+});
 
 const App = () => {
   return (

src/ModalProvider.jsx

@@ -1,17 +1,20 @@
 import React, { useEffect } from "react";
 import { useOrganizationModal } from "./hooks/useOrganization";
 import OrganizationModal from "./components/Organization/OrganizationModal";
-import { useAuthModal } from "./hooks/useAuth";
+import { useAuthModal, useModal } from "./hooks/useAuth";
 import SwitchTenant from "./pages/authentication/SwitchTenant";
+import { ProjectModal } from "./components/Project/ManageProjectInfo";
 
 const ModalProvider = () => {
   const { isOpen, onClose } = useOrganizationModal();
   const { isOpen: isAuthOpen } = useAuthModal();
+  const {isOpen:isOpenProject}  = useModal("ManageProject")
 
   return (
     <>
       {isOpen && <OrganizationModal />}
       {isAuthOpen && <SwitchTenant />}
+      {isOpenProject && <ProjectModal/>}
     </>
   );
 };

src/components/Activities/AttendLogs.jsx

@@ -123,15 +123,19 @@ const AttendLogs = ({ Id }) => {
   }, []);
   return (
     <div className="table-responsive">
-      <div className="text-start">
+      <div className="mb-3">
+        <h5 className="fw-bold mb-4">Attendance Logs</h5>
         {logs && !loading && (
-          <p>
-            Attendance logs for{" "}
-            {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}{" "}
-            on {formatUTCToLocalTime(logs[0]?.activityTime)}
+          <p className="mb-0 text-start">
+            Showing logs for{" "}
+            <strong>
+              {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}
+            </strong>{" "}
+            on <strong>{formatUTCToLocalTime(logs[0]?.activityTime)}</strong>
           </p>
         )}
       </div>
+
       {loading && <p>Loading..</p>}
       {logs && logs.length > 0 && (
         <>
@@ -142,9 +146,9 @@ const AttendLogs = ({ Id }) => {
           <table className="table table-sm mb-0">
             <thead>
               <tr>
+                <th>Activity</th>
                 <th>Date</th>
                 <th>Time</th>
-                <th>Activity</th>
                 <th>Location</th>
                 <th>Recored By</th>
                 <th>Description</th>
@@ -156,11 +160,16 @@ const AttendLogs = ({ Id }) => {
                 .sort((a, b) => b.id - a.id)
                 .map((log, index) => (
                   <tr key={index}>
-                    <td>{formatUTCToLocalTime(log.activityTime)}</td>
-                    <td>{convertShortTime(log.activityTime)}</td>
                      <td>
                       {whichActivityPerform(log.activity, log.activityTime)}
                     </td>
+                    <td>
+                      <div className="py-2">
+                        {formatUTCToLocalTime(log.activityTime)}
+                      </div>
+                    </td>
+                    <td>{convertShortTime(log.activityTime)}</td>
+                   
                     <td>
                       {log?.latitude != 0 ? (
                         <i
@@ -179,8 +188,7 @@ const AttendLogs = ({ Id }) => {
                       )}
                     </td>
                     <td className="text-wrap">
-                      {`${log?.updatedByEmployee?.firstName ?? ""} ${
-                        log?.updatedByEmployee?.lastName ?? ""
+                      {`${log?.updatedByEmployee?.firstName ?? ""} ${log?.updatedByEmployee?.lastName ?? ""
                         }`}
                     </td>
                     <td className="text-wrap" colSpan={3}>

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,8 +109,11 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
+
   return (
     <>
+      <div>
         <div
           className="table-responsive text-nowrap h-100"
           style={{ minHeight: "200px" }}   // Ensures fixed height
@@ -138,7 +142,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 +191,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                           </td>
 
                           <td>{item.jobRoleName}</td>
-                        <td>{item.organizationName || "--"}</td>
+                          {/* <td>{item.organizationName || "--"}</td> */}
 
                           <td>
                             {item.checkInTime
@@ -223,50 +227,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                   )}
                 </tbody>
               </table>
-
-
-            {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
-              <nav aria-label="Page ">
-                <ul className="pagination pagination-sm justify-content-end py-1">
-                  <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
@@ -281,6 +241,14 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
             </div>
           )}
         </div>
+        {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={paginate}
+          />
+        )}
+      </div>
     </>
   );
 };

src/components/Activities/AttendcesLogs.jsx

@@ -11,6 +11,8 @@ 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";
+import { useNavigate } from "react-router-dom";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -33,7 +35,7 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
+const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   // const selectedProject = useSelector(
   //   (store) => store.localVariables.projectId
   // );
@@ -45,6 +47,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
 
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
+  const navigate = useNavigate();
 
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -84,10 +87,10 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
     dateRange.endDate,
     organizationId
   );
-  const filtering = (data) => {
+  const filtering = useCallback((dataToFilter) => {
     const filteredData = showPending
-      ? data.filter((item) => item.checkOutTime === null)
-      : data;
+      ? dataToFilter.filter((item) => item.checkOutTime === null)
+      : dataToFilter;
 
     const group1 = filteredData
       .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
@@ -108,14 +111,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
       .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) => {
@@ -133,11 +129,15 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
 
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
     setProcessedData(finalData);
-  };
+  }, [showPending]);
+
 
  useEffect(() => {
+  if (data?.length) {
     filtering(data);
-  }, [data, showPending]);
+  }
+}, [data, showPending]);
+
 
   // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
@@ -151,31 +151,6 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
     });
   }, [processedData, searchTerm]);
 
-//   const filteredSearchData = useMemo(() => {
-//   let tempData = processedData;
-
-//   if (searchTerm) {
-//     const lowercasedSearchTerm = searchTerm.toLowerCase();
-//     tempData = tempData.filter((item) => {
-//       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-//       return fullName.includes(lowercasedSearchTerm);
-//     });
-//   }
-
-//   if (filters?.selectedOrganization) {
-//     tempData = tempData.filter(
-//       (item) => item.organization?.name === filters.selectedOrganization
-//     );
-//   }
-
-//   if (filters?.selectedServices?.length > 0) {
-//     tempData = tempData.filter((item) =>
-//       filters.selectedServices.includes(item.service?.name)
-//     );
-//   }
-
-//   return tempData;
-// }, [processedData, searchTerm, filters]);
 
 
   const {
@@ -246,18 +221,19 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
   return (
     <>
       <div
         className="dataTables_length text-start py-2 d-flex justify-content-between"
         id="DataTables_Table_0_length"
       >
-        <div className="d-flex align-items-center my-0 ">
+          <div className="d-flex align-items-center my-0 ms-sm-8 ">
           <DateRangePicker
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start m-0 ms-5">
+          <div className="form-check form-switch text-start ms-1 ms-md-5 align-items-center mb-0">
             <input
               type="checkbox"
               className="form-check-input"
@@ -272,9 +248,9 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
         </div>
 
       </div>
-      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
+      <div className="table-responsive text-nowrap " >
         {isLoading ? (
-          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <div className="d-flex justify-content-center align-items-center">
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -285,7 +261,8 @@ 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>
@@ -331,7 +308,12 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
                           lastName={attendance.lastName}
                         />
                         <div className="d-flex flex-column">
-                          <a href="#" className="text-heading text-truncate">
+                          <a
+                            onClick={() =>
+                              navigate(`/employee/${attendance.employeeId}?for=attendance`)
+                            }
+                            className="text-heading text-truncate cursor-pointer"
+                          >
                             <span className="fw-normal">
                               {attendance.firstName} {attendance.lastName}
                             </span>
@@ -344,7 +326,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
@@ -366,7 +348,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
+          <div className="my-12"><span className="text-secondary">No data for this date range. Please choose another.</span></div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
@@ -378,45 +360,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,7 +20,8 @@ const createSchema = (modeldata) => {
         .max(200, "Description should be less than 200 characters")
         .optional(),
     })
-    .refine((data) => {
+    .refine(
+      (data) => {
         if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
           const checkIn = new Date(modeldata.checkInTime);
           const [time, modifier] = data.markTime.split(" ");
@@ -33,17 +35,21 @@ const createSchema = (modeldata) => {
           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"],
-    });
+      }
+    );
 };
 
 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">
+    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 d-flex justify-content-center mt-2">
         <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
@@ -207,7 +220,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row " onSubmit={handleSubmit(onSubmit)}>
       <div className="col-12 col-md-12">
         <p>Regularize Attendance</p>
         <label className="form-label" htmlFor="description">

src/components/Activities/Regularization.jsx

@@ -9,19 +9,33 @@ 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";
+import { useNavigate } from "react-router-dom";
+import { employee } from "../../data/masters";
 
-const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
+const Regularization = ({ handleRequest, searchTerm, projectId, organizationId, IncludeInActive }) => {
   const queryClient = useQueryClient();
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
+  const navigate = useNavigate();
   const { regularizes, loading, error, refetch } =
     useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
 
   useEffect(() => {
-    setregularizedList(regularizes);
+    if (regularizes && regularizes.length) {
+      setregularizedList((prev) => {
+        const prevIds = prev.map((i) => i.id).join(",");
+        const newIds = regularizes.map((i) => i.id).join(",");
+        if (prevIds !== newIds) {
+          return regularizes;
+        }
+        return prev;
+      });
+    }
   }, [regularizes]);
 
+
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
@@ -116,7 +130,9 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
   return (
+    <div>
       <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
         {loading ? (
           <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
@@ -128,13 +144,16 @@ 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>
                 <th>
                   <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
                 </th>
+
+                <th>Request By</th>
+                <th>Requested At</th>
                 <th>Action</th>
               </tr>
             </thead>
@@ -148,7 +167,17 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
                         lastName={att.lastName}
                       />
                       <div className="d-flex flex-column">
-                      <a href="#" className="text-heading text-truncate">
+                        {/* <a href="#" className="text-heading text-truncate">
+                        <span className="fw-normal">
+                          {att.firstName} {att.lastName}
+                        </span>
+                      </a> */}
+                        <a
+                          onClick={() =>
+                            navigate(`/employee/${att.employeeId}?for=attendance`)
+                          }
+                          className="text-heading text-truncate cursor-pointer"
+                        >
                           <span className="fw-normal">
                             {att.firstName} {att.lastName}
                           </span>
@@ -156,14 +185,25 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
                       </div>
                     </div>
                   </td>
+
                   <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
 
-                <td>{att.organizationName || "--"}</td>
+                  {/* <td>{att.organizationName || "--"}</td> */}
 
                   <td>{convertShortTime(att.checkInTime)}</td>
                   <td>
                     {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
                   </td>
+                  <td>
+                    {att.requestedBy
+                      ? `${att.requestedBy?.firstName} ${att.requestedBy?.lastName}`
+                      : "--"}
+                  </td>
+                  <td>
+                    {att.requestedAt
+                      ? moment(att.requestedAt).format("DD-MMM-YYYY")
+                      : "--"}
+                  </td>
                   <td className="text-center ">
                     <RegularizationActions
                       attendanceData={att}
@@ -188,44 +228,13 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             </span>
           </div>
         )}
+      </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();
@@ -31,7 +31,7 @@ const selectedProjectId = useSelectedProject()
       <div className="card-header mb-1 pb-0">
         <div className="d-flex flex-wrap justify-content-between align-items-center">
           <div className="card-title mb-0 text-start">
-            <h5 className="mb-1">Attendance</h5>
+            <h5 className="mb-1 card-title">Attendance</h5>
             <p className="card-subtitle">Daily Attendance Data</p>
           </div>
 

src/components/Dashboard/AttendanceChart.jsx

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

src/components/Dashboard/AttendanceOverview.jsx

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

src/components/Dashboard/Dashboard.jsx

@@ -1,68 +1,62 @@
-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 AttendanceOverview from "./AttendanceChart";
+// 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 "./AttendanceOverview";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectName } from "../../hooks/useProjects";
+import ExpenseAnalysis from "./ExpenseAnalysis";
+import ExpenseStatus from "./ExpenseStatus";
+import ExpenseByProject from "./ExpenseByProject";
 
 const Dashboard = () => {
-    const { projectsCardData } = useDashboardProjectsCardData();
-    const { teamsCardData } = useDashboardTeamsCardData();
-    const { tasksCardData } = useDashboardTasksCardData();
+  // 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;
 
   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 className="container-fluid py-5">
+  <div className="row mb-6 g-6">
+    <div className="col-12 col-xl-8">
+      <div className="card h-100">
+        <ExpenseAnalysis />
       </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 className="col-12 col-xl-4 col-md-6">
+      <div className="card ">
+        <ExpenseStatus />
+      </div>
+    </div>
   </div>
 
-                {isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectCompletionChart />
-                    </div>
-                )}
-
+  <div className="row ">
     {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectOverview />
+      <div className="col-12 col-md-6 mb-sm-0 mb-4 ">
+        <AttendanceOverview />
       </div>
     )}
+    <div className="col-12 col-md-6">
+      <ExpenseByProject />
+    </div>
+  </div>
+</div>
 
-                <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>
-        </div>
   );
 };
 

src/components/Dashboard/ExpenseAnalysis.jsx

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

src/components/Dashboard/ExpenseByProject.jsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+import Chart from "react-apexcharts";
+import { useExpenseType } from "../../hooks/masterHook/useMaster";
+import { useSelector } from "react-redux";
+import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
+import { formatCurrency } from "../../utils/appUtils";
+import { formatDate_DayMonth } from "../../utils/dateUtils";
+
+const ExpenseByProject = () => {
+  const projectId = useSelector((store) => store.localVariables.projectId);
+  const [range, setRange] = useState("12M");
+  const [selectedType, setSelectedType] = useState("");
+  const [viewMode, setViewMode] = useState("Category");
+  const [chartData, setChartData] = useState({ categories: [], data: [] });
+
+  const { ExpenseTypes, loading: typeLoading } = useExpenseType();
+
+  const { data: expenseApiData, isLoading } = useExpenseDataByProject(
+    projectId,
+    selectedType,
+    range === "All" ? null : parseInt(range)
+  );
+
+  useEffect(() => {
+    if (expenseApiData) {
+      const categories = expenseApiData.map((item) =>
+        formatDate_DayMonth(item.monthName, item.year)
+      );
+      const data = expenseApiData.map((item) => item.total);
+      setChartData({ categories, data });
+    } else {
+      setChartData({ categories: [], data: [] });
+    }
+  }, [expenseApiData]);
+
+  const getSelectedTypeName = () => {
+    if (!selectedType) return "All Types";
+    const found = ExpenseTypes.find((t) => t.id === selectedType);
+    return found ? found.name : "All Types";
+  };
+
+  const options = {
+    chart: { type: "bar", toolbar: { show: false } },
+    plotOptions: {
+      bar: { horizontal: false, columnWidth: "55%", borderRadius: 4 },
+    },
+    dataLabels: { enabled: true, formatter: (val) => formatCurrency(val) },
+    xaxis: {
+      categories: chartData.categories,
+      labels: { style: { fontSize: "12px" }, rotate: -45 },
+    },
+    tooltip: {
+      y: {
+        formatter: (val) => `${formatCurrency(val)} (${getSelectedTypeName()})`,
+      },
+    },
+
+    annotations: { xaxis: [{ x: 0, strokeDashArray: 0 }] },
+    fill: { opacity: 1 },
+    colors: ["#2196f3"],
+  };
+
+  const series = [
+    {
+      name: getSelectedTypeName(),
+      data: chartData.data,
+    },
+  ];
+
+  return (
+    <div className="card shadow-sm rounded ">
+      {/* Header */}
+      <div className="card-header">
+        <div className="d-flex justify-content-start align-items-center mb-3 mt-3">
+          <div>
+            <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
+            <p className="card-subtitle me-5 mb-0">Detailed project expenses</p>
+          </div>
+          <div className="btn-group mb-4 ms-n8">
+            <button
+              className="btn btn-sm dropdown-toggle fs-5"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              {viewMode}
+            </button>
+            <ul className="dropdown-menu dropdown-menu-end ">
+              <li>
+                <button
+                  className="dropdown-item"
+                  onClick={() => {
+                    setViewMode("Category");
+                    setSelectedType("");
+                  }}
+                >
+                  Category
+                </button>
+              </li>
+              <li>
+                <button
+                  className="dropdown-item"
+                  onClick={() => {
+                    setViewMode("Project");
+                    setSelectedType("");
+                  }}
+                >
+                  Project
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Range Buttons + Expense Dropdown */}
+        <div className="d-flex align-items-center flex-wrap ">
+          {["1M", "3M", "6M", "12M", "All"].map((item) => (
+            <button
+              key={item}
+              className={`border-0 px-2 py-1 text-sm rounded ${range === item
+                  ? "text-white bg-primary"
+                  : "text-body bg-transparent"
+                }`}
+              style={{ cursor: "pointer", transition: "all 0.2s ease" }}
+              onClick={() => setRange(item)}
+            >
+              {item}
+            </button>
+          ))}
+          {viewMode === "Category" && (
+            <select
+              className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
+              value={selectedType}
+              onChange={(e) => setSelectedType(e.target.value)}
+              disabled={typeLoading}
+              style={{ maxWidth: "200px" }}
+            >
+              <option value="">All Types</option>
+              {ExpenseTypes.map((type) => (
+                <option key={type.id} value={type.id}>
+                  {type.name}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      </div>
+
+      {/* Chart */}
+      <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
+        {isLoading ? (
+          <p>Loading chart...</p>
+        ) : !expenseApiData || expenseApiData.length === 0 ? (
+          <div className="text-center text-muted py-5">No data found</div>
+        ) : (
+          <Chart options={options} series={series} type="bar" height={235} />
+        )}
+      </div>
+
+    </div>
+  );
+};
+
+export default ExpenseByProject;

src/components/Dashboard/ExpenseStatus.jsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import { useExpense } from "../../hooks/useExpense";
+import { useExpenseStatus } from "../../hooks/useDashboard_Data";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectName } from "../../hooks/useProjects";
+import { countDigit, formatCurrency } from "../../utils/appUtils";
+import { EXPENSE_MANAGE, EXPENSE_STATUS } from "../../utils/constants";
+import { useNavigate } from "react-router-dom";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+
+const ExpenseStatus = () => {
+  const [projectName, setProjectName] = useState("All Project");
+  const selectedProject = useSelectedProject();
+  const { projectNames, loading } = useProjectName();
+  const { data, isPending, error } = useExpenseStatus(selectedProject);
+  const navigate = useNavigate();
+  const isManageExpense = useHasUserPermission(EXPENSE_MANAGE)
+
+  useEffect(() => {
+    if (selectedProject && projectNames?.length) {
+      const project = projectNames.find((p) => p.id === selectedProject);
+      setProjectName(project?.name || "All Project");
+    } else {
+      setProjectName("All Project");
+    }
+  }, [projectNames, selectedProject]);
+
+  const handleNavigate = (status) => {
+    if (selectedProject) {
+      navigate(`/expenses/${status}/${selectedProject}`);
+    } else {
+      navigate(`/expenses/${status}`);
+    }
+  };
+  return (
+    <>
+      <div className="card-header d-flex justify-content-between text-start ">
+        <div className="m-0">
+          <h5 className="card-title mb-1">Expense - By Status</h5>
+          <p className="card-subtitle m-0 ">{projectName}</p>
+        </div>
+      </div>
+
+      <div className="card-body ">
+
+        <div className="report-list text-start">
+          {[
+            {
+              title: "Pending Payment",
+              count: data?.processPending?.count || 0,
+              amount: data?.processPending?.totalAmount || 0,
+              icon: "bx bx-rupee",
+              iconColor: "text-primary",
+              status: EXPENSE_STATUS.payment_pending,
+            },
+            {
+              title: "Pending Approve",
+              count: data?.approvePending?.count || 0,
+              amount: data?.approvePending?.totalAmount || 0,
+              icon: "fa-solid fa-check",
+              iconColor: "text-warning",
+              status: EXPENSE_STATUS.approve_pending,
+            },
+            {
+              title: "Pending Review",
+              count: data?.reviewPending?.count || 0,
+              amount: data?.reviewPending?.totalAmount || 0,
+              icon: "bx bx-search-alt-2",
+              iconColor: "text-secondary",
+              status: EXPENSE_STATUS.review_pending,
+            },
+            {
+              title: "Draft",
+              count: data?.draft?.count || 0,
+              amount: data?.draft?.totalAmount || 0,
+              icon: "bx bx-file-blank",
+              iconColor: "text-info",
+              status: EXPENSE_STATUS.daft,
+            },
+          ].map((item, idx) => (
+            <div
+              key={idx}
+              className="report-list-item rounded-2 mb-4  bg-lighter px-2 py-1 cursor-pointer"
+              onClick={() => handleNavigate(item?.status)}
+            >
+              <div className="d-flex align-items-center">
+                <div className="report-list-icon shadow-xs me-2">
+                  <span className="d-inline-flex align-items-center justify-content-center rounded-circle border p-2">
+                    <i className={`${item?.icon} ${item?.iconColor} bx-lg`}></i>
+                  </span>
+                </div>
+                <div className="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
+                  <div className="d-flex flex-column gap-2">
+                    <span className="fw-bold">{item?.title}</span>
+                    {item?.amount ? (
+                      <small className="mb-0 text-primary">
+                        {formatCurrency(item?.amount)}
+                      </small>
+                    ) : (
+                      <small className="mb-0 text-primary">{formatCurrency(0)}</small>
+                    )}
+                  </div>
+                  <div>
+                    <small
+                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
+                        } text-gray-500`}
+                    >
+                      {item?.count || 0}
+                    </small>
+                    <small className="text-muted fs-semibold text-royalblue text-md">
+                      <i className="bx bx-chevron-right"></i>
+                    </small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className=" py-0 text-start mb-2">
+          {isManageExpense && (
+            <div
+              className="d-flex justify-content-between align-items-center cursor-pointer"
+              onClick={() => handleNavigate(EXPENSE_STATUS.process_pending)}
+            >
+              <div className="d-block">
+                <span
+                  className={`fs-semibold d-block ${countDigit(data?.totalAmount || 0) > 3 ? "text-base" : "text-lg"
+                    }`}
+                >
+                  Project Spendings:
+                </span>{" "}
+                <small className="d-block text-xxs text-gary-80">
+                  (All Processed Payments)
+                </small>
+              </div>
+              <div className="d-flex align-items-center gap-2">
+                <span
+                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
+                    } text-md`}
+                >
+                  {formatCurrency(data?.totalAmount || 0)}
+                </span>
+                <small className="text-muted fs-semibold text-royalblue text-md">
+                  <i className="bx bx-chevron-right"></i>
+                </small>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ExpenseStatus;

src/components/Directory/AssignedBucket.jsx

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

src/components/Directory/ContactFilterChips.jsx

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

src/components/Directory/ListViewContact.jsx

@@ -4,8 +4,9 @@ import Pagination from "../common/Pagination";
 import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
 import { useActiveInActiveContact } from "../../hooks/useDirectory";
 import ConfirmModal from "../common/ConfirmModal";
+import Loader from "../common/Loader";
 
-const ListViewContact = ({ data, Pagination }) => {
+const ListViewContact = ({ data, Pagination, isLoading }) => {
   const { showActive, setManageContact, setContactOpen } =
     useDirectoryContext();
   const [deleteContact, setDeleteContact] = useState({
@@ -85,6 +86,8 @@ const ListViewContact = ({ data, Pagination }) => {
     ActiveInActive({ contactId: contactId, contactStatus: !showActive });
   };
 
+  if (isLoading) return <Loader />
+  if (!data || data.length === 0) return <div className="text-center py-12">No Contact Found</div>
   return (
     <>
       <ConfirmModal
@@ -97,11 +100,13 @@ 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"
         >
+
+          {data && (
             <div className="dataTables_wrapper no-footer mx-5 pb-2">
               <table className="table dataTable text-nowrap">
                 <thead>
@@ -116,12 +121,14 @@ const ListViewContact = ({ data, Pagination }) => {
                     </th>
                   </tr>
                 </thead>
-              <tbody >
-                {Array.isArray(data) && data.length > 0 ? (
+                <tbody>
+                  {Array.isArray(data) && data.length > 0 && (
                     data.map((row, i) => (
                       <tr
                         key={i}
-                      style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
+                        style={{
+                          background: `${!showActive ? "#f8f6f6" : ""}`,
+                        }}
                       >
                         {contactList.map((col) => (
                           <td key={col.key} className={col.align}>
@@ -160,8 +167,7 @@ const ListViewContact = ({ data, Pagination }) => {
                             </div>
                           ) : (
                             <i
-                            className={`bx  ${
-                              isPending && activeContact === row.id
+                              className={`bx  ${isPending && activeContact === row.id
                                 ? "bx-loader-alt bx-spin"
                                 : "bx-recycle"
                                 } me-1 text-primary cursor-pointer`}
@@ -175,26 +181,15 @@ const ListViewContact = ({ data, Pagination }) => {
                         </td>
                       </tr>
                     ))
-                ) : (
-                  <tr style={{ height: "200px" }}>
-                    <td
-                      colSpan={contactList.length + 1}
-                      className="text-center align-middle"
-                    >
-                      No contacts found
-                    </td>
-                  </tr>
-
                   )}
                 </tbody>
               </table>
-            {Pagination && (
-              <div className="d-flex justify-content-start">
-                {Pagination}
             </div>
           )}
         </div>
-        </div>
+        {Pagination && (
+          <div className="d-flex justify-content-start">{Pagination}</div>
+        )}
       </div>
     </>
   );

src/components/Directory/ManageContact.jsx

@@ -23,7 +23,7 @@ import Label from "../common/Label";
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
   const { buckets, loading: bucketsLoaging } = useBuckets();
-  const { projects, loading: projectLoading } = useProjects();
+  const { data: projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { organizationList } = useOrganization();
@@ -208,10 +208,11 @@ const ManageContact = ({ contactId, closeModal }) => {
             <InputSuggestions
               organizationList={organizationList}
               value={watch("organization") || ""}
-  onChange={(val) => setValue("organization", val, { shouldValidate: true })}
+              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/Directory/NoteFilterChips.jsx

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

src/components/Documents/DocumentFilterChips.jsx

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

src/components/Documents/DocumentFilterPanel.jsx

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

src/components/Documents/DocumentSkeleton.jsx

@@ -17,9 +17,8 @@ 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>
@@ -47,7 +46,11 @@ export const DocumentTableSkeleton = ({ rows = 5 }) => {
             {/* 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="30px"
+                  height={30}
+                  className="rounded-circle"
+                />
                 <SkeletonCell width="80px" height={16} />
               </div>
             </td>
@@ -65,6 +68,5 @@ export const DocumentTableSkeleton = ({ rows = 5 }) => {
         ))}
       </tbody>
     </table>
-   
   );
 };

src/components/Documents/Documents.jsx

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

src/components/Documents/DocumentsList.jsx

@@ -65,7 +65,7 @@ const DocumentsList = ({
     setIsRefetching(isFetching);
   }, [isFetching, setIsRefetching]);
 
-  const { setManageDoc, setViewDoc } = useDocumentContext();
+  const { setManageDoc, setViewDoc,removeFilterChip } = useDocumentContext();
   const { mutate: ActiveInActive, isPending } = useActiveInActiveDocument();
 
   const paginate = (page) => {
@@ -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

@@ -123,7 +123,7 @@ const EmpAttendance = ({ employee }) => {
   };
   const closeModal = () => setIsModalOpen(false);
 
-  const onSubmit = (formData) => {};
+  const onSubmit = (formData) => { };
   return (
     <>
       {isModalOpen && (
@@ -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"
@@ -153,19 +153,13 @@ const EmpAttendance = ({ employee }) => {
               </FormProvider>
             </>
           </div>         
-          <div className="col-md-2 m-0 text-end">
-            <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${
-                isFetching ? "spin" : ""
-              }`}
-              data-toggle="tooltip"
-              title="Refresh"
-              onClick={() => refetch()}
-            />
-          </div>
         </div>
         <div className="table-responsive text-nowrap">
-          {!loading && data.length === 0 && <span>No employee logs</span>}
+          {!loading && data.length === 0 && (
+            <span style={{ fontSize: "0.9rem" }}>
+              No attendance record found in selected date range
+            </span>
+          )}
           {isError && <div className="text-center">{error.message}</div>}
           {loading && !data && <div className="text-center">Loading...</div>}
           {data && data.length > 0 && (
@@ -250,8 +244,7 @@ const EmpAttendance = ({ employee }) => {
               {[...Array(totalPages)].map((_, index) => (
                 <li
                   key={index}
-                  className={`page-item ${
-                    currentPage === index + 1 ? "active" : ""
+                  className={`page-item ${currentPage === index + 1 ? "active" : ""
                     }`}
                 >
                   <button
@@ -263,8 +256,7 @@ const EmpAttendance = ({ employee }) => {
                 </li>
               ))}
               <li
-                className={`page-item ${
-                  currentPage === totalPages ? "disabled" : ""
+                className={`page-item ${currentPage === totalPages ? "disabled" : ""
                   }`}
               >
                 <button

src/components/Employee/EmpDashboard.jsx

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

src/components/Employee/EmployeeNav.jsx

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

src/components/Employee/EmployeeSchema.jsx

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

src/components/Employee/ManageEmployee.jsx

@@ -15,18 +15,18 @@ import {
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
 import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
-import { useOrganizationsList } from "../../hooks/useOrganization";
+// import { useOrganizationsList } from "../../hooks/useOrganization";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ManageEmployee = ({ employeeId, onClosed, 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,10 +601,9 @@ 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/ExpenseFilterChips.jsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from "react";
+
+const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
+    // Build chips from filters
+    const filterChips = useMemo(() => {
+        const chips = [];
+
+        const buildGroup = (ids, list, label, key) => {
+            if (!ids?.length) return;
+            const items = ids.map((id) => ({
+                id,
+                name: list.find((item) => item.id === id)?.name || id,
+            }));
+            chips.push({ key, label, items });
+        };
+
+        buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
+        buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
+        buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
+        buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
+        buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
+
+        if (filters.startDate || filters.endDate) {
+            const start = filters.startDate
+                ? new Date(filters.startDate).toLocaleDateString()
+                : "";
+            const end = filters.endDate
+                ? new Date(filters.endDate).toLocaleDateString()
+                : "";
+            chips.push({
+                key: "dateRange",
+                label: "Date Range",
+                items: [{ id: "dateRange", name: `${start} - ${end}` }],
+            });
+        }
+
+        return chips;
+    }, [filters, filterData]);
+
+    if (!filterChips.length) return null;
+
+    return (
+<div className="row">
+  <div className="col-12">
+    <div className="d-flex flex-wrap align-items-start gap-1 text-start">
+      {filterChips.map((chip) => (
+        <div
+          key={chip.key}
+          className="d-flex align-items-center flex-wrap   px-2 py-1 "
+          style={{ fontSize: "0.9rem", maxWidth: "100%" }}
+        >
+          {/* Chip Label */}
+          <span className="fw-semibold me-2">{chip.label}:</span>
+
+          {/* Chip Items */}
+          <div className="d-flex flex-wrap align-items-center gap-1">
+            {chip.items.map((item) => (
+              <span
+                key={item.id}
+                className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
+              >
+                <span>{item.name}</span>
+                <button
+                  type="button"
+                  className="btn-close btn-close-white btn-sm ms-2"
+                  style={{
+                    filter: "invert(1) grayscale(1)",
+                    opacity: 0.7,
+                    fontSize: "0.6rem",
+                  }}
+                  onClick={() => removeFilterChip(chip.key, item.id)}
+                />
+              </span>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</div>
+
+
+
+    );
+};
+
+export default ExpenseFilterChips;
+
+

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -13,9 +13,11 @@ import { useSelector } from "react-redux";
 import moment from "moment";
 import { useExpenseFilter } from "../../hooks/useExpense";
 import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 
-const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
+const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
+  const { status } = useParams();
+  const navigate = useNavigate();
   const selectedProjectId = useSelector(
     (store) => store.localVariables.projectId
   );
@@ -29,17 +31,31 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       { id: "submittedBy", name: "Submitted By" },
       { id: "project", name: "Project" },
       { id: "paymentMode", name: "Payment Mode" },
-      { id: "expensesType", name: "Expense Type" },
+      { id: "expensesType", name: "Expense Category" },
       { id: "createdAt", name: "Submitted Date" },
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
-  const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
+  const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
   const [resetKey, setResetKey] = useState(0);
 
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...defaultFilter,
+      statusIds: status ? [status] : defaultFilter.statusIds || [],
+      projectIds: selectedProjectId ? [selectedProjectId] : [],
+      createdByIds: defaultFilter.createdByIds || [],
+      paidById: defaultFilter.paidById || [],
+      ExpenseTypeIds: defaultFilter.ExpenseTypeIds || [],
+      isTransactionDate: defaultFilter.isTransactionDate ?? true,
+      startDate: defaultFilter.startDate,
+      endDate: defaultFilter.endDate,
+    };
+  }, [status, selectedProjectId]);
+
   const methods = useForm({
     resolver: zodResolver(SearchSchema),
-    defaultValues: defaultFilter,
+    defaultValues: dynamicDefaultFilter,
   });
 
   const { control, handleSubmit, reset, setValue, watch } = methods;
@@ -49,11 +65,30 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
   };
 
+  // Change here
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
+
   const handleGroupChange = (e) => {
     const group = groupByList.find((g) => g.id === e.target.value);
     if (group) setSelectedGroup(group);
   };
 
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+      }
+    },
+    getValues: methods.getValues, // optional, to read current filter state
+  }));
+
   const onSubmit = (formData) => {
     onApply({
       ...formData,
@@ -71,17 +106,54 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     onApply(defaultFilter);
     handleGroupBy(groupByList[0].id);
     closePanel();
+    if (status) {
+      navigate("/expenses", { replace: true });
+    }
   };
 
-  //  Close popup when navigating to another component
   const location = useLocation();
   useEffect(() => {
     closePanel();
   }, [location]);
 
+  const [appliedStatusId, setAppliedStatusId] = useState(null);
+
+  useEffect(() => {
+    if (!status || !data) return;
+
+    if (status !== appliedStatusId) {
+      const filterWithStatus = {
+        ...dynamicDefaultFilter,
+        projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
+        startDate: dynamicDefaultFilter.startDate
+          ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
+          : undefined,
+        endDate: dynamicDefaultFilter.endDate
+          ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
+          : undefined,
+      };
+
+      onApply(filterWithStatus);
+      handleGroupBy(selectedGroup.id);
+      setAppliedStatusId(status);
+    }
+  }, [
+    status,
+    data,
+    dynamicDefaultFilter,
+    onApply,
+    handleGroupBy,
+    selectedGroup.id,
+    appliedStatusId,
+    selectedProjectId, // ✅ Added dependency
+  ]);
+
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if (isError && isFetched)
     return <div>Something went wrong Here- {error.message} </div>;
+
+
+
   return (
     <>
       <FormProvider {...methods}>
@@ -92,8 +164,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                    isTransactionDate ? "active btn-primary text-white" : ""
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
                     }`}
                   onClick={() => setValue("isTransactionDate", true)}
                 >
@@ -101,8 +172,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
                 </button>
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                    !isTransactionDate ? "active btn-primary text-white" : ""
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
                     }`}
                   onClick={() => setValue("isTransactionDate", false)}
                 >
@@ -117,6 +187,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
+              maxDate={new Date()}
             />
           </div>
 
@@ -142,6 +213,13 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               labelKey={(item) => item.name}
               valueKey="id"
             />
+            <SelectMultiple
+              name="ExpenseTypeIds"
+              label="Category :"
+              options={data.expensesType}
+              labelKey={(item) => item.name}
+              valueKey="id"
+            />
 
             <div className="mb-3">
               <label className="form-label">Status :</label>
@@ -213,6 +291,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       </FormProvider>
     </>
   );
-};
+});
 
 export default ExpenseFilterPanel;

src/components/Expenses/ExpenseList.jsx

@@ -10,20 +10,29 @@ import {
   EXPENSE_REJECTEDBY,
   ITEMS_PER_PAGE,
 } from "../../utils/constants";
-import { getColorNameFromHex, useDebounce } from "../../utils/appUtils";
+import {
+  formatCurrency,
+  getColorNameFromHex,
+  useDebounce,
+} from "../../utils/appUtils";
 import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
+import ExpenseFilterChips from "./ExpenseFilterChips";
+import { defaultFilter } from "./ExpenseSchema";
+import { useNavigate } from "react-router-dom";
 
 const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const { setViewExpense, setManageExpenseModal } = useExpenseContext();
+  const { setViewExpense, setManageExpenseModal, filterData, removeFilterChip } = useExpenseContext();
   const IsExpenseEditable = useHasUserPermission();
   const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(searchText, 500);
+  const navigate = useNavigate();
+
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
   const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
@@ -59,40 +68,60 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const groupByField = (items, field) => {
     return items.reduce((acc, item) => {
       let key;
+      let displayField;
+
       switch (field) {
         case "transactionDate":
-          key = item.transactionDate?.split("T")[0];
+          key = item?.transactionDate?.split("T")[0];
+          displayField = "Transaction Date";
           break;
         case "status":
-          key = item.status?.displayName || "Unknown";
+          key = item?.status?.displayName || "Unknown";
+          displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
+          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
             }`.trim();
+          displayField = "Submitted By";
           break;
         case "project":
-          key = item.project?.name || "Unknown Project";
+          key = item?.project?.name || "Unknown Project";
+          displayField = "Project";
           break;
         case "paymentMode":
-          key = item.paymentMode?.name || "Unknown Mode";
+          key = item?.paymentMode?.name || "Unknown Mode";
+          displayField = "Payment Mode";
           break;
         case "expensesType":
-          key = item.expensesType?.name || "Unknown Type";
+          key = item?.expensesType?.name || "Unknown Type";
+          displayField = "Expense Category";
           break;
         case "createdAt":
-          key = item.createdAt?.split("T")[0] || "Unknown Type";
+          key = item?.createdAt?.split("T")[0] || "Unknown Date";
+          displayField = "Created Date";
           break;
         default:
           key = "Others";
+          displayField = "Others";
       }
-      if (!acc[key]) acc[key] = [];
-      acc[key].push(item);
+
+      const groupKey = `${field}_${key}`; // unique key for object property
+      if (!acc[groupKey]) {
+        acc[groupKey] = { key, displayField, items: [] };
+      }
+
+      acc[groupKey].items.push(item);
       return acc;
     }, {});
   };
 
   const expenseColumns = [
+    {
+      key: "expenseUId",
+      label: "Expense Id",
+      getValue: (e) => e.expenseUId || "N/A",
+      align: "text-start mx-2",
+    },
     {
       key: "expensesType",
       label: "Expense Type",
@@ -110,11 +139,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
-        <div className="d-flex align-items-center">
+        <div className="d-flex align-items-center cursor-pointer"
+          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
           <Avatar
             size="xs"
             classAvatar="m-0"
@@ -122,8 +151,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
               }`.trim() || "N/A"}
           </span>
         </div>
@@ -138,11 +166,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     {
       key: "amount",
       label: "Amount",
-      getValue: (e) => (
-        <>
-          <i className="bx bx-rupee b-xs"></i> {e?.amount}
-        </>
-      ),
+      getValue: (e) => <>{formatCurrency(e?.amount)}</>,
       isAlwaysVisible: true,
       align: "text-end",
     },
@@ -152,8 +176,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.status?.color) || "secondary"
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
             }`}
         >
           {e.status?.name || "Unknown"}
@@ -162,27 +185,32 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     },
   ];
 
-  if (isInitialLoading) return <ExpenseTableSkeleton />;
-  if (isError) return <div>{error.message}</div>;
+  if (isInitialLoading && !data) return <ExpenseTableSkeleton />;
+  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 = [
+    { key: "transactionDate", displayField: "Transaction Date" },
+    { key: "createdAt", displayField: "created Date" },
+  ]?.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
     );
   };
 
+
   return (
     <>
       {IsDeleteModalOpen && (
@@ -198,11 +226,21 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         />
       )}
 
-      <div className="card px-0 px-sm-4">
+      <div className="card page-min-h px-sm-4">
+        {/* Filter Chips */}
+        <ExpenseFilterChips
+          filters={filters}
+          filterData={filterData}
+          removeFilterChip={removeFilterChip}
+          groupBy={groupBy}
+        />
         <div
           className="card-datatable table-responsive "
           id="horizontal-example"
         >
+
+
+
           <div className="dataTables_wrapper no-footer px-2 ">
             <table className="table border-top dataTable text-nowrap">
               <thead>
@@ -226,18 +264,24 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
               </thead>
               <tbody>
                 {Object.keys(grouped).length > 0 ? (
-                  Object.entries(grouped).map(([group, expenses]) => (
-                    <React.Fragment key={group}>
+                  Object.values(grouped).map(({ key, displayField, items }) => (
+                    <React.Fragment key={key}>
                       <tr className="tr-group text-dark">
                         <td colSpan={8} className="text-start">
-                          <strong>
+                          <div className="d-flex align-items-center">
+                            {" "}
+                            <small className="fs-6 py-1">
+                              {displayField} :{" "}
+                            </small>{" "}
+                            <small className="fs-6  ms-3">
                               {IsGroupedByDate
-                              ? formatUTCToLocalTime(group)
-                              : group}
-                          </strong>
+                                ? formatUTCToLocalTime(key)
+                                : key}
+                            </small>
+                          </div>
                         </td>
                       </tr>
-                      {expenses.map((expense) => (
+                      {items?.map((expense) => (
                         <tr key={expense.id}>
                           {expenseColumns.map(
                             (col) =>
@@ -263,26 +307,60 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                   })
                                 }
                               ></i>
-                              {canEditExpense(expense) && (
+                              {canDetetExpense(expense) &&
+                                canEditExpense(expense) && (
+                                  <div className="dropdown z-2">
+                                    <button
+                                      type="button"
+                                      className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                                      data-bs-toggle="dropdown"
+                                      aria-expanded="false"
+                                    >
                                       <i
-                                  className="bx bx-edit text-secondary cursor-pointer"
+                                        className="bx bx-dots-vertical-rounded text-muted p-0"
+                                        data-bs-toggle="tooltip"
+                                        data-bs-offset="0,8"
+                                        data-bs-placement="top"
+                                        data-bs-custom-class="tooltip-dark"
+                                        title="More Action"
+                                      ></i>
+                                    </button>
+                                    <ul className="dropdown-menu dropdown-menu-end w-auto">
+                                      {canDetetExpense(expense) && (
+                                        <li
                                           onClick={() =>
                                             setManageExpenseModal({
                                               IsOpen: true,
                                               expenseId: expense.id,
                                             })
                                           }
-                                ></i>
+                                        >
+                                          <a className="dropdown-item px-2 cursor-pointer py-1">
+                                            <i className="bx bx-edit text-primary  bx-xs me-2"></i>
+                                            <span className="align-left ">
+                                              Modify
+                                            </span>
+                                          </a>
+                                        </li>
                                       )}
 
                                       {canDetetExpense(expense) && (
-                                <i
-                                  className="bx bx-trash text-danger cursor-pointer"
+                                        <li
                                           onClick={() => {
                                             setIsDeleteModalOpen(true);
                                             setDeletingId(expense.id);
                                           }}
-                                ></i>
+                                        >
+                                          <a className="dropdown-item  px-2 cursor-pointer py-1">
+                                            <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                                            <span className="align-left">
+                                              Delete
+                                            </span>
+                                          </a>
+                                        </li>
+                                      )}
+                                    </ul>
+                                  </div>
                                 )}
                             </div>
                           </td>
@@ -292,13 +370,17 @@ 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>
                 )}
               </tbody>
             </table>
+          </div>
+        </div>
             {data?.data?.length > 0 && (
               <Pagination
                 currentPage={currentPage}
@@ -307,8 +389,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
               />
             )}
       </div>
-        </div>
-      </div>
     </>
   );
 };

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) => {
@@ -69,8 +65,13 @@ export const ExpenseSchema = (expenseTypes) => {
       }
     )
     .superRefine((data, ctx) => {
-      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
-      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
+      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,13 +154,12 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
   reimburseById: null,
 };
 
-
-
 export const SearchSchema = z.object({
   projectIds: z.array(z.string()).optional(),
   statusIds: z.array(z.string()).optional(),
   createdByIds: z.array(z.string()).optional(),
   paidById: z.array(z.string()).optional(),
+  ExpenseTypeIds: z.array(z.string()).optional(),
   startDate: z.string().optional(),
   endDate: z.string().optional(),
   isTransactionDate: z.boolean().default(true),
@@ -159,8 +170,8 @@ export const defaultFilter = {
   statusIds: [],
   createdByIds: [],
   paidById: [],
+  ExpenseTypeIds: [],
   isTransactionDate: true,
   startDate: null,
   endDate: null,
 };
-

src/components/Expenses/ManageExpense.jsx

@@ -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 {
@@ -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,16 @@ 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}
+              forAll={expenseToEdit ? true :false}
+            />
           </div>
         </div>
 
@@ -330,7 +340,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="transactionDate" className="form-label" required>
               Transaction Date
             </Label>
-            <DatePicker name="transactionDate" control={control} maxDate={new Date()}/>
+            <DatePicker
+              name="transactionDate"
+              control={control}
+              maxDate={new Date()}
+            />
 
             {errors.transactionDate && (
               <small className="danger-text">
@@ -421,9 +435,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 +460,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 +479,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
 
         <div className="row my-2 text-start">
           <div className="col-md-12">
-            <Label className="form-label" required>Upload Bill </Label>
+            <Label className="form-label" required>
+              Upload Bill{" "}
+            </Label>
 
             <div
               className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
@@ -568,7 +584,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,
     };
@@ -108,14 +106,12 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-3">
-        <div className="col-12 mb-3">
-          <h5 className="fw-semibold">Expense Details</h5>
+      <div className="row mb-1">
+        <div className="col-12 mb-1">
+          <h5 className="fw-semibold m-0">Expense Details</h5>
           <hr />
         </div>
-        <div className="text-start mb-2">
-          <div className="text-muted">{data?.description}</div>
-        </div>
+         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
         {/* Row 1 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
@@ -279,7 +275,7 @@ const ViewExpense = ({ ExpenseId }) => {
               className="form-label me-2 mb-0 fw-semibold"
               style={{ minWidth: "130px" }}
             >
-              Paid By:
+              Paid By :
             </label>
             <div className="d-flex align-items-center ">
               <Avatar
@@ -296,6 +292,11 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         </div>
+        
+          <div className="text-start my-1">
+            <label className="fw-semibold form-label">Description : </label>
+          <div className="text-muted">{data?.description}</div>
+        </div>
       </div>
 
       <div className="col-12 text-start">
@@ -397,7 +398,8 @@ const ViewExpense = ({ ExpenseId }) => {
                 <DatePicker
                   name="reimburseDate"
                   control={control}
-                  minDate={data?.transactionDate}
+                  minDate={data?.createdAt}
+                  maxDate={new Date()}
                 />
                 {errors.reimburseDate && (
                   <small className="danger-text">

src/components/Layout/Header.jsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState, useMemo } from "react";
 import getGreetingMessage from "../../utils/greetingHandler";
 import {
   cacheData,
@@ -14,121 +15,104 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import { useChangePassword } from "../Context/ChangePasswordContext";
 import { useProjects } from "../../hooks/useProjects";
-import { useCallback, useEffect, useState } from "react";
 import { useProjectName } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { MANAGE_PROJECT } from "../../utils/constants";
+import { ALLOW_PROJECTSTATUS_ID, MANAGE_PROJECT, UUID_REGEX } from "../../utils/constants";
 import { useAuthModal, useLogout } from "../../hooks/useAuth";
 
 const Header = () => {
   const { profile } = useProfile();
+  const { data: masterData } = useMaster();
   const location = useLocation();
   const dispatch = useDispatch();
-  const { data, loading } = useMaster();
   const navigate = useNavigate();
-  const {onOpen} = useAuthModal()
+
+  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 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 isDashboardPath = pathname === "/" || pathname === "/dashboard";
+  const isProjectPath = pathname === "/projects";
+  const isDirectory = pathname === "/directory";
+  const isEmployeeList = pathname === "/employees";
+  const isEmployeeProfile = UUID_REGEX.test(pathname);
+  const isMasters = pathname === "/masters";
+  const isExpensePath = pathname.startsWith("/expenses");
 
-    return !(isDirectoryPath || isProfilePage || isExpensePage);
-  };
-  const allowedProjectStatusIds = [
-    "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-    "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-    "b74da4c2-d07e-46f2-9919-e75e49b12731",
-  ];
+  const hideDropPaths =
+    isDirectory || isEmployeeList || isMasters || isEmployeeProfile || isExpensePath;
 
-  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
+  const projectsForDropdown = useMemo(
+    () =>
+      isDashboardPath
         ? projectNames
         : projectNames?.filter((project) =>
-        allowedProjectStatusIds.includes(project.projectStatusId)
+          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 +122,15 @@ const Header = () => {
 
   const newProjectHandler = useCallback(
     async (msg) => {
-      if (HasManageProjectPermission && msg.keyword === "Create_Project") {
+      if (
+        msg.keyword === "Create_Project" ||
+        projectNames?.some((p) => p.id === msg.response?.id)
+      ) {
         await fetchData();
-      } else if (projectNames?.some((item) => item.id === msg.response.id)) {
-        await fetchData();
-      }
         cacheData("hasReceived", false);
+      }
     },
-    [HasManageProjectPermission, projectNames, fetchData]
+    [projectNames, fetchData]
   );
 
   useEffect(() => {
@@ -162,10 +147,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 +174,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 +200,14 @@ const Header = () => {
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                    {isDashboardPath && (
+
                     <li>
                       <button
                         className="dropdown-item"
                         onClick={() => handleProjectChange(null)}
-                        >
-                          All Projects
-                        </button>
+                      >All Project</button>
                     </li>
-                    )}
+
                     {[...projectsForDropdown]
                       .sort((a, b) => a?.name?.localeCompare(b.name))
                       .map((project) => (
@@ -249,112 +232,9 @@ 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"
-            >
-              <i className="icon-base bx bx-grid-alt icon-md"></i>
-            </a>
-            <div className="dropdown-menu dropdown-menu-end p-0">
-              <div className="dropdown-menu-header border-bottom">
-                <div className="dropdown-header d-flex align-items-center py-3">
-                  <h6 className="mb-0 me-auto">Shortcuts</h6>
-                  <a
-                    className="dropdown-shortcuts-add py-2 cusror-pointer"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    aria-label="Add shortcuts"
-                    data-bs-original-title="Add shortcuts"
-                  >
-                    <i className="icon-base bx bx-plus-circle text-heading"></i>
-                  </a>
-                </div>
-              </div>
-              <div className="dropdown-shortcuts-list scrollable-container ps">
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/dashboard`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-home icon-26px text-heading"></i>
-                      </span>
-                      Dashboard
-                    </a>
-                    <small>User Dashboard</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/projects`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
-                      </span>
-                      Projects
-                    </a>
-                    <small>Projects List</small>
-                  </div>
-                </div>
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/employees`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
-                      </span>
-                      Employees
-                    </a>
-                    <small>Manage Employees</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/attendance`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
-                      </span>
-                      Attendance
-                    </a>
-                    <small>Manage Attendance</small>
-                  </div>
-                </div>
-                <div className="row row-bordered overflow-visible g-0">
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/task`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
-                      </span>
-                      Allocate Work
-                    </a>
-                    <small>Work Allocations</small>
-                  </div>
-                  <div className="dropdown-shortcuts-item col">
-                    <a
-                      onClick={() => navigate(`/activities/records`)}
-                      className="text-heading text-truncate cursor-pointer"
-                    >
-                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                        <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
-                      </span>
-                      Daily Work Log
-                    </a>
-                    <small>Daily Work Allocations</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
+          {/* {HasManageProjectPermission && ( */}
+
+          {/* )} */}
           <li className="nav-item navbar-dropdown dropdown-user dropdown">
             <a
               aria-label="dropdown profile avatar"
@@ -386,7 +266,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 +275,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 +311,6 @@ const Header = () => {
                 </a>
               </li>
 
-             
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -441,10 +318,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>

src/components/Project/AboutProject.jsx

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

src/components/Project/ManageProjectInfo.jsx

@@ -5,7 +5,11 @@ 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,
+  useUpdateProject,
+} from "../../hooks/useProjects";
 
 import {
   DEFAULT_EMPTY_STATUS_ID,
@@ -17,6 +21,8 @@ import {
   useOrganizationsList,
 } from "../../hooks/useOrganization";
 import { localToUtc } from "../../utils/appUtils";
+import Modal from "../common/Modal";
+import { useModal } from "../../hooks/useAuth";
 
 const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
@@ -32,18 +38,24 @@ const formatDate = (date) => {
 const ManageProjectInfo = ({ project, onClose }) => {
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
-  const { onOpen, startStep, flowType } = useOrganizationModal();
+  const { onOpen, startStep, flowType } = useModal("ManageProject");
 
   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{
+    } 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

@@ -35,6 +35,7 @@ const ProjectCard = ({ project }) => {
 
   const handleViewProject = () => {
     dispatch(setProjectId(project.id));
+    localStorage.setItem("lastActiveProjectTab","profile")
     navigate(`/projects/details`);
   };
   const handleViewActivities = () => {
@@ -54,7 +55,7 @@ const ProjectCard = ({ project }) => {
                     style={{ fontSize: "xx-large" }}
                   ></i>
                 </div>
-                <div className="me-2">
+                <div className="me-2 text-start">
                   <h5
                     className="mb-0 stretched-link text-heading text-start"
                     onClick={handleViewProject}
@@ -66,7 +67,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 +107,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,28 +1,20 @@
-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 && (
+      {currentItems.length === 0 && (
         <p className="text-center text-muted">No projects found.</p>
       )}
 
       {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-              />
+        <ProjectCard key={project.id} project={project} />
       ))}
 
-
-             {  totalPages > 1 && (
+      {totalPages > 1 && (
         <nav>
           <ul className="pagination pagination-sm justify-content-end py-2">
             <li className={`page-item ${currentPage === 1 && "disabled"}`}>
@@ -47,7 +39,8 @@ const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
               </li>
             ))}
             <li
-                className={`page-item ${currentPage === totalPages && "disabled"
+              className={`page-item ${
+                currentPage === totalPages && "disabled"
               }`}
             >
               <button
@@ -63,8 +56,7 @@ const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
         </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,13 +124,19 @@ 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));
+    localStorage.setItem("lastActiveProjectTab", "profile")
+    navigate("/projects/details");
+  };
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
+      <div className="table-responsive text-nowrap">
         <table className="table  table-hover align-middle m-0">
           <thead className="border-bottom">
             <tr>
@@ -158,11 +163,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 +181,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 +205,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>
@@ -257,8 +258,7 @@ const ProjectListView = ({
                 </li>
               ))}
               <li
-              className={`page-item ${
-                currentPage === totalPages && "disabled"
+                className={`page-item ${currentPage === totalPages && "disabled"
                   }`}
               >
                 <button
@@ -274,6 +274,7 @@ const ProjectListView = ({
           </nav>
         )}
       </div>
+    </div>
   );
 };
 

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { useController, useFormContext, useWatch } from "react-hook-form";
+import { useSelector } from "react-redux";
+
 const DateRangePicker = ({
   md,
   sm,
@@ -9,17 +11,27 @@ const DateRangePicker = ({
 }) => {
   const inputRef = useRef(null);
 
+  const persistedRange = useSelector(
+    (store) => store.localVariables.attendance.defaultDateRange
+  );
+
   useEffect(() => {
-    const endDate = new Date();
+    let startDate, endDate;
+
+    if (persistedRange?.startDate && persistedRange?.endDate) {
+      startDate = new Date(persistedRange.startDate);
+      endDate = new Date(persistedRange.endDate);
+    } else {
+      endDate = new Date();
       if (endDateMode === "yesterday") {
         endDate.setDate(endDate.getDate() - 1);
       }
-
       endDate.setHours(0, 0, 0, 0);
 
-    const startDate = new Date(endDate);
+      startDate = new Date(endDate);
       startDate.setDate(endDate.getDate() - (DateDifference - 1));
       startDate.setHours(0, 0, 0, 0);
+    }
 
     const fp = flatpickr(inputRef.current, {
       mode: "range",
@@ -41,31 +53,29 @@ const DateRangePicker = ({
       endDate: endDate.toLocaleDateString("en-CA"),
     });
 
-    return () => {
-      fp.destroy();
-    };
-  }, [onRangeChange, DateDifference, endDateMode]);
+    return () => fp.destroy();
+  }, [onRangeChange, DateDifference, endDateMode, persistedRange]);
 
   const handleIconClick = () => {
-    if (inputRef.current) {
-      inputRef.current._flatpickr.open(); // directly opens flatpickr
+    if (inputRef.current?._flatpickr) {
+      inputRef.current._flatpickr.open();
     }
   };
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1`}>
+    <div className={`position-relative w-auto justify-content-center`}>
       <input
         type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4"
+        className="form-control form-control-sm w-100 pe-8 "
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
       />
 
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y " onClick={handleIconClick}
-        style={{ right: "22px", bottom: "-8px" }}
-      ></i>
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
+        onClick={handleIconClick}
+      />
     </div>
   );
 };
@@ -76,6 +86,7 @@ export default DateRangePicker;
 
 
 
+
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -118,7 +129,7 @@ export const DateRangePicker1 = ({
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
@@ -160,7 +171,7 @@ export const DateRangePicker1 = ({
         }
       }
     }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
 
 
   const start = getValues(startField);
@@ -171,7 +182,7 @@ export const DateRangePicker1 = ({
     <div className={`position-relative ${className}`}>
       <input
         type="text"
-        className="form-control form-control-sm"
+        className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
         placeholder={placeholder}
         defaultValue={formattedValue}
         ref={(el) => {

src/components/common/EmployeeSearchInput.jsx

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

src/components/common/SelectMultiple.jsx

@@ -4,6 +4,9 @@ import { createPortal } from "react-dom";
 import "./MultiSelectDropdown.css";
 import Label from "./Label";
 
+
+
+
 const SelectMultiple = ({
   name,
   options = [],
@@ -11,14 +14,16 @@ const SelectMultiple = ({
   labelKey = "name",
   valueKey = "id",
   placeholder = "Please select...",
-  IsLoading = false,required = false
+  IsLoading = false,
+  required = false,
 }) => {
-  const { setValue, watch,register } = useFormContext();
+  const { setValue, watch, register } = useFormContext();
+
   useEffect(() => {
     register(name, { value: [] });
-}, [register, name]);
+  }, [register, name]);
 
-const selectedValues = watch(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())
-  );
-});
+    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,6 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
       );
       return response.data;
     },
-    enabled: !!projectId, // only run if projectId exists
     onError: (error) => {
       showToast(error.message || "Error while fetching Attendance", "error");
     },
@@ -72,7 +42,6 @@ export const useAttendance = (projectId, organizationId, includeInactive = false
 
 export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) => {
   const dispatch = useDispatch();
-  const enabled = !!projectId && !!fromDate && !!toDate;
 
   const query = useQuery({
     queryKey: ['attendanceLogs', projectId, fromDate, toDate,organizationId],
@@ -85,7 +54,6 @@ export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) =
       );
       return res.data;
     },
-    enabled,
   });
   
   useEffect(() => {
@@ -142,31 +110,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();
@@ -178,7 +121,7 @@ export const useRegularizationRequests = (projectId, organizationId, IncludeInAc
     refetch: recall,
     isFetching,
   } = useQuery({
-    queryKey: ["regularizedList", projectId, organizationId, IncludeInActive], // include filters in cache key
+    queryKey: ["regularizedList", projectId, organizationId, IncludeInActive], 
     queryFn: async () => {
       const response = await AttendanceRepository.getRegularizeList(
         projectId,
@@ -187,7 +130,6 @@ export const useRegularizationRequests = (projectId, organizationId, IncludeInAc
       );
       return response.data;
     },
-    enabled: !!projectId, // only run if projectId exists
     onError: (error) => {
       showToast(error.message || "Error while fetching regularizes", "error");
     },
@@ -218,10 +160,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/useAuth.jsx

@@ -14,6 +14,23 @@ import {
 } from "../slices/localVariablesSlice.jsx";
 import { removeSession } from "../utils/authUtils.js";
 
+
+
+// ----------------------------Modal--------------------------
+
+export const useModal = (modalType) => {
+  const dispatch = useDispatch();
+  const isOpen = useSelector(
+    (state) => state.localVariables.modals[modalType]?.isOpen
+  );
+
+  const onOpen = (data = {}) => dispatch(openModal({ modalType, data }));
+  const onClose = () => dispatch(closeModal({ modalType }));
+  const onToggle = () => dispatch(toggleModal({ modalType }));
+
+  return { isOpen, onOpen, onClose, onToggle };
+};
+
 export const useTenants = () => {
   return useQuery({
     queryKey: ["tenantlist"],

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----------------------------
@@ -232,16 +232,17 @@ export const useDashboardTasksCardData = (projectId) => {
     }
   })
 }
-// export const useAttendanceOverviewData = (projectId, days) => {
-//    return useQuery({
-//     queryKey:["dashboardAttendanceOverView",projectId],
-//     queryFn:async()=> {
+export const useAttendanceOverviewData = (projectId, days) => {
+   return useQuery({
+    queryKey:["dashboardAttendanceOverView",projectId,days],
+    queryFn:async()=> {
      
-//      const resp =  await GlobalRepository.getAttendanceOverview(projectId, days);
-//      return resp.data;
-//     }
-//   })
-// }
+     const resp =  await GlobalRepository.getAttendanceOverview(projectId, days);
+     return resp.data;
+    },
+    enabled:!!projectId
+  })
+}
 
 export const useDashboardProjectsCardData = () => {
     return useQuery({
@@ -253,3 +254,43 @@ export const useDashboardProjectsCardData = () => {
     }
   })
 }
+
+export const useExpenseAnalysis = (projectId, startDate, endDate) => {
+   const hasBothDates = !!startDate && !!endDate;
+  const noDatesSelected = !startDate && !endDate;
+
+  const shouldFetch =
+    noDatesSelected ||
+    hasBothDates;
+  return useQuery({
+    queryKey: ["expenseAnalysis", projectId, startDate, endDate],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate);
+      return resp.data; 
+    },
+    enabled:shouldFetch,       
+    refetchOnWindowFocus: true,   // refetch when you come back
+    refetchOnMount: "always",     // always refetch on remount
+    staleTime: 0,   
+  });
+};
+export const useExpenseStatus = (projectId)=>{
+  return useQuery({
+    queryKey:["expense_stauts",projectId],
+    queryFn: async()=>{
+      const resp = await GlobalRepository.getExpenseStatus(projectId);
+      return resp.data;
+    }
+  })
+}
+
+export const useExpenseDataByProject = (projectId, categoryId, months) => {  
+  return useQuery({
+    queryKey: ["expenseByProject", projectId, categoryId, months],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getExpenseDataByProject(projectId, categoryId, months);
+      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

@@ -15,10 +15,10 @@ export const useEmployee = (employeeId) => {
   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,
   });
 };
 
@@ -184,11 +184,11 @@ export const useEmployeeProfile = (employeeId) => {
   };
 };
 
-export const useEmployeesName = (projectId, search) => {
+export const useEmployeesName = (projectId, search,forAll) => {
   return useQuery({
-    queryKey: ["employees", projectId, search],
+    queryKey: ["employees", projectId, search,forAll],
     queryFn: async () =>
-      await EmployeeRepository.getEmployeeName(projectId, search),
+      await EmployeeRepository.getEmployeeName(projectId, search,forAll),
 
     staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
   });
@@ -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,

src/hooks/useExpense.js

@@ -10,7 +10,7 @@ import moment from "moment";
 const cleanFilter = (filter) => {
   const cleaned = { ...filter };
 
-  ["projectIds", "statusIds", "createdByIds", "paidById"].forEach((key) => {
+  ["projectIds", "statusIds", "createdByIds", "paidById","ExpenseTypeIds"].forEach((key) => {
     if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
       delete cleaned[key];
     }

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 {
+  // 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

@@ -12,12 +12,26 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
+
+
 import showToast from "../services/toastService";
 
 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

@@ -71,6 +71,7 @@ const AttendancePage = () => {
 
   const handleModalData = (employee) => {
       setModelConfig(employee);
+  if (employee !== null) setIsCreateModalOpen(true);
   };
 
   const closeModal = () => {
@@ -78,11 +79,7 @@ const AttendancePage = () => {
     setIsCreateModalOpen(false);
   };
 
-  useEffect(() => {
-    if (modelConfig !== null) {
-      openModel();
-    }
-  }, [modelConfig, isCreateModalOpen]);
+
 
   // Handler to change tab and reset search term
   const handleTabChange = (tabName) => {
@@ -127,7 +124,7 @@ const AttendancePage = () => {
         <div className="nav-align-top nav-tabs-shadow ">
           {/* Tabs */}
           <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
-            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
+            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-2 mx-sm-5">
               {/* Tabs */}
               <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">
@@ -174,7 +171,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 +189,7 @@ const AttendancePage = () => {
                       {org.name}
                     </option>
                   ))}
-                </select>
+                </select> */}
 
                 {/* Search Input */}
                 <input
@@ -210,7 +207,7 @@ const AttendancePage = () => {
           </div>
 
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
-            {selectedProject ? (
+
             <>
               {activeTab === "all" && (
                 <div className="tab-pane fade show active py-0 mx-5">
@@ -240,11 +237,6 @@ const AttendancePage = () => {
                 </div>
               )}
             </>
-            ) : (
-              <div className="py-2">
-                <small>Please Select Project!</small>
-              </div>
-            )}
           </div>
         </div>
       </div>

src/pages/Directory/ContactFilterPanel.jsx

@@ -1,5 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, {
+  useEffect,
+  useImperativeHandle,
+  forwardRef,
+  useMemo,
+} from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   contactsFilter,
@@ -8,51 +13,88 @@ import {
 import { useContactFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useParams } from "react-router-dom";
 
-const ContactFilterPanel = ({ onApply, clearFilter }) => {
+const ContactFilterPanel = forwardRef(
+  ({ onApply, clearFilter, setFilterdata }, ref) => {
     const { data, isError, isLoading, error, isFetched, isFetching } =
       useContactFilter();
+    const { status } = useParams();
+
+    useEffect(() => {
+      return () => {
+        closePanel();
+      };
+    }, []);
+
+    const dynamicdefaultContactFilter = useMemo(() => {
+      return {
+        ...defaultContactFilter,
+        bucketIds: defaultContactFilter.bucketIds || [],
+        categoryIds: defaultContactFilter.categoryIds || [],
+      };
+    }, [status]);
 
     const methods = useForm({
       resolver: zodResolver(contactsFilter),
-    defaultValues: defaultContactFilter,
+      defaultValues: dynamicdefaultContactFilter,
     });
 
+    const { handleSubmit, reset, setValue, getValues } = methods;
+
+    useImperativeHandle(ref, () => ({
+      resetFieldValue: (name, value) => {
+        setTimeout(() => {
+          if (value !== undefined) {
+            setValue(name, value);
+          } else {
+            reset({ ...getValues(), [name]: defaultContactFilter[name] });
+          }
+        }, 0);
+      },
+      getValues,
+    }));
+
+    useEffect(() => {
+      if (data && setFilterdata) {
+        setFilterdata(data);
+      }
+    }, [data, setFilterdata]);
+
     const closePanel = () => {
       document.querySelector(".offcanvas.show .btn-close")?.click();
     };
 
-  const { register, handleSubmit, reset, watch } = methods;
-
     const onSubmit = (formData) => {
       onApply(formData);
-    closePanel();
+      // closePanel();
     };
 
     const handleClose = () => {
       reset(defaultContactFilter);
       onApply(defaultContactFilter);
-    closePanel();
+      // closePanel();
     };
 
     if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
     if (isError && isFetched)
-    return <div>Something went wrong Here- {error.message} </div>;
+      return <div>Something went wrong — {error?.message}</div>;
+
     return (
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
           <div className="row g-2">
             <SelectMultiple
               name="bucketIds"
-            label="Buckets :"
-            options={data.buckets}
+              label="Buckets:"
+              options={data?.buckets || []}
               labelKey="name"
               valueKey="id"
             />
             <SelectMultiple
               name="categoryIds"
-            label="Contact Category :"
-            options={data.contactCategories}
+              label="Contact Category:"
+              options={data?.contactCategories || []}
               labelKey={(item) => item.name}
               valueKey="id"
             />
@@ -60,18 +102,19 @@ const ContactFilterPanel = ({ 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>
         </form>
       </FormProvider>
     );
-};
+  }
+);
 
 export default ContactFilterPanel;

src/pages/Directory/ContactsPage.jsx

@@ -1,26 +1,30 @@
-import React, { useEffect, useState } from "react";
+
+import React, { useEffect, useRef, useState } from "react";
 import { useFab } from "../../Context/FabContext";
 import { useContactList } from "../../hooks/useDirectory";
 import { useDirectoryContext } from "./DirectoryPage";
 import CardViewContact from "../../components/Directory/CardViewContact";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ContactFilterPanel from "./ContactFilterPanel";
+import ContactFilterChips from "../../components/Directory/ContactFilterChips";
 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 Loader from "../../components/common/Loader";
 
-// Utility function to format contacts for CSV export
+// Utility 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(", ") || "",
   }));
 };
@@ -28,8 +32,10 @@ const formatExportData = (contacts) => {
 const ContactsPage = ({ projectId, searchText, onExport }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilter] = useState(defaultContactFilter);
+  const [filterData, setFilterdata] = useState(null);
   const debouncedSearch = useDebounce(searchText, 500);
   const { showActive, gridView } = useDirectoryContext();
+  const updatedRef = useRef();
   const { data, isError, isLoading, error } = useContactList(
     showActive,
     projectId,
@@ -40,13 +46,19 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
   );
   const { setOffcanvasContent, setShowTrigger } = useFab();
 
+  // clear filters
   const clearFilter = () => setFilter(defaultContactFilter);
 
   useEffect(() => {
     setShowTrigger(true);
     setOffcanvasContent(
       "Contacts Filters",
-      <ContactFilterPanel onApply={setFilter} clearFilter={clearFilter} />
+      <ContactFilterPanel
+        ref={updatedRef}
+        onApply={setFilter}
+        clearFilter={clearFilter}
+        setFilterdata={setFilterdata}
+      />
     );
 
     return () => {
@@ -55,7 +67,7 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
     };
   }, []);
 
-  // 🔹 Format contacts for export
+  // export data
   useEffect(() => {
     if (data?.data && onExport) {
       onExport(formatExportData(data.data));
@@ -68,15 +80,54 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
     }
   };
 
+  const handleRemoveChip = (key, id) => {
+    setFilter((prev) => {
+      const updated = { ...prev };
+
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+        updatedRef.current?.resetFieldValue(key, updated[key]);
+      } else {
+        updated[key] = null;
+        updatedRef.current?.resetFieldValue(key, null);
+      }
+
+      return updated;
+    });
+  };
+
   if (isError) return <div>{error.message}</div>;
-  // if (isLoading) return gridView ? <CardViewContactSkeleton /> : <ListViewContactSkeleton />;
 
   return (
-    <div className="row mt-5">
+    <div className="row mt-4">
+      {/* Chips Section */}
+      <div className="col-12 mb-2">
+        <ContactFilterChips
+          filters={filters}
+          filterData={filterData}
+          removeFilterChip={handleRemoveChip}
+          clearFilter={clearFilter}
+        />
+      </div>
+
+      {/* Grid / List View */}
       {gridView ? (
         <>
+          {isLoading && <Loader />}
+
+          {data?.data?.length === 0 && (
+            <div className="py-4 text-center">
+              {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 +146,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

@@ -19,9 +19,15 @@ import BucketList from "../../components/Directory/BucketList";
 import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
 import ContactProfile from "../../components/Directory/ContactProfile";
 import GlobalModel from "../../components/common/GlobalModel";
-import { exportToCSV } from "../../utils/exportUtils";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import {
+  exportToCSV,
+  exportToExcel,
+  exportToPDF,
+  exportToPDF1,
+  printTable,
+} from "../../utils/tableExportUtils";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -44,7 +50,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,
@@ -64,11 +70,49 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [ContactData, setContactData] = useState([]);
 
   const handleExport = (type) => {
-    if (activeTab === "notes" && type === "csv") {
-      exportToCSV(notesData, "notes.csv");
+    let exportData = activeTab === "notes" ? notesData : ContactData;
+    if (!exportData?.length) return;
+
+    switch (type) {
+      case "csv":
+        exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts");
+        break;
+      case "excel":
+        exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts");
+        break;
+      case "pdf":
+        if (activeTab === "notes") {
+          exportToPDF1(exportData, "Notes");
+        } else {
+          // Columns for Contacts PDF
+          const columns = [
+            "Email",
+            "Phone",
+            "Organization",
+            "Category",
+            "Tags",
+          ];
+
+          // Sanitize and trim long text to avoid PDF overflow
+          const sanitizedData = exportData.map((item) => ({
+            Email: (item.Email || "").slice(0, 40),
+            Phone: (item.Phone || "").slice(0, 20),
+            Organization: (item.Organization || "").slice(0, 30),
+            Category: (item.Category || "").slice(0, 20),
+            Tags: (item.Tags || "").slice(0, 40),
+          }));
+
+          // Export with proper spacing
+          exportToPDF(sanitizedData, "Contacts", columns, {
+            columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
+            fontSizeHeader: 12,
+            fontSizeRow: 10,
+            rowHeight: 25,
+          });
         }
-    if (activeTab === "contacts" && type === "csv") {
-      exportToCSV(ContactData, "contact.csv");
+        break;
+      default:
+        console.warn("Unsupported export type");
     }
   };
 
@@ -133,7 +177,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">
@@ -160,7 +204,6 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                     </a>
                   </li>
                 </ul>
-              </div>
 
                 <div className="mb-1 px-2 py-3">
                   <div className="d-flex align-items-center justify-content-between">
@@ -185,70 +228,128 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                               value={searchContact}
                               onChange={(e) => setsearchContact(e.target.value)}
                             />
+                            <div className="d-none d-md-flex gap-2">
+                              {" "}
                               <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 ${
-                              gridView ? " btn-primary" : " btn-outline-primary"
+                                  gridView
+                                    ? " btn-primary"
+                                    : " btn-outline-primary"
                                 }`}
                                 onClick={() => setGridView(true)}
                               >
                                 <i className="bx bx-grid-alt"></i>
                               </button>
-                        </div>
-
-                        <div className="form-check form-switch d-flex align-items-center">
-                          <input
-                            type="checkbox"
-                            className="form-check-input"
-                            role="switch"
-                            id="inactiveEmployeesCheckbox"
-                            checked={showActive}
-                            onChange={(e) => setShowActive(e.target.checked)}
-                          />
-                          <label
-                            className="form-check-label ms-2"
-                            htmlFor="inactiveEmployeesCheckbox"
+                              <button
+                                className={`btn btn-sm p-1 ${
+                                  !gridView
+                                    ? "btn-primary"
+                                    : "btn-outline-primary"
+                                }`}
+                                onClick={() => setGridView(false)}
                               >
-                            {showActive ? "Active" : "Inactive"} Contacts
-                          </label>
+                                <i className="bx bx-list-ul"></i>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       )}
                     </div>
-
-                  <div className="btn-group">
+                    <div className="dropdown z-2">
                       <button
-                      className="btn btn-sm btn-label-secondary dropdown-toggle"
                         type="button"
+                        className="btn btn-icon p-0 m-0"
                         data-bs-toggle="dropdown"
                         aria-expanded="false"
+                        title="More Actions"
                       >
-                      <i className="bx bx-export me-2 bx-sm"></i>Export
+                        <i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
                       </button>
-                    <ul className="dropdown-menu">
+
+                      <ul className="dropdown-menu dropdown-menu-end shadow-sm ">
+                        {activeTab === "contacts" && (
+                          <li className="dropdown-item d-flex align-items-center">
+                            <div className="form-check form-switch mb-0">
+                              <input
+                                type="checkbox"
+                                className="form-check-input"
+                                role="switch"
+                                id="inactiveContactsSwitch"
+                                checked={showActive}
+                                onChange={(e) =>
+                                  setShowActive(e.target.checked)
+                                }
+                              />
+                            </div>
+                            <span>
+                              {showActive
+                                ? "Active Contacts"
+                                : "Inactive Contacts"}
+                            </span>
+                          </li>
+                        )}
                         <li>
-                        <a
-                          className="dropdown-item cursor-pointer"
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
                             onClick={() => handleExport("csv")}
                           >
-                          <i className="bx bx-file me-1"></i> CSV
-                        </a>
+                            <i className="bx bx-file"></i>
+                            <span>Export to CSV</span>
+                          </button>
                         </li>
+                        <li>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("excel")}
+                          >
+                            <i className="bx bx-spreadsheet"></i>
+                            <span>Export to Excel</span>
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("pdf")}
+                          >
+                            <i className="bx bxs-file-pdf"></i>
+                            <span>Export to PDF</span>
+                          </button>
+                        </li>
+                        <li className={`d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
+                          <span
+                            className={`dropdown-item  ${
+                              gridView ? " text-primary" : ""
+                            }`}
+                            onClick={() => setGridView(true)}
+                          >
+                            <i className="bx bx-grid-alt"></i> Card View
+                          </span>
+                        </li>
+
+                        <li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
+                          <span
+                            className={`dropdown-item  ${
+                              !gridView ? "text-primary" : ""
+                            }`}
+                            onClick={() => setGridView(false)}
+                          >
+                            <i className="bx bx-list-ul"></i> List View
+                          </span>
+                        </li>
+
+                        {/* Divider */}
+                        {activeTab === "contacts" && (
+                          <li>
+                            <hr className="dropdown-divider" />
+                          </li>
+                        )}
                       </ul>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-
+          </div>
           <div>
             <Suspense fallback={<MainDirectoryPageSkeleton />}>
               {activeTab === "notes" && (

src/pages/Directory/NoteFilterPanel.jsx

@@ -1,77 +1,119 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect, useImperativeHandle, forwardRef, useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   defaultNotesFilter,
   notesFilter,
 } from "../../components/Directory/DirectorySchema";
-import { useContactFilter, useNoteFilter } from "../../hooks/useDirectory";
+import { useNoteFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
 
-const NoteFilterPanel = ({ onApply, clearFilter }) => {
-  const { data, isError, isLoading, error, isFetched, isFetching } =
-    useNoteFilter();
+const NoteFilterPanel = forwardRef(({ onApply, clearFilter, setFilterdata }, ref) => {
+  const { data, isError, isLoading, error, isFetched, isFetching } = useNoteFilter();
+
+ useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
+  //Add this for Filter chip remover
+  const dynamicdefaultNotesFilter = useMemo(() => {
+    return {
+      ...defaultNotesFilter,
+      bucketIds: defaultNotesFilter.bucketIds || [],
+      categoryIds: defaultNotesFilter.categoryIds || [],
+    };
+  }, [status]);
 
   const methods = useForm({
     resolver: zodResolver(notesFilter),
-    defaultValues: defaultNotesFilter,
+    defaultValues: dynamicdefaultNotesFilter,
   });
 
+  const { handleSubmit, reset, setValue, getValues } = methods;
+
   const closePanel = () => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
   };
 
-  const { register, handleSubmit, reset, watch } = methods;
-
   const onSubmit = (formData) => {
     onApply(formData);
-    closePanel();
+    // closePanel();
   };
 
   const handleClose = () => {
     reset(defaultNotesFilter);
     onApply(defaultNotesFilter);
-    closePanel();
+    // closePanel();
   };
 
-  if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if (isError && isFetched)
-    return <div>Something went wrong Here- {error.message} </div>;
+  //Add this for Filter chip remover
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      setTimeout(() => {
+        if (value !== undefined) {
+          setValue(name, value);
+        } else {
+          reset({ ...getValues(), [name]: defaultNotesFilter[name] });
+        }
+      }, 0);
+    },
+    getValues,
+  }));
+
+
+
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+        {isLoading || isFetching ? (
+          <ExpenseFilterSkeleton />
+        ) : isError && isFetched ? (
+          <div>Something went wrong here: {error?.message}</div>
+        ) : (
+          <>
             <div className="row g-2">
               <SelectMultiple
                 name="createdByIds"
                 label="Created By :"
-            options={data.createdBy}
+                options={data?.createdBy || []}
                 labelKey="name"
                 valueKey="id"
               />
               <SelectMultiple
                 name="organizations"
                 label="Organization:"
-            options={data.organizations}
+                options={data?.organizations || []}
                 labelKey={(item) => item.name}
                 valueKey="id"
               />
             </div>
+
             <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>
+          </>
+        )}
       </form>
     </FormProvider>
   );
-};
+});
 
 export default NoteFilterPanel;

src/pages/Directory/NotesPage.jsx

@@ -1,5 +1,4 @@
-// NotesPage.jsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useFab } from "../../Context/FabContext";
 import { useNotes } from "../../hooks/useDirectory";
 import NoteFilterPanel from "./NoteFilterPanel";
@@ -9,11 +8,14 @@ import { useDebounce } from "../../utils/appUtils";
 import NoteCardDirectoryEditable from "../../components/Directory/NoteCardDirectoryEditable";
 import Pagination from "../../components/common/Pagination";
 import { NoteCardSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
+import NoteFilterChips from "../../components/Directory/NoteFilterChips";
 
 const NotesPage = ({ projectId, searchText, onExport }) => {
   const [filters, setFilter] = useState(defaultNotesFilter);
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(searchText, 500);
+  const [filterData, setFilterdata] = useState(null);
+  const updatedRef = useRef();
 
   const { data, isLoading, isError, error } = useNotes(
     projectId,
@@ -33,7 +35,12 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     setShowTrigger(true);
     setOffcanvasContent(
       "Notes Filters",
-      <NoteFilterPanel onApply={setFilter} clearFilter={clearFilter} />
+      <NoteFilterPanel
+        ref={updatedRef} //Call here
+        onApply={setFilter}
+        clearFilter={clearFilter}
+        setFilterdata={setFilterdata}
+      />
     );
 
     return () => {
@@ -42,11 +49,27 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     };
   }, []);
 
-  // 🔹 Format data for export
+  const handleRemoveChip = (key, id) => {
+    setFilter((prev) => {
+      const updated = { ...prev };
+
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+        updatedRef.current?.resetFieldValue(key, updated[key]); //IMP
+      } else {
+        updated[key] = null;
+        updatedRef.current?.resetFieldValue(key, null);
+      }
+
+      return updated;
+    });
+  };
+
+  // Format data for export
   const formatExportData = (notes) => {
     return notes.map((n) => ({
       ContactName: n.contactName || "",
-      Note: n.note ? n.note.replace(/<[^>]+>/g, "") : "", // strip HTML tags
+      Note: n.note ? n.note.replace(/<[^>]+>/g, "") : "",
       Organization: n.organizationName || "",
       CreatedBy: n.createdBy
         ? `${n.createdBy.firstName || ""} ${n.createdBy.lastName || ""}`.trim()
@@ -59,7 +82,6 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     }));
   };
 
-  // 🔹 Pass formatted notes to parent for export
   useEffect(() => {
     if (data?.data && onExport) {
       onExport(formatExportData(data.data));
@@ -77,6 +99,12 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
 
   return (
     <div className="d-flex flex-column text-start mt-3">
+      <NoteFilterChips
+        filters={filters}
+        filterData={filterData}
+        removeFilterChip={handleRemoveChip}
+      />
+
       {data?.data?.length > 0 ? (
         <>
           {data.data.map((noteItem) => (
@@ -96,7 +124,6 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
           </div>
         </>
       ) : (
-        // Card for "No notes available"
         <div
           className="card text-center d-flex align-items-center justify-content-center"
           style={{ height: "200px" }}
@@ -104,7 +131,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
           <p className="text-muted mb-0">
             {debouncedSearch
               ? `No notes found matching "${searchText}"`
-              : Object.keys(filters).some((k) => filters[k] && filters[k].length)
+              : Object.keys(filters).some((k) => filters[k]?.length)
                 ? "No notes found for the applied filters."
                 : "No notes available."}
           </p>

src/pages/Expense/ExpensePage.jsx

@@ -1,17 +1,16 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
-import { useForm } from "react-hook-form";
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import { useForm, useFormContext } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
 
-import ExpenseList from "../../components/Expenses/ExpenseList";
-import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
-import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import ExpenseList from "../../components/Expenses/ExpenseList";
+import ViewExpense from "../../components/Expenses/ViewExpense";
 import ManageExpense from "../../components/Expenses/ManageExpense";
 import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
+import ExpenseFilterChips from "../../components/Expenses/ExpenseFilterChips";
 
-// Context & Hooks
 import { useFab } from "../../Context/FabContext";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -20,11 +19,8 @@ import {
   VIEW_SELF_EXPENSE,
 } from "../../utils/constants";
 
-// Schema & Defaults
-import {
-  defaultFilter,
-  SearchSchema,
-} from "../../components/Expenses/ExpenseSchema";
+import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 // Context
 export const ExpenseContext = createContext();
@@ -41,10 +37,10 @@ const ExpensePage = () => {
     (store) => store.localVariables.projectId
   );
 
-  const [filters, setFilter] = useState();
+  const [filters, setFilters] = useState(defaultFilter);
   const [groupBy, setGroupBy] = useState("transactionDate");
   const [searchText, setSearchText] = useState("");
-
+  const filterPanelRef = useRef();
   const [ManageExpenseModal, setManageExpenseModal] = useState({
     IsOpen: null,
     expenseId: null,
@@ -63,19 +59,22 @@ const ExpensePage = () => {
   const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
   const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
   const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
-
   const { setOffcanvasContent, setShowTrigger } = useFab();
-
-  const methods = useForm({
-    resolver: zodResolver(SearchSchema),
-    defaultValues: defaultFilter,
+  const [filterData, setFilterdata] = useState(defaultFilter);
+  const removeFilterChip = (key, id) => {
+    setFilters((prev) => {
+      const updated = { ...prev };
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+        filterPanelRef.current?.resetFieldValue(key, updated[key]);
+      } else if (key === "dateRange") {
+        updated.startDate = null;
+        updated.endDate = null;
+        filterPanelRef.current?.resetFieldValue("startDate", null);
+        filterPanelRef.current?.resetFieldValue("endDate", null);
+      }
+      return updated;
     });
-
-  const { reset } = methods;
-
-  const clearFilter = () => {
-    setFilter(defaultFilter);
-    reset();
   };
 
   useEffect(() => {
@@ -84,9 +83,10 @@ const ExpensePage = () => {
       setOffcanvasContent(
         "Expense Filters",
         <ExpenseFilterPanel
-          onApply={setFilter}
+          ref={filterPanelRef}
+          onApply={setFilters}
           handleGroupBy={setGroupBy}
-          clearFilter={clearFilter}
+          setFilterdata={setFilterdata}
         />
       );
     }
@@ -101,6 +101,8 @@ const ExpensePage = () => {
     setViewExpense,
     setManageExpenseModal,
     setDocumentView,
+    filterData,
+    removeFilterChip
   };
 
   return (
@@ -115,20 +117,18 @@ const ExpensePage = () => {
             <div className="card my-3 px-sm-4 px-0">
               <div className="card-body py-2 px-3">
                 <div className="row align-items-center">
-                  <div className="col-6 ">
-                    <div className="d-flex align-items-center">
+                  <div className="col-6">
                     <input
                       type="search"
                       className="form-control form-control-sm w-auto"
                       placeholder="Search Expense"
-                        aria-describedby="search-label"
                       value={searchText}
                       onChange={(e) => setSearchText(e.target.value)}
                     />
                   </div>
-                  </div>
 
                   <div className="col-6 text-end mt-2 mt-sm-0">
+
                     {IsCreatedAble && (
                       <button
                         className="btn btn-sm btn-primary"
@@ -151,6 +151,8 @@ const ExpensePage = () => {
               </div>
             </div>
 
+
+
             <ExpenseList
               filters={filters}
               groupBy={groupBy}
@@ -161,7 +163,7 @@ const ExpensePage = () => {
           <div className="card text-center py-1">
             <i className="fa-solid fa-triangle-exclamation fs-5" />
             <p>
-              Access Denied: You don't have permission to perform this action !
+              Access Denied: You don't have permission to perform this action!
             </p>
           </div>
         )}

src/pages/Home/LandingPage.css

@@ -1,656 +1,265 @@
+/* Custom Styles */
+.custom-navbar {
+  background: #efefef;
+  transition: all 0.3s ease;
+  padding: 1rem 0;
+}
+
+.carousel-item {
+  height: 100vh;
+  min-height: 500px;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.carousel-caption {
+  bottom: 20%;
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.feature-icon {
+  font-size: 40px;
+  color: #4fc143;
+}
+
+.text-primary {
+  color: #49bf3c !important;
+}
+.text-blue {
+  color: #696cff !important;
+}
+
+.btn-primary {
+  background-color: #49bf3c !important;
+}
+
+body {
+  font-family: "Segoe UI", Roboto, sans-serif;
+  background-color: #ffff;
+}
+
+.hero {
+  background: linear-gradient(135deg, #4fc143, #007bff);
+  color: white;
+  padding: 100px 0;
+}
+
+.pricing-card {
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.pricing-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon-image {
+  width: 50px;
+}
+
+.accordion {
+  --bs-accordion-box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
+  --bs-accordion-active-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
+  --bs-accordion-active-bg: #fff;
+  --bs-accordion-btn-active-bg: #fff;
+  --bs-accordion-btn-focus-box-shadow: none;
+  --bs-accordion-btn-focus-shadow-width: 0;
+  --bs-accordion-color: #646e78;
+  --bs-accordion-bg: #fff;
+  --bs-accordion-transition: all 0.2s ease-in-out, border-radius 0.15s ease;
+  --bs-accordion-border-color: #fff;
+  --bs-accordion-border-width: 1px;
+  --bs-accordion-border-radius: 0.375rem;
+  --bs-accordion-inner-border-radius: 0.375rem;
+  --bs-accordion-btn-padding-x: 1.4375rem;
+  --bs-accordion-btn-padding-y: 0.7305rem;
+  --bs-accordion-btn-color: #384551;
+  --bs-accordion-btn-bg: #fff;
+  --bs-accordion-btn-icon: url(
+    data:image/svg + xml,
+    %3csvgwidth="20"height="20"viewBox="0 0 20 20"fill="none"xmlns="http://www.w3.org/2000/svg"%3e%3cgid="bx-chevron-down"%3e%3cpathid="Vector"d="M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z"fill="%23384551"fill-opacity="0.9"/%3e%3c/g%3e%3c/svg%3e
+  );
+  --bs-accordion-btn-icon-width: 1.25rem;
+  --bs-accordion-btn-icon-transform: rotate(-180deg);
+  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+  --bs-accordion-btn-active-icon: url(
+    data:image/svg + xml,
+    %3csvgwidth="20"height="20"viewBox="0 0 20 20"fill="none"xmlns="http://www.w3.org/2000/svg"%3e%3cgid="bx-chevron-down"%3e%3cpathid="Vector"d="M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z"fill="%23384551"fill-opacity="0.9"/%3e%3c/g%3e%3c/svg%3e
+  );
+  --bs-accordion-btn-focus-box-shadow: none;
+  --bs-accordion-body-padding-x: 1.1875rem;
+  --bs-accordion-body-padding-y: 1.1875rem;
+  --bs-accordion-active-color: #384551;
+  --bs-accordion-active-bg: #fff;
+}
+
+.accordion-header {
+  line-height: 1.375;
+  margin-bottom: 0;
+  position: relative;
+  border-bottom: none;
+}
+
+.accordion-item {
+  color: #646e78;
+  background-color: #fff;
+  border: 1px solid #fff;
+}
+
+.accordion-item:first-of-type {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
+.accordion:not(.accordion-custom-button):not(.accordion-arrow-left)
+  .accordion-item:not(:last-of-type) {
+  margin-block-end: 0.5rem;
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--bs-accordion-btn-color);
+  text-align: left;
+  background-color: var(--bs-accordion-btn-bg);
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: var(--bs-accordion-transition);
+}
+
+.accordion-button:not(.collapsed) {
+  color: var(--bs-accordion-active-color);
+  background-color: var(--bs-accordion-active-bg);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
+    var(--bs-accordion-border-color);
+}
+
 .section-py {
   padding: 6.25rem 0;
+  min-height: 100vh !important;
 }
 
-.section-py .heading {
-  font-size: 1.625rem;
-}
-@media (max-width: 1199.98px) {
-  .section-py {
-    padding: 4rem 0;
-  }
-}
-@media (max-width: 767.98px) {
-  .section-py {
-    padding: 3rem 0;
-  }
+.btn-primary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #4fc143;
+  --bs-btn-border-color: #4fc143;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0b5ed7;
+  --bs-btn-hover-border-color: #0a58ca;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0a58ca;
+  --bs-btn-active-border-color: #0a53be;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #4fc143;
+  --bs-btn-disabled-border-color: #4fc143;
 }
 
-.first-section-pt {
-  padding-top: 11.28rem;
-}
-@media (max-width: 1199.98px) {
-  .first-section-pt {
-    padding-top: 7.5rem;
-  }
+/* https://codingyaar.com/bootstrap-card-hover-effect-3-background-color-change/# */
+.card-slider {
+  border: 0;
+  border-radius: 0;
+  /* color: #fff; */
+  box-shadow: 5px 5px 10px #e1e1e1;
+  padding: 3em 0;
+  /* border-bottom-right-radius: 4em;
+      border-top-left-radius: 4em; */
+  background: linear-gradient(
+    to left,
+    rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) 50%,
+    #4fc143 50%
+  );
+  background-size: 200%;
+  background-position: right;
+  transition: background-position 0.5s ease-out;
 }
 
-.card[class*="card-hover-border-"] {
-  transition: all 0.2s ease-in-out;
+.card-slider:hover {
+  background-position: left;
+  transform: translateY(-5px);
 }
 
-.banner-bg-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  object-position: left;
-}
-
-.section-title-img {
-  height: 100%;
-  width: 120%;
-  inset-inline-start: -12%;
-  top: 10px;
-}
-
-/* .light-style body {
-  background-color: #fff;
-} */
-
-.dark-style body {
-  background-color: #2b2c40;
-}
-
-nav.layout-navbar {
-  /* backdrop-filter: unset; */
-  /* background-color: transparent !important; */
-  /* background-color: rgba(214, 36, 33, 0.88) !important; */
-}
-
-nav.layout-navbar::before {
-  position: absolute;
-  display: block;
-  block-size: 100%;
-  content: "";
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
-
-nav.layout-navbar .navbar.landing-navbar {
-  --bs-front-navbar-bg: rgba(var(--bs-paper-bg-rgb), 0.38);
-  --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
-  border: 2px solid var(--bs-front-navbar-border-color);
-  background-color: var(--bs-front-navbar-bg);
-  margin-block-start: 1rem;
-  padding-block: 0.614rem;
-  transform: unset;
-  transition: all 0.2s ease-in-out;
-  border-radius: 0.375rem;
-}
-
-nav.layout-navbar.navbar-active::after {
-  backdrop-filter: saturate(100%) blur(6px);
-  -webkit-backdrop-filter: saturate(100%) blur(6px);
-}
-
-.navbar.landing-navbar {
-  box-shadow: none;
-  transition: all 0.2s ease-in-out;
-  transform: unset !important;
-  padding-top: 0.614rem;
-  padding-bottom: 0.614rem;
-  margin-top: 1rem;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 0.375rem;
-}
-.navbar.landing-navbar .navbar-nav .nav-link {
-  padding: 0.5rem 0.625rem;
-  margin-inline-end: 0.625rem;
-}
-@media (max-width: 1199.98px) {
-  .navbar.landing-navbar .navbar-nav .nav-link {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    margin-inline-end: 0;
-  }
-}
-.navbar.landing-navbar .navbar-nav .nav-item:last-child .nav-link {
-  margin-inline-end: 0;
-}
-@media (min-width: 992px) {
-  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
-    max-width: 1300px;
-    inset-inline-start: 50% !important;
-    transform: translateX(-50%);
-    top: 100%;
-  }
-}
-@media (max-width: 991.98px) {
-  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
-    background: transparent;
-    box-shadow: none;
-    border: none;
-  }
-}
-.navbar.landing-navbar
-  .navbar-nav
-  .nav-item.mega-dropdown
-  > .dropdown-menu
-  .mega-dropdown-link {
-  padding-left: 0;
-  padding-right: 0;
-  margin: 0;
-  font-weight: 400;
-}
-.navbar.landing-navbar
-  .navbar-nav
-  .nav-item.mega-dropdown
-  > .dropdown-menu
-  .mega-dropdown-link
-  i {
-  font-size: 1rem;
-  font-weight: 700;
-  margin-top: -0.125rem;
-}
-.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col,
-.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col img {
-  border-radius: 0.625rem;
-}
-@media (max-width: 991.98px) {
-  .navbar.landing-navbar .landing-menu-overlay {
-    position: fixed;
-    display: none;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(34, 48, 62, 0.78);
-    transition: all 0.2s ease-in-out;
-    z-index: 9998;
-  }
-  .navbar.landing-navbar .landing-nav-menu {
-    position: fixed;
-    display: block !important;
-    height: 100%;
-    max-width: 300px;
-    width: 80%;
-    padding: 1rem;
-    inset-inline-start: -100%;
-    top: 0;
-    overflow-y: auto;
-    transition: all 0.3s ease-in-out;
-    z-index: 9999;
-  }
-  .navbar.landing-navbar .landing-nav-menu.show {
-    inset-inline-start: 0;
-  }
-  .navbar.landing-navbar .landing-nav-menu.show ~ .landing-menu-overlay {
-    display: block;
-  }
-}
-
-.light-style .layout-navbar .navbar.landing-navbar {
-  border-color: rgba(255, 255, 255, 100);
-  background: rgba(255, 255, 255, 50);
-}
-.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
-  color: #384551;
-}
-.light-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .show
-  > .nav-link,
-.light-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .active
-  > .nav-link,
-.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
-.light-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .nav-link.active {
-  color: #696cff !important;
-}
-.light-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .nav-item.mega-dropdown
-  > .dropdown-menu
-  .mega-dropdown-link
-  i {
-  color: #646e78;
-}
-@media (max-width: 991.98px) {
-  .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
-    background-color: #fff;
-  }
-}
-.light-style .layout-navbar.navbar-active .navbar.landing-navbar {
-  background: #fff;
-  box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
-}
-.light-style .layout-navbar .menu-text {
-  color: #384551;
-}
-
-.dark-style .layout-navbar .navbar.landing-navbar {
-  border-color: rgba(65, 65, 95, 0.68);
-  background-color: rgba(65, 65, 95, 0.38);
-}
-.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
-  color: #d5d5e2;
-}
-.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .show > .nav-link,
-.dark-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .active
-  > .nav-link,
-.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
-.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
-  color: #696cff !important;
-}
-.dark-style
-  .layout-navbar
-  .navbar.landing-navbar
-  .navbar-nav
-  .nav-item.mega-dropdown
-  > .dropdown-menu
-  .mega-dropdown-link
-  i {
-  color: #b2b2c4;
-}
-@media (max-width: 991.98px) {
-  .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
-    background-color: #2b2c40;
-  }
-}
-.dark-style .layout-navbar .navbar .menu-text {
-  color: #d5d5e2;
-}
-.dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
-  background: #2b2c40;
-  border-color: #2b2c40;
-  box-shadow: 0 0.125rem 0.375rem 0 rgba(20, 20, 29, 0.2);
-}
-
-@media (min-width: 992px) {
-  [dir="rtl"]
-    .navbar.landing-navbar
-    .navbar-nav
-    .nav-item.mega-dropdown
-    > .dropdown-menu {
-    transform: translateX(50%);
-  }
-}
-
-.landing-footer .footer-link,
-.landing-footer .footer-text {
-  color: #fff;
-  opacity: 0.78;
-}
-.landing-footer .footer-title {
-  color: #fff;
-  opacity: 0.92;
-}
-.landing-footer .footer-bottom-text {
-  color: #d3d4dc;
-}
-.landing-footer .footer-bottom {
-  background-color: #f44336;
-}
-.landing-footer .footer-link {
-  transition: all 0.2s ease-in-out;
-}
-.landing-footer .footer-link:hover {
+.scroll-top.active {
+  visibility: visible;
   opacity: 1;
 }
-.landing-footer .footer-top {
-  padding-top: 1.3rem;
-  padding-bottom: 1.3rem;
-  border-top-left-radius: 1.75rem;
-  border-top-right-radius: 1.75rem;
-  background-color: #f44336;
+
+.scroll-top {
+  position: fixed;
+  visibility: hidden;
+  opacity: 0;
+  right: 15px;
+  bottom: 15px;
+  z-index: 99999;
+  background-color: #4fc143;
+  width: 40px;
+  height: 40px;
+  border-radius: 25px;
+  transition: all 0.4s;
+  border: 2px solid color-mix(in srgb, #0a53be, transparent 10%);
 }
-@media (max-width: 767.98px) {
-  .landing-footer .footer-top {
-    padding: 3rem 0;
-  }
+
+.contact-section {
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  padding: 40px 40px;
+  margin: 60px auto;
+  max-width: 1100px;
 }
-.landing-footer .footer-top .footer-bg {
-  object-position: center;
+
+.contact-img img {
+  width: 100%;
+  border-radius: 15px;
 }
-@media (min-width: 992px) {
-  .landing-footer .footer-logo-description {
-    max-width: 385px;
-  }
+
+.contact-text h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #173b5f;
 }
-.landing-footer .footer-form {
-  max-width: 22.25rem;
+
+.contact-text p {
+  font-size: 1rem;
+  color: #6c757d;
+  margin-top: 15px;
+  margin-bottom: 25px;
 }
-.landing-footer .footer-form input {
-  background-color: transparent;
-  border-color: #4e4f6c;
+
+.btn-green {
+  background-color: #49bf3c;
+  color: #fff;
+  border-radius: 50px;
+  padding: 10px 30px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.btn-square-small {
+  border-radius: 3px;
+  padding-bottom: 5.072px;
+  padding-inline-end: 12px;
+  padding-inline-start: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 5.072px;
+}
+
+.btn-green:hover {
+  background-color: #00a85a;
   color: #fff;
 }
-.landing-footer .footer-form input:hover:not([disabled]):not([focus]) {
-  border-color: #4e4f6c;
-}
-.landing-footer .footer-form input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-.landing-footer .footer-form label {
-  color: #d5d5e2;
-}
-
-.section-py {
-  padding: 6.25rem 0;
-}
-@media (max-width: 1199.98px) {
-  .section-py {
-    padding: 5rem 0;
-  }
-}
-@media (max-width: 767.98px) {
-  .section-py {
-    padding: 3rem 0;
-  }
-}
-
-.landing-hero {
-  border-radius: 0 0 3.5rem 3.5rem;
-  padding-top: 8.2rem;
-}
-.landing-hero::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-@media (min-width: 992px) {
-  .landing-hero .hero-text-box {
-    /* max-width: 34.375rem; */
-    max-width: 70%;
-    margin: 0 auto;
-  }
-}
-.landing-hero .hero-title {
-  background: linear-gradient(
-    to right,
-    #28c76f 0%,
-    #5a4aff 47.92%,
-    #ff3739 100%
-  );
-  background-size: 200% auto;
-  color: #384551;
-  font-size: calc(1.3875rem + 1.65vw);
-  background-clip: text;
-  line-height: 1.2;
-  text-fill-color: transparent;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shine 2s ease-in-out infinite alternate;
-}
-@media (min-width: 1200px) {
-  .landing-hero .hero-title {
-    font-size: 2.625rem;
-  }
-}
-.landing-hero .landing-hero-btn .hero-btn-item {
-  inset-inline-start: -94%;
-  top: 65%;
-}
-.landing-hero .hero-animation-img {
-  margin-bottom: -32rem;
-}
-.animation-img {
-  border: 1px soid red;
-}
-@media (max-width: 1199.98px) {
-  .landing-hero .hero-animation-img {
-    margin-bottom: -20rem;
-  }
-}
-@media (max-width: 575.98px) {
-  .landing-hero .hero-animation-img {
-    margin-bottom: -10rem;
-  }
-}
-.landing-hero .hero-animation-img .hero-dashboard-img {
-  width: 80%;
-  margin: 0 auto;
-  will-change: transform;
-  transform-style: preserve-3d;
-  transition: all 0.1s;
-}
-.landing-hero .hero-animation-img .hero-dashboard-img img {
-  width: 100%;
-}
-
-.landing-hero-blank {
-  padding-top: 26rem;
-}
-@media (max-width: 1199.98px) {
-  .landing-hero-blank {
-    padding-top: 15rem;
-  }
-}
-@media (max-width: 575.98px) {
-  .landing-hero-blank {
-    padding-top: 7rem;
-  }
-}
-
-@keyframes shine {
-  0% {
-    background-position: 0% 50%;
-  }
-  80% {
-    background-position: 50% 90%;
-  }
-  100% {
-    background-position: 91% 100%;
-  }
-}
-.landing-features
-  .features-icon-wrapper
-  .features-icon-box
-  .features-icon-description {
-  max-width: 19.25rem;
-  margin: 0 auto;
-}
-
-.landing-reviews {
-  border-top-left-radius: 3.75rem;
-  border-top-right-radius: 3.75rem;
-}
-.landing-reviews .swiper-reviews-carousel .swiper-button-prev,
-.landing-reviews .swiper-reviews-carousel .swiper-button-next {
-  display: none;
-}
-.landing-reviews .swiper-reviews-carousel .swiper-slide {
-  height: auto;
-  padding: 0.8125rem;
-}
-.landing-reviews .swiper-reviews-carousel .client-logo {
-  height: 1.375rem;
-  object-fit: contain;
-}
-.landing-reviews .swiper-logo-carousel {
-  padding-bottom: 6.25rem;
-}
-.landing-reviews .swiper-logo-carousel .swiper {
-  max-width: 45rem;
-}
-.landing-reviews .swiper-logo-carousel .swiper .swiper-slide {
-  display: flex;
-  justify-content: center;
-}
-.landing-reviews .swiper-logo-carousel .swiper .client-logo {
-  max-height: 2.5rem;
-  max-width: 95%;
-  object-fit: contain;
-}
-
-.landing-team .card,
-.landing-team .card .team-image-box {
-  border-top-left-radius: 5.625rem;
-  border-top-right-radius: 1.25rem;
-}
-.landing-team .card .card-body {
-  border-bottom-left-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-.landing-team .team-image-box {
-  height: 11.5625rem;
-}
-.landing-team .team-image-box .card-img-position {
-  height: 15rem;
-  transform: translateX(-50%);
-  max-width: 100%;
-  object-fit: cover;
-}
-@media (max-width: 991.98px) {
-  .landing-team .team-image-box .card-img-position {
-    height: 13rem;
-  }
-}
-@media (max-width: 575.98px) {
-  .landing-team .team-image-box {
-    height: 11rem;
-  }
-}
-.landing-team .card .team-media-icons i {
-  transition: all 0.2s ease-in-out;
-}
-
-.landing-pricing {
-  border-radius: 3.75rem;
-}
-.landing-pricing .pricing-plans-item {
-  inset-inline-end: -56%;
-  bottom: -0.5rem;
-}
-@media (max-width: 767.98px) {
-  .landing-pricing .pricing-plans-item {
-    inset-inline-end: 0;
-    bottom: 1rem;
-  }
-}
-.landing-pricing .pricing-list .badge.badge-center {
-  width: 1rem;
-  height: 1rem;
-}
-.landing-pricing .pricing-list .badge.badge-center i {
-  margin-top: -5px;
-}
-.landing-pricing .price-yearly-toggle {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.landing-pricing .card .card-header,
-.landing-pricing .card .card-body {
-  padding: 2rem;
-  padding-top: 3rem;
-}
-
-.landing-faq {
-  border-top-left-radius: 3.75rem;
-  border-top-right-radius: 3.75rem;
-}
-.landing-faq .faq-image {
-  max-width: 20rem;
-  width: 80%;
-}
-
-.landing-cta .cta-title {
-  font-size: 2.125rem;
-}
-@media (max-width: 767.98px) {
-  .landing-cta .cta-title {
-    font-size: 1.8rem;
-  }
-}
-
-.landing-contact .text-heading {
-  overflow-wrap: anywhere;
-}
-.landing-contact .contact-img-box,
-.landing-contact .contact-img-box .contact-img {
-  border-radius: 3.75rem 0.375rem 0.375rem 0.375rem;
-}
-.landing-contact .contact-img-box .contact-border-img {
-  inset-block-start: -2.5rem;
-  inset-inline-start: -2.8125rem;
-}
-
-.light-style .landing-hero {
-  background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
-}
-.light-style .landing-hero::after {
-  background-color: #fff;
-}
-
-.dark-style .landing-hero {
-  background: #1e2130;
-}
-.dark-style .landing-hero::after {
-  background-color: #2b2c40;
-}
-
-[dir="rtl"] .landing-reviews-btns {
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: row-reverse;
-  gap: 1rem;
-}
-[dir="rtl"] .landing-team .team-image-box .card-img-position {
-  transform: translateX(50%) !important;
-}
-[dir="rtl"] .landing-pricing .switch .switch-label {
-  padding-right: 0;
-}
-[dir="rtl"] .landing-pricing .switch .switch-label:first-child {
-  padding-left: 0.5rem;
-}
-[dir="rtl"] .landing-pricing .switch .switch-input ~ .switch-label {
-  padding-right: 3rem;
-}
-[dir="rtl"] .landing-contact .contact-img-box {
-  border-radius: 0.375rem 3.75rem 0.375rem 0.375rem;
-}
-[dir="rtl"] .landing-contact .contact-img-box::before {
-  inset-block-start: -1.875rem;
-  inset-inline-start: -3.125rem;
-  transform: rotate(90deg);
-}
-
-.swiper {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-}
-
-.swiper-slide {
-  text-align: center;
-  font-size: 18px;
-
-  /* Center slide text vertically */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.swiper-slide img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

src/pages/Home/LandingPageOld.css

@@ -0,0 +1,660 @@
+:root,
+[data-bs-theme="light"] {
+  --bs-body-font-size: 0.9375rem;
+}
+.section-py {
+  padding: 6.25rem 0;
+}
+
+.section-py .heading {
+  font-size: 1.625rem;
+}
+@media (max-width: 1199.98px) {
+  .section-py {
+    padding: 4rem 0;
+  }
+}
+@media (max-width: 767.98px) {
+  .section-py {
+    padding: 3rem 0;
+  }
+}
+
+.first-section-pt {
+  padding-top: 11.28rem;
+}
+@media (max-width: 1199.98px) {
+  .first-section-pt {
+    padding-top: 7.5rem;
+  }
+}
+
+.card[class*="card-hover-border-"] {
+  transition: all 0.2s ease-in-out;
+}
+
+.banner-bg-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: left;
+}
+
+.section-title-img {
+  height: 100%;
+  width: 120%;
+  inset-inline-start: -12%;
+  top: 10px;
+}
+
+/* .light-style body {
+  background-color: #fff;
+} */
+
+.dark-style body {
+  background-color: #2b2c40;
+}
+
+nav.layout-navbar {
+  /* backdrop-filter: unset; */
+  /* background-color: transparent !important; */
+  /* background-color: rgba(214, 36, 33, 0.88) !important; */
+}
+
+nav.layout-navbar::before {
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+nav.layout-navbar .navbar.landing-navbar {
+  --bs-front-navbar-bg: rgba(var(--bs-paper-bg-rgb), 0.38);
+  --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
+  border: 2px solid var(--bs-front-navbar-border-color);
+  background-color: var(--bs-front-navbar-bg);
+  margin-block-start: 1rem;
+  padding-block: 0.614rem;
+  transform: unset;
+  transition: all 0.2s ease-in-out;
+  border-radius: 0.375rem;
+}
+
+nav.layout-navbar.navbar-active::after {
+  backdrop-filter: saturate(100%) blur(6px);
+  -webkit-backdrop-filter: saturate(100%) blur(6px);
+}
+
+.navbar.landing-navbar {
+  box-shadow: none;
+  transition: all 0.2s ease-in-out;
+  transform: unset !important;
+  padding-top: 0.614rem;
+  padding-bottom: 0.614rem;
+  margin-top: 1rem;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 0.375rem;
+}
+.navbar.landing-navbar .navbar-nav .nav-link {
+  padding: 0.5rem 0.625rem;
+  margin-inline-end: 0.625rem;
+}
+@media (max-width: 1199.98px) {
+  .navbar.landing-navbar .navbar-nav .nav-link {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    margin-inline-end: 0;
+  }
+}
+.navbar.landing-navbar .navbar-nav .nav-item:last-child .nav-link {
+  margin-inline-end: 0;
+}
+@media (min-width: 992px) {
+  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
+    max-width: 1300px;
+    inset-inline-start: 50% !important;
+    transform: translateX(-50%);
+    top: 100%;
+  }
+}
+@media (max-width: 991.98px) {
+  .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {
+    background: transparent;
+    box-shadow: none;
+    border: none;
+  }
+}
+.navbar.landing-navbar
+  .navbar-nav
+  .nav-item.mega-dropdown
+  > .dropdown-menu
+  .mega-dropdown-link {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+  font-weight: 400;
+}
+.navbar.landing-navbar
+  .navbar-nav
+  .nav-item.mega-dropdown
+  > .dropdown-menu
+  .mega-dropdown-link
+  i {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-top: -0.125rem;
+}
+.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col,
+.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col img {
+  border-radius: 0.625rem;
+}
+@media (max-width: 991.98px) {
+  .navbar.landing-navbar .landing-menu-overlay {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(34, 48, 62, 0.78);
+    transition: all 0.2s ease-in-out;
+    z-index: 9998;
+  }
+  .navbar.landing-navbar .landing-nav-menu {
+    position: fixed;
+    display: block !important;
+    height: 100%;
+    max-width: 300px;
+    width: 80%;
+    padding: 1rem;
+    inset-inline-start: -100%;
+    top: 0;
+    overflow-y: auto;
+    transition: all 0.3s ease-in-out;
+    z-index: 9999;
+  }
+  .navbar.landing-navbar .landing-nav-menu.show {
+    inset-inline-start: 0;
+  }
+  .navbar.landing-navbar .landing-nav-menu.show ~ .landing-menu-overlay {
+    display: block;
+  }
+}
+
+.light-style .layout-navbar .navbar.landing-navbar {
+  border-color: rgba(255, 255, 255, 100);
+  background: rgba(255, 255, 255, 50);
+}
+.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
+  color: #384551;
+}
+.light-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .show
+  > .nav-link,
+.light-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .active
+  > .nav-link,
+.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
+.light-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .nav-link.active {
+  color: #696cff !important;
+}
+.light-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .nav-item.mega-dropdown
+  > .dropdown-menu
+  .mega-dropdown-link
+  i {
+  color: #646e78;
+}
+@media (max-width: 991.98px) {
+  .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
+    background-color: #fff;
+  }
+}
+.light-style .layout-navbar.navbar-active .navbar.landing-navbar {
+  background: #fff;
+  box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
+}
+.light-style .layout-navbar .menu-text {
+  color: #384551;
+}
+
+.dark-style .layout-navbar .navbar.landing-navbar {
+  border-color: rgba(65, 65, 95, 0.68);
+  background-color: rgba(65, 65, 95, 0.38);
+}
+.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
+  color: #d5d5e2;
+}
+.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .show > .nav-link,
+.dark-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .active
+  > .nav-link,
+.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show,
+.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active {
+  color: #696cff !important;
+}
+.dark-style
+  .layout-navbar
+  .navbar.landing-navbar
+  .navbar-nav
+  .nav-item.mega-dropdown
+  > .dropdown-menu
+  .mega-dropdown-link
+  i {
+  color: #b2b2c4;
+}
+@media (max-width: 991.98px) {
+  .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu {
+    background-color: #2b2c40;
+  }
+}
+.dark-style .layout-navbar .navbar .menu-text {
+  color: #d5d5e2;
+}
+.dark-style .layout-navbar.navbar-active .navbar.landing-navbar {
+  background: #2b2c40;
+  border-color: #2b2c40;
+  box-shadow: 0 0.125rem 0.375rem 0 rgba(20, 20, 29, 0.2);
+}
+
+@media (min-width: 992px) {
+  [dir="rtl"]
+    .navbar.landing-navbar
+    .navbar-nav
+    .nav-item.mega-dropdown
+    > .dropdown-menu {
+    transform: translateX(50%);
+  }
+}
+
+.landing-footer .footer-link,
+.landing-footer .footer-text {
+  color: #fff;
+  opacity: 0.78;
+}
+.landing-footer .footer-title {
+  color: #fff;
+  opacity: 0.92;
+}
+.landing-footer .footer-bottom-text {
+  color: #d3d4dc;
+}
+.landing-footer .footer-bottom {
+  background-color: var(--bs-primary);
+}
+.landing-footer .footer-link {
+  transition: all 0.2s ease-in-out;
+}
+.landing-footer .footer-link:hover {
+  opacity: 1;
+}
+.landing-footer .footer-top {
+  padding-top: 1.3rem;
+  padding-bottom: 1.3rem;
+  border-top-left-radius: 1.75rem;
+  border-top-right-radius: 1.75rem;
+  background-color: #f44336;
+}
+@media (max-width: 767.98px) {
+  .landing-footer .footer-top {
+    padding: 3rem 0;
+  }
+}
+.landing-footer .footer-top .footer-bg {
+  object-position: center;
+}
+@media (min-width: 992px) {
+  .landing-footer .footer-logo-description {
+    max-width: 385px;
+  }
+}
+.landing-footer .footer-form {
+  max-width: 22.25rem;
+}
+.landing-footer .footer-form input {
+  background-color: transparent;
+  border-color: #4e4f6c;
+  color: #fff;
+}
+.landing-footer .footer-form input:hover:not([disabled]):not([focus]) {
+  border-color: #4e4f6c;
+}
+.landing-footer .footer-form input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+.landing-footer .footer-form label {
+  color: #d5d5e2;
+}
+
+.section-py {
+  padding: 6.25rem 0;
+}
+@media (max-width: 1199.98px) {
+  .section-py {
+    padding: 5rem 0;
+  }
+}
+@media (max-width: 767.98px) {
+  .section-py {
+    padding: 3rem 0;
+  }
+}
+
+.landing-hero {
+  border-radius: 0 0 3.5rem 3.5rem;
+  padding-top: 8.2rem;
+}
+.landing-hero::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+@media (min-width: 992px) {
+  .landing-hero .hero-text-box {
+    /* max-width: 34.375rem; */
+    max-width: 70%;
+    margin: 0 auto;
+  }
+}
+.landing-hero .hero-title {
+  background: linear-gradient(
+    to right,
+    #28c76f 0%,
+    #5a4aff 47.92%,
+    #ff3739 100%
+  );
+  background-size: 200% auto;
+  color: #384551;
+  font-size: calc(1.3875rem + 1.65vw);
+  background-clip: text;
+  line-height: 1.2;
+  text-fill-color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shine 2s ease-in-out infinite alternate;
+}
+@media (min-width: 1200px) {
+  .landing-hero .hero-title {
+    font-size: 2.625rem;
+  }
+}
+.landing-hero .landing-hero-btn .hero-btn-item {
+  inset-inline-start: -94%;
+  top: 65%;
+}
+.landing-hero .hero-animation-img {
+  margin-bottom: -32rem;
+}
+.animation-img {
+  border: 1px soid red;
+}
+@media (max-width: 1199.98px) {
+  .landing-hero .hero-animation-img {
+    margin-bottom: -20rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .landing-hero .hero-animation-img {
+    margin-bottom: -10rem;
+  }
+}
+.landing-hero .hero-animation-img .hero-dashboard-img {
+  width: 80%;
+  margin: 0 auto;
+  will-change: transform;
+  transform-style: preserve-3d;
+  transition: all 0.1s;
+}
+.landing-hero .hero-animation-img .hero-dashboard-img img {
+  width: 100%;
+}
+
+.landing-hero-blank {
+  padding-top: 26rem;
+}
+@media (max-width: 1199.98px) {
+  .landing-hero-blank {
+    padding-top: 15rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .landing-hero-blank {
+    padding-top: 7rem;
+  }
+}
+
+@keyframes shine {
+  0% {
+    background-position: 0% 50%;
+  }
+  80% {
+    background-position: 50% 90%;
+  }
+  100% {
+    background-position: 91% 100%;
+  }
+}
+.landing-features
+  .features-icon-wrapper
+  .features-icon-box
+  .features-icon-description {
+  max-width: 19.25rem;
+  margin: 0 auto;
+}
+
+.landing-reviews {
+  border-top-left-radius: 3.75rem;
+  border-top-right-radius: 3.75rem;
+}
+.landing-reviews .swiper-reviews-carousel .swiper-button-prev,
+.landing-reviews .swiper-reviews-carousel .swiper-button-next {
+  display: none;
+}
+.landing-reviews .swiper-reviews-carousel .swiper-slide {
+  height: auto;
+  padding: 0.8125rem;
+}
+.landing-reviews .swiper-reviews-carousel .client-logo {
+  height: 1.375rem;
+  object-fit: contain;
+}
+.landing-reviews .swiper-logo-carousel {
+  padding-bottom: 6.25rem;
+}
+.landing-reviews .swiper-logo-carousel .swiper {
+  max-width: 45rem;
+}
+.landing-reviews .swiper-logo-carousel .swiper .swiper-slide {
+  display: flex;
+  justify-content: center;
+}
+.landing-reviews .swiper-logo-carousel .swiper .client-logo {
+  max-height: 2.5rem;
+  max-width: 95%;
+  object-fit: contain;
+}
+
+.landing-team .card,
+.landing-team .card .team-image-box {
+  border-top-left-radius: 5.625rem;
+  border-top-right-radius: 1.25rem;
+}
+.landing-team .card .card-body {
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+.landing-team .team-image-box {
+  height: 11.5625rem;
+}
+.landing-team .team-image-box .card-img-position {
+  height: 15rem;
+  transform: translateX(-50%);
+  max-width: 100%;
+  object-fit: cover;
+}
+@media (max-width: 991.98px) {
+  .landing-team .team-image-box .card-img-position {
+    height: 13rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .landing-team .team-image-box {
+    height: 11rem;
+  }
+}
+.landing-team .card .team-media-icons i {
+  transition: all 0.2s ease-in-out;
+}
+
+.landing-pricing {
+  border-radius: 3.75rem;
+}
+.landing-pricing .pricing-plans-item {
+  inset-inline-end: -56%;
+  bottom: -0.5rem;
+}
+@media (max-width: 767.98px) {
+  .landing-pricing .pricing-plans-item {
+    inset-inline-end: 0;
+    bottom: 1rem;
+  }
+}
+.landing-pricing .pricing-list .badge.badge-center {
+  width: 1rem;
+  height: 1rem;
+}
+.landing-pricing .pricing-list .badge.badge-center i {
+  margin-top: -5px;
+}
+.landing-pricing .price-yearly-toggle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.landing-pricing .card .card-header,
+.landing-pricing .card .card-body {
+  padding: 2rem;
+  padding-top: 3rem;
+}
+
+.landing-faq {
+  border-top-left-radius: 3.75rem;
+  border-top-right-radius: 3.75rem;
+}
+.landing-faq .faq-image {
+  max-width: 20rem;
+  width: 80%;
+}
+
+.landing-cta .cta-title {
+  font-size: 2.125rem;
+}
+@media (max-width: 767.98px) {
+  .landing-cta .cta-title {
+    font-size: 1.8rem;
+  }
+}
+
+.landing-contact .text-heading {
+  overflow-wrap: anywhere;
+}
+.landing-contact .contact-img-box,
+.landing-contact .contact-img-box .contact-img {
+  border-radius: 3.75rem 0.375rem 0.375rem 0.375rem;
+}
+.landing-contact .contact-img-box .contact-border-img {
+  inset-block-start: -2.5rem;
+  inset-inline-start: -2.8125rem;
+}
+
+.light-style .landing-hero {
+  background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
+}
+.light-style .landing-hero::after {
+  background-color: #fff;
+}
+
+.dark-style .landing-hero {
+  background: #1e2130;
+}
+.dark-style .landing-hero::after {
+  background-color: #2b2c40;
+}
+
+[dir="rtl"] .landing-reviews-btns {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+  gap: 1rem;
+}
+[dir="rtl"] .landing-team .team-image-box .card-img-position {
+  transform: translateX(50%) !important;
+}
+[dir="rtl"] .landing-pricing .switch .switch-label {
+  padding-right: 0;
+}
+[dir="rtl"] .landing-pricing .switch .switch-label:first-child {
+  padding-left: 0.5rem;
+}
+[dir="rtl"] .landing-pricing .switch .switch-input ~ .switch-label {
+  padding-right: 3rem;
+}
+[dir="rtl"] .landing-contact .contact-img-box {
+  border-radius: 0.375rem 3.75rem 0.375rem 0.375rem;
+}
+[dir="rtl"] .landing-contact .contact-img-box::before {
+  inset-block-start: -1.875rem;
+  inset-inline-start: -3.125rem;
+  transform: rotate(90deg);
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}