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

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Activity,
+  Box,
+  Container,
+  Server,
+  Clock,
+  TrendingUp,
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import { getApps, getSystemInfo } from '../utils/api';
+import StatusBadge from '../components/StatusBadge';
+
+function StatCard({ icon: Icon, label, value, color, subtext }) {
+  return (
+    <div className="card p-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm text-gray-400">{label}</p>
+          <p className="text-2xl font-bold text-white mt-1">{value}</p>
+          {subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
+        </div>
+        <div
+          className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
+        >
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardPage({ apps }) {
+  const [systemInfo, setSystemInfo] = useState(null);
+
+  useEffect(() => {
+    getSystemInfo()
+      .then((res) => setSystemInfo(res.data))
+      .catch(console.error);
+  }, []);
+
+  const onlineApps = apps.filter((a) => a.status === 'online').length;
+  const offlineApps = apps.filter((a) => a.status === 'offline').length;
+  const errorApps = apps.filter((a) => a.status === 'error').length;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
+        <p className="text-gray-400 mt-1">
+          Vue d'ensemble de l'infrastructure Manus
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={Box}
+          label="Applications"
+          value={apps.length}
+          color="bg-primary-600"
+          subtext="Applications déployées"
+        />
+        <StatCard
+          icon={CheckCircle2}
+          label="En ligne"
+          value={onlineApps}
+          color="bg-emerald-600"
+          subtext="Applications fonctionnelles"
+        />
+        <StatCard
+          icon={XCircle}
+          label="Hors ligne"
+          value={offlineApps}
+          color="bg-gray-600"
+          subtext="Applications arrêtées"
+        />
+        <StatCard
+          icon={AlertCircle}
+          label="Erreurs"
+          value={errorApps}
+          color="bg-red-600"
+          subtext="Applications en erreur"
+        />
+      </div>
+
+      {/* System Info + Apps Overview */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* System Info */}
+        <div className="card p-6">
+          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <Server className="w-5 h-5 text-primary-400" />
+            Informations système
+          </h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Serveur</span>
+              <span className="text-sm text-gray-200">
+                78.138.58.109 (Recette)
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Conteneurs actifs</span>
+              <span className="text-sm text-gray-200">
+                {systemInfo?.runningContainers || '...'} /{' '}
+                {systemInfo?.totalContainers || '...'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Gitea</span>
+              <a
+                href="https://git.recette.santinova-soft.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary-400 hover:text-primary-300"
+              >
+                git.recette.santinova-soft.org
+              </a>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-dark-700">
+              <span className="text-sm text-gray-400">Reverse Proxy</span>
+              <span className="text-sm text-gray-200">
+                Traefik + Let's Encrypt
+              </span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-sm text-gray-400">Heure serveur</span>
+              <span className="text-sm text-gray-200">
+                {systemInfo?.serverTime
+                  ? new Date(systemInfo.serverTime).toLocaleString('fr-FR')
+                  : '...'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Apps Quick View */}
+        <div className="card p-6">
+          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <Activity className="w-5 h-5 text-primary-400" />
+            État des applications
+          </h3>
+          {apps.length === 0 ? (
+            <p className="text-gray-500 text-sm">Aucune application détectée</p>
+          ) : (
+            <div className="space-y-3">
+              {apps.map((app) => (
+                <div
+                  key={app.id}
+                  className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
+                >
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-3 h-3 rounded-full ${
+                        app.status === 'online'
+                          ? 'bg-emerald-400 animate-pulse-dot'
+                          : app.status === 'error'
+                          ? 'bg-red-400'
+                          : 'bg-gray-500'
+                      }`}
+                    />
+                    <div>
+                      <p className="text-sm font-medium text-gray-200">
+                        {app.name}
+                      </p>
+                      <p className="text-xs text-gray-500">
+                        {app.containerName}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    {app.health?.recette?.responseTime && (
+                      <span className="text-xs text-gray-500">
+                        {app.health.recette.responseTime}ms
+                      </span>
+                    )}
+                    <StatusBadge status={app.status} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}