From 460fcbc7dc42ce0c9fbd84885b0a83ccf7b87dc2 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Mon, 30 Jun 2025 23:06:38 +0700
Subject: [PATCH] Refactor: expand the menu sidebar and add the server and
 docker detail page

---
 application/src/App.tsx                       | 166 +++++++-----------
 .../src/components/auth/ProtectedRoute.tsx    |  16 ++
 .../dashboard/sidebar/navigationData.ts       |   5 +-
 application/src/components/ui/tabs.tsx        |   3 +-
 4 files changed, 82 insertions(+), 108 deletions(-)
 create mode 100644 application/src/components/auth/ProtectedRoute.tsx

diff --git a/application/src/App.tsx b/application/src/App.tsx
index cd62250..e7f1e0b 100644
--- a/application/src/App.tsx
+++ b/application/src/App.tsx
@@ -1,115 +1,71 @@
-
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import React, { useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ThemeProvider } from '@/contexts/ThemeContext';
-import { LanguageProvider } from '@/contexts/LanguageContext';
-import { SidebarProvider } from '@/contexts/SidebarContext';
-import { Toaster } from '@/components/ui/toaster';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { Toaster } from '@/components/ui/sonner';
 
-// Pages
-import Index from '@/pages/Index';
-import Login from '@/pages/Login';
-import Dashboard from '@/pages/Dashboard';
-import ServiceDetail from '@/pages/ServiceDetail';
-import Settings from '@/pages/Settings';
-import Profile from '@/pages/Profile';
-import SslDomain from '@/pages/SslDomain';
-import ScheduleIncident from '@/pages/ScheduleIncident';
-import OperationalPage from '@/pages/OperationalPage';
-import PublicStatusPage from '@/pages/PublicStatusPage';
-import RegionalMonitoring from '@/pages/RegionalMonitoring';
-import NotFound from '@/pages/NotFound';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { LanguageProvider } from './contexts/LanguageContext';
+import { SidebarProvider } from './contexts/SidebarContext';
 
-import { authService } from '@/services/authService';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 2,
-      staleTime: 5 * 60 * 1000, // 5 minutes
-    },
-  },
-});
-
-// Protected Route wrapper
-const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const isAuthenticated = authService.isAuthenticated();
-  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
-};
+import Index from './pages/Index';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import InstanceMonitoring from './pages/InstanceMonitoring';
+import ContainerMonitoring from './pages/ContainerMonitoring';
+import ServiceDetail from './pages/ServiceDetail';
+import SslDomain from './pages/SslDomain';
+import ScheduleIncident from './pages/ScheduleIncident';
+import OperationalPage from './pages/OperationalPage';
+import RegionalMonitoring from './pages/RegionalMonitoring';
+import Settings from './pages/Settings';
+import Profile from './pages/Profile';
+import NotFound from './pages/NotFound';
+import PublicStatusPage from './pages/PublicStatusPage';
+import { ProtectedRoute } from './components/auth/ProtectedRoute';
+import ServerDetail from './pages/ServerDetail';
 
 function App() {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000
+      }
+    }
+  }));
+
   return (
-    <ErrorBoundary>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider>
-          <LanguageProvider>
-            <SidebarProvider>
-              <Router>
-                <Routes>
-                  <Route path="/" element={<Index />} />
-                  <Route path="/login" element={<Login />} />
-                  <Route path="/public/:slug" element={<PublicStatusPage />} />
-                  
-                  {/* Protected Routes */}
-                  <Route path="/dashboard" element={
-                    <ProtectedRoute>
-                      <Dashboard />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/service/:id" element={
-                    <ProtectedRoute>
-                      <ServiceDetail />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/settings" element={
-                    <ProtectedRoute>
-                      <Settings />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/profile" element={
-                    <ProtectedRoute>
-                      <Profile />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/ssl-domain" element={
-                    <ProtectedRoute>
-                      <SslDomain />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/schedule-incident" element={
-                    <ProtectedRoute>
-                      <ScheduleIncident />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/operational-page" element={
-                    <ProtectedRoute>
-                      <OperationalPage />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="/regional-monitoring" element={
-                    <ProtectedRoute>
-                      <RegionalMonitoring />
-                    </ProtectedRoute>
-                  } />
-                  
-                  <Route path="*" element={<NotFound />} />
-                </Routes>
-              </Router>
+    <BrowserRouter>
+      <ThemeProvider>
+        <LanguageProvider>
+          <SidebarProvider>
+            <QueryClientProvider client={queryClient}>
               <Toaster />
-            </SidebarProvider>
-          </LanguageProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
-    </ErrorBoundary>
+              <Routes>
+                {/* Public routes */}
+                <Route path="/public/:slug" element={<PublicStatusPage />} />
+                
+                {/* Protected routes */}
+                <Route path="/login" element={<Login />} />
+                <Route path="/" element={<ProtectedRoute><Index /></ProtectedRoute>} />
+                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+                <Route path="/instance-monitoring" element={<ProtectedRoute><InstanceMonitoring /></ProtectedRoute>} />
+                <Route path="/server-detail/:serverId" element={<ProtectedRoute><ServerDetail /></ProtectedRoute>} />
+                <Route path="/container-monitoring" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
+                <Route path="/container-monitoring/:serverId" element={<ProtectedRoute><ContainerMonitoring /></ProtectedRoute>} />
+                <Route path="/service/:id" element={<ProtectedRoute><ServiceDetail /></ProtectedRoute>} />
+                <Route path="/ssl-domain" element={<ProtectedRoute><SslDomain /></ProtectedRoute>} />
+                <Route path="/schedule-incident" element={<ProtectedRoute><ScheduleIncident /></ProtectedRoute>} />
+                <Route path="/operational-page" element={<ProtectedRoute><OperationalPage /></ProtectedRoute>} />
+                <Route path="/regional-monitoring" element={<ProtectedRoute><RegionalMonitoring /></ProtectedRoute>} />
+                <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+                <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </QueryClientProvider>
+          </SidebarProvider>
+        </LanguageProvider>
+      </ThemeProvider>
+    </BrowserRouter>
   );
 }
 
diff --git a/application/src/components/auth/ProtectedRoute.tsx b/application/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 0000000..22dad62
--- /dev/null
+++ b/application/src/components/auth/ProtectedRoute.tsx
@@ -0,0 +1,16 @@
+
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { authService } from '@/services/authService';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  if (!authService.isAuthenticated()) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/navigationData.ts b/application/src/components/dashboard/sidebar/navigationData.ts
index f9956c5..0e2685f 100644
--- a/application/src/components/dashboard/sidebar/navigationData.ts
+++ b/application/src/components/dashboard/sidebar/navigationData.ts
@@ -1,3 +1,4 @@
+
 import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, MapPin, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react";
 
 export const mainMenuItems = [
@@ -11,11 +12,11 @@ export const mainMenuItems = [
   },
   {
     id: 'instance-monitoring',
-    path: null,
+    path: '/instance-monitoring',
     icon: Boxes,
     translationKey: 'instanceMonitoring',
     color: 'text-blue-400',
-    hasNavigation: false
+    hasNavigation: true
   },
   {
     id: 'ssl-domain',
diff --git a/application/src/components/ui/tabs.tsx b/application/src/components/ui/tabs.tsx
index f57fffd..e86ff41 100644
--- a/application/src/components/ui/tabs.tsx
+++ b/application/src/components/ui/tabs.tsx
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
@@ -50,4 +51,4 @@ const TabsContent = React.forwardRef<
 ))
 TabsContent.displayName = TabsPrimitive.Content.displayName
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent }
\ No newline at end of file