134 lines
5.1 KiB
JavaScript
134 lines
5.1 KiB
JavaScript
import React, { createContext, useState, useEffect, useContext } from "react";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
import { useFab } from "../../Context/FabContext";
|
|
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
|
|
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
|
|
import RecurringExpenseList from "../../components/RecurringExpense/RecurringRexpenseList";
|
|
|
|
export const RecurringExpenseContext = createContext();
|
|
export const useRecurringExpenseContext = () => {
|
|
const context = useContext(RecurringExpenseContext);
|
|
if (!context) {
|
|
throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
|
|
}
|
|
return context;
|
|
};
|
|
const RecurringExpensePage = () => {
|
|
const [ManageRequest, setManageRequest] = useState({
|
|
IsOpen: null,
|
|
RequestId: null,
|
|
});
|
|
const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
|
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
|
// const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
const contextValue = {
|
|
setManageRequest,
|
|
setVieRequest
|
|
};
|
|
|
|
useEffect(() => {
|
|
|
|
setShowTrigger(true);
|
|
setOffcanvasContent(
|
|
"Payment Request Filters",
|
|
// <PaymentRequestFilterPanel onApply={setFilters} />
|
|
);
|
|
|
|
return () => {
|
|
setShowTrigger(false);
|
|
setOffcanvasContent("", null);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<RecurringExpenseContext.Provider value={contextValue}>
|
|
<div className="container-fluid">
|
|
{/* Breadcrumb */}
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Recurring Expense", link: null },
|
|
]}
|
|
/>
|
|
|
|
{/* 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 Recurring Expense.."
|
|
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={() =>
|
|
setManageRequest({
|
|
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>
|
|
{/* <PaymentRequestList
|
|
search={search}
|
|
filters={filters}
|
|
/> */}
|
|
<RecurringExpenseList/>
|
|
|
|
{/* Add/Edit Modal */}
|
|
{ManageRequest.IsOpen && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="lg"
|
|
closeModal={() =>
|
|
setManageRequest({ IsOpen: null, expenseId: null })
|
|
}
|
|
>
|
|
<ManageRecurringExpense
|
|
key={ManageRequest.RequestId ?? "new"}
|
|
requestToEdit={ManageRequest.RequestId}
|
|
closeModal={() =>
|
|
setManageRequest({ IsOpen: null, RequestId: null })
|
|
}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
|
|
{/* {ViewRequest.view && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="xl"
|
|
modalType="top"
|
|
closeModal={() => setVieRequest({ requestId: null, view: false })}
|
|
>
|
|
<ViewPaymentRequest requestId={ViewRequest?.requestId}/>
|
|
</GlobalModel>
|
|
)} */}
|
|
|
|
</div>
|
|
</RecurringExpenseContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default RecurringExpensePage;
|