diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index 50b7632e..92fd292b 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -12,6 +12,7 @@ import {
} from "../../utils/constants";
import {
formatCurrency,
+ formatFigure,
getColorNameFromHex,
useDebounce,
} from "../../utils/appUtils";
@@ -26,14 +27,18 @@ import { useNavigate } from "react-router-dom";
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
const [deletingId, setDeletingId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
- const { setViewExpense, setManageExpenseModal, filterData, removeFilterChip } = useExpenseContext();
+ const {
+ setViewExpense,
+ setManageExpenseModal,
+ filterData,
+ removeFilterChip,
+ } = useExpenseContext();
const IsExpenseEditable = useHasUserPermission();
const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
const [currentPage, setCurrentPage] = useState(1);
const debouncedSearch = useDebounce(searchText, 500);
const navigate = useNavigate();
-
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
ITEMS_PER_PAGE,
@@ -80,8 +85,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
displayField = "Status";
break;
case "submittedBy":
- key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
- }`.trim();
+ key = `${item?.createdBy?.firstName ?? ""} ${
+ item.createdBy?.lastName ?? ""
+ }`.trim();
displayField = "Submitted By";
break;
case "project":
@@ -139,11 +145,14 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
label: "Submitted By",
align: "text-start",
getValue: (e) =>
- `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
- }`.trim() || "N/A",
+ `${e.createdBy?.firstName ?? ""} ${
+ e.createdBy?.lastName ?? ""
+ }`.trim() || "N/A",
customRender: (e) => (
-
navigate(`/employee/${e.createdBy?.id}`)}>
+
navigate(`/employee/${e.createdBy?.id}`)}
+ >
{
lastName={e.createdBy?.lastName}
/>
- {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
- }`.trim() || "N/A"}
+ {`${e.createdBy?.firstName ?? ""} ${
+ e.createdBy?.lastName ?? ""
+ }`.trim() || "N/A"}
),
@@ -166,7 +176,15 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
{
key: "amount",
label: "Amount",
- getValue: (e) => <>{formatCurrency(e?.amount)}>,
+ getValue: (e) => (
+ <>
+ {" "}
+ {formatFigure(e?.amount, {
+ type: "currency",
+ currency: e?.currency?.currencyCode,
+ })}
+ >
+ ),
isAlwaysVisible: true,
align: "text-end",
},
@@ -176,16 +194,26 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
align: "text-center",
getValue: (e) => (
{e.status?.name || "Unknown"}
),
},
];
- const headers = ["Expense Category","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
- if (isInitialLoading && !data) return
;
+ const headers = [
+ "Expense Category",
+ "Payment Mode",
+ "Submitted By",
+ "Submitted",
+ "Amount",
+ "Status",
+ "Action",
+ ];
+ if (isInitialLoading && !data)
+ return
;
if (isError) return
{error?.message}
;
const grouped = groupBy
@@ -210,7 +238,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
);
};
-
return (
<>
{IsDeleteModalOpen && (
@@ -238,9 +265,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
className="card-datatable table-responsive "
id="horizontal-example"
>
-
-
-
@@ -288,15 +312,32 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
(col.isAlwaysVisible || groupBy !== col.key) && (
|
- {col.customRender
- ? col.customRender(expense)
- : col.getValue(expense)}
-
+
+ {col.customRender
+ ? col.customRender(expense)
+ : col.getValue(expense)}
+
|
)
)}
@@ -385,13 +426,13 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
- {data?.data?.length > 0 && (
-
- )}
+ {data?.data?.length > 0 && (
+
+ )}
>
);
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index 20b3d470..20e9c4e1 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -6,6 +6,7 @@ import {
} from "../../utils/constants";
import {
formatCurrency,
+ formatFigure,
getColorNameFromHex,
useDebounce,
} from "../../utils/appUtils";
@@ -43,8 +44,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
displayField = "Status";
break;
case "submittedBy":
- key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
- }`.trim();
+ key = `${item?.createdBy?.firstName ?? ""} ${
+ item.createdBy?.lastName ?? ""
+ }`.trim();
displayField = "Submitted By";
break;
case "project":
@@ -97,8 +99,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
label: "Submitted By",
align: "text-start",
getValue: (e) =>
- `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
- }`.trim() || "N/A",
+ `${e.createdBy?.firstName ?? ""} ${
+ e.createdBy?.lastName ?? ""
+ }`.trim() || "N/A",
customRender: (e) => (
{
lastName={e.createdBy?.lastName}
/>
- {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
- }`.trim() || "N/A"}
+ {`${e.createdBy?.firstName ?? ""} ${
+ e.createdBy?.lastName ?? ""
+ }`.trim() || "N/A"}
),
@@ -128,9 +132,10 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
label: "Amount",
align: "text-end",
getValue: (e) =>
- e?.amount
- ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""}${e.amount.toLocaleString()}`
- : "N/A",
+ formatFigure(e?.amount, {
+ type: "currency",
+ currency: e?.currency?.currencyCode,
+ }),
},
{
key: "expenseStatus",
@@ -138,8 +143,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
align: "text-center",
getValue: (e) => (
{e?.expenseStatus?.name || "Unknown"}
@@ -175,10 +181,10 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
const grouped = groupBy
? Object.fromEntries(
- Object.entries(groupByField(data?.data ?? [], groupBy)).sort(([keyA], [keyB]) =>
- keyA.localeCompare(keyB)
+ Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
+ ([keyA], [keyB]) => keyA.localeCompare(keyB)
+ )
)
- )
: { All: data?.data ?? [] };
const IsGroupedByDate = [