91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
|
|
|
|
const PaymentRequestPage = () => {
|
|
const [ManagePaymentRequestModal, setManagePaymentRequestModal] = useState({
|
|
IsOpen: null,
|
|
expenseId: null,
|
|
});
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
return (
|
|
<div className="container-fluid">
|
|
{/* Breadcrumb */}
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/" },
|
|
{ label: "Finance", link: "/Payment Request" },
|
|
{ label: "Payment Request" },
|
|
]}
|
|
/>
|
|
|
|
{/* Top Bar */}
|
|
<div className="card my-3 px-sm-4 px-0">
|
|
<div className="card-body py-2 px-3">
|
|
<div className="row align-items-center">
|
|
<div className="col-6">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm w-auto"
|
|
placeholder="Search Payment Req.."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-6 text-end mt-2 mt-sm-0">
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
type="button"
|
|
onClick={() =>
|
|
setManagePaymentRequestModal({
|
|
IsOpen: true,
|
|
expenseId: null,
|
|
})
|
|
}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
<span className="d-none d-md-inline-block">
|
|
Add Payment Request
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Add/Edit Modal */}
|
|
{ManagePaymentRequestModal.IsOpen && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="lg"
|
|
closeModal={() =>
|
|
setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
|
|
}
|
|
>
|
|
<ManagePaymentRequestModal
|
|
key={ManagePaymentRequestModal.expenseId ?? "new"}
|
|
expenseToEdit={ManagePaymentRequestModal.expenseId}
|
|
closeModal={() =>
|
|
setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
|
|
}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
|
|
{/* Payment Request List */}
|
|
<div className="card">
|
|
<PaymentRequestList
|
|
search={search}
|
|
setManagePaymentRequestModal={setManagePaymentRequestModal}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PaymentRequestPage;
|