373 lines
13 KiB
JavaScript
373 lines
13 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
EXPENSE_DRAFT,
|
|
EXPENSE_REJECTEDBY,
|
|
ITEMS_PER_PAGE,
|
|
} from "../../utils/constants";
|
|
import {
|
|
formatCurrency,
|
|
formatFigure,
|
|
getColorNameFromHex,
|
|
useDebounce,
|
|
} from "../../utils/appUtils";
|
|
import { usePaymentRequestList } from "../../hooks/useExpense";
|
|
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import Avatar from "../../components/common/Avatar";
|
|
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
|
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
|
|
import ConfirmModal from "../common/ConfirmModal";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useSelector } from "react-redux";
|
|
import Error from "../common/Error";
|
|
import Pagination from "../common/Pagination";
|
|
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
|
|
|
|
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
|
|
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
|
|
const navigate = useNavigate();
|
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
const [deletingId, setDeletingId] = useState(null);
|
|
const SelfId = useSelector(
|
|
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
|
);
|
|
const groupByField = (items, field) => {
|
|
return items.reduce((acc, item) => {
|
|
let key;
|
|
let displayField;
|
|
|
|
switch (field) {
|
|
case "transactionDate":
|
|
key = item?.transactionDate?.split("T")[0];
|
|
displayField = "Transaction Date";
|
|
break;
|
|
case "status":
|
|
key = item?.status?.displayName || "Unknown";
|
|
displayField = "Status";
|
|
break;
|
|
case "submittedBy":
|
|
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
|
|
}`.trim();
|
|
displayField = "Submitted By";
|
|
break;
|
|
case "project":
|
|
key = item?.project?.name || "Unknown Project";
|
|
displayField = "Project";
|
|
break;
|
|
case "paymentMode":
|
|
key = item?.paymentMode?.name || "Unknown Mode";
|
|
displayField = "Payment Mode";
|
|
break;
|
|
case "expensesType":
|
|
key = item?.expensesType?.name || "Unknown Type";
|
|
displayField = "Expense Category";
|
|
break;
|
|
case "createdAt":
|
|
key = item?.createdAt?.split("T")[0] || "Unknown Date";
|
|
displayField = "Created Date";
|
|
break;
|
|
default:
|
|
key = "Others";
|
|
displayField = "Others";
|
|
}
|
|
|
|
const groupKey = `${field}_${key}`; // unique key for object property
|
|
if (!acc[groupKey]) {
|
|
acc[groupKey] = { key, displayField, items: [] };
|
|
}
|
|
|
|
acc[groupKey].items.push(item);
|
|
return acc;
|
|
}, {});
|
|
};
|
|
|
|
const paymentRequestColumns = [
|
|
{
|
|
key: "paymentRequestUID",
|
|
label: "Request ID",
|
|
align: "text-start mx-2",
|
|
getValue: (e) => <div className="d-flex"><span>{e.paymentRequestUID || "N/A"}</span> {e.isAdvancePayment && <span class="ms-1 badge bg-label-warning text-xxs" >Adv</span>}</div>,
|
|
},
|
|
{
|
|
key: "title",
|
|
label: "Request Title",
|
|
align: "text-start",
|
|
getValue: (e) => e.title || "N/A",
|
|
},
|
|
{
|
|
key: "createdAt",
|
|
label: "Created At",
|
|
align: "text-start",
|
|
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
|
},
|
|
{
|
|
key: "payee",
|
|
label: "Payee",
|
|
align: "text-start",
|
|
getValue: (e) => e.payee || "N/A",
|
|
},
|
|
{
|
|
key: "dueDate",
|
|
label: "Due Date",
|
|
align: "text-start",
|
|
getValue: (e) => formatUTCToLocalTime(e?.dueDate),
|
|
},
|
|
|
|
{
|
|
key: "amount",
|
|
label: "Amount",
|
|
align: "text-end",
|
|
getValue: (e) =>
|
|
formatFigure(e?.amount, {
|
|
type: "currency",
|
|
currency: e?.currency?.currencyCode,
|
|
}),
|
|
},
|
|
{
|
|
key: "expenseStatus",
|
|
label: "Status",
|
|
align: "text-center",
|
|
getValue: (e) => (
|
|
<span
|
|
className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
|
|
}`}
|
|
>
|
|
{e?.expenseStatus?.name || "Unknown"}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const debouncedSearch = useDebounce(search, 500);
|
|
|
|
const { data, isLoading, isError, error, isRefetching, refetch } =
|
|
usePaymentRequestList(
|
|
ITEMS_PER_PAGE,
|
|
currentPage,
|
|
filters,
|
|
true,
|
|
debouncedSearch
|
|
);
|
|
|
|
if (isError) {
|
|
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
|
}
|
|
const header = [
|
|
"Request ID",
|
|
"Request Title",
|
|
"Created At",
|
|
"Due Date",
|
|
"Amount",
|
|
"Status",
|
|
"Action",
|
|
];
|
|
if (isLoading) return <ExpenseTableSkeleton headers={header} />;
|
|
|
|
const grouped = groupBy
|
|
? Object.fromEntries(
|
|
Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
|
|
([keyA], [keyB]) => keyA.localeCompare(keyB)
|
|
)
|
|
)
|
|
: { All: data?.data ?? [] };
|
|
|
|
const IsGroupedByDate = [
|
|
{ key: "transactionDate", displayField: "Transaction Date" },
|
|
{ key: "createdAt", displayField: "created Date" },
|
|
]?.includes(groupBy);
|
|
|
|
const paginate = (page) => {
|
|
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
setCurrentPage(page);
|
|
}
|
|
};
|
|
const canEditExpense = (paymentRequest) => {
|
|
return (
|
|
(paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT || paymentRequest?.recurringPayment?.isVariable === true ||
|
|
EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus.id)) &&
|
|
paymentRequest?.createdBy?.id === SelfId
|
|
);
|
|
};
|
|
const canDetetExpense = (request) => {
|
|
return (
|
|
request?.expenseStatus?.id === EXPENSE_DRAFT &&
|
|
request?.createdBy?.id === SelfId
|
|
);
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
setDeletingId(id);
|
|
DeleteExpense(
|
|
{ id },
|
|
{
|
|
onSettled: () => {
|
|
setDeletingId(null);
|
|
setIsDeleteModalOpen(false);
|
|
},
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{IsDeleteModalOpen && (
|
|
<ConfirmModal
|
|
isOpen={IsDeleteModalOpen}
|
|
type="delete"
|
|
header="Delete Expense"
|
|
message="Under the woring?"
|
|
onSubmit={handleDelete}
|
|
onClose={() => setIsDeleteModalOpen(false)}
|
|
// loading={isPending}
|
|
paramData={deletingId}
|
|
/>
|
|
)}
|
|
<div className="card page-min-h table-responsive px-sm-4">
|
|
<div className="card-datatable mx-2" id="payment-request-table ">
|
|
<div className="col-12 mb-2 mt-2">
|
|
<PaymentRequestFilterChips
|
|
filters={filters}
|
|
filterData={filterData}
|
|
removeFilterChip={removeFilterChip}
|
|
clearFilter={clearFilter}
|
|
/>
|
|
</div>
|
|
<table className="table border-top dataTable text-nowrap align-middle">
|
|
<thead>
|
|
<tr>
|
|
{paymentRequestColumns.map((col) => (
|
|
<th key={col.key} className={`sorting ${col.align}`}>
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
<th className="text-center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{Object.keys(grouped).length > 0 ? (
|
|
Object.values(grouped).map(({ key, displayField, items }) => (
|
|
<React.Fragment key={key}>
|
|
<tr className="tr-group text-dark">
|
|
<td colSpan={8} className="text-start">
|
|
<div className="d-flex align-items-center">
|
|
{" "}
|
|
<small className="fs-6 py-1 ms-1">
|
|
{displayField} :{" "}
|
|
</small>{" "}
|
|
<small className="fs-6 ms-3">
|
|
{IsGroupedByDate ? formatUTCToLocalTime(key) : key}
|
|
</small>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{items?.map((paymentRequest) => (
|
|
<tr key={paymentRequest.id} style={{ height: "40px" }}>
|
|
{paymentRequestColumns.map(
|
|
(col) =>
|
|
(col.isAlwaysVisible || groupBy !== col.key) && (
|
|
<td
|
|
key={col.key}
|
|
className={`d-table-cell ${col.align ?? ""}`}
|
|
>
|
|
{col?.customRender
|
|
? col?.customRender(paymentRequest)
|
|
: col?.getValue(paymentRequest)}
|
|
</td>
|
|
)
|
|
)}
|
|
<td className="sticky-action-column bg-white">
|
|
<div className="d-flex flex-row gap-2">
|
|
<i
|
|
className="bx bx-show text-primary cursor-pointer"
|
|
onClick={() =>
|
|
setVieRequest({
|
|
requestId: paymentRequest.id,
|
|
view: true,
|
|
})
|
|
}
|
|
></i>
|
|
{canEditExpense(paymentRequest) && (
|
|
<div className="dropdown z-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i
|
|
className="bx bx-dots-vertical-rounded text-muted p-0"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-offset="0,8"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="tooltip-dark"
|
|
title="More Action"
|
|
></i>
|
|
</button>
|
|
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
|
<li
|
|
onClick={() =>
|
|
setManageRequest({
|
|
IsOpen: true,
|
|
RequestId: paymentRequest.id,
|
|
})
|
|
}
|
|
>
|
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
|
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
|
<span className="align-left ">
|
|
Modify
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
{canDetetExpense(paymentRequest) && (
|
|
<li
|
|
onClick={() => {
|
|
setIsDeleteModalOpen(true);
|
|
setDeletingId(paymentRequest.id);
|
|
}}
|
|
>
|
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
|
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
|
<span className="align-left">
|
|
Delete
|
|
</span>
|
|
</a>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</React.Fragment>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={8} className="text-center border-0 ">
|
|
<div className="py-8">
|
|
<p>No Request Found</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={data?.totalPages}
|
|
onPageChange={paginate}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PaymentRequestList;
|