print form

src/router/MainRouter.tsx

@@ -1,5 +1,5 @@
 import { type FC } from "react";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import Home from "../pages/home/Home";
 import SideBar from "../shared/Sidebar";
 import Header from "../shared/Header";
@@ -54,11 +54,23 @@ import UpdateRole from "@/pages/role/Update";
 import RequestDetail from "@/pages/requests/Detail";
 import ConvertToOrders from "@/pages/order/ConvertToOrders";
 import OrderPrint from "@/pages/order/Print";
+import OrderPrintPreview from "@/pages/order/PrintPreview";
 import TicketList from "@/pages/ticket/TicketList";
 import TicketDetail from "@/pages/ticket/Detail";
 import PaymentsList from "@/pages/payment/List";
 
 const MainRouter: FC = () => {
+    const location = useLocation()
+    const isPrintPreview = /\/order\/print\/[^/]+\/preview/.test(location.pathname)
+
+    if (isPrintPreview) {
+        return (
+            <Routes>
+                <Route path={Paths.orderPrint + ':id/preview'} element={<OrderPrintPreview />} />
+            </Routes>
+        )
+    }
+
     return (
         <div className="p-4 overflow-hidden">
             <Header />
@@ -99,6 +111,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.order.create} element={<NewOrder />} />
                             <Route path={Paths.order.edit + ":id"} element={<EditOrder />} />
                             <Route path={Paths.convertToOrder} element={<ConvertToOrders />} />
+                            <Route path={Paths.orderPrint + ':id/preview'} element={<OrderPrintPreview />} />
                             <Route path={Paths.orderPrint + ':id'} element={<OrderPrint />} />
 
                             <Route path={Paths.tickets.list} element={<TicketList />} />