feat: portail dynamique - rendu via API /public/apps du dashboard

- Correction URLs tuiles : contacts/podcasts/veille/flotte/sonum/demat/facturation -> recette.santinova-soft.org
- Correction DASHBOARD_STATUS_URL -> dashboard.recette.santinova-soft.org
- Badge 'Recette' (violet) au lieu de 'Production' (vert)
- Alignement structurel avec portail prod (grisage, data-app-id, polling)

docker-compose.yml

@@ -9,11 +9,10 @@ services:
       - web
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.portail.rule=Host(`portail.santinova-soft.org`)"
-      - "traefik.http.routers.portail.entrypoints=websecure"
-      - "traefik.http.routers.portail.tls.certresolver=letsencrypt"
-      - "traefik.http.services.portail.loadbalancer.server.port=3000"
-
+      - "traefik.http.routers.portail-recette.rule=Host(`portail.recette.santinova-soft.org`)"
+      - "traefik.http.routers.portail-recette.entrypoints=websecure"
+      - "traefik.http.routers.portail-recette.tls.certresolver=letsencrypt"
+      - "traefik.http.services.portail-recette.loadbalancer.server.port=3000"
 networks:
   web:
     external: true

index.html

@@ -99,9 +99,7 @@
       top: 1px;
     }
 
