From bb2d7b89239857d10af14cc19b8f994954ba4d81 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Fri, 10 Oct 2025 19:54:20 +0530
Subject: [PATCH] added pading in check-in check-out form

---
 src/components/Activities/AttendcesLogs.jsx   |  32 +--
 .../Activities/CheckCheckOutForm.jsx          |   6 +-
 src/pages/Directory/DirectoryPage.jsx         | 195 ++++++++++++------
 3 files changed, 137 insertions(+), 96 deletions(-)

diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index 439529ac..31c1522f 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -132,9 +132,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   }, [showPending]);
 
 
-  useEffect(() => {
+ useEffect(() => {
+  if (data?.length) {
     filtering(data);
-  }, [data, showPending]);
+  }
+}, [data, showPending]);
+
 
   // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
@@ -148,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 {
diff --git a/src/components/Activities/CheckCheckOutForm.jsx b/src/components/Activities/CheckCheckOutForm.jsx
index 3d7c5e0e..830c8db0 100644
--- a/src/components/Activities/CheckCheckOutForm.jsx
+++ b/src/components/Activities/CheckCheckOutForm.jsx
@@ -110,8 +110,8 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
   }, [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 for ${currentProject?.name}`
@@ -220,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">
diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx
index 7a0c4cce..ee9ce170 100644
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@@ -1,4 +1,3 @@
-
 import {
   useState,
   Suspense,
@@ -22,7 +21,13 @@ import ContactProfile from "../../components/Directory/ContactProfile";
 import GlobalModel from "../../components/common/GlobalModel";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useSelectedProject } from "../../slices/apiDataManager";
-import { exportToCSV, exportToExcel, exportToPDF, exportToPDF1, printTable } from "../../utils/tableExportUtils";
+import {
+  exportToCSV,
+  exportToExcel,
+  exportToPDF,
+  exportToPDF1,
+  printTable,
+} from "../../utils/tableExportUtils";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -65,46 +70,51 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [ContactData, setContactData] = useState([]);
 
   const handleExport = (type) => {
-  let exportData = activeTab === "notes" ? notesData : ContactData;
-  if (!exportData?.length) return;
+    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"];
+    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,
-        });
-      }
-      break;
-    default:
-      console.warn("Unsupported export type");
-  }
-};
+          // 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,
+          });
+        }
+        break;
+      default:
+        console.warn("Unsupported export type");
+    }
+  };
 
   const { data, isLoading, isError, error } = useBucketList();
 
@@ -173,8 +183,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 <ul className="nav nav-tabs">
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${activeTab === "notes" ? "active" : ""
-                        } fs-6`}
+                      className={`nav-link ${
+                        activeTab === "notes" ? "active" : ""
+                      } fs-6`}
                       onClick={(e) => handleTabClick("notes", e)}
                     >
                       <i className="bx bx-notepad bx-sm me-1_5"></i>
@@ -183,8 +194,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </li>
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
-                        } fs-6`}
+                      className={`nav-link ${
+                        activeTab === "contacts" ? "active" : ""
+                      } fs-6`}
                       onClick={(e) => handleTabClick("contacts", e)}
                     >
                       <i className="bx bxs-contact bx-sm me-1_5"></i>
@@ -216,21 +228,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                               value={searchContact}
                               onChange={(e) => setsearchContact(e.target.value)}
                             />
-                            <button
-                              className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
+                            <div className="d-none d-md-flex gap-2">
+                              {" "}
+                              <button
+                                className={`btn btn-sm p-1 ${
+                                  gridView
+                                    ? " btn-primary"
+                                    : " btn-outline-primary"
                                 }`}
-                              onClick={() => setGridView(true)}
-                            >
-                              <i className="bx bx-grid-alt"></i>
-                            </button>
-
-                            <button
-                              className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
+                                onClick={() => setGridView(true)}
+                              >
+                                <i className="bx bx-grid-alt"></i>
+                              </button>
+                              <button
+                                className={`btn btn-sm p-1 ${
+                                  !gridView
+                                    ? "btn-primary"
+                                    : "btn-outline-primary"
                                 }`}
-                              onClick={() => setGridView(false)}
-                            >
-                              <i className="bx bx-list-ul"></i>
-                            </button>
+                                onClick={() => setGridView(false)}
+                              >
+                                <i className="bx bx-list-ul"></i>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       )}
@@ -246,7 +266,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 p-2" style={{ minWidth: "220px" }}>
+                      <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">
@@ -256,30 +276,73 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                                 role="switch"
                                 id="inactiveContactsSwitch"
                                 checked={showActive}
-                                onChange={(e) => setShowActive(e.target.checked)}
+                                onChange={(e) =>
+                                  setShowActive(e.target.checked)
+                                }
                               />
                             </div>
-                            <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
+                            <span>
+                              {showActive
+                                ? "Active Contacts"
+                                : "Inactive Contacts"}
+                            </span>
                           </li>
                         )}
                         <li>
-                          <button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("csv")}>
-                            <i className="bx bx-file"></i><span>Export to CSV</span>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("csv")}
+                          >
+                            <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
+                            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
+                            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>}
+                        {activeTab === "contacts" && (
+                          <li>
+                            <hr className="dropdown-divider" />
+                          </li>
+                        )}
                       </ul>
                     </div>
                   </div>