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) && ( ) )} @@ -385,13 +426,13 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
-
{col.customRender - ? col.customRender(expense) - : col.getValue(expense)} -
+
+ {col.customRender + ? col.customRender(expense) + : col.getValue(expense)} +
- {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 = [