feat: add AppLayout sidebar navigation with dark theme

- Created AppLayout.tsx with MUI AppBar + permanent sidebar drawer
- Grouped navigation: Overview, Fleet, Operations, Administration
- RBAC visibility: admin-only items (Users, Certificates, Settings)
- User menu with logout functionality
- Mobile-responsive collapsible drawer
- Active state indicator on current page
- Switched theme from lightTheme to darkTheme in App.tsx
- Wrapped authenticated routes in AppLayout with React Router Outlet
- 404 redirect to dashboard instead of placeholder page

frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { CssBaseline, ThemeProvider } from '@mui/material'
-import { lightTheme } from './theme/theme'
+import { darkTheme } from './theme/theme'
 import { useAuthStore } from './store/authStore'
+import AppLayout from './components/AppLayout'
 import LoginPage from './pages/LoginPage'
 import MfaSetupPage from './pages/MfaSetupPage'
 import HostsPage from './pages/HostsPage'
@@ -16,14 +17,6 @@ import CertificatesPage from './pages/CertificatesPage'
 import ReportsPage from './pages/ReportsPage'
 import SettingsPage from './pages/SettingsPage'
 
-// Placeholder pages — implemented in later milestones
-const PlaceholderPage = ({ title }: { title: string }) => (
-  <div style={{ padding: 32 }}>
-    <h2>{title}</h2>
-    <p>Coming soon in a future milestone.</p>
-  </div>
-)
-
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
   return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />
@@ -31,38 +24,30 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 
 function App() {
   return (
-    <ThemeProvider theme={lightTheme}>
+    <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Routes>
         {/* Public */}
         <Route path="/login" element={<LoginPage />} />
 
-        {/* Protected — M2 */}
-        <Route path="/" element={<RequireAuth><Navigate to="/dashboard" replace /></RequireAuth>} />
-        <Route path="/mfa/setup" element={<RequireAuth><MfaSetupPage /></RequireAuth>} />
+        {/* Protected — wrapped in AppLayout with sidebar navigation */}
+        <Route element={<RequireAuth><AppLayout /></RequireAuth>}>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/mfa/setup" element={<MfaSetupPage />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/hosts" element={<HostsPage />} />
+          <Route path="/hosts/:id" element={<HostDetailPage />} />
+          <Route path="/groups" element={<GroupsPage />} />
+          <Route path="/users" element={<UsersPage />} />
+          <Route path="/jobs" element={<JobsPage />} />
+          <Route path="/deployment" element={<PatchDeploymentPage />} />
+          <Route path="/maintenance" element={<MaintenanceWindowsPage />} />
+          <Route path="/reports" element={<ReportsPage />} />
+          <Route path="/certificates" element={<CertificatesPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Route>
 
-        {/* Protected — M3 */}
-        <Route path="/dashboard" element={<RequireAuth><DashboardPage /></RequireAuth>} />
-        <Route path="/hosts" element={<RequireAuth><HostsPage /></RequireAuth>} />
-        <Route path="/hosts/:id" element={<RequireAuth><HostDetailPage /></RequireAuth>} />
-        <Route path="/groups" element={<RequireAuth><GroupsPage /></RequireAuth>} />
-        <Route path="/users" element={<RequireAuth><UsersPage /></RequireAuth>} />
-
-        {/* Protected — M5 */}
-        <Route path="/jobs" element={<RequireAuth><JobsPage /></RequireAuth>} />
-        <Route path="/deployment" element={<RequireAuth><PatchDeploymentPage /></RequireAuth>} />
-
-        {/* Protected — M6 */}
-        <Route path="/maintenance" element={<RequireAuth><MaintenanceWindowsPage /></RequireAuth>} />
-
-        {/* Placeholder — later milestones */}
-        {/* Protected — M9 */}
-        <Route path="/reports" element={<RequireAuth><ReportsPage /></RequireAuth>} />
-        {/* Protected — M8 */}
-        <Route path="/certificates" element={<RequireAuth><CertificatesPage /></RequireAuth>} />
-        <Route path="/settings" element={<RequireAuth><SettingsPage /></RequireAuth>} />
-
-        <Route path="*" element={<PlaceholderPage title="404 Not Found" />} />
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
       </Routes>
     </ThemeProvider>
   )