dynamically set group by filed

Reviewed-on: #315
Merged

src/components/Expenses/ExpenseList.jsx

@@ -4,14 +4,16 @@ 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 { APPROVE_EXPENSE } from "../../utils/constants";
-import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
+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 +23,12 @@ const ExpenseList = ({ filters }) => {
   const pageSize = 10;
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
-  const { data, isLoading, isError, isInitialLoading, error, isFetching } =
+  const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
-    useExpenseList(10, currentPage, filters);
+    pageSize,
+    currentPage,
+    filters
+  );
+
   const SelfId = useSelector(
     (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
   );
@@ -40,70 +46,128 @@ 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",
+  const groupByField = (items, field) => {
-    "Review Pending",
+    return items.reduce((acc, item) => {
-    "Approval Pending",
+      let key;
-    "Process Pending",
+      switch (field) {
-    "Processed",
+        case "transactionDate":
-    "Paid",
+          key = item.transactionDate?.split("T")[0];
-    "Rejected",
+          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;
+    }, {});
+  };
+
+  const expenseColumns = [
+    {
+      key: "expensesType",
+      label: "Expense Type",
+      getValue: (e) => e.expensesType?.name || "N/A",
+      align:"text-start",
+    },
+    {
+      key: "paymentMode",
+      label: "Payment Mode",
+      getValue: (e) => e.paymentMode?.name || "N/A",
+      align:"text-start"
+    },
+    {
+      key: "paidBy",
+      label: "Paid By",
+       align:"text-start",
+      getValue: (e) =>
+        `${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A",
+      customRender: (e) => (
+        <div className="d-flex align-items-center">
+          <Avatar
+            size="xs"
+            classAvatar="m-0"
+            firstName={e.paidBy?.firstName}
+            lastName={e.paidBy?.lastName}
+          />
+          <span>
+            {`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A"}
+          </span>
+        </div>
+      )
+    },
+    {
+      key: "submitted",
+      label: "Submitted",
+      getValue: (e) => formatUTCToLocalTime(e?.createdAt),
+      isAlwaysVisible: true
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      getValue: (e) => (
+        <>
+          <i className="bx bx-rupee b-xs"></i> {e?.amount}
+        </>
+      ),
+      isAlwaysVisible: true,
+      align: "text-end"
+    },
+    {
+      key: "status",
+      label: "Status",
+      align:"text-center",
+      getValue: (e) => (
+        <span className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"}`}>
+          {e.status?.name || "Unknown"}
+        </span>
+      )
+    }
   ];
 
-  const groupExpensesByDateAndStatus = (expenses) => {
+  if (isInitialLoading) return <ExpenseTableSkeleton />;
-    const grouped = {};
+  if (isError) return <div>{error}</div>;
 
-    expenses.forEach((expense) => {
+  const grouped = groupBy ? groupByField(data?.data ?? [], groupBy) : { All: data?.data ?? [] };
-      const dateKey = expense.transactionDate.split("T")[0];
+  const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
-      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)
-        );
-      }),
-    }));
-  };
 
   return (
     <>
       {IsDeleteModalOpen && (
         <div
-          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
+          className={`modal fade show`}
           tabIndex="-1"
           role="dialog"
           style={{
-            display: IsDeleteModalOpen ? "block" : "none",
+            display: "block",
-            backgroundColor: IsDeleteModalOpen
+            backgroundColor: "rgba(0,0,0,0.5)"
-              ? "rgba(0,0,0,0.5)"
-              : "transparent",
           }}
           aria-hidden="false"
         >
           <ConfirmModal
-            type={"delete"}
+            type="delete"
-            header={"Delete Expense"}
+            header="Delete Expense"
-            message={"Are you sure you want delete?"}
+            message="Are you sure you want delete?"
             onSubmit={handleDelete}
             onClose={() => setIsDeleteModalOpen(false)}
             loading={isPending}
@@ -111,215 +175,107 @@ const ExpenseList = ({ filters }) => {
           />
         </div>
       )}
+
       <div className="card">
         <div className="card-datatable table-responsive">
-          <div
+          <div className="dataTables_wrapper no-footer px-2">
-            id="DataTables_Table_0_wrapper"
+            <table className="table border-top dataTable text-nowrap">
-            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"
-            >
               <thead>
                 <tr>
+                  {expenseColumns.map(
+                    (col) =>
+                      (col.isAlwaysVisible || groupBy !== col.key) && (
                         <th
-                    className="sorting sorting_desc d-none d-sm-table-cell"
+                          key={col.key}
-                    tabIndex="0"
+                          className={`sorting d-table-cell`}
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Expense Type: activate to sort column ascending"
                           aria-sort="descending"
                         >
-                    <div className="text-start ms-5">Expense Type</div>
+                          <div className={`${col.align}`}>{col.label}</div>
-                  </th>
-                  <th
-                    className="sorting sorting_desc  d-table-cell"
-                    tabIndex="0"
-                    aria-controls="DataTables_Table_0"
-                    rowSpan="1"
-                    colSpan="1"
-                    aria-label="Payment Mode: activate to sort column ascending"
-                    aria-sort="descending"
-                  >
-                    <div className="text-start ">Payment Mode</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">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>Action</th>
                 </tr>
               </thead>
               <tbody>
-                {!isInitialLoading &&
+                {Object.entries(grouped).map(([group, expenses]) => (
-                  groupExpensesByDateAndStatus(items).map(
+                  <React.Fragment key={group}>
-                    ({ date, expenses }) => (
+                    <tr className="tr-group text-dark">
-                      <>
+                      <td colSpan={8} className="text-start">
-                        <tr key={`date-${date}`} className="tr-group text-dark">
+                        <strong>{IsGroupedByDate ? formatUTCToLocalTime(group) : group}</strong>
-                          <td colSpan={7} className="text-start">
-                            <strong>{formatUTCToLocalTime(date)}</strong>
                       </td>
-                        </tr>{" "}
+                    </tr>
                     {expenses.map((expense) => (
                       <tr key={expense.id}>
-                            <td className="text-start d-table-cell ms-5">
+                        {expenseColumns.map(
-                              {expense.expensesType?.name || "N/A"}
+                          (col) =>
-                            </td>
+                            (col.isAlwaysVisible || groupBy !== col.key) && (
-                            <td className="text-start  d-table-cell ms-5">
+                              <td key={col.key} className={`d-table-cell ${col.align ?? ""}`}>
-                              {expense.paymentMode?.name || "N/A"}
+                                {col.customRender
-                            </td>
+                                  ? col.customRender(expense)
-                            <td className="text-start  d-table-cell ms-5">
+                                  : col.getValue(expense)}
-                              <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
+                          <div className="d-flex justify-content-center gap-2">
-                                className={`badge bg-label-${
-                                  getColorNameFromHex(expense?.status?.color) ||
-                                  "secondary"
-                                }`}
-                              >
-                                {expense.status?.displayName || "Unknown"}
-                              </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"
+                              className="bx bx-show text-primary cursor-pointer"
                               onClick={() =>
-                                      setViewExpense({
+                                setViewExpense({ expenseId: expense.id, view: true })
-                                        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"
+                                  className="bx bx-edit text-secondary cursor-pointer"
                                   onClick={() =>
                                     setManageExpenseModal({
                                       IsOpen: true,
-                                            expenseId: expense.id,
+                                      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"
+                                  className="bx bx-trash text-danger cursor-pointer"
                                   onClick={() => {
                                     setIsDeleteModalOpen(true);
                                     setDeletingId(expense.id);
                                   }}
                                 ></i>
-                                    </span>
                               )}
                           </div>
                         </td>
                       </tr>
                     ))}
-                      </>
+                  </React.Fragment>
-                    )
+                ))}
-                  )}
+                {data?.data?.length === 0 && (
-
+                  <tr>
-                {!isInitialLoading && items.length === 0 && (
+                    <td colSpan={8} className="text-center py-4">
-                  <tr rowSpan={8} style={{ height: "200px" }}>
+                      No Expense Found
-                    <td colSpan={8}>No Expnese Found</td>
+                    </td>
                   </tr>
                 )}
               </tbody>
             </table>
-          </div>
+            {data?.data?.length > 0 && (
-          {!isInitialLoading && items.length > 0 && (
               <Pagination
                 currentPage={currentPage}
-              totalPages={totalPages}
+                totalPages={data.totalPages}
                 onPageChange={paginate}
               />
             )}
           </div>
         </div>
+      </div>
     </>
   );
 };
 
 export default ExpenseList;
+

src/components/Expenses/ExpenseSchema.js

@@ -16,7 +16,19 @@ export const ExpenseSchema = (expenseTypes) => {
       expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
       paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
       paidById: z.string().min(1, { message: "Employee name is required" }),
-      transactionDate: z.string().min(1, { message: "Date is required" }),
+      transactionDate: z
+    .string()
+    .min(1, { message: "Date is required" })
+    .refine((val) => {
+      const selected = new Date(val);
+      const today = new Date();
+
+      // Set both to midnight to avoid time-related issues
+      selected.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+
+      return selected <= today;
+    }, { message: "Future dates are not allowed" }),
       transactionId: z.string().optional(),
       description: z.string().min(1, { message: "Description is required" }),
       location: z.string().min(1, { message: "Location is required" }),

src/components/Expenses/ManageExpense.jsx

@@ -22,6 +22,7 @@ import {
   useUpdateExpense,
 } from "../../hooks/useExpense";
 import ExpenseSkeleton from "./ExpenseSkeleton";
+import moment from "moment";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -169,7 +170,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       handleClose();
     }
   );
-  const onSubmit = (payload) => {
+  const onSubmit = (fromdata) => {
+    let payload  = {...fromdata,transactionDate:  moment.utc(fromdata.transactionDate, 'YYYY-MM-DD').toISOString()}
     if (expenseToEdit) {
       const editPayload = { ...payload, id: data.id };
       ExpenseUpdate({ id: data.id, payload: editPayload });