Expense List display group by selected filed
This commit is contained in:
parent
34373b6256
commit
81712a0695
@ -4,14 +4,14 @@ import Avatar from "../common/Avatar";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { APPROVE_EXPENSE, ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { APPROVE_EXPENSE } from "../../utils/constants";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const ExpenseList = ({ filters }) => {
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
@ -21,8 +21,12 @@ const ExpenseList = ({ filters }) => {
|
||||
const pageSize = 10;
|
||||
|
||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
||||
const { data, isLoading, isError, isInitialLoading, error, isFetching } =
|
||||
useExpenseList(10, currentPage, filters);
|
||||
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
|
||||
pageSize,
|
||||
currentPage,
|
||||
filters
|
||||
);
|
||||
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
@ -40,70 +44,65 @@ const ExpenseList = ({ filters }) => {
|
||||
);
|
||||
};
|
||||
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error}</div>;
|
||||
const items = data?.data ?? [];
|
||||
const totalPages = data?.totalPages ?? 1;
|
||||
const hasMore = currentPage < totalPages;
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
const STATUS_ORDER = [
|
||||
"Draft",
|
||||
"Review Pending",
|
||||
"Approval Pending",
|
||||
"Process Pending",
|
||||
"Processed",
|
||||
"Paid",
|
||||
"Rejected",
|
||||
];
|
||||
|
||||
const groupExpensesByDateAndStatus = (expenses) => {
|
||||
const grouped = {};
|
||||
|
||||
expenses.forEach((expense) => {
|
||||
const dateKey = expense.transactionDate.split("T")[0];
|
||||
if (!grouped[dateKey]) grouped[dateKey] = [];
|
||||
grouped[dateKey].push(expense);
|
||||
});
|
||||
|
||||
const sortedDates = Object.keys(grouped).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
|
||||
return sortedDates.map((date) => ({
|
||||
date,
|
||||
expenses: grouped[date].sort((a, b) => {
|
||||
return (
|
||||
STATUS_ORDER.indexOf(a.status.name) -
|
||||
STATUS_ORDER.indexOf(b.status.name)
|
||||
);
|
||||
}),
|
||||
}));
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
switch (field) {
|
||||
case "transactionDate":
|
||||
key = item.transactionDate?.split("T")[0];
|
||||
break;
|
||||
case "status":
|
||||
key = item.status?.displayName || "Unknown";
|
||||
break;
|
||||
case "paidBy":
|
||||
key = `${item.paidBy?.firstName ?? ""} ${item.paidBy?.lastName ?? ""}`.trim();
|
||||
break;
|
||||
case "project":
|
||||
key = item.project?.name || "Unknown Project";
|
||||
break;
|
||||
case "paymentMode":
|
||||
key = item.paymentMode?.name || "Unknown Mode";
|
||||
break;
|
||||
case "expensesType":
|
||||
key = item.expensesType?.name || "Unknown Type";
|
||||
break;
|
||||
default:
|
||||
key = "Others";
|
||||
}
|
||||
if (!acc[key]) acc[key] = [];
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
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)
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade ${IsDeleteModalOpen ? "show" : ""}`}
|
||||
className={`modal fade show`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{
|
||||
display: IsDeleteModalOpen ? "block" : "none",
|
||||
backgroundColor: IsDeleteModalOpen
|
||||
? "rgba(0,0,0,0.5)"
|
||||
: "transparent",
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ConfirmModal
|
||||
type={"delete"}
|
||||
header={"Delete Expense"}
|
||||
message={"Are you sure you want delete?"}
|
||||
type="delete"
|
||||
header="Delete Expense"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleDelete}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isPending}
|
||||
@ -111,20 +110,15 @@ const ExpenseList = ({ filters }) => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="card ">
|
||||
|
||||
<div className="card">
|
||||
<div className="card-datatable table-responsive">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper no-footer px-2"
|
||||
>
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap px-3"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
{![ groupBy].includes("expensesType") && (
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
@ -135,7 +129,9 @@ const ExpenseList = ({ filters }) => {
|
||||
>
|
||||
<div className="text-start ms-5">Expense Type</div>
|
||||
</th>
|
||||
<th
|
||||
)}
|
||||
{![groupBy].includes("paymentMode") && (
|
||||
<th
|
||||
className="sorting sorting_desc d-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
@ -146,7 +142,9 @@ const ExpenseList = ({ filters }) => {
|
||||
>
|
||||
<div className="text-start ">Payment Mode</div>
|
||||
</th>
|
||||
<th
|
||||
)}
|
||||
{![groupBy].includes("paidBy") && (
|
||||
<th
|
||||
className="sorting sorting_desc d-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
@ -157,165 +155,117 @@ const ExpenseList = ({ filters }) => {
|
||||
>
|
||||
<div className="text-start ms-5">Paid By</div>
|
||||
</th>
|
||||
|
||||
<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">Submitted</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting d-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Amount: activate to sort column ascending"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Action
|
||||
</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>
|
||||
<tbody>
|
||||
{!isInitialLoading &&
|
||||
groupExpensesByDateAndStatus(items).map(
|
||||
({ date, expenses }) => (
|
||||
<>
|
||||
<tr key={`date-${date}`} className="tr-group text-dark">
|
||||
<td colSpan={7} className="text-start">
|
||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
||||
</td>
|
||||
</tr>{" "}
|
||||
{expenses.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
<td className="text-start d-table-cell ms-5">
|
||||
{expense.expensesType?.name || "N/A"}
|
||||
</td>
|
||||
<td className="text-start d-table-cell ms-5">
|
||||
{expense.paymentMode?.name || "N/A"}
|
||||
</td>
|
||||
<td className="text-start d-table-cell ms-5">
|
||||
<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>
|
||||
<td>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(expense?.status?.color) ||
|
||||
"secondary"
|
||||
}`}
|
||||
>
|
||||
{expense.status?.displayName || "Unknown"}
|
||||
{Object.entries(grouped).map(([group, expenses]) => (
|
||||
<React.Fragment key={group}>
|
||||
<tr className="tr-group text-dark">
|
||||
<td colSpan={7} 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>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
<span className="cursor-pointer">
|
||||
<i
|
||||
className="bx bx-show text-primary"
|
||||
onClick={() =>
|
||||
setViewExpense({
|
||||
expenseId: expense.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
</span>
|
||||
|
||||
{(expense.status.name === "Draft" ||
|
||||
expense.status.name === "Rejected") &&
|
||||
expense.createdBy.id === SelfId && (
|
||||
<span className="cursor-pointer">
|
||||
<i
|
||||
className="bx bx-edit bx-sm text-secondary"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{expense.status.name === "Draft" &&
|
||||
expense?.createdBy?.id === SelfId && (
|
||||
<span className="cursor-pointer">
|
||||
<i
|
||||
className="bx bx-trash bx-sm text-danger"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
)}
|
||||
|
||||
{!isInitialLoading && items.length === 0 && (
|
||||
<tr rowSpan={8} style={{ height: "200px" }}>
|
||||
<td colSpan={8}>No Expnese Found</td>
|
||||
</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>
|
||||
)}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewExpense({ expenseId: expense.id, view: true })
|
||||
}
|
||||
></i>
|
||||
{(expense.status.name === "Draft" ||
|
||||
expense.status.name === "Rejected") &&
|
||||
expense.createdBy.id === SelfId && (
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
{expense.status.name === "Draft" &&
|
||||
expense?.createdBy?.id === SelfId && (
|
||||
<i
|
||||
className="bx bx-trash text-danger cursor-pointer"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
{data?.data?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={8} className="text-center py-4">
|
||||
No Expense Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!isInitialLoading && items.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user