Merge branch 'Issues_Jun_3W' of https://git.marcoaiot.com/admin/marco.pms.web into Issues_Jun_3W

src/pages/Directory/Directory.jsx

@@ -345,6 +345,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             loading={loading}
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
+            contactsToExport={contacts}
           />
         </div>
       </div>

src/pages/Directory/DirectoryListTableHeader.jsx

@@ -7,33 +7,38 @@ const DirectoryListTableHeader = ({ children }) => {
       <table className="table px-2">
         <thead>
           <tr>
-            <th colSpan={2}>
+            <th colSpan={2} className="text-start">
               <div className="d-flex align-items-center gap-1">
                 <span>Name</span>
               </div>
             </th>
             <th className="px-2 text-start">
-              <div className="d-flex text-center align-items-center gap-1 justify-content-start">
+              <div className="d-flex align-items-center gap-1">
                 <span>Email</span>
               </div>
             </th>
-            <th className="mx-2">
+            <th className="mx-2 text-start">
-              <div className="d-flex align-items-center m-0 p-0 gap-1">
+              <div className="d-flex align-items-center gap-1">
                 <span>Phone</span>
               </div>
             </th>
-            <th colSpan={2} className="mx-2 ps-20">
+            <th colSpan={2} className="mx-2 ps-20 text-start">
-              Organization
+              <span>Organization</span>
+            </th>
+            <th className="mx-2 text-start">
+              <span>Category</span>
+            </th>
+            <th className="text-start">
+              <span>Action</span>
             </th>
-            <th className="mx-2">Category</th>
-            <th>Action</th>
           </tr>
         </thead>
-        <tbody className="table-border-bottom-0 overflow-auto">
+        <tbody className="table-border-bottom-0 overflow-auto text-start">
           {children}
         </tbody>
       </table>
     </div>
   );
 };
