92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
import React, { createContext, useContext, useState } from "react";
|
|
|
|
import ExpenseList from "../../components/Expenses/ExpenseList";
|
|
import CreateExpense from "../../components/Expenses/CreateExpense";
|
|
import ViewExpense from "../../components/Expenses/ViewExpense";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
|
|
export const ExpenseContext = createContext();
|
|
export const useExpenseContext = () => useContext(ExpenseContext);
|
|
|
|
const ExpensePage = () => {
|
|
const [isNewExpense, setNewExpense] = useState(false);
|
|
const [viewExpense, setViewExpense] = useState({
|
|
expenseId: null,
|
|
view: false,
|
|
});
|
|
|
|
const contextValue = {
|
|
setViewExpense,
|
|
};
|
|
|
|
return (
|
|
<ExpenseContext.Provider value={contextValue}>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/" },
|
|
{ label: "Expense", link: null },
|
|
]}
|
|
/>
|
|
<div className="card my-1 text-start px-0">
|
|
<div className="card-body py-1 px-1">
|
|
<div className="row">
|
|
<div className="col-5 col-sm-4">
|
|
<label className="mb-0">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm"
|
|
placeholder="Search Expense..."
|
|
aria-controls="DataTables_Table_0"
|
|
/>
|
|
</label>
|
|
<i className="bx bx-slider-alt ms-2"></i>
|
|
</div>
|
|
<div className="col-7 col-sm-8 text-end gap-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-primary me-2"
|
|
onClick={() => setNewExpense(true)}
|
|
>
|
|
<span className="icon-base bx bx-plus-circle me-1"></span>
|
|
Add New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ExpenseList />
|
|
|
|
{isNewExpense && (
|
|
<GlobalModel
|
|
isOpen={isNewExpense}
|
|
size="lg"
|
|
closeModal={() => setNewExpense(false)}
|
|
>
|
|
<CreateExpense closeModal={() => setNewExpense(false)} />
|
|
</GlobalModel>
|
|
)}
|
|
|
|
|
|
|
|
{viewExpense.view && (<GlobalModel
|
|
isOpen={viewExpense.view}
|
|
size="lg"
|
|
closeModal={() =>
|
|
setViewExpense({
|
|
expenseId: null,
|
|
view: false,
|
|
})
|
|
}
|
|
>
|
|
<ViewExpense ExpenseId={viewExpense.expenseId}/>
|
|
</GlobalModel>) }
|
|
</div>
|
|
</ExpenseContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default ExpensePage;
|