Merge branch 'OnFieldWork_V1' of https://git.marcoaiot.com/admin/marco.pms.web into Kartik_Bug#1462

src/components/Activities/AttendcesLogs.jsx

@@ -133,9 +133,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
 
 
  useEffect(() => {
+  if (data?.length) {
     filtering(data);
+  }
 }, [data, showPending]);
 
+
   // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
     if (!searchTerm) {
@@ -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 {
@@ -250,12 +228,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 ">
+          <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"
@@ -270,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 ? (
@@ -370,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 && (

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)}>
+    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 d-flex justify-content-center">
+      <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">

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { useExpenseAnalysis } from "../../hooks/useDashboard_Data";
 import { useSelectedProject } from "../../slices/apiDataManager";
@@ -10,16 +10,12 @@ const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
 
   const methods = useForm({
-    defaultValues: {
+    defaultValues: { startDate: "", endDate: "" },
-      startDate: "",
-      endDate: "",
-    },
   });
 
   const { watch } = methods;
-
-
   const [startDate, endDate] = watch(["startDate", "endDate"]);
+
   const { data, isLoading, isError, error, isFetching } = useExpenseAnalysis(
     projectId,
     startDate ? localToUtc(startDate) : null,
@@ -28,16 +24,11 @@ const ExpenseAnalysis = () => {
 
   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]);
 
@@ -63,26 +54,34 @@ const { labels, series, total } = useMemo(() => {
         },
       },
     },
+    responsive: [
+      {
+        breakpoint: 576, // mobile breakpoint
+        options: {
+          chart: { width: "100%" },
+        },
+      },
+    ],
   };
 
