From 81712a0695d89b0172e26956458cf4a60e1316bf Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 30 Jul 2025 19:33:01 +0530
Subject: [PATCH] Expense List display group by selected filed

---
 src/components/Expenses/ExpenseList.jsx | 378 ++++++++++--------------
 1 file changed, 164 insertions(+), 214 deletions(-)

diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index 23df9eec..d2254193 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -4,14 +4,14 @@ import Avatar from "../common/Avatar";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 import Pagination from "../common/Pagination";
-import { APPROVE_EXPENSE, ITEMS_PER_PAGE } from "../../utils/constants";
-import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
+import { APPROVE_EXPENSE } from "../../utils/constants";
+import { getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
 
-const ExpenseList = ({ filters }) => {
+const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { setViewExpense, setManageExpenseModal } = useExpenseContext();
@@ -21,8 +21,12 @@ const ExpenseList = ({ filters }) => {
   const pageSize = 10;
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
-  const { data, isLoading, isError, isInitialLoading, error, isFetching } =
-    useExpenseList(10, currentPage, filters);
+  const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
+    pageSize,
+    currentPage,
+    filters
+  );
+
   const SelfId = useSelector(
     (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
   );
@@ -40,70 +44,65 @@ const ExpenseList = ({ filters }) => {
     );
   };
 
-  if (isInitialLoading) return <ExpenseTableSkeleton />;
-  if (isError) return <div>{error}</div>;
-  const items = data?.data ?? [];
-  const totalPages = data?.totalPages ?? 1;
-  const hasMore = currentPage < totalPages;
-
   const paginate = (page) => {
-    if (page >= 1 && page <= totalPages) {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
   };
-  const STATUS_ORDER = [
-    "Draft",
-    "Review Pending",
-    "Approval Pending",
-    "Process Pending",
-    "Processed",
-    "Paid",
-    "Rejected",
-  ];
 
-  const groupExpensesByDateAndStatus = (expenses) => {
-    const grouped = {};
-
-    expenses.forEach((expense) => {
-      const dateKey = expense.transactionDate.split("T")[0];
-      if (!grouped[dateKey]) grouped[dateKey] = [];
-      grouped[dateKey].push(expense);
-    });
-
-    const sortedDates = Object.keys(grouped).sort(
-      (a, b) => new Date(b) - new Date(a)
-    );
-
-    return sortedDates.map((date) => ({
-      date,
-      expenses: grouped[date].sort((a, b) => {
-        return (
-          STATUS_ORDER.indexOf(a.status.name) -
-          STATUS_ORDER.indexOf(b.status.name)
-        );
-      }),
-    }));
+  const groupByField = (items, field) => {
+    return items.reduce((acc, item) => {
+      let key;
+      switch (field) {
+        case "transactionDate":
+          key = item.transactionDate?.split("T")[0];
+          break;
+        case "status":
+          key = item.status?.displayName || "Unknown";
+          break;
+        case "paidBy":
+          key = `${item.paidBy?.firstName ?? ""} ${item.paidBy?.lastName ?? ""}`.trim();
+          break;
+        case "project":
+          key = item.project?.name || "Unknown Project";
+          break;
+        case "paymentMode":
+          key = item.paymentMode?.name || "Unknown Mode";
+          break;
+        case "expensesType":
+          key = item.expensesType?.name || "Unknown Type";
+          break;
+        default:
+          key = "Others";
+      }
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(item);
+      return acc;
+    }, {});
   };
 
+  if (isInitialLoading) return <ExpenseTableSkeleton />;
+  if (isError) return <div>{error}</div>;
+
+  const grouped = groupBy ? groupByField(data?.data ?? [], groupBy) : { All: data?.data ?? [] };
+  const IsGroupedByDate = ["transactionDate","createdAt"].includes(groupBy)
   return (
     <>
       {IsDeleteModalOpen && (
         <div
-          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
+          className={`modal fade show`}
           tabIndex="-1"
           role="dialog"
           style={{
-            display: IsDeleteModalOpen ? "block" : "none",
-            backgroundColor: IsDeleteModalOpen
-              ? "rgba(0,0,0,0.5)"
-              : "transparent",
+            display: "block",
+            backgroundColor: "rgba(0,0,0,0.5)",
           }}
           aria-hidden="false"
         >
           <ConfirmModal
-            type={"delete"}
-            header={"Delete Expense"}
-            message={"Are you sure you want delete?"}
+            type="delete"
+            header="Delete Expense"
+            message="Are you sure you want delete?"
             onSubmit={handleDelete}
             onClose={() => setIsDeleteModalOpen(false)}
             loading={isPending}
@@ -111,20 +110,15 @@ const ExpenseList = ({ filters }) => {
           />
         </div>
       )}
-      <div className="card ">
+
+      <div className="card">
         <div className="card-datatable table-responsive">
-          <div
-            id="DataTables_Table_0_wrapper"
-            className="dataTables_wrapper no-footer px-2"
-          >
-            <table
-              className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap px-3"
-              aria-describedby="DataTables_Table_0_info"
-              id="horizontal-example"
-            >
+          <div className="dataTables_wrapper no-footer px-2">
+            <table className="table border-top dataTable text-nowrap">
               <thead>
                 <tr>
-                  <th
+                  {![ groupBy].includes("expensesType") && (
+                      <th
                     className="sorting sorting_desc d-none d-sm-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
@@ -135,7 +129,9 @@ const ExpenseList = ({ filters }) => {
                   >
                     <div className="text-start ms-5">Expense Type</div>
                   </th>
-                  <th
+                  )}
+                  {![groupBy].includes("paymentMode") && (
+                      <th
                     className="sorting sorting_desc  d-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
@@ -146,7 +142,9 @@ const ExpenseList = ({ filters }) => {
                   >
                     <div className="text-start ">Payment Mode</div>
                   </th>
-                  <th
+                  )}
+                  {![groupBy].includes("paidBy") && (
+                        <th
                     className="sorting sorting_desc d-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
@@ -157,165 +155,117 @@ const ExpenseList = ({ filters }) => {
                   >
                     <div className="text-start ms-5">Paid By</div>
                   </th>
-
-                  <th
-                    className="sorting sorting_desc d-table-cell"
-                    tabIndex="0"
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Paid By: activate to sort column ascending"
-                    aria-sort="descending"
-                  >
-                    <div className="text-start ms-5">Submitted</div>
-                  </th>
-                  <th
-                    className="sorting  d-table-cell"
-                    tabIndex="0"
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Amount: activate to sort column ascending"
-                  >
-                    Amount
-                  </th>
-                  <th
-                    className="sorting"
-                    tabIndex="0"
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Status: activate to sort column ascending"
-                  >
-                    Status
-                  </th>
-                  <th
-                    className="sorting"
-                    tabIndex="0"
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Status: activate to sort column ascending"
-                  >
-                    Action
-                  </th>
+                  )}
+                  <th><div className="text-center">Submitted</div></th>
+                  <th className="text-end">Amount</th>
+                  {![groupBy].includes("status") && <th>Status</th>}
+                  <th>Action</th>
                 </tr>
               </thead>
               <tbody>
-                {!isInitialLoading &&
-                  groupExpensesByDateAndStatus(items).map(
-                    ({ date, expenses }) => (
-                      <>
-                        <tr key={`date-${date}`} className="tr-group text-dark">
-                          <td colSpan={7} className="text-start">
-                            <strong>{formatUTCToLocalTime(date)}</strong>
-                          </td>
-                        </tr>{" "}
-                        {expenses.map((expense) => (
-                          <tr key={expense.id}>
-                            <td className="text-start d-table-cell ms-5">
-                              {expense.expensesType?.name || "N/A"}
-                            </td>
-                            <td className="text-start  d-table-cell ms-5">
-                              {expense.paymentMode?.name || "N/A"}
-                            </td>
-                            <td className="text-start  d-table-cell ms-5">
-                              <div className="d-flex align-items-center">
-                                <Avatar
-                                  size="xs"
-                                  classAvatar="m-0"
-                                  firstName={expense.paidBy?.firstName}
-                                  lastName={expense.paidBy?.lastName}
-                                />
-                                <span>
-                                  {`${expense.paidBy?.firstName ?? ""} ${
-                                    expense.paidBy?.lastName ?? ""
-                                  }`.trim() || "N/A"}
-                                </span>
-                              </div>
-                            </td>
-                             <td className="d-table-cell text-center">
-                              {formatUTCToLocalTime(expense?.createdAt)}
-                            </td>
-                            <td className="d-table-cell text-end">
-                              <i className="bx bx-rupee b-xs"></i>
-                              {expense?.amount}
-                            </td>
-                            <td>
-                              <span
-                                className={`badge bg-label-${
-                                  getColorNameFromHex(expense?.status?.color) ||
-                                  "secondary"
-                                }`}
-                              >
-                                {expense.status?.displayName || "Unknown"}
+                {Object.entries(grouped).map(([group, expenses]) => (
+                  <React.Fragment key={group}>
+                    <tr className="tr-group text-dark">
+                      <td colSpan={7} className="text-start">
+                        <strong>{IsGroupedByDate ? formatUTCToLocalTime(group) : group}</strong>
+                      </td>
+                    </tr>
+                    {expenses.map((expense) => (
+                      <tr  key={expense.id}>
+                        {![groupBy].includes("expensesType") && (
+                          <td  className="text-start  d-table-cell ">{expense.expensesType?.name || "N/A"}</td>
+                        )}
+                        {![groupBy].includes("paymentMode") && (
+                          <td  className="text-start  d-table-cell ">{expense.paymentMode?.name || "N/A"}</td>
+                        )}
+                        {![ groupBy].includes("paidBy") && (
+                          <td  className="text-start  d-table-cell ">
+                            <div className="d-flex align-items-center">
+                              <Avatar
+                                size="xs"
+                                classAvatar="m-0"
+                                firstName={expense.paidBy?.firstName}
+                                lastName={expense.paidBy?.lastName}
+                              />
+                              <span>
+                                {`${expense.paidBy?.firstName ?? ""} ${
+                                  expense.paidBy?.lastName ?? ""
+                                }`.trim() || "N/A"}
                               </span>
-                            </td>
-                            <td>
-                              <div className="d-flex justify-content-center align-items-center gap-2">
-                                <span className="cursor-pointer">
-                                  <i
-                                    className="bx bx-show text-primary"
-                                    onClick={() =>
-                                      setViewExpense({
-                                        expenseId: expense.id,
-                                        view: true,
-                                      })
-                                    }
-                                  ></i>
-                                </span>
-
-                                {(expense.status.name === "Draft" ||
-                                  expense.status.name === "Rejected") &&
-                                  expense.createdBy.id === SelfId && (
-                                    <span className="cursor-pointer">
-                                      <i
-                                        className="bx bx-edit bx-sm text-secondary"
-                                        onClick={() =>
-                                          setManageExpenseModal({
-                                            IsOpen: true,
-                                            expenseId: expense.id,
-                                          })
-                                        }
-                                      ></i>
-                                    </span>
-                                  )}
-
-                                {expense.status.name === "Draft" &&
-                                  expense?.createdBy?.id === SelfId && (
-                                    <span className="cursor-pointer">
-                                      <i
-                                        className="bx bx-trash bx-sm text-danger"
-                                        onClick={() => {
-                                          setIsDeleteModalOpen(true);
-                                          setDeletingId(expense.id);
-                                        }}
-                                      ></i>
-                                    </span>
-                                  )}
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </>
-                    )
-                  )}
-
-                {!isInitialLoading && items.length === 0 && (
-                  <tr rowSpan={8} style={{ height: "200px" }}>
-                    <td colSpan={8}>No Expnese Found</td>
+                            </div>
+                          </td>
+                        )}
+                        <td className="d-table-cell text-center">{formatUTCToLocalTime(expense?.createdAt)}</td>
+                        <td className="d-table-cell text-end">
+                          <i className="bx bx-rupee b-xs"></i>
+                          {expense?.amount}
+                        </td>
+                        {![ groupBy].includes("status") && (
+                          <td>
+                            <span
+                              className={`badge bg-label-${
+                                getColorNameFromHex(expense?.status?.color) ||
+                                "secondary"
+                              }`}
+                            >
+                              {expense.status?.name || "Unknown"}
+                            </span>
+                          </td>
+                        )}
+                        <td>
+                          <div className="d-flex justify-content-center gap-2">
+                            <i
+                              className="bx bx-show text-primary cursor-pointer"
+                              onClick={() =>
+                                setViewExpense({ expenseId: expense.id, view: true })
+                              }
+                            ></i>
+                            {(expense.status.name === "Draft" ||
+                              expense.status.name === "Rejected") &&
+                              expense.createdBy.id === SelfId && (
+                                <i
+                                  className="bx bx-edit text-secondary cursor-pointer"
+                                  onClick={() =>
+                                    setManageExpenseModal({
+                                      IsOpen: true,
+                                      expenseId: expense.id,
+                                    })
+                                  }
+                                ></i>
+                              )}
+                            {expense.status.name === "Draft" &&
+                              expense?.createdBy?.id === SelfId && (
+                                <i
+                                  className="bx bx-trash text-danger cursor-pointer"
+                                  onClick={() => {
+                                    setIsDeleteModalOpen(true);
+                                    setDeletingId(expense.id);
+                                  }}
+                                ></i>
+                              )}
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </React.Fragment>
+                ))}
+                {data?.data?.length === 0 && (
+                  <tr>
+                    <td colSpan={8} className="text-center py-4">
+                      No Expense Found
+                    </td>
                   </tr>
                 )}
               </tbody>
             </table>
+            {data?.data?.length > 0 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={data.totalPages}
+                onPageChange={paginate}
+              />
+            )}
           </div>
-          {!isInitialLoading && items.length > 0 && (
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={paginate}
-            />
-          )}
         </div>
       </div>
     </>