admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fixed currency format list - Expense, PR

Browse Source
This commit is contained in:
pramod.mahajan 2025-11-07 17:09:07 +05:30
parent 4cbac98986
commit e962e02fbc
2 changed files with 95 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Expenses/ExpenseList.jsx
View File

@ -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,7 +85,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
displayField = "Status";
break;
case "submittedBy":
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
key = `${item?.createdBy?.firstName ?? ""} ${
item.createdBy?.lastName ?? ""
}`.trim();
displayField = "Submitted By";
break;
@ -139,11 +145,14 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
label: "Submitted By",
align: "text-start",
getValue: (e) =>
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
}`.trim() || "N/A",
customRender: (e) => (
<div className="d-flex align-items-center cursor-pointer"
onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
<div
className="d-flex align-items-center cursor-pointer"
onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
>
<Avatar
size="xs"
classAvatar="m-0"
@ -151,7 +160,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
lastName={e.createdBy?.lastName}
/>
<span className="text-truncate">
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
{`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
@ -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,7 +194,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
align: "text-center",
getValue: (e) => (
<span
className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
className={`badge bg-label-${
getColorNameFromHex(e?.status?.color) || "secondary"
}`}
>
{e.status?.name || "Unknown"}
@ -184,8 +203,17 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
),
},
];
const headers = ["Expense Category","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
if (isInitialLoading && !data) return <ExpenseTableSkeleton headers={headers} />;
const headers = [
"Expense Category",
"Payment Mode",
"Submitted By",
"Submitted",
"Amount",
"Status",
"Action",
];
if (isInitialLoading && !data)
return <ExpenseTableSkeleton headers={headers} />;
if (isError) return <div>{error?.message}</div>;
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"
>
<div className="dataTables_wrapper no-footer px-2 ">
<table className="table border-top dataTable text-nowrap">
<thead>
@ -288,12 +312,29 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
(col.isAlwaysVisible || groupBy !== col.key) && (
<td
key={col.key}
className={`d-table-cell ml-2 ${col.align ?? ""} `}
className={`d-table-cell ml-2 ${
col.align ?? ""
} `}
>
<div className={`d-flex px-2 ${col.key === "status" ? "justify-content-center":""}
${col.key === "amount" ? "justify-content-end":""}
${col.key === "submitted" ? "justify-content-center":""}
`}>{col.customRender
<div
className={`d-flex px-2 ${
col.key === "status"
? "justify-content-center"
: ""
}
${
col.key === "amount"
? "justify-content-end"
: ""
}
${
col.key === "submitted"
? "justify-content-center"
: ""
}
`}
>
{col.customRender
? col.customRender(expense)
: col.getValue(expense)}
</div>

24
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -6,6 +6,7 @@ import {
} from "../../utils/constants";
import {
formatCurrency,
formatFigure,
getColorNameFromHex,
useDebounce,
} from "../../utils/appUtils";
@ -43,7 +44,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
displayField = "Status";
break;
case "submittedBy":
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
key = `${item?.createdBy?.firstName ?? ""} ${
item.createdBy?.lastName ?? ""
}`.trim();
displayField = "Submitted By";
break;
@ -97,7 +99,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
label: "Submitted By",
align: "text-start",
getValue: (e) =>
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
}`.trim() || "N/A",
customRender: (e) => (
<div
@ -111,7 +114,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
lastName={e.createdBy?.lastName}
/>
<span className="text-truncate">
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
{`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
@ -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,7 +143,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
align: "text-center",
getValue: (e) => (
<span
className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
className={`badge bg-label-${
getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
}`}
>
{e?.expenseStatus?.name || "Unknown"}
@ -175,8 +181,8 @@ 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 ?? [] };