-    .tab-btn:hover {
-      color: #c5c8d8;
-    }
+    .tab-btn:hover { color: #c5c8d8; }
 
     .tab-btn.active {
       color: #ffffff;
@@ -137,9 +135,7 @@
       width: 100%;
     }
 
-    .tab-panel {
-      display: none;
-    }
+    .tab-panel { display: none; }
 
     .tab-panel.active {
       display: block;
@@ -163,10 +159,7 @@
       margin-bottom: 10px;
     }
 
-    .section-header p {
-      color: #8b8fa8;
-      font-size: 1rem;
-    }
+    .section-header p { color: #8b8fa8; font-size: 1rem; }
 
     /* ===== GRID ===== */
     .apps-grid {
@@ -188,17 +181,13 @@
       transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
 
-    .app-card:hover {
-      transform: translateY(-8px) scale(1.03);
-    }
+    .app-card:hover { transform: translateY(-8px) scale(1.03); }
 
     .app-card:hover .card-image-wrapper {
       box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
     }
 
-    .app-card:hover .card-name {
-      color: #ffffff;
-    }
+    .app-card:hover .card-name { color: #ffffff; }
 
     .card-image-wrapper {
       width: 180px;
@@ -240,13 +229,13 @@
       margin-top: 6px;
       font-size: 0.7rem;
       font-weight: 600;
-      color: #10b981;
+      color: #6366f1;
       text-transform: uppercase;
       letter-spacing: 0.8px;
-      background: rgba(16,185,129,0.1);
+      background: rgba(99,102,241,0.1);
       padding: 3px 10px;
       border-radius: 10px;
-      border: 1px solid rgba(16,185,129,0.2);
+      border: 1px solid rgba(99,102,241,0.2);
     }
 
     /* ===== APP OFFLINE (grisage) ===== */
@@ -257,9 +246,7 @@
       filter: grayscale(80%);
     }
 
-    .app-card.offline .card-image-wrapper {
-      box-shadow: none;
-    }
+    .app-card.offline .card-image-wrapper { box-shadow: none; }
 
     .card-status-badge {
       display: none;
@@ -275,8 +262,14 @@
       border: 1px solid rgba(239,68,68,0.3);
     }
 
-    .app-card.offline .card-status-badge {
-      display: inline-block;
+    .app-card.offline .card-status-badge { display: inline-block; }
+
+    /* ===== LOADING ===== */
+    .loading-msg {
+      text-align: center;
+      color: #8b8fa8;
+      padding: 60px 0;
+      font-size: 1rem;
     }
 
     /* ===== FOOTER ===== */
@@ -296,24 +289,6 @@
       font-size: 0.8rem;
     }
 
-    .footer-powered span {
-      font-weight: 600;
-      color: #8b8fa8;
-    }
-
-    .footer-logo-placeholder {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      font-weight: 800;
-      font-size: 0.95rem;
-      letter-spacing: -0.3px;
-    }
-
     /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
       header { padding: 20px 24px; }
@@ -347,21 +322,21 @@
       </div>
       <div>
         <div class="header-title">Portail Applicatif</div>
-        <div class="header-subtitle">Environnement de production</div>
+        <div class="header-subtitle">Environnement de recette</div>
       </div>
     </div>
-    <div class="header-badge">Production</div>
+    <div class="header-badge">Recette</div>
   </header>
 
   <!-- TABS NAV -->
   <div class="tabs-wrapper">
-    <button class="tab-btn active" onclick="switchTab('itinova', this)">
+    <button id="tab-itinova" class="tab-btn active" onclick="switchTab('itinova', this)">
       Applications Itinova
-      <span class="tab-count">5</span>
+      <span class="tab-count" id="count-itinova">…</span>
     </button>
-    <button class="tab-btn" onclick="switchTab('santinova', this)">
+    <button id="tab-santinova" class="tab-btn" onclick="switchTab('santinova', this)">
       Applications Santinova
-      <span class="tab-count">3</span>
+      <span class="tab-count" id="count-santinova">…</span>
     </button>
   </div>
 
@@ -374,58 +349,8 @@
         <h2>Applications Itinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
-
-        <!-- Gestion des Formations -->
-        <a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.itinova.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/formation-manager-itinova.png" alt="Gestion des Formations" />
-          </div>
-          <div class="card-name">Gestion des Formations</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Contacts -->
-        <a class="app-card" data-app-id="itinova-contacts" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-contacts.png" alt="Itinova Contacts" />
-          </div>
-          <div class="card-name">Itinova Contacts</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Podcasts -->
-        <a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
-          </div>
-          <div class="card-name">Itinova Podcasts</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Veille Stratégique -->
-        <a class="app-card" data-app-id="veille-reglementaire" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
-          </div>
-          <div class="card-name">Veille Stratégique</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Gestion de Flotte -->
-        <a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
-          </div>
-          <div class="card-name">Itinova Gestion de Flotte</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
+      <div id="grid-itinova" class="apps-grid">
+        <div class="loading-msg">Chargement des applications…</div>
       </div>
     </div>
 
@@ -435,38 +360,8 @@
         <h2>Applications Santinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
-
-        <!-- SONUM -->
-        <a class="app-card" data-app-id="sonum" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/sonum.png" alt="SONUM" />
-          </div>
-          <div class="card-name">SONUM</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Démat. Facturation DSI -->
-        <a class="app-card" data-app-id="demat-facturation-dsi" href="https://demat-facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/demat-facturation-dsi.jpg" alt="Démat. Facturation DSI" />
-          </div>
-          <div class="card-name">Démat. Facturation DSI</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Facturation Santinova -->
-        <a class="app-card" data-app-id="facturation-santinova" href="https://facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/facturation.png" alt="Facturation Santinova" />
-          </div>
-          <div class="card-name">Facturation Santinova</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
+      <div id="grid-santinova" class="apps-grid">
+        <div class="loading-msg">Chargement des applications…</div>
       </div>
     </div>
 
@@ -480,22 +375,9 @@
   </footer>
 
   <script>
-    // URL de l'API de statut du dashboard de production
-    var DASHBOARD_STATUS_URL = 'https://dashboard.santinova-soft.org/api/public/status';
-
-    function updateTabCounts() {
-      document.querySelectorAll('.tab-btn').forEach(function(btn) {
-        var onclick = btn.getAttribute('onclick') || '';
-        var match = onclick.match(/switchTab\('(\w+)'/);
-        if (!match) return;
-        var panelId = 'panel-' + match[1];
-        var panel = document.getElementById(panelId);
-        if (!panel) return;
-        var count = panel.querySelectorAll('.app-card').length;
-        var badge = btn.querySelector('.tab-count');
-        if (badge) badge.textContent = count;
-      });
-    }
+    // URL de l'API du dashboard de recette
+    var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
+    var DASHBOARD_STATUS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/status';
 
     function switchTab(tabName, btn) {
       document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
@@ -504,12 +386,65 @@
       document.getElementById('panel-' + tabName).classList.add('active');
     }
 
+    /**
+     * Construit une tuile HTML pour une application.
+     */
+    function buildCard(app) {
+      var url = (app.urls && app.urls.recette) ? app.urls.recette : '#';
+      var image = app.image || ('images/' + app.id + '.png');
+      var isOffline = app.status === 'offline' || !app.containerRunning;
+      var offlineClass = isOffline ? ' offline' : '';
+      return '<a class="app-card' + offlineClass + '" data-app-id="' + app.id + '" href="' + url + '" target="_blank" rel="noopener noreferrer">' +
+        '<div class="card-image-wrapper"><img src="' + image + '" alt="' + app.name + '" onerror="this.src=\'images/default.png\'" /></div>' +
+        '<div class="card-name">' + app.name + '</div>' +
+        '<div class="card-env-badge">Recette</div>' +
+        '<div class="card-status-badge">Hors ligne</div>' +
+        '</a>';
+    }
+
+    /**
+     * Charge les apps depuis l'API et construit les grilles.
+     */
+    function loadApps() {
+      fetch(DASHBOARD_APPS_URL, { cache: 'no-store' })
+        .then(function(r) {
+          if (!r.ok) throw new Error('HTTP ' + r.status);
+          return r.json();
+        })
+        .then(function(apps) {
+          var itinovaApps = apps.filter(function(a) { return a.category === 'ITINOVA'; });
+          var santinovaApps = apps.filter(function(a) { return a.category === 'SANTINOVA'; });
+
+          var gridI = document.getElementById('grid-itinova');
+          var gridS = document.getElementById('grid-santinova');
+
+          if (itinovaApps.length === 0) {
+            gridI.innerHTML = '<div class="loading-msg">Aucune application Itinova déployée.</div>';
+          } else {
+            gridI.innerHTML = itinovaApps.map(buildCard).join('');
+          }
+
+          if (santinovaApps.length === 0) {
+            gridS.innerHTML = '<div class="loading-msg">Aucune application Santinova déployée.</div>';
+          } else {
+            gridS.innerHTML = santinovaApps.map(buildCard).join('');
+          }
+
+          document.getElementById('count-itinova').textContent = itinovaApps.length;
+          document.getElementById('count-santinova').textContent = santinovaApps.length;
+        })
+        .catch(function(err) {
+          console.warn('[Portail] Impossible de charger les apps:', err.message);
+          document.getElementById('grid-itinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
+          document.getElementById('grid-santinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
+        });
+    }
+
     /**
      * Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
      */
     function applyStatuses(statuses) {
-      var cards = document.querySelectorAll('.app-card[data-app-id]');
-      cards.forEach(function(card) {
+      document.querySelectorAll('.app-card[data-app-id]').forEach(function(card) {
         var appId = card.getAttribute('data-app-id');
         var appStatus = statuses.find(function(s) { return s.id === appId; });
         if (appStatus) {
@@ -528,26 +463,24 @@
      */
     function fetchAndApplyStatuses() {
       fetch(DASHBOARD_STATUS_URL, { cache: 'no-store' })
-        .then(function(response) {
-          if (!response.ok) throw new Error('HTTP ' + response.status);
-          return response.json();
-        })
-        .then(function(statuses) {
-          applyStatuses(statuses);
+        .then(function(r) {
+          if (!r.ok) throw new Error('HTTP ' + r.status);
+          return r.json();
         })
+        .then(applyStatuses)
         .catch(function(err) {
           console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
         });
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-      updateTabCounts();
-      // Premier appel immédiat
-      fetchAndApplyStatuses();
-      // Polling toutes les 30 secondes
+      // Charger les apps au démarrage
+      loadApps();
+      // Polling statuts toutes les 30 secondes
       setInterval(fetchAndApplyStatuses, 30000);
+      // Premier check statuts après 3s (laisser le temps aux tuiles d'être rendues)
+      setTimeout(fetchAndApplyStatuses, 3000);
     });
   </script>
-
 </body>
 </html>