feat: simple app router with protected admin route (#30)

Author: jbuiquan

webapp/package-lock.json

@@ -31,6 +31,7 @@
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.0",
     "react-resizable-panels": "^3.0.6",
+    "react-router-dom": "^7.13.0",
     "recharts": "^2.15.4"
   },
   "devDependencies": {

webapp/package.json

@@ -1,5 +1,21 @@
-import { MainPage } from '@pages';
+import { MainPage } from "@/pages";
+import { lazy } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { AdminRoute } from "./lib/ProtectedRoute";
+
+const AdminPage = lazy(() => import("@/pages/admin"));
+const LoginPage = lazy(() => import("@/pages/login"));
 
 export function AppRouter() {
-    return <MainPage />;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="" element={<MainPage />} />
+        <Route path="login" element={<LoginPage />} />
+        <Route element={<AdminRoute />}>
+          <Route path="admin" element={<AdminPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
 }

webapp/src/app/routes/AppRouter.tsx

@@ -0,0 +1,17 @@
+import { useAuth } from "@/app/providers/AuthProvider";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+/**
+ * Route guard for admin routes.
+ * Redirect to login page if not authenticated.
+ */
+export function AdminRoute() {
+  const { isAuthenticated } = useAuth();
+  const location = useLocation();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <Outlet />;
+}

webapp/src/app/routes/lib/ProtectedRoute.tsx

@@ -1,20 +1,22 @@
-import { useApi } from "@providers";
+import { DashboardPopover, Map, MapSidebar } from "@/widgets";
 import { Header } from "@components";
+import { useApi } from "@providers";
 import { SidebarProvider } from "@ui/sidebar";
-import { DashboardPopover, MapSidebar, Map } from "@/widgets";
 import { useEffect, useState } from "react";
 
 import {
     ResizableHandle,
     ResizablePanel,
     ResizablePanelGroup,
-} from "@/components/ui/resizable"
+} from "@/components/ui/resizable";
+import { useNavigate } from "react-router-dom";
 
 export interface MainPageProps {
     userData?: unknown;
 }
 
 export function MainPage() {
+    const navigate = useNavigate();
     const client = useApi();
     const [data, setData] = useState<unknown | null>(null);
 
@@ -23,10 +25,11 @@ export function MainPage() {
             .then((json) => setData(json.data))
             .catch((err) => console.error("fetchData error", err));
     }, []);
+
     return (
         <div className="flex flex-col h-screen">
             <Header
-                onLogin={() => console.log("Login clicked")}
+                onLogin={() => navigate('/login')}
                 onLogout={() => console.log("Logout clicked")}
                 isLogin={false} />
 

webapp/src/pages/MainPage.tsx

@@ -0,0 +1,7 @@
+export function AdminPage() {
+  return (
+    <div className="flex flex-col h-screen bg-background items-center justify-center">
+      <h1>Admin Page</h1>
+    </div>
+  );
+}

webapp/src/pages/admin/AdminPage.tsx

@@ -0,0 +1 @@
+export { AdminPage as default } from "./AdminPage";

webapp/src/pages/admin/index.tsx

@@ -1,2 +1 @@
-export { LoginPage } from './LoginPage';
-export { MainPage } from './MainPage';
+export { MainPage } from "./MainPage";

webapp/src/pages/index.ts

@@ -1,6 +1,6 @@
 export function LoginPage() {
     return (
-        <div>
+        <div className="flex flex-col h-screen bg-background items-center justify-center">
             <h1>Login Page</h1>
         </div>
     );

webapp/src/pages/LoginPage.tsx webapp/src/pages/login/LoginPage.tsxwebapp/src/pages/LoginPage.tsx renamed to webapp/src/pages/login/LoginPage.tsx

@@ -0,0 +1 @@
+export { LoginPage as default } from "./LoginPage";