fixed currency format list - Expense, PR
This commit is contained in:
parent
4cbac98986
commit
e962e02fbc
@ -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) => (
|
||||
<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,8 +160,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{`${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,16 +194,26 @@ 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"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
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,15 +312,32 @@ 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
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
</div>
|
||||
<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>
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
@ -385,13 +426,13 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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) => (
|
||||
<div
|
||||
className="d-flex align-items-center cursor-pointer"
|
||||
@ -111,8 +114,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{`${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,8 +143,9 @@ 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"}
|
||||
</span>
|
||||
@ -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 = [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user