feat(frontend): implement step 11 — pages, components, and routing with React Query

frontend/src/router/index.tsx

@@ -1,8 +1,19 @@
 import { createBrowserRouter } from 'react-router-dom'
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, ReactNode } from 'react'
+import ProtectedRoute from '../components/ProtectedRoute'
 
 const LoginPage = lazy(() => import('../pages/LoginPage'))
 const DashboardPage = lazy(() => import('../pages/DashboardPage'))
+const EntitiesPage = lazy(() => import('../pages/EntitiesPage'))
+const LogsPage = lazy(() => import('../pages/LogsPage'))
+
+function Protected({ children }: { children: ReactNode }) {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ProtectedRoute>{children}</ProtectedRoute>
+    </Suspense>
+  )
+}
 
 export const router = createBrowserRouter([
   {
@@ -16,9 +27,25 @@ export const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      <Suspense fallback={<div>Loading...</div>}>
+      <Protected>
         <DashboardPage />
-      </Suspense>
+      </Protected>
+    ),
+  },
+  {
+    path: '/entities',
+    element: (
+      <Protected>
+        <EntitiesPage />
+      </Protected>
+    ),
+  },
+  {
+    path: '/logs',
+    element: (
+      <Protected>
+        <LogsPage />
+      </Protected>
     ),
   },
 ])