[WEB-5040] feat: admin react-router migration (#7922)

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -1,34 +1,28 @@
 "use client";
 
-import type { FC, ReactNode } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
+import { Outlet } from "react-router";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
 // local components
+import type { Route } from "./+types/layout";
 import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
-type TAdminLayout = {
-  children: ReactNode;
-};
-
-const AdminLayout: FC<TAdminLayout> = (props) => {
-  const { children } = props;
+const AdminLayout: React.FC<Route.ComponentProps> = () => {
   // router
-  const router = useRouter();
+  const { replace } = useRouter();
   // store hooks
   const { isUserLoggedIn } = useUser();
 
   useEffect(() => {
-    if (isUserLoggedIn === false) {
-      router.push("/");
-    }
-  }, [router, isUserLoggedIn]);
+    if (isUserLoggedIn === false) replace("/");
+  }, [replace, isUserLoggedIn]);
 
   if (isUserLoggedIn === undefined) {
     return (
@@ -44,7 +38,9 @@ const AdminLayout: FC<TAdminLayout> = (props) => {
         <AdminSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden">{children}</div>
+          <div className="h-full w-full overflow-hidden">
+            <Outlet />
+          </div>
         </main>
         <NewUserPopup />
       </div>