added expens group fied Name

public/assets/css/core-extend.css

@@ -20,4 +20,8 @@
 
 .text-md {
   font-size: 2rem;
+}
+
+.text-md-b { 
+  font-weight: normal;
 }

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -73,7 +73,7 @@ const { labels, series, total } = useMemo(() => {
     <>
       <div className="card-header d-flex justify-content-between align-items-center ">
         <div>
-          <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
+          <h5 className="mb-1 card-title">Expense Breakdown</h5>
           <p className="card-subtitle me-3">Detailed project expenses</p>
         </div>
 

src/components/Dashboard/ExpenseStatus.jsx

@@ -42,12 +42,14 @@ const ExpenseStatus = () => {
       <div className="card-body ">
         <div className=" py-0 text-start mb-2">
           <div className="d-flex justify-content-between align-items-center">
-            <span className="fs-5"> Project Spendings:</span>{" "}
+            <div className="d-block">
+              <span className="fs-5 d-block">Project Spendings:</span>{" "}
+              <small className="d-block text-gary-80">{`(All Processed Payments)`}</small>
+            </div>
             <span className="text-end text-royalblue text-md">
               {formatCurrency(data?.totalAmount)}
             </span>
           </div>
-          <small className=" text-gary-80">{`(All Processed Payments)`}</small>
         </div>
         <div className="report-list text-start">
           {[
@@ -60,7 +62,7 @@ const ExpenseStatus = () => {
               status: EXPENSE_STATUS.payment_pending,
             },
             {
-              title: "Pending Approver",
+              title: "Pending Approve",
               count: data?.processPending?.count,
               amount: data?.processPending?.totalAmount,
               icon: "fa-solid fa-check",
@@ -71,7 +73,7 @@ const ExpenseStatus = () => {
               title: "Pending Reviewer",
               count: data?.reviewPending?.count,
               amount: data?.reviewPending?.totalAmount,
-              icon: "bx bx-file",
+              icon: "bx bx-search-alt-2",
               iconColor: "text-secondary",
               status: EXPENSE_STATUS.review_pending,
             },
@@ -87,25 +89,25 @@ const ExpenseStatus = () => {
             <div
               key={idx}
               className="report-list-item rounded-2 mb-4  bg-lighter px-2 py-3 cursor-pointer"
-              onClick={()=>handleNavigate(item.status)}
+              onClick={() => handleNavigate(item?.status)}
             >
               <div className="d-flex align-items-center">
                 <div className="report-list-icon shadow-xs me-4">
                   <span className="d-inline-flex align-items-center justify-content-center rounded-circle border p-2">
-                    <i className={`${item.icon} ${item.iconColor} bx-lg`}></i>
+                    <i className={`${item?.icon} ${item?.iconColor} bx-lg`}></i>
                   </span>
                 </div>
                 <div className="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
                   <div className="d-flex flex-column gap-2">
-                    <span className="fw-bold">{item.title}</span>
+                    <span className="fw-bold">{item?.title}</span>
-                    <small className="mb-0 text-primary">
+                    {item?.amount ?   <small className="mb-0 text-primary">
-                      {formatCurrency(item.amount)}
+                      {formatCurrency(item?.amount)}
-                    </small>
+                    </small> :""}
                   </div>
                   <div className="">
                     {" "}
                     <small className="text-muted fs-semibold text-royalblue text-md">
-                      {item.count}{" "}
+                      {item?.count}{" "}
                     </small>
                     <small className="text-muted fs-semibold text-royalblue text-md">
                       <i className="bx bx-chevron-right"></i>

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -36,7 +36,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
-  const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
+  const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
   const [resetKey, setResetKey] = useState(0);
 
   const dynamicDefaultFilter = useMemo(() => {

src/components/Expenses/ExpenseList.jsx

@@ -10,7 +10,11 @@ import {
   EXPENSE_REJECTEDBY,
   ITEMS_PER_PAGE,
 } from "../../utils/constants";
-import { formatCurrency, getColorNameFromHex, useDebounce } from "../../utils/appUtils";
+import {
+  formatCurrency,
+  getColorNameFromHex,
+  useDebounce,
+} from "../../utils/appUtils";
 import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
@@ -59,40 +63,61 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const groupByField = (items, field) => {
     return items.reduce((acc, item) => {
       let key;
+      let displayField;
+
       switch (field) {
         case "transactionDate":
           key = item?.transactionDate?.split("T")[0];
+          displayField = "Transaction Date";
           break;
         case "status":
           key = item?.status?.displayName || "Unknown";
+          displayField = "Status";
           break;
         case "submittedBy":
           key = `${item?.createdBy?.firstName ?? ""} ${
             item.createdBy?.lastName ?? ""
           }`.trim();
+          displayField = "Submitted By";
           break;
         case "project":
           key = item?.project?.name || "Unknown Project";
+          displayField = "Project";
           break;
         case "paymentMode":
           key = item?.paymentMode?.name || "Unknown Mode";
+          displayField = "Payment Mode";
           break;
         case "expensesType":
           key = item?.expensesType?.name || "Unknown Type";
+          displayField = "Expense Type";
           break;
         case "createdAt":
-          key = item?.createdAt?.split("T")[0] || "Unknown Type";
+          key = item?.createdAt?.split("T")[0] || "Unknown Date";
+          displayField = "Created Date";
           break;
         default:
           key = "Others";
+          displayField = "Others";
       }
-      if (!acc[key]) acc[key] = [];
+
-      acc[key]?.push(item);
+      const groupKey = `${field}_${key}`; // unique key for object property
+      if (!acc[groupKey]) {
+        acc[groupKey] = { key, displayField, items: [] };
+      }
+
+      acc[groupKey].items.push(item);
       return acc;
     }, {});
   };
 
   const expenseColumns = [
+     {
+      key: "expenseUId",
+      label: "Expense Id",
+      getValue: (e) => e.expenseUId|| "N/A",
+      align: "text-start mx-2",
+    },
     {
       key: "expensesType",
       label: "Expense Type",
@@ -138,11 +163,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     {
       key: "amount",
       label: "Amount",
-      getValue: (e) => (
+      getValue: (e) => <>{formatCurrency(e?.amount)}</>,
-        <>
-           {formatCurrency(e?.amount)}
-        </>
-      ),
       isAlwaysVisible: true,
       align: "text-end",
     },
@@ -168,7 +189,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const grouped = groupBy
     ? groupByField(data?.data ?? [], groupBy)
     : { All: data?.data ?? [] };
-  const IsGroupedByDate = ["transactionDate", "createdAt"]?.includes(groupBy);
+  const IsGroupedByDate = [
+    { key: "transactionDate", displayField: "Transaction Date" },
+    { key: "createdAt", displayField: "created Date" },
+  ]?.includes(groupBy);
+
   const canEditExpense = (expense) => {
     return (
       (expense?.status?.id === EXPENSE_DRAFT ||
@@ -226,18 +251,24 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
               </thead>
               <tbody>
                 {Object.keys(grouped).length > 0 ? (
-                  Object.entries(grouped).map(([group, expenses]) => (
+                  Object.values(grouped).map(({ key, displayField, items }) => (
-                    <React.Fragment key={group}>
+                    <React.Fragment key={key}>
                       <tr className="tr-group text-dark">
                         <td colSpan={8} className="text-start">
-                          <strong>
+                          <div className="d-flex align-items-center">
-                            {IsGroupedByDate
+                            {" "}
-                              ? formatUTCToLocalTime(group)
+                            <small className="fs-6 ">
-                              : group}
+                              {displayField} :{" "}
-                          </strong>
+                            </small>{" "}
+                            <small className="fs-6  ms-3">
+                              {IsGroupedByDate
+                                ? formatUTCToLocalTime(key)
+                                : key}
+                            </small>
+                          </div>
                         </td>
                       </tr>
-                      {expenses.map((expense) => (
+                      {items?.map((expense) => (
                         <tr key={expense.id}>
                           {expenseColumns.map(
                             (col) =>
@@ -274,7 +305,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                   }
                                 ></i>
                               )}
-
                               {canDetetExpense(expense) && (
                                 <i
                                   className="bx bx-trash text-danger cursor-pointer"
@@ -293,9 +323,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                 ) : (
                   <tr>
                     <td colSpan={8} className="text-center border-0 ">
-                    <div className="py-8">
+                      <div className="py-8">
                         <p>No Expense Found</p>
-                    </div>
+                      </div>
                     </td>
                   </tr>
                 )}

src/components/Expenses/ViewExpense.jsx

@@ -106,11 +106,12 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-3">
+      <div className="row mb-1">
-        <div className="col-12 mb-3">
+        <div className="col-12 mb-1">
-          <h5 className="fw-semibold">Expense Details</h5>
+          <h5 className="fw-semibold m-0">Expense Details</h5>
           <hr />
         </div>
+         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
         {/* Row 1 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">