-
   return (
     <>
-      <div className="card-header d-flex justify-content-between  align-items-center ">
+      {/* Header */}
-        <div>
+      <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
-          <h5 className="mb-1 card-title text-start">Expense Breakdown</h5>
+        <div className="text-start w-100">
-          <p className="card-subtitle">Category Wise Expense Breakdown</p>
+          <h5 className="mb-1 card-title">Expense Breakdown</h5>
+          <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p>
         </div>
 
-        <div className="text-end">
+        <div className="text-start text-sm-end w-75">
           <FormProvider {...methods}>
             <DateRangePicker1 />
           </FormProvider>
         </div>
       </div>
 
+      {/* Card body */}
       <div className="card-body position-relative">
-        {/* Initial loading: show full loader */}
         {isLoading && (
           <div
             className="d-flex justify-content-center align-items-center"
@@ -92,14 +91,12 @@ const { labels, series, total } = useMemo(() => {
           </div>
         )}
 
-        {/* Data display */}
         {!isLoading && report.length === 0 && (
           <div className="text-center py-5 text-muted">No data found</div>
         )}
 
         {!isLoading && report.length > 0 && (
           <>
-            {/* Overlay spinner for refetch */}
             {isFetching && (
               <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
                 <span>Loading...</span>
@@ -109,17 +106,18 @@ const { labels, series, total } = useMemo(() => {
             <div className="d-flex justify-content-center mb-3">
               <Chart
                 options={donutOptions}
-                series={report.map((item) => item.totalApprovedAmount || 0)}
+                series={series}
                 type="donut"
-                width="320"
+                width="100%"
+                height={320}
               />
             </div>
 
             <div className="mb-2 w-100">
-              <div className="row">
+              <div className="row g-2">
                 {report.map((item, idx) => (
                   <div
-                    className="col-6 d-flex justify-content-start align-items-start mb-2"
+                    className="col-12 col-sm-6 d-flex align-items-start"
                     key={idx}
                   >
                     <div className="avatar me-2">
@@ -127,9 +125,7 @@ const { labels, series, total } = useMemo(() => {
                         className="avatar-initial rounded-2"
                         style={{
                           backgroundColor:
-                            donutOptions.colors[
+                            donutOptions.colors[idx % donutOptions.colors.length],
-                              idx % donutOptions.colors.length
-                            ],
                         }}
                       >
                         <i className="bx bx-receipt fs-4"></i>

src/components/Dashboard/ExpenseByProject.jsx

@@ -129,7 +129,7 @@ const ExpenseByProject = () => {
           ))}
           {viewMode === "Category" && (
             <select
-              className="form-select form-select-sm ms-auto mb-3"
+              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}

src/components/Project/ProjectListView.jsx

@@ -136,6 +136,7 @@ const ProjectListView = ({
   };
   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>
@@ -257,8 +258,7 @@ const ProjectListView = ({
                 </li>
               ))}
               <li
-              className={`page-item ${
+                className={`page-item ${currentPage === totalPages && "disabled"
-                currentPage === totalPages && "disabled"
                   }`}
               >
                 <button
@@ -274,6 +274,7 @@ const ProjectListView = ({
           </nav>
         )}
       </div>
+    </div>
   );
 };
 

src/components/common/DateRangePicker.jsx

@@ -63,19 +63,18 @@ const DateRangePicker = ({
   };
 
   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"
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
         onClick={handleIconClick}
-        style={{ right: "22px", bottom: "-8px" }}
       />
     </div>
   );
@@ -183,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/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-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">

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"));
@@ -64,11 +70,49 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [ContactData, setContactData] = useState([]);
 
   const handleExport = (type) => {
-    if (activeTab === "notes" && type === "csv") {
+    let exportData = activeTab === "notes" ? notesData : ContactData;
-      exportToCSV(notesData, "notes.csv");
+    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") {
+        break;
-      exportToCSV(ContactData, "contact.csv");
+      default:
+        console.warn("Unsupported export type");
     }
   };
 
@@ -139,7 +183,8 @@ 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" : ""
+                      className={`nav-link ${
+                        activeTab === "notes" ? "active" : ""
                       } fs-6`}
                       onClick={(e) => handleTabClick("notes", e)}
                     >
@@ -149,7 +194,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </li>
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
+                      className={`nav-link ${
+                        activeTab === "contacts" ? "active" : ""
                       } fs-6`}
                       onClick={(e) => handleTabClick("contacts", e)}
                     >
@@ -182,16 +228,23 @@ 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"
+                                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"
+                                className={`btn btn-sm p-1 ${
+                                  !gridView
+                                    ? "btn-primary"
+                                    : "btn-outline-primary"
                                 }`}
                                 onClick={() => setGridView(false)}
                               >
@@ -199,6 +252,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                               </button>
                             </div>
                           </div>
+                        </div>
                       )}
                     </div>
                     <div className="dropdown z-2">
@@ -212,20 +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 ">
-                        <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>
-                        </li>
-
-                        {/* Divider */}
-                        {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
-
                         {activeTab === "contacts" && (
                           <li className="dropdown-item d-flex align-items-center">
                             <div className="form-check form-switch mb-0">
@@ -235,23 +276,80 @@ 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>
+                        </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>
           <div>
             <Suspense fallback={<MainDirectoryPageSkeleton />}>
               {activeTab === "notes" && (

src/pages/Directory/NotesPage.jsx

@@ -42,7 +42,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     };
   }, []);
 
-  // 🔹 Format data for export
+  // Format data for export
   const formatExportData = (notes) => {
     return notes.map((n) => ({
       ContactName: n.contactName || "",
@@ -59,7 +59,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     }));
   };
 
-  // 🔹 Pass formatted notes to parent for export
+  // Pass formatted notes to parent for export
   useEffect(() => {
     if (data?.data && onExport) {
       onExport(formatExportData(data.data));

src/pages/Expense/ExpensePage.jsx

@@ -20,6 +20,7 @@ import {
 } from "../../utils/constants";
 
 import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 // Context
 export const ExpenseContext = createContext();

src/utils/exportUtils.js

@@ -1,27 +0,0 @@
-// utils/exportUtils.js
-export const exportToCSV = (data, filename = "export.csv") => {
-  if (!data || data.length === 0) return;
-
-  const headers = Object.keys(data[0]);
-  const csvRows = [];
-
-  // Add headers
-  csvRows.push(headers.join(","));
-
-  // Add values
-  data.forEach(row => {
-    const values = headers.map(header => `"${row[header] ?? ""}"`);
-    csvRows.push(values.join(","));
-  });
-
-  // Create CSV Blob
-  const csvContent = csvRows.join("\n");
-  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-
-  // Create download link
-  const link = document.createElement("a");
-  const url = URL.createObjectURL(blob);
-  link.setAttribute("href", url);
-  link.setAttribute("download", filename);
-  link.click();
-};

src/utils/tableExportUtils.jsx

@@ -40,39 +40,52 @@ export const exportToExcel = (data, fileName = "data") => {
  * @param {Array} data - Array of objects to export
  * @param {string} fileName - File name for the PDF (optional)
  */
-export const exportToPDF = async (data, fileName = "data", columns = null) => {
+const sanitizeText = (text) => {
+  if (!text) return "";
+  // Replace all non-ASCII characters with "?" or remove them
+  return text.replace(/[^\x00-\x7F]/g, "?");
+};
+
+export const exportToPDF = async (data, fileName = "data", columns = null, options = {}) => {
   if (!data || data.length === 0) return;
 
   const pdfDoc = await PDFDocument.create();
   const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
 
-  // Landscape dimensions
+  // Default options
-  const pageWidth = 1000; // wider for more space
+  const {
+    columnWidths = [],  // array of widths per column
+    fontSizeHeader = 12,
+    fontSizeRow = 10,
+    rowHeight = 25,
+  } = options;
+
+  const pageWidth = 1000;
   const pageHeight = 600;
   let page = pdfDoc.addPage([pageWidth, pageHeight]);
   const margin = 30;
   let y = pageHeight - margin;
 
   const headers = columns || Object.keys(data[0]);
-  const rowHeight = 25; // slightly taller rows for readability
-  const columnSpacing = 150; // increase space between columns
 
   // Draw headers
   headers.forEach((header, i) => {
-    page.drawText(header, { x: margin + i * columnSpacing, y, font, size: 12 });
+    const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
+    page.drawText(header, { x, y, font, size: fontSizeHeader });
   });
   y -= rowHeight;
 
   // Draw rows
   data.forEach(row => {
     headers.forEach((header, i) => {
-      const text = row[header] ? row[header].toString() : '';
+      const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
-      page.drawText(text, { x: margin + i * columnSpacing, y, font, size: 10 });
+      const text = row[header] || '';
+      page.drawText(text, { x, y, font, size: fontSizeRow });
     });
     y -= rowHeight;
 
     if (y < margin) {
-      page = pdfDoc.addPage([pageWidth, pageHeight]); // landscape for new page
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
       y = pageHeight - margin;
     }
   });
@@ -87,6 +100,95 @@ export const exportToPDF = async (data, fileName = "data", columns = null) => {
 
 
 
+
+
+/**
+ * Export JSON data to PDF in a card-style format
+ * @param {Array} data - Array of objects to export
+ * @param {string} fileName - File name for the PDF (optional)
+ */
+export const exportToPDF1 = async (data, fileName = "data") => {
+  if (!data || data.length === 0) return;
+
+  const pdfDoc = await PDFDocument.create();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+
+  const pageWidth = 600;
+  const pageHeight = 800;
+  const margin = 30;
+  const cardSpacing = 20;
+  const cardPadding = 10;
+  let page = pdfDoc.addPage([pageWidth, pageHeight]);
+  let y = pageHeight - margin;
+
+  for (const item of data) {
+    const title = item.ContactName || "";
+    const subtitle = `by ${item.CreatedBy || ""} on ${item.CreatedAt || ""}`;
+    const body = item.Note || "";
+
+    const cardHeight = 80 + (body.length / 60) * 14; // approximate height for body text
+
+    if (y - cardHeight < margin) {
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
+      y = pageHeight - margin;
+    }
+
+    // Draw card border
+    page.drawRectangle({
+      x: margin,
+      y: y - cardHeight,
+      width: pageWidth - 2 * margin,
+      height: cardHeight,
+      borderColor: rgb(0.7, 0.7, 0.7),
+      borderWidth: 1,
+      color: rgb(1, 1, 1),
+    });
+
+    // Draw title
+    page.drawText(title, {
+      x: margin + cardPadding,
+      y: y - 20,
+      font: boldFont,
+      size: 12,
+      color: rgb(0.1, 0.1, 0.1),
+    });
+
+    // Draw subtitle
+    page.drawText(subtitle, {
+      x: margin + cardPadding,
+      y: y - 35,
+      font,
+      size: 10,
+      color: rgb(0.4, 0.4, 0.4),
+    });
+
+    // Draw body text (wrap manually)
+    const lines = body.match(/(.|[\r\n]){1,80}/g) || [];
+    lines.forEach((line, i) => {
+      page.drawText(line, {
+        x: margin + cardPadding,
+        y: y - 50 - i * 12,
+        font,
+        size: 10,
+        color: rgb(0.2, 0.2, 0.2),
+      });
+    });
+
+    y -= cardHeight + cardSpacing;
+  }
+
+  const pdfBytes = await pdfDoc.save();
+  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${fileName}.pdf`;
+  link.click();
+};
+
+
+
+
 /**
  * Print the HTML table by accepting the table element or a reference.
  * @param {HTMLElement} table - The table element (or ref) to print