166 lines
7.5 KiB
JavaScript
166 lines
7.5 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 ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
|
|
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
|
|
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
|
|
import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
|
|
import ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";
|
|
|
|
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,
|
|
RecurringId: null,
|
|
});
|
|
const [viewRecurring, setViewRecurring] = useState({ view: false, recurringId: null })
|
|
|
|
const [selectedStatuses, setSelectedStatuses] = useState(
|
|
PAYEE_RECURRING_EXPENSE.map((s) => s.id)
|
|
);
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
const contextValue = {
|
|
setManageRequest,
|
|
setViewRecurring
|
|
};
|
|
|
|
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="row align-items-center mb-0">
|
|
{/* Left Column: Search + Filter */}
|
|
<div className="col-md-8 col-sm-12 mb-2 mb-md-0">
|
|
<div className="d-flex align-items-center flex-wrap gap-0">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm w-25"
|
|
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>
|
|
</div>
|
|
|
|
{/* Right Column: Add Button */}
|
|
<div className="col-md-4 col-sm-12 text-md-end text-start">
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
type="button"
|
|
onClick={() =>
|
|
setManageRequest({
|
|
IsOpen: true,
|
|
RecurringId: 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} />
|
|
|
|
{ManageRequest.IsOpen && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="lg"
|
|
closeModal={() =>
|
|
setManageRequest({ IsOpen: null, expenseId: null })
|
|
}
|
|
>
|
|
<ManageRecurringExpense
|
|
key={ManageRequest.RecurringId ?? "new"}
|
|
closeModal={() =>
|
|
setManageRequest({ IsOpen: null, RecurringId: null })
|
|
}
|
|
requestToEdit={ManageRequest.RecurringId}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
{viewRecurring.view && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="lg"
|
|
closeModal={() =>
|
|
setViewRecurring({ IsOpen: null, recurringId: null })
|
|
}
|
|
>
|
|
{/* <viewRecurring
|
|
key={viewRecurring.RecurringId ?? "new"}
|
|
closeModal={() =>
|
|
setViewRecurring({ IsOpen: null, recurringId: null })
|
|
}
|
|
RecurringId={viewRecurring.recurringId}
|
|
/> */}
|
|
<ViewRecurringExpense RecurringId={viewRecurring.recurringId} />
|
|
</GlobalModel>
|
|
)}
|
|
|
|
|
|
</div>
|
|
</RecurringExpenseContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default RecurringExpensePage;
|