src/components/Activities/AttendcesLogs.jsx

@@ -133,12 +133,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
 
 
   useEffect(() => {
-  if (data?.length) {
     filtering(data);
-  }
   }, [data, showPending]);
 
-
   // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
     if (!searchTerm) {
@@ -151,6 +148,31 @@ 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 {
@@ -228,12 +250,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         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 ms-sm-8 ">
+        <div className="d-flex align-items-center my-0 ">
           <DateRangePicker
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start ms-1 ms-md-5 align-items-center mb-0">
+          <div className="form-check form-switch text-start m-0 ms-5">
             <input
               type="checkbox"
               className="form-check-input"
@@ -248,9 +270,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         </div>
 
       </div>
-      <div className="table-responsive text-nowrap " >
+      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
         {isLoading ? (
-          <div className="d-flex justify-content-center align-items-center">
+          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -348,7 +370,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12"><span className="text-secondary">No data for this date range. Please choose another.</span></div>
+          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (

src/components/Activities/CheckCheckOutForm.jsx

@@ -110,8 +110,8 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
   }, [projectNames, projectId, loading]);
 
   return (
-    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 d-flex justify-content-center mt-2">
+      <div className="col-12 d-flex justify-content-center">
         <label className="fs-5 text-dark text-center">
           {modeldata?.checkInTime && !modeldata?.checkOutTime
             ? `Check out for ${currentProject?.name}`
@@ -220,7 +220,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
   };
 
   return (
-    <form className="row " onSubmit={handleSubmit(onSubmit)}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
       <div className="col-12 col-md-12">
         <p>Regularize Attendance</p>
         <label className="form-label" htmlFor="description">

src/components/Dashboard/ExpenseByProject.jsx

@@ -129,7 +129,7 @@ const ExpenseByProject = () => {
           ))}
           {viewMode === "Category" && (
             <select
-              className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
+              className="form-select form-select-sm ms-auto mb-3"
               value={selectedType}
               onChange={(e) => setSelectedType(e.target.value)}
               disabled={typeLoading}

src/pages/Activities/AttendancePage.jsx

@@ -124,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-2 mx-sm-5">
+            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
               {/* Tabs */}
               <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">

src/pages/Directory/DirectoryPage.jsx

@@ -1,3 +1,4 @@
+
 import {
   useState,
   Suspense,
@@ -21,13 +22,7 @@ import ContactProfile from "../../components/Directory/ContactProfile";
 import GlobalModel from "../../components/common/GlobalModel";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useSelectedProject } from "../../slices/apiDataManager";
-import {
+import { exportToCSV, exportToExcel, exportToPDF, exportToPDF1, printTable } from "../../utils/tableExportUtils";
-  exportToCSV,
-  exportToExcel,
-  exportToPDF,
-  exportToPDF1,
-  printTable,
-} from "../../utils/tableExportUtils";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -85,16 +80,10 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
         exportToPDF1(exportData, "Notes");
       } else {
         // Columns for Contacts PDF
-          const columns = [
+        const columns = ["Email", "Phone", "Organization", "Category", "Tags"];
-            "Email",
-            "Phone",
-            "Organization",
-            "Category",
-            "Tags",
-          ];
 
         // Sanitize and trim long text to avoid PDF overflow
-          const sanitizedData = exportData.map((item) => ({
+        const sanitizedData = exportData.map(item => ({
           Email: (item.Email || "").slice(0, 40),
           Phone: (item.Phone || "").slice(0, 20),
           Organization: (item.Organization || "").slice(0, 30),
@@ -116,6 +105,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   }
 };
 
+
   const { data, isLoading, isError, error } = useBucketList();
 
   const handleTabClick = (tab, e) => {
@@ -183,8 +173,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 <ul className="nav nav-tabs">
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${
+                      className={`nav-link ${activeTab === "notes" ? "active" : ""
-                        activeTab === "notes" ? "active" : ""
                         } fs-6`}
                       onClick={(e) => handleTabClick("notes", e)}
                     >
@@ -194,8 +183,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </li>
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${
+                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
-                        activeTab === "contacts" ? "active" : ""
                         } fs-6`}
                       onClick={(e) => handleTabClick("contacts", e)}
                     >
@@ -228,23 +216,16 @@ 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 ${
+                              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>
+
                             <button
-                                className={`btn btn-sm p-1 ${
+                              className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
-                                  !gridView
-                                    ? "btn-primary"
-                                    : "btn-outline-primary"
                                 }`}
                               onClick={() => setGridView(false)}
                             >
@@ -252,7 +233,6 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                             </button>
                           </div>
                         </div>
-                        </div>
                       )}
                     </div>
                     <div className="dropdown z-2">
@@ -266,7 +246,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         <i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
                       </button>
 
-                      <ul className="dropdown-menu dropdown-menu-end shadow-sm ">
+                      <ul className="dropdown-menu dropdown-menu-end shadow-sm p-2" style={{ minWidth: "220px" }}>
                         {activeTab === "contacts" && (
                           <li className="dropdown-item d-flex align-items-center">
                             <div className="form-check form-switch mb-0">
@@ -276,73 +256,30 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                                 role="switch"
                                 id="inactiveContactsSwitch"
                                 checked={showActive}
-                                onChange={(e) =>
+                                onChange={(e) => setShowActive(e.target.checked)}
-                                  setShowActive(e.target.checked)
-                                }
                               />
                             </div>
-                            <span>
+                            <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
-                              {showActive
-                                ? "Active Contacts"
-                                : "Inactive Contacts"}
-                            </span>
                           </li>
                         )}
                         <li>
-                          <button
+                          <button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("csv")}>
-                            className="dropdown-item d-flex align-items-center gap-2"
+                            <i className="bx bx-file"></i><span>Export to CSV</span>
-                            onClick={() => handleExport("csv")}
-                          >
-                            <i className="bx bx-file"></i>
-                            <span>Export to CSV</span>
                           </button>
                         </li>
                         <li>
-                          <button
+                          <button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("excel")}>
-                            className="dropdown-item d-flex align-items-center gap-2"
+                            <i className="bx bx-spreadsheet"></i><span>Export to Excel</span>
-                            onClick={() => handleExport("excel")}
-                          >
-                            <i className="bx bx-spreadsheet"></i>
-                            <span>Export to Excel</span>
                           </button>
                         </li>
                         <li>
-                          <button
+                          <button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("pdf")}>
-                            className="dropdown-item d-flex align-items-center gap-2"
+                            <i className="bx bxs-file-pdf"></i><span>Export to PDF</span>
-                            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" && (
+                        {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
-                          <li>
-                            <hr className="dropdown-divider" />
-                          </li>
-                        )}
                       </ul>
                     </div>
                   </div>