114 lines
3.4 KiB
JavaScript
114 lines
3.4 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";
|
|
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
|
|
|
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 [ViewDocument, setDocumentView] = useState({
|
|
IsOpen: false,
|
|
Image: null,
|
|
});
|
|
|
|
const contextValue = {
|
|
setViewExpense,
|
|
setDocumentView,
|
|
};
|
|
|
|
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"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-offset="0,8"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="tooltip"
|
|
title="Add New Expense"
|
|
className={`p-1 me-2 bg-primary rounded-circle `}
|
|
onClick={() => setNewExpense(true)}
|
|
>
|
|
<i className="bx bx-plus fs-4 text-white"></i>
|
|
</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"
|
|
modalType="top"
|
|
closeModal={() =>
|
|
setViewExpense({
|
|
expenseId: null,
|
|
view: false,
|
|
})
|
|
}
|
|
>
|
|
<ViewExpense ExpenseId={viewExpense.expenseId} />
|
|
</GlobalModel>
|
|
)}
|
|
|
|
{ViewDocument.IsOpen && (
|
|
<GlobalModel
|
|
size="lg"
|
|
m
|
|
isOpen={ViewDocument.IsOpen}
|
|
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
|
>
|
|
<PreviewDocument imageUrl={ViewDocument.Image} />
|
|
</GlobalModel>
|
|
)}
|
|
</div>
|
|
</ExpenseContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default ExpensePage;
|