157 lines
6.8 KiB
JavaScript
157 lines
6.8 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/RecurringExpenseList";
|
|
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
|
|
import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
|
|
|
|
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 [selectedStatuses, setSelectedStatuses] = useState(
|
|
PAYEE_RECURRING_EXPENSE.map((s) => s.id)
|
|
);
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
const contextValue = {
|
|
setManageRequest,
|
|
setVieRequest
|
|
};
|
|
|
|
const handleStatusChange = (id) => {
|
|
setSelectedStatuses((prev) =>
|
|
prev.includes(id)
|
|
? prev.filter((s) => s !== id)
|
|
: [...prev, id]
|
|
);
|
|
};
|
|
|
|
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-1">
|
|
<div className="d-flex flex-wrap align-items-center justify-content-between">
|
|
{/* Left side: Search + Filter */}
|
|
<div className="d-flex align-items-center flex-wrap">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm w-auto"
|
|
placeholder="Search Recurring Expense..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
|
|
<div className="dropdown">
|
|
<a
|
|
className="dropdown-toggle hide-arrow cursor-pointer p-1"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
title="Filter"
|
|
>
|
|
<i className="bx bx-slider-alt ms-1"></i>
|
|
</a>
|
|
<ul className="dropdown-menu p-2 text-capitalize">
|
|
{PAYEE_RECURRING_EXPENSE.map(({ id, label }) => (
|
|
<li key={id}>
|
|
<div className="form-check">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
checked={selectedStatuses.includes(id)}
|
|
onChange={() => handleStatusChange(id)}
|
|
/>
|
|
<label className="form-check-label">{label}</label>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side: Add Button */}
|
|
<div className="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 Recurring Expense
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<RecurringExpenseList filterStatuses={selectedStatuses} search={search} />
|
|
|
|
{/* 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;
|