Calling API for Get payment Request.
This commit is contained in:
parent
f3cfb3cf24
commit
59c46f7f3b
@ -1,17 +1,103 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { EXPENSE_DRAFT, ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
import { formatCurrency, getColorNameFromHex, useDebounce } from "../../utils/appUtils";
|
||||||
import { usePaymentRequestList } from "../../hooks/useExpense";
|
import { usePaymentRequestList } from "../../hooks/useExpense";
|
||||||
import { formatDate } from "../../utils/dateUtils";
|
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import Avatar from "../../components/common/Avatar";
|
||||||
|
import { usePaymentRequestContext } from "./PaymentRequestPage";
|
||||||
|
|
||||||
|
const PaymentRequestList = ({ groupBy = "transactionDate", search }) => {
|
||||||
|
|
||||||
|
const { setManagePaymentRequestModal } = usePaymentRequestContext();
|
||||||
|
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 PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
|
||||||
const paymentRequestColumns = [
|
const paymentRequestColumns = [
|
||||||
{ key: "paymentRequestUID", label: "Request ID", align: "text-start mx-2" },
|
{ key: "paymentRequestUID", label: "Request ID", align: "text-start mx-2", getValue: (e) => e.paymentRequestUID || "N/A" },
|
||||||
{ key: "title", label: "Request Title", align: "text-start" },
|
{ key: "title", label: "Request Title", align: "text-start", getValue: (e) => e.title || "N/A" },
|
||||||
{ key: "payee", label: "Payee", align: "text-start" },
|
// { key: "payee", label: "Payee", align: "text-start" },
|
||||||
{ key: "createdAt", label: "Submitted On", align: "text-start" },
|
{
|
||||||
{ key: "amount", label: "Amount", align: "text-start" },
|
key: "SubmittedBy",
|
||||||
{ key: "expenseStatus", label: "Status", align: "text-start" },
|
label: "Submitted By",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) =>
|
||||||
|
`${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}`)}>
|
||||||
|
<Avatar
|
||||||
|
size="xs"
|
||||||
|
classAvatar="m-0"
|
||||||
|
firstName={e.createdBy?.firstName}
|
||||||
|
lastName={e.createdBy?.lastName}
|
||||||
|
/>
|
||||||
|
<span className="text-truncate">
|
||||||
|
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||||
|
}`.trim() || "N/A"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ key: "createdAt", label: "Submitted On", align: "text-start", getValue: (e) => formatUTCToLocalTime(e?.createdAt) },
|
||||||
|
{ key: "amount", label: "Amount", align: "text-start", getValue: (e) => <>{formatCurrency(e?.amount)}</>, },
|
||||||
|
{
|
||||||
|
key: "expenseStatus", label: "Status", align: "text-start", getValue: (e) => (
|
||||||
|
<span
|
||||||
|
className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{e?.expenseStatus?.name || "Unknown"}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
@ -37,6 +123,27 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const grouped = groupBy
|
||||||
|
? groupByField(data?.data ?? [], groupBy)
|
||||||
|
: { All: data?.data ?? [] };
|
||||||
|
const IsGroupedByDate = [
|
||||||
|
{ key: "transactionDate", displayField: "Transaction Date" },
|
||||||
|
{ key: "createdAt", displayField: "created Date" },
|
||||||
|
]?.includes(groupBy);
|
||||||
|
|
||||||
|
const canEditExpense = (paymentRequest) => {
|
||||||
|
return (
|
||||||
|
(paymentRequest?.status?.id === EXPENSE_DRAFT ||
|
||||||
|
EXPENSE_REJECTEDBY.includes(paymentRequest?.status?.id)) &&
|
||||||
|
paymentRequest?.createdBy?.id === SelfId
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const canDetetExpense = (expense) => {
|
||||||
|
return (
|
||||||
|
expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card page-min-h table-responsive px-sm-4">
|
<div className="card page-min-h table-responsive px-sm-4">
|
||||||
<div className="card-datatable" id="payment-request-table">
|
<div className="card-datatable" id="payment-request-table">
|
||||||
@ -53,67 +160,116 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
|||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{isLoading || isFetching ? (
|
{Object.keys(grouped).length > 0 ? (
|
||||||
<tr>
|
Object.values(grouped).map(({ key, displayField, items }) => (
|
||||||
<td
|
<React.Fragment key={key}>
|
||||||
colSpan={paymentRequestColumns.length + 1}
|
<tr className="tr-group text-dark">
|
||||||
className="text-center py-4"
|
<td colSpan={8} className="text-start">
|
||||||
>
|
<div className="d-flex align-items-center">
|
||||||
Loading Payment Requests...
|
{" "}
|
||||||
</td>
|
<small className="fs-6 py-1">
|
||||||
</tr>
|
{displayField} :{" "}
|
||||||
) : paymentRequestData.length > 0 ? (
|
</small>{" "}
|
||||||
paymentRequestData.map((row) => (
|
<small className="fs-6 ms-3">
|
||||||
<tr key={row.id}>
|
{IsGroupedByDate
|
||||||
<td>{row.paymentRequestUID}</td>
|
? formatUTCToLocalTime(key)
|
||||||
<td>{row.title}</td>
|
: key}
|
||||||
<td>{row.payee}</td>
|
</small>
|
||||||
<td>{formatDate(row.createdAt)}</td>
|
|
||||||
<td>
|
|
||||||
{row.currency?.symbol}
|
|
||||||
{row.amount}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span
|
|
||||||
className="badge"
|
|
||||||
style={{
|
|
||||||
backgroundColor: row.expenseStatus?.color || "#6c757d",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{row.expenseStatus?.displayName || "Unknown"}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<div className="d-flex justify-content-center gap-2">
|
|
||||||
<i
|
|
||||||
className="bx bx-show text-primary cursor-pointer"
|
|
||||||
title="View"
|
|
||||||
onClick={() =>
|
|
||||||
console.log("View clicked for:", row.paymentRequestUID)
|
|
||||||
}
|
|
||||||
></i>
|
|
||||||
|
|
||||||
<i
|
|
||||||
className="bx bx-edit text-secondary cursor-pointer"
|
|
||||||
title="Edit"
|
|
||||||
onClick={() =>
|
|
||||||
setManagePaymentRequestModal({
|
|
||||||
IsOpen: true,
|
|
||||||
expenseId: row.id, // Pass ID for editing
|
|
||||||
})
|
|
||||||
}
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{items?.map((paymentRequest) => (
|
||||||
|
<tr key={paymentRequest.id}>
|
||||||
|
{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 justify-content-center gap-2">
|
||||||
|
<i
|
||||||
|
className="bx bx-show text-primary cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setViewExpense({
|
||||||
|
expenseId: paymentRequest.id,
|
||||||
|
view: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
></i>
|
||||||
|
|
||||||
|
<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={() =>
|
||||||
|
setManagePaymentRequestModal({
|
||||||
|
IsOpen: true,
|
||||||
|
expenseId: 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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
<tr>
|
||||||
<td
|
<td colSpan={8} className="text-center border-0 ">
|
||||||
colSpan={paymentRequestColumns.length + 1}
|
<div className="py-8">
|
||||||
className="text-center py-4"
|
<p>No Expense Found</p>
|
||||||
>
|
</div>
|
||||||
No Payment Requests Found
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,18 +1,54 @@
|
|||||||
import React, { useState } from "react";
|
import React, { createContext, useState,useEffect, useContext } from "react";
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
|
import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
|
||||||
import PaymentRequestList from "./PaymentRequestList";
|
import PaymentRequestList from "./PaymentRequestList";
|
||||||
|
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
|
||||||
|
import { useFab } from "../../Context/FabContext";
|
||||||
|
|
||||||
|
export const PaymentRequestContext = createContext();
|
||||||
|
export const usePaymentRequestContext = () => {
|
||||||
|
const context = useContext(PaymentRequestContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
const PaymentRequestPage = () => {
|
const PaymentRequestPage = () => {
|
||||||
const [ManagePaymentRequestModal, setManagePaymentRequestModal] = useState({
|
const [ManagePaymentRequestModal, setManagePaymentRequestModal] = useState({
|
||||||
IsOpen: null,
|
IsOpen: null,
|
||||||
expenseId: null,
|
expenseId: null,
|
||||||
});
|
});
|
||||||
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
|
|
||||||
|
const contextValue = {
|
||||||
|
// setViewExpense,
|
||||||
|
setManagePaymentRequestModal,
|
||||||
|
// setDocumentView,
|
||||||
|
// filterData,
|
||||||
|
// removeFilterChip
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
setShowTrigger(true);
|
||||||
|
setOffcanvasContent(
|
||||||
|
"Expense Filters",
|
||||||
|
<ExpenseFilterPanel
|
||||||
|
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
setShowTrigger(false);
|
||||||
|
setOffcanvasContent("", null);
|
||||||
|
};
|
||||||
|
},[]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<PaymentRequestContext.Provider value={contextValue}>
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
{/* Breadcrumb */}
|
{/* Breadcrumb */}
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
@ -85,6 +121,7 @@ const PaymentRequestPage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</PaymentRequestContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user