feat: découverte dynamique apps - portail dynamique - fix URLs

frontend/src/App.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
+import AppsPage from './pages/AppsPage';
+import MonitoringPage from './pages/MonitoringPage';
+import DeploymentsPage from './pages/DeploymentsPage';
+import GiteaPage from './pages/GiteaPage';
+import DockerPage from './pages/DockerPage';
+import DocumentationPage from './pages/DocumentationPage';
+import InventairePage from './pages/InventairePage';
+import TerminalPage from './pages/TerminalPage';
+import Sidebar from './components/Sidebar';
+import useWebSocket from './hooks/useWebSocket';
+import { getMe, getApps, logout as apiLogout } from './utils/api';
+export default function App() {
+  const [authenticated, setAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState('dashboard');
+  const [apps, setApps] = useState([]);
+  // Vérifier l'authentification au chargement
+  useEffect(() => {
+    const token = localStorage.getItem('dashboard_token');
+    if (token) {
+      getMe()
+        .then(() => {
+          setAuthenticated(true);
+          fetchApps();
+        })
+        .catch(() => {
+          localStorage.removeItem('dashboard_token');
+          setAuthenticated(false);
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, []);
+  const fetchApps = async () => {
+    try {
+      const res = await getApps();
+      setApps(res.data);
+    } catch (err) {
+      console.error('Erreur chargement apps:', err);
+    }
+  };
+  // WebSocket handler
+  const handleWsMessage = useCallback((data) => {
+    if (data.type === 'health_update') {
+      setApps(data.data);
+    }
+  }, []);
+  const { connected: wsConnected } = useWebSocket(
+    authenticated ? handleWsMessage : null
+  );
+  const handleLogin = (data) => {
+    setAuthenticated(true);
+    fetchApps();
+  };
+  const handleLogout = async () => {
+    try {
+      await apiLogout();
+    } catch (e) {
+      // ignore
+    }
+    localStorage.removeItem('dashboard_token');
+    setAuthenticated(false);
+    setApps([]);
+  };
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-dark-950">
+        <div className="flex items-center gap-3">
+          <svg className="animate-spin h-8 w-8 text-primary-500" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+              fill="none"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          <span className="text-gray-400">Chargement...</span>
+        </div>
+      </div>
+    );
+  }
+  if (!authenticated) {
+    return <LoginPage onLogin={handleLogin} />;
+  }
+  const renderPage = () => {
+    switch (currentPage) {
+      case 'dashboard':
+        return <DashboardPage apps={apps} />;
+      case 'apps':
+        return <AppsPage apps={apps} onRefresh={fetchApps} />;
+      case 'deployments':
+        return <DeploymentsPage />;
+      case 'gitea':
+        return <GiteaPage />;
+      case 'docker':
+        return <DockerPage />;
+      case 'monitoring':
+        return <MonitoringPage />;
+      case 'documentation':
+        return <DocumentationPage />;
+      case 'inventaire':
+        return <InventairePage />;
+      case 'terminal':
+        return <TerminalPage />;
+      default:
+        return <DashboardPage apps={apps} />;
+    }
+  };
+  return (
+    <div className="min-h-screen bg-dark-950">
+      <Sidebar
+        currentPage={currentPage}
+        onNavigate={setCurrentPage}
+        onLogout={handleLogout}
+        wsConnected={wsConnected}
+      />
+      <main className="ml-64 p-8">{renderPage()}</main>
+    </div>
+  );
+}