Integrate regional agents in service-operation and Enhance Regional Agent Installation

application/src/App.tsx

@@ -1,63 +1,115 @@
 
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Toaster } from '@/components/ui/sonner';
 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';
 
 // Pages
 import Index from '@/pages/Index';
 import Login from '@/pages/Login';
 import Dashboard from '@/pages/Dashboard';
 import ServiceDetail from '@/pages/ServiceDetail';
-import Profile from '@/pages/Profile';
 import Settings from '@/pages/Settings';
-import OperationalPage from '@/pages/OperationalPage';
-import ScheduleIncident from '@/pages/ScheduleIncident';
+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 { authService } from '@/services/authService';
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry: 1,
-      refetchOnWindowFocus: false,
+      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 />;
+};
+
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <LanguageProvider>
-          <SidebarProvider>
-            <ErrorBoundary>
+    <ErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <LanguageProvider>
+            <SidebarProvider>
               <Router>
                 <Routes>
                   <Route path="/" element={<Index />} />
                   <Route path="/login" element={<Login />} />
-                  <Route path="/dashboard" element={<Dashboard />} />
-                  <Route path="/service/:id" element={<ServiceDetail />} />
-                  <Route path="/profile" element={<Profile />} />
-                  <Route path="/settings" element={<Settings />} />
-                  <Route path="/operational-page" element={<OperationalPage />} />
-                  <Route path="/schedule-incident" element={<ScheduleIncident />} />
-                  <Route path="/ssl-domain" element={<SslDomain />} />
-                  <Route path="/status/:slug" element={<PublicStatusPage />} />
+                  <Route path="/public/:pageId" 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>
               <Toaster />
-            </ErrorBoundary>
-          </SidebarProvider>
-        </LanguageProvider>
-      </ThemeProvider>
-    </QueryClientProvider>
+            </SidebarProvider>
+          </LanguageProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </ErrorBoundary>
   );
 }
 

application/src/components/dashboard/sidebar/navigationData.ts

@@ -1,5 +1,4 @@
-
-import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react";
+import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, MapPin, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react";
 
 export const mainMenuItems = [
   {
@@ -51,12 +50,12 @@ export const mainMenuItems = [
     hasNavigation: false
   },
   {
-    id: 'api-documentation',
-    path: null,
-    icon: FileText,
-    translationKey: 'apiDocumentation',
+    id: 'regional-monitoring',
+    path: '/regional-monitoring',
+    icon: MapPin,
+    translationKey: 'regionalMonitoring',
     color: 'text-indigo-400',
-    hasNavigation: false
+    hasNavigation: true
   }
 ];