From b1c23aab4d4b75eb988ff4263e5378776f670889 Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Sat, 4 Oct 2025 14:13:09 +0530 Subject: [PATCH] added expens group fied Name --- public/assets/css/core-extend.css | 4 ++ src/components/Dashboard/ExpenseAnalysis.jsx | 2 +- src/components/Dashboard/ExpenseStatus.jsx | 24 ++++--- .../Expenses/ExpenseFilterPanel.jsx | 2 +- src/components/Expenses/ExpenseList.jsx | 72 +++++++++++++------ src/components/Expenses/ViewExpense.jsx | 7 +- 6 files changed, 74 insertions(+), 37 deletions(-) diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css index a8f1f9a3..0df9f4d2 100644 --- a/public/assets/css/core-extend.css +++ b/public/assets/css/core-extend.css @@ -20,4 +20,8 @@ .text-md { font-size: 2rem; +} + +.text-md-b { + font-weight: normal; } \ No newline at end of file diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx index fb61c29f..4c813217 100644 --- a/src/components/Dashboard/ExpenseAnalysis.jsx +++ b/src/components/Dashboard/ExpenseAnalysis.jsx @@ -73,7 +73,7 @@ const { labels, series, total } = useMemo(() => { <>
-
Expense Breakdown
+
Expense Breakdown

Detailed project expenses

diff --git a/src/components/Dashboard/ExpenseStatus.jsx b/src/components/Dashboard/ExpenseStatus.jsx index ee2b2161..985a41b2 100644 --- a/src/components/Dashboard/ExpenseStatus.jsx +++ b/src/components/Dashboard/ExpenseStatus.jsx @@ -42,12 +42,14 @@ const ExpenseStatus = () => {
- Project Spendings:{" "} +
+ Project Spendings:{" "} + {`(All Processed Payments)`} +
{formatCurrency(data?.totalAmount)}
- {`(All Processed Payments)`}
{[ @@ -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 = () => {
handleNavigate(item.status)} + onClick={() => handleNavigate(item?.status)} >
- +
- {item.title} - - {formatCurrency(item.amount)} - + {item?.title} + {item?.amount ? + {formatCurrency(item?.amount)} + :""}
{" "} - {item.count}{" "} + {item?.count}{" "} diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx index 7a47ec6d..11242473 100644 --- a/src/components/Expenses/ExpenseFilterPanel.jsx +++ b/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(() => { diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx index affb44a0..31888f70 100644 --- a/src/components/Expenses/ExpenseList.jsx +++ b/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) => ( - <> - {formatCurrency(e?.amount)} - - ), + getValue: (e) => <>{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 }) => { {Object.keys(grouped).length > 0 ? ( - Object.entries(grouped).map(([group, expenses]) => ( - + Object.values(grouped).map(({ key, displayField, items }) => ( + - - {IsGroupedByDate - ? formatUTCToLocalTime(group) - : group} - +
+ {" "} + + {displayField} :{" "} + {" "} + + {IsGroupedByDate + ? formatUTCToLocalTime(key) + : key} + +
- {expenses.map((expense) => ( + {items?.map((expense) => ( {expenseColumns.map( (col) => @@ -274,7 +305,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => { } > )} - {canDetetExpense(expense) && ( { ) : ( -
+

No Expense Found

-
+
)} diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx index a59c445f..ac5963cd 100644 --- a/src/components/Expenses/ViewExpense.jsx +++ b/src/components/Expenses/ViewExpense.jsx @@ -106,11 +106,12 @@ const ViewExpense = ({ ExpenseId }) => { return (
-
-
-
Expense Details
+
+
+
Expense Details
+
{data?.expenseUId}
{/* Row 1 */}