+
 export default DirectoryListTableHeader;

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
 
 const DirectoryPageHeader = ({
   searchText,
@@ -17,17 +19,67 @@ const DirectoryPageHeader = ({
   loading,
   IsActive,
   setOpenBucketModal,
+  contactsToExport, // This prop receives the paginated data (currentItems)
 }) => {
-  const [filtered, setFiltered] = useState();
+  const [filtered, setFiltered] = useState(0);
+
+  const handleExport = (type) => {
+    // Check if there's data to export
+    if (!contactsToExport || contactsToExport.length === 0) {
+      console.warn("No data to export. The current view is empty.");
+      // Optionally, you might want to show a user-friendly toast message here
+      // showToast("No data to export on the current page.", "info");
+      return;
+    }
+
+    // --- Core Change: Map contactsToExport to a simplified format ---
+    // const simplifiedContacts = contactsToExport.map(contact => ({
+    //   Name: contact.name || '',
+    //   Organization: contact.organization || '', // Added Organization
+    //   Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '',
+    //   Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity
+    //   Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category'
+    // }));
+
+    const simplifiedContacts = contactsToExport.map(contact => ({
+      Name: contact.name || '',
+      Organization: contact.organization || '',
+      Email: contact.contactEmails && contact.contactEmails.length > 0
+        ? contact.contactEmails.map(email => email.emailAddress).join(', ')
+        : '',
+      Phone: contact.contactPhones && contact.contactPhones.length > 0
+        ? contact.contactPhones.map(phone => phone.phoneNumber).join(', ')
+        : '',
+      Category: contact.contactCategory ? contact.contactCategory.name : '',
+    }));
+
+    console.log("Kaerik", simplifiedContacts)
+    switch (type) {
+      case "csv":
+        exportToCSV(simplifiedContacts, "directory_contacts");
+        break;
+      case "excel":
+        exportToExcel(simplifiedContacts, "directory_contacts");
+        break;
+      case "pdf":
+        exportToPDF(simplifiedContacts, "directory_contacts");
+        break;
+      case "print":
+        printTable(simplifiedContacts, "directory_contacts");
+        break;
+      default:
+        break;
+    }
+  };
 
   useEffect(() => {
     setFiltered(
       tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
     );
   }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+
   return (
     <>
-      {/* <div className="row">vikas</div> */}
       <div className="row mx-0 px-0 align-items-center mt-2">
         <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
@@ -38,12 +90,11 @@ const DirectoryPageHeader = ({
             onChange={(e) => setSearchText(e.target.value)}
             style={{ width: "200px" }}
           />
-          <div className="d-flex gap-2">
+          <div className="d-flex gap-2 ">
             <button
               type="button"
-              className={`btn  btn-sm p-1 ${
+              className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
-                !listView ? "btn-primary" : "btn-outline-primary"
+                }`}
-              }`}
               onClick={() => setListView(false)}
               data-bs-toggle="tooltip"
               data-bs-offset="0,8"
@@ -55,9 +106,8 @@ const DirectoryPageHeader = ({
             </button>
             <button
               type="button"
-              className={`btn  btn-sm p-1 ${
+              className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
-                listView ? "btn-primary" : "btn-outline-primary"
+                }`}
-              }`}
               onClick={() => setListView(true)}
               data-bs-toggle="tooltip"
               data-bs-offset="0,8"
@@ -76,9 +126,8 @@ const DirectoryPageHeader = ({
                 aria-expanded="false"
               >
                 <i
-                  className={`fa-solid fa-filter ms-1 fs-5 ${
+                  className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
-                    filtered > 0 ? "text-primary" : "text-muted"
+                    }`}
-                  }`}
                 ></i>
 
                 {filtered > 0 && (
@@ -170,27 +219,63 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-0">
-          <label className="switch switch-primary align-self-start mb-2">
+          <label className="switch switch-primary mb-0">
             <input
               type="checkbox"
               className="switch-input me-3"
               onChange={() => setIsActive(!IsActive)}
-              value={IsActive}
+              checked={!IsActive}
               disabled={loading}
             />
             <span className="switch-toggle-slider">
               <span className="switch-on"></span>
               <span className="switch-off"></span>
             </span>
-            <span className=" list-inline-item ms-12 ">
+            <span className="ms-12 ">
               Show Inactive Contacts
             </span>
           </label>
+
+          {/* Export Dropdown */}
+          <div className="btn-group">
+            <button
+              type="button"
+              className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+              aria-label="Export options"
+              style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+            >
+              <i className="bx bx-dots-vertical-rounded bx-sm"></i>
+            </button>
+            <ul className="dropdown-menu">
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("print"); }}>
+                  <i className="bx bx-printer me-1"></i> Print
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
+                  <i className="bx bx-file me-1"></i> CSV
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("excel"); }}>
+                  <i className="bx bxs-file-export me-1"></i> Excel
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
+                  <i className="bx bxs-file-pdf me-1"></i> PDF
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </>
   );
 };
 
-export default DirectoryPageHeader;
+export default DirectoryPageHeader;

src/pages/employee/EmployeeList.jsx

@@ -6,13 +6,13 @@ import Avatar from "../../components/common/Avatar";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import ManageEmp from "../../components/Employee/ManageRole";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
-import { useProjects } from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects"; // Keep if you use projects elsewhere
-import { useProfile } from "../../hooks/useProfile";
+import { useProfile } from "../../hooks/useProfile"; // Keep if you use profile elsewhere
-import { hasUserPermission } from "../../utils/authUtils";
+import { hasUserPermission } from "../../utils/authUtils"; // Keep if you use this elsewhere
 import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import SuspendEmp from "../../components/Employee/SuspendEmp";
+import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
 import {
   exportToCSV,
   exportToExcel,
@@ -28,10 +28,6 @@ import { newlineChars } from "pdf-lib";
 import GlobalModel from "../../components/common/GlobalModel";
 
 const EmployeeList = () => {
-  // const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-  // const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
-  // const { projects, loading: projectLoading } = useProjects();
-
   const selectedProjectId = useSelector(
     (store) => store.localVariables.projectId
   );
@@ -41,9 +37,8 @@ const EmployeeList = () => {
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    // useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
     useEmployeesAllOrByProjectId(
-      showAllEmployees ? null : selectedProjectId,
+      showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
       showInactive
     );
 
@@ -74,7 +69,7 @@ const EmployeeList = () => {
     }
     const lowercasedText = text.toLowerCase();
     return data.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
       const email = item.email ? item.email.toLowerCase() : "";
       const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
       const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
@@ -106,13 +101,12 @@ const EmployeeList = () => {
       setEmployeeList(sorted);
       const results = applySearchFilter(sorted, searchText);
       setFilteredData(results);
-
     } else if (!loading && !employees) {
       setEmployeeList([]);
       setFilteredData([]);
     }
-  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]);
+  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]); // Add selectedProjectId to dependencies
-  
+
   const displayData = filteredData;
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -141,7 +135,7 @@ const EmployeeList = () => {
     }
     setShowModal(false);
     clearCacheKey("employeeProfile");
-    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
+    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -156,7 +150,7 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         // Recall data based on current filter states after deletion to refresh the table
-        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
         setemployeeLodaing(false);
         setIsDeleteModalOpen(false);
       })
@@ -205,7 +199,7 @@ const EmployeeList = () => {
 
   const handleToggle = (e) => {
     setShowInactive(e.target.checked);
-    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
+    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
   };
 
 const handleAllEmployeesToggle = (e) => {
@@ -230,10 +224,6 @@ const handleAllEmployeesToggle = (e) => {
     setIsDeleteModalOpen(true);
   };
 
-  // useEffect(() => {
-  //   setSelectedProject(selectedProjectId || "");
-  // }, [selectedProjectId]);
-
   useEffect(() => {
     if (!showAllEmployees) {
       recallEmployeeData(showInactive, selectedProjectId);
@@ -244,9 +234,9 @@ const handleAllEmployeesToggle = (e) => {
     (msg) => {
       if(employees.some((item) => item.id == msg.employeeId)){
         setEmployeeList([]);
-        recallEmployeeData(showInactive);
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
       }
-    },[employees]
+    },[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
@@ -379,8 +369,6 @@ const handleAllEmployeesToggle = (e) => {
                           className="form-control form-control-sm"
                           placeholder="Search User"
                           aria-controls="DataTables_Table_0"
-                        // The 'disabled' attribute is intentionally removed here
-                        // to keep the search box always active as requested.
                         />
                       </label>
                     </div>
@@ -736,4 +724,4 @@ const handleAllEmployeesToggle = (e) => {
   );
 };
 
-export default EmployeeList;
+export default EmployeeList;