import React, { createContext, useContext, useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useSelector } from "react-redux"; // Components import ExpenseList from "../../components/Expenses/ExpenseList"; import ViewExpense from "../../components/Expenses/ViewExpense"; import Breadcrumb from "../../components/common/Breadcrumb"; import GlobalModel from "../../components/common/GlobalModel"; import PreviewDocument from "../../components/Expenses/PreviewDocument"; import ManageExpense from "../../components/Expenses/ManageExpense"; import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel"; // Context & Hooks import { useFab } from "../../Context/FabContext"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { CREATE_EXEPENSE, VIEW_ALL_EXPNESE, VIEW_SELF_EXPENSE, } from "../../utils/constants"; // Schema & Defaults import { defaultFilter, SearchSchema, } from "../../components/Expenses/ExpenseSchema"; // Context export const ExpenseContext = createContext(); export const useExpenseContext = () => { const context = useContext(ExpenseContext); if (!context) { throw new Error("useExpenseContext must be used within an ExpenseProvider"); } return context; }; const ExpensePage = () => { const selectedProjectId = useSelector( (store) => store.localVariables.projectId ); const [filters, setFilter] = useState(); const [groupBy, setGroupBy] = useState("transactionDate"); const [searchText, setSearchText] = useState(""); const [ManageExpenseModal, setManageExpenseModal] = useState({ IsOpen: null, expenseId: null, }); const [viewExpense, setViewExpense] = useState({ expenseId: null, view: false, }); const [ViewDocument, setDocumentView] = useState({ IsOpen: false, Image: null, }); const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE); const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE); const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE); const { setOffcanvasContent, setShowTrigger } = useFab(); const methods = useForm({ resolver: zodResolver(SearchSchema), defaultValues: defaultFilter, }); const { reset } = methods; const clearFilter = () => { setFilter(defaultFilter); reset(); }; useEffect(() => { setShowTrigger(true); setOffcanvasContent( "Expense Filters", ); return () => { setShowTrigger(false); setOffcanvasContent("", null); }; }, []); const contextValue = { setViewExpense, setManageExpenseModal, setDocumentView, }; return (
{(IsViewAll || IsViewSelf) ? ( <>
setSearchText(e.target.value)} />
{IsCreatedAble && ( )}
) : (

Access Denied: You don't have permission to perform this action!

)} {/* Modals */} {ManageExpenseModal.IsOpen && ( setManageExpenseModal({ IsOpen: null, expenseId: null })} > setManageExpenseModal({ IsOpen: null, expenseId: null })} /> )} {viewExpense.view && ( setViewExpense({ expenseId: null, view: false })} > )} {ViewDocument.IsOpen && ( setDocumentView({ IsOpen: false, Image: null })} > )}
); }; export default ExpensePage;