dynamically set group by filed
This commit is contained in:
parent
81712a0695
commit
6fbc0411db
@ -11,6 +11,8 @@ import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
@ -81,11 +83,74 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
}, {});
|
||||
};
|
||||
|
||||
const expenseColumns = [
|
||||
{
|
||||
key: "expensesType",
|
||||
label: "Expense Type",
|
||||
getValue: (e) => e.expensesType?.name || "N/A",
|
||||
align:"text-start",
|
||||
},
|
||||
{
|
||||
key: "paymentMode",
|
||||
label: "Payment Mode",
|
||||
getValue: (e) => e.paymentMode?.name || "N/A",
|
||||
align:"text-start"
|
||||
},
|
||||
{
|
||||
key: "paidBy",
|
||||
label: "Paid By",
|
||||
align:"text-start",
|
||||
getValue: (e) =>
|
||||
`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={e.paidBy?.firstName}
|
||||
lastName={e.paidBy?.lastName}
|
||||
/>
|
||||
<span>
|
||||
{`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "submitted",
|
||||
label: "Submitted",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
isAlwaysVisible: true
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
<i className="bx bx-rupee b-xs"></i> {e?.amount}
|
||||
</>
|
||||
),
|
||||
isAlwaysVisible: true,
|
||||
align: "text-end"
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
align:"text-center",
|
||||
getValue: (e) => (
|
||||
<span className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"}`}>
|
||||
{e.status?.name || "Unknown"}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error}</div>;
|
||||
|
||||
const grouped = groupBy ? groupByField(data?.data ?? [], groupBy) : { All: data?.data ?? [] };
|
||||
const IsGroupedByDate = ["transactionDate","createdAt"].includes(groupBy)
|
||||
const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
|
||||
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
@ -95,7 +160,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
role="dialog"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
backgroundColor: "rgba(0,0,0,0.5)"
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
@ -117,48 +182,18 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
{![ groupBy].includes("expensesType") && (
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Expense Type: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Expense Type</div>
|
||||
</th>
|
||||
)}
|
||||
{![groupBy].includes("paymentMode") && (
|
||||
<th
|
||||
className="sorting sorting_desc d-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Payment Mode: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ">Payment Mode</div>
|
||||
</th>
|
||||
)}
|
||||
{![groupBy].includes("paidBy") && (
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<th
|
||||
className="sorting sorting_desc d-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Paid By: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Paid By</div>
|
||||
</th>
|
||||
key={col.key}
|
||||
className={`sorting d-table-cell`}
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align}`}>{col.label}</div>
|
||||
</th>
|
||||
)
|
||||
)}
|
||||
<th><div className="text-center">Submitted</div></th>
|
||||
<th className="text-end">Amount</th>
|
||||
{![groupBy].includes("status") && <th>Status</th>}
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -166,51 +201,21 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
{Object.entries(grouped).map(([group, expenses]) => (
|
||||
<React.Fragment key={group}>
|
||||
<tr className="tr-group text-dark">
|
||||
<td colSpan={7} className="text-start">
|
||||
<td colSpan={8} className="text-start">
|
||||
<strong>{IsGroupedByDate ? formatUTCToLocalTime(group) : group}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{expenses.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
{![groupBy].includes("expensesType") && (
|
||||
<td className="text-start d-table-cell ">{expense.expensesType?.name || "N/A"}</td>
|
||||
)}
|
||||
{![groupBy].includes("paymentMode") && (
|
||||
<td className="text-start d-table-cell ">{expense.paymentMode?.name || "N/A"}</td>
|
||||
)}
|
||||
{![ groupBy].includes("paidBy") && (
|
||||
<td className="text-start d-table-cell ">
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={expense.paidBy?.firstName}
|
||||
lastName={expense.paidBy?.lastName}
|
||||
/>
|
||||
<span>
|
||||
{`${expense.paidBy?.firstName ?? ""} ${
|
||||
expense.paidBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="d-table-cell text-center">{formatUTCToLocalTime(expense?.createdAt)}</td>
|
||||
<td className="d-table-cell text-end">
|
||||
<i className="bx bx-rupee b-xs"></i>
|
||||
{expense?.amount}
|
||||
</td>
|
||||
{![ groupBy].includes("status") && (
|
||||
<td>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(expense?.status?.color) ||
|
||||
"secondary"
|
||||
}`}
|
||||
>
|
||||
{expense.status?.name || "Unknown"}
|
||||
</span>
|
||||
</td>
|
||||
<tr key={expense.id}>
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td key={col.key} className={`d-table-cell ${col.align ?? ""}`}>
|
||||
{col.customRender
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
@ -228,7 +233,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
expenseId: expense.id
|
||||
})
|
||||
}
|
||||
></i>
|
||||
@ -273,3 +278,4 @@ const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
};
|
||||
|
||||
export default ExpenseList;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user