admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added route and initially setup of payment-request

Browse Source
This commit is contained in:
pramod.mahajan 2025-11-08 09:24:45 +05:30
parent 1058b223b0
commit 2f70b83548
2 changed files with 170 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/pages/PaymentRequest/PaymentRequestPage.jsx Normal file
View File

@ -0,0 +1,168 @@
import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
import { useFab } from "../../Context/FabContext";
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
import MakeExpense from "../../components/PaymentRequest/MakeExpense";
export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => {
const context = useContext(PaymentRequestContext);
if (!context) {
throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
}
return context;
};
const PaymentRequestPage = () => {
const [ManageRequest, setManageRequest] = useState({
IsOpen: null,
RequestId: null,
});
const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
const { setOffcanvasContent, setShowTrigger } = useFab();
const [filters, setFilters] = useState(defaultPaymentRequestFilter);
const [ViewDocument, setDocumentView] = useState({
IsOpen: false,
Image: null,
});
const [isExpenseGenerate,setIsExpenseGenerate] = useState({IsOpen: null,
RequestId: null,})
const [modalSize,setModalSize] = useState("md")
const [search, setSearch] = useState("");
const contextValue = {
setManageRequest,
setVieRequest,
setDocumentView,
setModalSize,
setIsExpenseGenerate,
isExpenseGenerate
};
useEffect(() => {
setShowTrigger(true);
setOffcanvasContent(
"Payment Request Filters",
<PaymentRequestFilterPanel onApply={setFilters} />
);
return () => {
setShowTrigger(false);
setOffcanvasContent("", null);
};
}, []);
return (
<PaymentRequestContext.Provider value={contextValue}>
<div className="container-fluid">
{/* Breadcrumb */}
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Finance", link: "/Payment Request" },
{ label: "Payment Request" },
]}
/>
{/* Top Bar */}
<div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-0">
<div className="row align-items-center">
<div className="col-6">
<input
type="search"
className="form-control form-control-sm w-auto"
placeholder="Search Payment Request"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="col-6 text-end 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 Payment Request
</span>
</button>
</div>
</div>
</div>
</div>
<PaymentRequestList
search={search}
filters={filters}
/>
{/* Add/Edit Modal */}
{ManageRequest.IsOpen && (
<GlobalModel
isOpen
size="lg"
closeModal={() =>
setManageRequest({ IsOpen: null, expenseId: null })
}
>
<ManagePaymentRequest
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>
)}
{isExpenseGenerate.IsOpen && (
<GlobalModel
isOpen
size="md"
closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
>
<MakeExpense onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
</GlobalModel>
)}
{ViewDocument.IsOpen && (
<GlobalModel
isOpen
size="md"
key={ViewDocument.Image ?? "doc"}
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
>
<PreviewDocument imageUrl={ViewDocument.Image} />
</GlobalModel>
)}
</div>
</PaymentRequestContext.Provider>
);
};
export default PaymentRequestPage;

2
src/router/AppRoutes.jsx
View File

@ -56,6 +56,7 @@ import ImageGalleryPage from "../pages/Gallary/ImageGallaryPage";
import CollectionPage from "../pages/collections/CollectionPage";
import SubscriptionSummary from "../pages/Home/SubscriptionSummary";
import MakeSubscription from "../pages/Home/MakeSubscription";
import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage";
const router = createBrowserRouter(
[
{
@ -106,6 +107,7 @@ const router = createBrowserRouter(
{ path: "/gallary", element: <ImageGalleryPage /> },
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
{ path: "/expenses", element: <ExpensePage /> },
{ path: "/payment-request", element: <PaymentRequestPage /> },
{ path: "/collection", element: <CollectionPage /> },
{ path: "/masters", element: <MasterPage /> },
{ path: "/tenants", element: <TenantPage /> },