added route and initially setup of payment-request

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -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;

src/router/AppRoutes.jsx

@@ -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 /> },