Adding Export functionality in Expense.

src/components/Expenses/ExpenseList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
 import Avatar from "../common/Avatar";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
@@ -24,7 +24,7 @@ import ExpenseFilterChips from "./ExpenseFilterChips";
 import { defaultFilter } from "./ExpenseSchema";
 import { useNavigate } from "react-router-dom";
 
-const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
+const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRef, onDataFiltered }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const {
@@ -46,6 +46,12 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     filters,
     debouncedSearch
   );
+  
+  useEffect(() => {
+    if (onDataFiltered) {
+      onDataFiltered(data?.data ?? []);
+    }
+  }, [data, onDataFiltered]);
 
   const SelfId = useSelector(
     (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
@@ -258,7 +264,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           groupBy={groupBy}
         />
         <div
-          className="card-datatable table-responsive "
+          className="card-datatable table-responsive" ref={tableRef}
           id="horizontal-example"
         >
           <div className="dataTables_wrapper no-footer px-2 ">
@@ -313,8 +319,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                 >
                                   <div
                                     className={`d-flex px-2 ${col.key === "status"
-                                        ? "justify-content-center"
+                                      ? "justify-content-center"
-                                        : ""
+                                      : ""
                                       }
                                  ${col.key === "amount"
                                         ? "justify-content-end"

src/components/PaymentRequest/handleExpenseExport.jsx

@@ -0,0 +1,62 @@
+import moment from "moment";
+import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
+
+/**
+ * Handles exporting expenses data to CSV, Excel, PDF, or Print
+ * @param {"csv"|"excel"|"pdf"|"print"} type
+ * @param {Array} expenses - List of expenses
+ * @param {React.RefObject} tableRef - Table reference for printing
+ */
+const handleExpenseExport = (type, expenses, tableRef) => {
+  if (!expenses || expenses.length === 0) return;
+
+  // Map export data
+  const exportData = expenses.map((item) => ({
+    "Expense ID": item?.expenseUId ?? "-",
+    "Expense Category": item?.expenseCategory?.name ?? "-",
+    "Payment Mode": item?.paymentMode?.name ?? "-",
+    "Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
+    "Submitted": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
+    "Amount": item?.amount?.toLocaleString() ?? "-",
+    "Currency": item?.currency?.currencyCode ?? "-",
+    "Status": item?.status?.name ?? "-",
+    "Project": item?.project?.name ?? "-",
+  }));
+
+  // Define column order
+  const columns = [
+    "Expense ID",
+    "Expense Category",
+    "Payment Mode",
+    "Submitted By",
+    "Submitted",
+    "Amount",
+    "Currency",
+    "Status",
+    "Project",
+  ];
+
+  switch (type) {
+    case "csv":
+      exportToCSV(exportData, "expenses", columns);
+      break;
+
+    case "excel":
+      exportToExcel(exportData, "expenses", columns);
+      break;
+
+    case "pdf":
+      exportToPDF(exportData, "expenses", columns);
+      break;
+
+    case "print":
+      if (tableRef?.current) printTable(tableRef.current);
+      break;
+
+    default:
+      console.warn("Unhandled export type:", type);
+      break;
+  }
+};
+
+export default handleExpenseExport;

src/pages/Expense/ExpensePage.jsx

@@ -30,6 +30,7 @@ import {
   SearchSchema,
 } from "../../components/Expenses/ExpenseSchema";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import handleExpenseExport from "../../components/PaymentRequest/handleExpenseExport";
 
 // Context
 export const ExpenseContext = createContext();
@@ -70,6 +71,8 @@ const ExpensePage = () => {
   const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const [filterData, setFilterdata] = useState(defaultFilter);
+  const tableRef = useRef(null);
+  const [filteredData, setFilteredData] = useState([]);
   const removeFilterChip = (key, id) => {
     setFilters((prev) => {
       const updated = { ...prev };
@@ -114,6 +117,10 @@ const ExpensePage = () => {
     removeFilterChip,
   };
 
+  const handleExport = (type) => {
+    handleExpenseExport(type, filteredData, tableRef); // <-- corrected
+  };
+
   return (
     <ExpenseContext.Provider value={contextValue}>
       <div className="container-fluid">
@@ -126,17 +133,19 @@ const ExpensePage = () => {
             <div className="card my-3 px-sm-4 px-0">
               <div className="card-body py-2 px-3 me-n1">
                 <div className="row align-items-center">
-                  <div className="col-6">
+                  <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
-                    <input
+                    <div className="d-flex align-items-center flex-wrap gap-0">
-                      type="search"
+                      <input
-                      className="form-control form-control-sm w-auto"
+                        type="search"
-                      placeholder="Search Expense"
+                        className="form-control form-control-sm w-auto"
-                      value={searchText}
+                        placeholder="Search Expense"
-                      onChange={(e) => setSearchText(e.target.value)}
+                        value={searchText}
-                    />
+                        onChange={(e) => setSearchText(e.target.value)}
+                      />
+                    </div>
                   </div>
 
-                  <div className="col-6 text-end mt-2 mt-sm-0">
+                  <div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
                     {IsCreatedAble && (
                       <button
                         className="btn btn-sm btn-primary"
@@ -154,6 +163,47 @@ const ExpensePage = () => {
                         </span>
                       </button>
                     )}
+
+                    {/* 3-Dots Dropdown */}
+                    <div className="dropdown">
+                      <button
+                        className="btn btn-icon"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                      </button>
+
+                      <ul className="dropdown-menu dropdown-menu-end shadow-sm" style={{ minWidth: "220px" }}>
+                        <li>
+                          <button className="dropdown-item" onClick={() => handleExport("print")}>
+                            <i className="bx bx-printer me-2"></i> Print
+                          </button>
+                        </li>
+
+                        <li><hr className="dropdown-divider" /></li>
+
+                        <li>
+                          <button className="dropdown-item" onClick={() => handleExport("csv")}>
+                            <i className="bx bx-file me-2"></i> CSV
+                          </button>
+                        </li>
+
+                        <li>
+                          <button className="dropdown-item" onClick={() => handleExport("excel")}>
+                            <i className="bx bxs-file-export me-2"></i> Excel
+                          </button>
+                        </li>
+
+                        <li>
+                          <button className="dropdown-item" onClick={() => handleExport("pdf")}>
+                            <i className="bx bxs-file-pdf me-2"></i> PDF
+                          </button>
+                        </li>
+                      </ul>
+                    </div>
+
                   </div>
                 </div>
               </div>
@@ -163,6 +213,8 @@ const ExpensePage = () => {
               filters={filters}
               groupBy={groupBy}
               searchText={searchText}
+              tableRef={tableRef}
+              onDataFiltered={setFilteredData}
             />
           </>
         ) : (