Front + gestion des utilisateurs + affichage indice, tri et creation action

2026-08-20 17:28:26 +00:00
parent 566ddf06b1
commit 71cf430d39
7 changed files with 2695 additions and 609 deletions
@@ -19,48 +19,58 @@
    <link rel="stylesheet" href="../css/style.css" />
  </head>

-  <body
-    class="bg-slate-900 text-slate-100 min-h-screen flex flex-col justify-between"
-  >
+  <body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
    <!-- =========================================================
-     HEADER
-     ========================================================= -->
+         HEADER
+         ========================================================= -->

    <header
-      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl flex justify-between items-center"
+      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
    >
-      <div class="flex items-center">
-        <img
-          src="../images/GFBlanc.png"
-          alt="Logo Giraud Finance"
-          class="h-12 w-auto object-contain"
-        />
-      </div>
+      <div class="flex flex-col md:flex-row justify-between items-center gap-5">
+        <!-- Logo -->

-      <div>
-        <h1 class="text-xl font-bold text-white tracking-tight">
-          Espace d'Administration
-        </h1>
-      </div>
+        <div class="flex items-center">
+          <img
+            src="../images/GFBlanc.png"
+            alt="Logo Giraud Finance"
+            class="h-12 w-auto object-contain"
+          />
+        </div>

-      <div>
-        <a
-          href="https://www.giraud-finance.com"
-          class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
-        >
-          <span>← Retour au site</span>
-        </a>
+        <!-- Titre -->
+
+        <div class="text-center">
+          <h1 class="text-xl font-bold text-white tracking-tight">
+            Espace d'Administration
+          </h1>
+
+          <p class="text-xs text-slate-400 mt-1">
+            Panneau de contrôle Giraud Finance
+          </p>
+        </div>
+
+        <!-- Retour au site -->
+
+        <div>
+          <a
+            href="https://www.giraud-finance.com"
+            class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center"
+          >
+            <span>← Retour au site</span>
+          </a>
+        </div>
      </div>
    </header>

    <!-- =========================================================
-     CONTENU PRINCIPAL
-     ========================================================= -->
+         CONTENU PRINCIPAL
+         ========================================================= -->

    <main class="flex-grow flex items-center justify-center p-6">
      <!-- =====================================================
-         LOGIN
-         ===================================================== -->
+           LOGIN
+           ===================================================== -->

      <div
        id="login-box"
@@ -90,7 +100,7 @@
              id="username"
              required
              autocomplete="username"
-              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
              placeholder="Votre nom d'utilisateur"
            />
          </div>
@@ -110,7 +120,7 @@
              id="password"
              required
              autocomplete="current-password"
-              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
              placeholder="••••••••"
            />
          </div>
@@ -141,76 +151,160 @@
      </div>

      <!-- =====================================================
-         DASHBOARD ADMINISTRATEUR
-         ===================================================== -->
+           DASHBOARD ADMINISTRATEUR
+           ===================================================== -->

      <div
        id="admin-dashboard"
-        class="w-full max-w-4xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
+        class="w-full max-w-6xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
      >
-        <!-- Entête dashboard -->
+        <!-- En-tête dashboard -->

        <div
-          class="flex justify-between items-center border-b border-slate-700 pb-4"
+          class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-700 pb-5"
        >
          <div>
            <h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>

-            <p id="welcome-user" class="text-xs text-slate-400">
+            <p id="welcome-user" class="text-xs text-slate-400 mt-1">
              Bienvenue dans l'espace sécurisé Giraud Finance.
            </p>
          </div>

+          <!-- Déconnexion -->
+
          <button
            id="btn-logout"
            type="button"
-            class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all"
+            class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-rose-500/50"
          >
            Déconnexion
          </button>
        </div>

        <!-- =================================================
-             BLOCS ADMINISTRATION
+             DEUX BOX COTE A COTE
             ================================================= -->

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Gestion indices -->
+          <!-- =================================================
+               BOX INDICES & ACTIONS
+               ================================================= -->

          <div
-            class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3"
+            class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
          >
-            <h3 class="text-sm font-bold text-white">
-              Gestion des Indices & Actions
-            </h3>
+            <div>
+              <div
+                class="w-12 h-12 flex items-center justify-center rounded-xl bg-emerald-600/20 border border-emerald-500/30 mb-4"
+              >
+                <span class="text-2xl">📈</span>
+              </div>

-            <p class="text-xs text-slate-400">
-              Paramétrez l'affichage des actions et le statut des indices.
-            </p>
+              <h3 class="text-base font-bold text-white">
+                Gestion des Indices & Actions
+              </h3>
+
+              <p class="text-xs text-slate-400 mt-2 leading-relaxed">
+                Gérez les indices et les actions disponibles sur le site. Vous
+                pouvez notamment contrôler leur statut et leur affichage.
+              </p>
+
+              <div class="mt-4 space-y-2">
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Gestion des indices
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Gestion des actions
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Activation / désactivation
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                  Affichage sur le site
+                </div>
+              </div>
+            </div>
+
+            <!-- Bouton -->
+
+            <a
+              href="./tableindice.html"
+              class="mt-6 w-full inline-flex justify-center items-center bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-emerald-500"
+            >
+              Gérer les indices & actions
+              <span class="ml-2">→</span>
+            </a>
          </div>

          <!-- =================================================
-                 SECURITE DU COMPTE
-                 ================================================= -->
+               BOX SECURITE
+               ================================================= -->

-          <a
-            href="/html/securite.html"
-            id="btn-securite"
-            class="block bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3 hover:bg-slate-900 hover:border-emerald-500/50 transition-all"
+          <div
+            class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
          >
-            <h3 class="text-sm font-bold text-white">Sécurité du Compte</h3>
+            <div>
+              <div
+                class="w-12 h-12 flex items-center justify-center rounded-xl bg-orange-600/20 border border-orange-500/30 mb-4"
+              >
+                <span class="text-2xl">🔐</span>
+              </div>

-            <p class="text-xs text-slate-400">
-              Gérer les utilisateurs et les mots de passe.
-            </p>
-          </a>
+              <h3 class="text-base font-bold text-white">Sécurité du Compte</h3>
+
+              <p class="text-xs text-slate-400 mt-2 leading-relaxed">
+                Gérez les utilisateurs autorisés à accéder à l'administration de
+                Giraud Finance.
+              </p>
+
+              <div class="mt-4 space-y-2">
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Gestion des utilisateurs
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Création d'utilisateurs
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Activation / désactivation
+                </div>
+
+                <div class="flex items-center text-xs text-slate-400">
+                  <span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
+                  Modification des mots de passe
+                </div>
+              </div>
+            </div>
+
+            <!-- Bouton -->
+
+            <a
+              href="./securite.html"
+              class="mt-6 w-full inline-flex justify-center items-center bg-orange-600 hover:bg-orange-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-orange-500"
+            >
+              Gérer la sécurité
+              <span class="ml-2">→</span>
+            </a>
+          </div>
        </div>
      </div>
    </main>

    <!-- =========================================================
-     FOOTER
-     ========================================================= -->
+         FOOTER
+         ========================================================= -->

    <footer
      class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
@@ -219,8 +313,8 @@
    </footer>

    <!-- =========================================================
-     JAVASCRIPT
-     ========================================================= -->
+         JAVASCRIPT AUTHENTIFICATION
+         ========================================================= -->

    <script>
      "use strict";
@@ -228,21 +322,13 @@
      const API_LOGIN = "../php/api_login.php";

      const formLogin = document.getElementById("form-login");
-
      const loginBox = document.getElementById("login-box");
-
      const adminDashboard = document.getElementById("admin-dashboard");
-
      const loginError = document.getElementById("login-error");
-
      const btnLogin = document.getElementById("btn-login");
-
      const btnLogout = document.getElementById("btn-logout");
-
      const username = document.getElementById("username");
-
      const password = document.getElementById("password");
-
      const welcomeUser = document.getElementById("welcome-user");

      /*
@@ -295,11 +381,18 @@

            credentials: "same-origin",

+            cache: "no-store",
+
            body: JSON.stringify({
              action: "check",
            }),
          });

+          if (!response.ok) {
+            afficherLogin();
+            return;
+          }
+
          const data = await response.json();

          if (data.status === "success" && data.authenticated === true) {
@@ -367,7 +460,7 @@
            password.focus();
          }
        } catch (error) {
-          console.error(error);
+          console.error("Erreur connexion :", error);

          loginError.textContent = "Erreur de connexion au serveur.";

@@ -401,7 +494,7 @@
            }),
          });
        } catch (error) {
-          console.error(error);
+          console.error("Erreur déconnexion :", error);
        }

        afficherLogin();
@@ -413,7 +506,9 @@
       * =========================================================
       */

-      verifierSession();
+      document.addEventListener("DOMContentLoaded", function () {
+        verifierSession();
+      });
    </script>
  </body>
 </html>
@@ -2,6 +2,7 @@
 <html lang="fr">
  <head>
    <meta charset="UTF-8" />
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Sécurité - Giraud Finance</title>
@@ -13,57 +14,55 @@
      href="../images/dollars.ico"
    />

-    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

-    <!-- CSS général -->
    <link rel="stylesheet" href="../css/style.css" />
  </head>

  <body class="bg-slate-900 text-slate-100 min-h-screen">
    <div class="max-w-7xl mx-auto p-6">
      <!-- =====================================================
-           EN-TÊTE
+           HEADER
           ===================================================== -->

-      <div
+      <header
        class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
      >
        <div
-          class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+          class="flex flex-col md:flex-row justify-between items-center gap-5"
        >
+          <!-- Logo -->
+
+          <div class="flex items-center">
+            <img
+              src="../images/GFBlanc.png"
+              alt="Logo Giraud Finance"
+              class="h-12 w-auto object-contain"
+            />
+          </div>
+
          <!-- Titre -->

-          <div>
-            <h1 class="text-2xl font-bold text-white">Sécurité</h1>
+          <div class="text-center">
+            <h1 class="text-xl font-bold text-white tracking-tight">
+              Espace d'Administration
+            </h1>

-            <p class="text-sm text-slate-400 mt-1">Gestion des utilisateurs</p>
+            <p class="text-xs text-slate-400 mt-1">Sécurité du compte</p>
          </div>

          <!-- Boutons -->

          <div class="flex items-center gap-3">
-            <!-- Nouveau utilisateur -->
-
-            <button
-              id="btnNouvelUtilisateur"
-              type="button"
-              class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
-            >
-              + Nouvel utilisateur
-            </button>
-
-            <!-- Retour au menu -->
-
            <a
              href="./admin.html"
-              class="bg-slate-700 hover:bg-slate-600 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-slate-600"
+              class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600"
            >
              ← Retour au menu
            </a>
          </div>
        </div>
-      </div>
+      </header>

      <!-- =====================================================
           MESSAGE
@@ -81,10 +80,36 @@
      <div
        class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
      >
+        <!-- En-tête tableau -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+        >
+          <div>
+            <h2 class="text-lg font-bold text-white">
+              Gestion des utilisateurs
+            </h2>
+
+            <p class="text-xs text-slate-400 mt-1">
+              Gestion des comptes administrateurs.
+            </p>
+          </div>
+
+          <!-- Nouveau utilisateur -->
+
+          <button
+            id="btnNouvelUtilisateur"
+            type="button"
+            class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
+          >
+            + Nouvel utilisateur
+          </button>
+        </div>
+
+        <!-- Tableau -->
+
        <div class="overflow-x-auto">
          <table class="w-full">
-            <!-- En-tête -->
-
            <thead class="bg-slate-950 text-slate-300">
              <tr>
                <th
@@ -119,8 +144,6 @@
              </tr>
            </thead>

-            <!-- Utilisateurs -->
-
            <tbody
              id="listeUtilisateurs"
              class="divide-y divide-slate-700"
@@ -0,0 +1,454 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Indices & Actions - Giraud Finance</title>
+
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../images/dollars.ico"
+    />
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- CSS général -->
+    <link rel="stylesheet" href="../css/style.css" />
+  </head>
+
+  <body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
+    <!-- =====================================================
+         HEADER
+         ===================================================== -->
+
+    <header
+      class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
+    >
+      <div class="flex flex-col md:flex-row justify-between items-center gap-5">
+        <!-- Logo -->
+
+        <div class="flex items-center">
+          <img
+            src="../images/GFBlanc.png"
+            alt="Logo Giraud Finance"
+            class="h-12 w-auto object-contain"
+          />
+        </div>
+
+        <!-- Titre -->
+
+        <div class="text-center">
+          <h1 class="text-xl font-bold text-white tracking-tight">
+            Gestion des Indices & Actions
+          </h1>
+
+          <p class="text-xs text-slate-400 mt-1">
+            Panneau de contrôle Giraud Finance
+          </p>
+        </div>
+
+        <!-- Retour -->
+
+        <div>
+          <a
+            href="./admin.html"
+            class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
+          >
+            <span>← Retour au menu</span>
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <!-- =====================================================
+         CONTENU PRINCIPAL
+         ===================================================== -->
+
+    <main class="flex-grow p-6">
+      <div
+        class="max-w-7xl mx-auto bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden"
+      >
+        <!-- =================================================
+             ENTÊTE TABLEAU
+             ================================================= -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
+        >
+          <!-- Titre + compteur -->
+
+          <div>
+            <h2 class="text-lg font-bold text-white">Indices & Actions</h2>
+
+            <p id="compteur" class="text-xs text-slate-400 mt-1">
+              Chargement...
+            </p>
+          </div>
+
+          <!-- ===============================================
+               FILTRE + NOUVEAU + ACTUALISER
+               =============================================== -->
+
+          <div class="flex flex-wrap items-center gap-3">
+            <!-- Filtre -->
+
+            <select
+              id="filtreIndice"
+              class="bg-slate-900 border border-slate-700 text-white text-xs rounded-xl px-4 py-2 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+            >
+              <option value="tout">Tout</option>
+
+              <option value="afficher">Afficher</option>
+
+              <option value="inactif">Inactif</option>
+            </select>
+
+            <!-- Nouveau -->
+
+            <button
+              id="btnNouveau"
+              type="button"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
+            >
+              + Nouveau
+            </button>
+
+            <!-- Actualiser -->
+
+            <button
+              id="btnActualiser"
+              type="button"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
+            >
+              ↻ Actualiser
+            </button>
+          </div>
+        </div>
+
+        <!-- =================================================
+             MESSAGE
+             ================================================= -->
+
+        <div
+          id="message"
+          class="hidden mx-6 mt-5 px-4 py-3 rounded-xl text-sm font-medium"
+        ></div>
+
+        <!-- =================================================
+             TABLEAU
+             ================================================= -->
+
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-[1100px]">
+            <!-- =================================================
+                 EN-TÊTE
+                 ================================================= -->
+
+            <thead class="bg-slate-950">
+              <tr>
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  ID
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Indice
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Nom
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  ISIN
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Symbole
+                </th>
+
+                <th
+                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Actif
+                </th>
+
+                <th
+                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Afficher
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Mis à jour
+                </th>
+
+                <th
+                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                >
+                  Créé le
+                </th>
+              </tr>
+            </thead>
+
+            <!-- =================================================
+                 CORPS
+                 ================================================= -->
+
+            <tbody
+              id="tableauIndices"
+              class="divide-y divide-slate-700"
+            ></tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+
+    <!-- =====================================================
+         POPUP NOUVEL ENREGISTREMENT
+         ===================================================== -->
+
+    <div
+      id="modalNouvelEnregistrement"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 backdrop-blur-sm p-4"
+    >
+      <div
+        class="w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl"
+      >
+        <!-- =================================================
+             EN-TÊTE POPUP
+             ================================================= -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex justify-between items-center"
+        >
+          <div>
+            <h2 class="text-lg font-bold text-white">Nouvel enregistrement</h2>
+
+            <p class="text-xs text-slate-400 mt-1">
+              Ajouter une nouvelle action ou un indice
+            </p>
+          </div>
+
+          <!-- Fermer -->
+
+          <button
+            id="btnFermerModal"
+            type="button"
+            class="text-slate-400 hover:text-white text-2xl leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        <!-- =================================================
+             FORMULAIRE
+             ================================================= -->
+
+        <form id="formNouvelEnregistrement" class="p-6 space-y-5">
+          <!-- =================================================
+               INDICE
+               ================================================= -->
+
+          <div>
+            <label
+              for="nouvelIndice"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Indice
+            </label>
+
+            <input
+              type="text"
+              id="nouvelIndice"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+              placeholder="Exemple : CAC40"
+            />
+          </div>
+
+          <!-- =================================================
+               NOM
+               ================================================= -->
+
+          <div>
+            <label
+              for="nouveauNom"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Nom
+            </label>
+
+            <input
+              type="text"
+              id="nouveauNom"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+              placeholder="Nom de l'action"
+            />
+          </div>
+
+          <!-- =================================================
+               ISIN + SYMBOLE
+               ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- ISIN -->
+
+            <div>
+              <label
+                for="nouvelIsin"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                ISIN
+              </label>
+
+              <input
+                type="text"
+                id="nouvelIsin"
+                required
+                maxlength="12"
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                placeholder="FR0000120404"
+              />
+            </div>
+
+            <!-- Symbole -->
+
+            <div>
+              <label
+                for="nouveauSymbole"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                Symbole
+              </label>
+
+              <input
+                type="text"
+                id="nouveauSymbole"
+                required
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                placeholder="AC"
+              />
+            </div>
+          </div>
+
+          <!-- =================================================
+               ACTIF + AFFICHER
+               ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Actif -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Actif</div>
+
+                <div class="text-xs text-slate-500">Action active</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="nouvelActif"
+                checked
+                class="w-5 h-5 accent-emerald-500"
+              />
+            </label>
+
+            <!-- Afficher -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Afficher</div>
+
+                <div class="text-xs text-slate-500">Afficher sur le site</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="nouvelAfficher"
+                checked
+                class="w-5 h-5 accent-emerald-500"
+              />
+            </label>
+          </div>
+
+          <!-- =================================================
+               MESSAGE FORMULAIRE
+               ================================================= -->
+
+          <div
+            id="messageNouveau"
+            class="hidden px-4 py-3 rounded-xl text-sm"
+          ></div>
+
+          <!-- =================================================
+               BOUTONS
+               ================================================= -->
+
+          <div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
+            <!-- Annuler -->
+
+            <button
+              id="btnAnnuler"
+              type="button"
+              class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-slate-600"
+            >
+              Annuler
+            </button>
+
+            <!-- Sauvegarder -->
+
+            <button
+              id="btnSauvegarder"
+              type="submit"
+              class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-emerald-500"
+            >
+              Sauvegarder
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- =====================================================
+         FOOTER
+         ===================================================== -->
+
+    <footer
+      class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
+    >
+      Copyright Jean-Francois GIRAUD 2026
+    </footer>
+
+    <!-- =====================================================
+         JAVASCRIPT
+         ===================================================== -->
+
+    <script src="../js/tableindice.js"></script>
+  </body>
+</html>
@@ -0,0 +1,824 @@
+"use strict";
+
+/*
+ * =========================================================
+ * CONFIGURATION
+ * =========================================================
+ */
+
+const API_LIST_URL = "../php/api_list_full_table_indice.php";
+const API_CREATE_URL = "../php/api_create_table_indice.php";
+
+/*
+ * =========================================================
+ * ELEMENTS DOM
+ * =========================================================
+ */
+
+const tableauIndices = document.getElementById("tableauIndices");
+const compteur = document.getElementById("compteur");
+const message = document.getElementById("message");
+
+const btnActualiser = document.getElementById("btnActualiser");
+const btnNouveau = document.getElementById("btnNouveau");
+const filtreIndice = document.getElementById("filtreIndice");
+
+const modalNouvelEnregistrement = document.getElementById(
+  "modalNouvelEnregistrement",
+);
+
+const btnFermerModal = document.getElementById("btnFermerModal");
+const btnAnnuler = document.getElementById("btnAnnuler");
+
+const formNouvelEnregistrement = document.getElementById(
+  "formNouvelEnregistrement",
+);
+
+const nouvelIndice = document.getElementById("nouvelIndice");
+const nouveauNom = document.getElementById("nouveauNom");
+const nouvelIsin = document.getElementById("nouvelIsin");
+const nouveauSymbole = document.getElementById("nouveauSymbole");
+
+const nouvelActif = document.getElementById("nouvelActif");
+const nouvelAfficher = document.getElementById("nouvelAfficher");
+
+const messageNouveau = document.getElementById("messageNouveau");
+const btnSauvegarder = document.getElementById("btnSauvegarder");
+
+/*
+ * =========================================================
+ * DONNEES
+ * =========================================================
+ */
+
+let tousLesEnregistrements = [];
+
+/*
+ * =========================================================
+ * AFFICHER MESSAGE GENERAL
+ * =========================================================
+ */
+
+function afficherMessage(texte, type = "info") {
+  message.textContent = texte;
+
+  message.classList.remove(
+    "hidden",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-slate-900",
+    "border-slate-700",
+    "text-slate-300",
+  );
+
+  message.classList.add("border");
+
+  if (type === "success") {
+    message.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else if (type === "error") {
+    message.classList.add("bg-rose-900/50", "border-rose-700", "text-rose-300");
+  } else {
+    message.classList.add("bg-slate-900", "border-slate-700", "text-slate-300");
+  }
+}
+
+/*
+ * =========================================================
+ * CACHER MESSAGE GENERAL
+ * =========================================================
+ */
+
+function cacherMessage() {
+  message.classList.add("hidden");
+}
+
+/*
+ * =========================================================
+ * MESSAGE MODAL
+ * =========================================================
+ */
+
+function afficherMessageNouveau(texte, type = "info") {
+  messageNouveau.textContent = texte;
+
+  messageNouveau.classList.remove(
+    "hidden",
+    "bg-emerald-900/50",
+    "border-emerald-700",
+    "text-emerald-300",
+    "bg-rose-900/50",
+    "border-rose-700",
+    "text-rose-300",
+    "bg-slate-900",
+    "border-slate-700",
+    "text-slate-300",
+  );
+
+  messageNouveau.classList.add("border");
+
+  if (type === "success") {
+    messageNouveau.classList.add(
+      "bg-emerald-900/50",
+      "border-emerald-700",
+      "text-emerald-300",
+    );
+  } else if (type === "error") {
+    messageNouveau.classList.add(
+      "bg-rose-900/50",
+      "border-rose-700",
+      "text-rose-300",
+    );
+  } else {
+    messageNouveau.classList.add(
+      "bg-slate-900",
+      "border-slate-700",
+      "text-slate-300",
+    );
+  }
+}
+
+/*
+ * =========================================================
+ * CACHER MESSAGE MODAL
+ * =========================================================
+ */
+
+function cacherMessageNouveau() {
+  messageNouveau.classList.add("hidden");
+  messageNouveau.textContent = "";
+}
+
+/*
+ * =========================================================
+ * ECHAPPER HTML
+ * =========================================================
+ */
+
+function echapperHTML(valeur) {
+  if (valeur === null || valeur === undefined) {
+    return "";
+  }
+
+  return String(valeur)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+/*
+ * =========================================================
+ * CHECKBOX
+ * =========================================================
+ */
+
+function creerCheckbox(valeur) {
+  const checked = Number(valeur) === 1 || valeur === true || valeur === "1";
+
+  return `
+    <div class="flex justify-center items-center">
+      <input
+        type="checkbox"
+        ${checked ? "checked" : ""}
+        disabled
+        class="w-5 h-5
+               accent-emerald-500
+               cursor-not-allowed
+               opacity-90"
+      />
+    </div>
+  `;
+}
+
+/*
+ * =========================================================
+ * CREER UNE LIGNE
+ * =========================================================
+ */
+
+function creerLigne(enregistrement) {
+  return `
+    <tr class="hover:bg-slate-700/30 transition-colors">
+
+      <!-- ID -->
+
+      <td class="px-4 py-3 text-sm text-slate-500 whitespace-nowrap">
+        ${echapperHTML(enregistrement.id)}
+      </td>
+
+      <!-- Indice -->
+
+      <td class="px-4 py-3 whitespace-nowrap">
+        <span
+          class="inline-flex items-center
+                 px-2.5 py-1
+                 rounded-lg
+                 bg-slate-700
+                 border border-slate-600
+                 text-xs font-semibold
+                 text-slate-200"
+        >
+          ${echapperHTML(enregistrement.indice)}
+        </span>
+      </td>
+
+      <!-- Nom -->
+
+      <td class="px-4 py-3 text-sm font-medium text-white whitespace-nowrap">
+        ${echapperHTML(enregistrement.nom)}
+      </td>
+
+      <!-- ISIN -->
+
+      <td class="px-4 py-3 text-sm text-slate-300 font-mono whitespace-nowrap">
+        ${echapperHTML(enregistrement.isin)}
+      </td>
+
+      <!-- Symbole -->
+
+      <td class="px-4 py-3 text-sm text-slate-300 font-semibold whitespace-nowrap">
+        ${echapperHTML(enregistrement.symbole)}
+      </td>
+
+      <!-- Actif -->
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.actif)}
+      </td>
+
+      <!-- Afficher -->
+
+      <td class="px-4 py-3 text-center">
+        ${creerCheckbox(enregistrement.afficher)}
+      </td>
+
+      <!-- Updated -->
+
+      <td class="px-4 py-3 text-xs text-slate-400 whitespace-nowrap">
+        ${echapperHTML(enregistrement.updated_at)}
+      </td>
+
+      <!-- Created -->
+
+      <td class="px-4 py-3 text-xs text-slate-500 whitespace-nowrap">
+        ${echapperHTML(enregistrement.created_at)}
+      </td>
+
+    </tr>
+  `;
+}
+
+/*
+ * =========================================================
+ * CONSTRUIRE LES FILTRES
+ * =========================================================
+ */
+
+function construireFiltres() {
+  const filtreActuel = filtreIndice.value;
+
+  const indices = [
+    ...new Set(
+      tousLesEnregistrements
+        .map(function (enregistrement) {
+          return enregistrement.indice;
+        })
+        .filter(function (indice) {
+          return (
+            indice !== null &&
+            indice !== undefined &&
+            String(indice).trim() !== ""
+          );
+        }),
+    ),
+  ];
+
+  indices.sort(function (a, b) {
+    return String(a).localeCompare(String(b), "fr", {
+      sensitivity: "base",
+    });
+  });
+
+  filtreIndice.innerHTML = "";
+
+  /*
+   * Tout
+   */
+
+  const optionTout = document.createElement("option");
+
+  optionTout.value = "tout";
+  optionTout.textContent = "Tout";
+
+  filtreIndice.appendChild(optionTout);
+
+  /*
+   * Afficher
+   */
+
+  const optionAfficher = document.createElement("option");
+
+  optionAfficher.value = "afficher";
+  optionAfficher.textContent = "Afficher";
+
+  filtreIndice.appendChild(optionAfficher);
+
+  /*
+   * Inactif
+   */
+
+  const optionInactif = document.createElement("option");
+
+  optionInactif.value = "inactif";
+  optionInactif.textContent = "Inactif";
+
+  filtreIndice.appendChild(optionInactif);
+
+  /*
+   * Indices
+   */
+
+  indices.forEach(function (indice) {
+    const option = document.createElement("option");
+
+    option.value = "indice:" + indice;
+    option.textContent = indice;
+
+    filtreIndice.appendChild(option);
+  });
+
+  /*
+   * Restaurer le filtre
+   */
+
+  const optionExiste = Array.from(filtreIndice.options).some(function (option) {
+    return option.value === filtreActuel;
+  });
+
+  filtreIndice.value = optionExiste ? filtreActuel : "tout";
+}
+
+/*
+ * =========================================================
+ * APPLIQUER LE FILTRE
+ * =========================================================
+ */
+
+function appliquerFiltre() {
+  const filtre = filtreIndice.value;
+
+  let enregistrementsFiltres;
+
+  if (filtre === "tout") {
+    enregistrementsFiltres = tousLesEnregistrements;
+  } else if (filtre === "afficher") {
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return Number(enregistrement.afficher) === 1;
+      },
+    );
+  } else if (filtre === "inactif") {
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return Number(enregistrement.actif) === 0;
+      },
+    );
+  } else if (filtre.startsWith("indice:")) {
+    const indiceRecherche = filtre.substring("indice:".length);
+
+    enregistrementsFiltres = tousLesEnregistrements.filter(
+      function (enregistrement) {
+        return (
+          String(enregistrement.indice).toLowerCase() ===
+          String(indiceRecherche).toLowerCase()
+        );
+      },
+    );
+  } else {
+    enregistrementsFiltres = tousLesEnregistrements;
+  }
+
+  afficherDonneesFiltrees(enregistrementsFiltres);
+}
+
+/*
+ * =========================================================
+ * AFFICHER DONNEES FILTREES
+ * =========================================================
+ */
+
+function afficherDonneesFiltrees(enregistrements) {
+  tableauIndices.innerHTML = "";
+
+  if (!Array.isArray(enregistrements) || enregistrements.length === 0) {
+    compteur.textContent = "0 enregistrement";
+
+    tableauIndices.innerHTML = `
+      <tr>
+        <td
+          colspan="9"
+          class="px-6 py-10 text-center text-sm text-slate-500"
+        >
+          Aucun enregistrement correspondant
+          au filtre sélectionné.
+        </td>
+      </tr>
+    `;
+
+    return;
+  }
+
+  /*
+   * IMPORTANT :
+   * tri systématique par ID croissant.
+   */
+
+  const donneesTriees = [...enregistrements].sort(function (a, b) {
+    return Number(a.id) - Number(b.id);
+  });
+
+  let html = "";
+
+  donneesTriees.forEach(function (enregistrement) {
+    html += creerLigne(enregistrement);
+  });
+
+  tableauIndices.innerHTML = html;
+
+  compteur.textContent =
+    donneesTriees.length +
+    (donneesTriees.length > 1 ? " enregistrements" : " enregistrement");
+}
+
+/*
+ * =========================================================
+ * AFFICHER DONNEES
+ * =========================================================
+ */
+
+function afficherDonnees(data) {
+  tousLesEnregistrements = Array.isArray(data) ? data : [];
+
+  /*
+   * Tri global par ID croissant.
+   */
+
+  tousLesEnregistrements.sort(function (a, b) {
+    return Number(a.id) - Number(b.id);
+  });
+
+  construireFiltres();
+
+  appliquerFiltre();
+}
+
+/*
+ * =========================================================
+ * CHARGER LES DONNEES
+ * =========================================================
+ */
+
+async function chargerDonnees() {
+  btnActualiser.disabled = true;
+
+  btnActualiser.textContent = "↻ Chargement...";
+
+  afficherMessage("Chargement des indices et des actions...", "info");
+
+  try {
+    const response = await fetch(API_LIST_URL, {
+      method: "GET",
+      credentials: "same-origin",
+      cache: "no-store",
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error("Erreur HTTP " + response.status);
+    }
+
+    const result = await response.json();
+
+    if (!result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "L'API a retourné une erreur.",
+      );
+    }
+
+    afficherDonnees(result.data);
+
+    cacherMessage();
+  } catch (error) {
+    console.error("Erreur chargement indices/actions :", error);
+
+    tableauIndices.innerHTML = `
+      <tr>
+        <td
+          colspan="9"
+          class="px-6 py-10 text-center text-rose-400"
+        >
+          Impossible de charger les données.
+        </td>
+      </tr>
+    `;
+
+    compteur.textContent = "Erreur de chargement";
+
+    afficherMessage(
+      "Erreur lors de la récupération des données : " + error.message,
+      "error",
+    );
+  } finally {
+    btnActualiser.disabled = false;
+
+    btnActualiser.textContent = "↻ Actualiser";
+  }
+}
+
+/*
+ * =========================================================
+ * OUVRIR MODAL
+ * =========================================================
+ */
+
+function ouvrirModal() {
+  cacherMessageNouveau();
+
+  /*
+   * Valeurs par défaut
+   */
+
+  formNouvelEnregistrement.reset();
+
+  nouvelActif.checked = true;
+  nouvelAfficher.checked = true;
+
+  modalNouvelEnregistrement.classList.remove("hidden");
+
+  modalNouvelEnregistrement.classList.add("flex");
+
+  /*
+   * Focus sur Indice
+   */
+
+  setTimeout(function () {
+    nouvelIndice.focus();
+  }, 100);
+}
+
+/*
+ * =========================================================
+ * FERMER MODAL
+ * =========================================================
+ */
+
+function fermerModal() {
+  modalNouvelEnregistrement.classList.add("hidden");
+
+  modalNouvelEnregistrement.classList.remove("flex");
+
+  cacherMessageNouveau();
+}
+
+/*
+ * =========================================================
+ * SAUVEGARDER NOUVEL ENREGISTREMENT
+ * =========================================================
+ */
+
+async function sauvegarderNouvelEnregistrement() {
+  const donnees = {
+    indice: nouvelIndice.value.trim(),
+    nom: nouveauNom.value.trim(),
+    isin: nouvelIsin.value.trim().toUpperCase(),
+    symbole: nouveauSymbole.value.trim().toUpperCase(),
+    actif: nouvelActif.checked ? 1 : 0,
+    afficher: nouvelAfficher.checked ? 1 : 0,
+  };
+
+  /*
+   * Validation côté client
+   */
+
+  if (!donnees.indice) {
+    afficherMessageNouveau("Le champ Indice est obligatoire.", "error");
+
+    nouvelIndice.focus();
+
+    return;
+  }
+
+  if (!donnees.nom) {
+    afficherMessageNouveau("Le champ Nom est obligatoire.", "error");
+
+    nouveauNom.focus();
+
+    return;
+  }
+
+  if (!donnees.isin) {
+    afficherMessageNouveau("Le champ ISIN est obligatoire.", "error");
+
+    nouvelIsin.focus();
+
+    return;
+  }
+
+  if (!donnees.symbole) {
+    afficherMessageNouveau("Le champ Symbole est obligatoire.", "error");
+
+    nouveauSymbole.focus();
+
+    return;
+  }
+
+  /*
+   * Désactivation du bouton
+   */
+
+  btnSauvegarder.disabled = true;
+
+  btnSauvegarder.textContent = "Sauvegarde...";
+
+  cacherMessageNouveau();
+
+  try {
+    const response = await fetch(API_CREATE_URL, {
+      method: "POST",
+
+      credentials: "same-origin",
+
+      headers: {
+        "Content-Type": "application/json",
+
+        Accept: "application/json",
+      },
+
+      body: JSON.stringify(donnees),
+    });
+
+    const result = await response.json();
+
+    if (!response.ok || !result || result.status !== "success") {
+      throw new Error(
+        result && result.message
+          ? result.message
+          : "Impossible de créer l'enregistrement.",
+      );
+    }
+
+    /*
+     * Succès
+     */
+
+    afficherMessageNouveau("Enregistrement créé avec succès.", "success");
+
+    /*
+     * On recharge la table.
+     */
+
+    await chargerDonnees();
+
+    /*
+     * Petite pause pour laisser voir
+     * le message de succès.
+     */
+
+    setTimeout(function () {
+      fermerModal();
+    }, 500);
+  } catch (error) {
+    console.error("Erreur création enregistrement :", error);
+
+    afficherMessageNouveau("Erreur : " + error.message, "error");
+  } finally {
+    btnSauvegarder.disabled = false;
+
+    btnSauvegarder.textContent = "Sauvegarder";
+  }
+}
+
+/*
+ * =========================================================
+ * CHANGEMENT DE FILTRE
+ * =========================================================
+ */
+
+filtreIndice.addEventListener("change", function () {
+  appliquerFiltre();
+});
+
+/*
+ * =========================================================
+ * BOUTON ACTUALISER
+ * =========================================================
+ */
+
+btnActualiser.addEventListener("click", function () {
+  chargerDonnees();
+});
+
+/*
+ * =========================================================
+ * BOUTON NOUVEAU
+ * ========================================================= */
+
+btnNouveau.addEventListener("click", function () {
+  ouvrirModal();
+});
+
+/*
+ * =========================================================
+ * FERMETURE MODAL
+ * =========================================================
+ */
+
+btnFermerModal.addEventListener("click", function () {
+  fermerModal();
+});
+
+btnAnnuler.addEventListener("click", function () {
+  fermerModal();
+});
+
+/*
+ * =========================================================
+ * CLIC SUR LE FOND DU MODAL
+ * =========================================================
+ */
+
+modalNouvelEnregistrement.addEventListener("click", function (event) {
+  if (event.target === modalNouvelEnregistrement) {
+    fermerModal();
+  }
+});
+
+/*
+ * =========================================================
+ * TOUCHE ESC
+ * =========================================================
+ */
+
+document.addEventListener("keydown", function (event) {
+  if (
+    event.key === "Escape" &&
+    !modalNouvelEnregistrement.classList.contains("hidden")
+  ) {
+    fermerModal();
+  }
+});
+
+/*
+ * =========================================================
+ * SOUMISSION FORMULAIRE
+ * =========================================================
+ */
+
+formNouvelEnregistrement.addEventListener("submit", function (event) {
+  event.preventDefault();
+
+  sauvegarderNouvelEnregistrement();
+});
+
+/*
+ * =========================================================
+ * ISIN EN MAJUSCULES
+ * =========================================================
+ */
+
+nouvelIsin.addEventListener("input", function () {
+  nouvelIsin.value = nouvelIsin.value.toUpperCase();
+});
+
+/*
+ * =========================================================
+ * SYMBOLE EN MAJUSCULES
+ * =========================================================
+ */
+
+nouveauSymbole.addEventListener("input", function () {
+  nouveauSymbole.value = nouveauSymbole.value.toUpperCase();
+});
+
+/*
+ * =========================================================
+ * INITIALISATION
+ * =========================================================
+ */
+
+document.addEventListener("DOMContentLoaded", function () {
+  chargerDonnees();
+});
@@ -0,0 +1,385 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * =========================================================
+ * API : CREATION D'UN ENREGISTREMENT DANS indice
+ * =========================================================
+ *
+ * Méthode :
+ * POST
+ *
+ * Content-Type :
+ * application/json
+ *
+ * Données attendues :
+ *
+ * {
+ *     "indice": "CAC40",
+ *     "nom": "Accor",
+ *     "isin": "FR0000120404",
+ *     "symbole": "AC",
+ *     "actif": 1,
+ *     "afficher": 1
+ * }
+ *
+ * =========================================================
+ */
+
+require_once __DIR__ . '/database.php';
+
+header(
+    'Content-Type: application/json; charset=utf-8'
+);
+
+/*
+ * =========================================================
+ * FONCTION REPONSE JSON
+ * =========================================================
+ */
+
+function reponseJson(
+    array $data,
+    int $httpCode = 200
+): never {
+
+    http_response_code($httpCode);
+
+    echo json_encode(
+        $data,
+        JSON_UNESCAPED_UNICODE |
+            JSON_UNESCAPED_SLASHES
+    );
+
+    exit;
+}
+
+/*
+ * =========================================================
+ * VERIFICATION METHODE HTTP
+ * =========================================================
+ */
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Méthode HTTP non autorisée. Utilisez POST.'
+        ],
+        405
+    );
+}
+
+/*
+ * =========================================================
+ * LECTURE DU JSON
+ * =========================================================
+ */
+
+$contenu = file_get_contents('php://input');
+
+if ($contenu === false || trim($contenu) === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Aucune donnée reçue.'
+        ],
+        400
+    );
+}
+
+$data = json_decode(
+    $contenu,
+    true
+);
+
+/*
+ * Vérification JSON
+ */
+
+if (
+    !is_array($data) ||
+    json_last_error() !== JSON_ERROR_NONE
+) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Les données JSON sont invalides.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * RECUPERATION DES CHAMPS
+ * =========================================================
+ */
+
+$indice = isset($data['indice'])
+    ? trim((string) $data['indice'])
+    : '';
+
+$nom = isset($data['nom'])
+    ? trim((string) $data['nom'])
+    : '';
+
+$isin = isset($data['isin'])
+    ? strtoupper(trim((string) $data['isin']))
+    : '';
+
+$symbole = isset($data['symbole'])
+    ? strtoupper(trim((string) $data['symbole']))
+    : '';
+
+$actif = isset($data['actif'])
+    ? (int) $data['actif']
+    : 1;
+
+$afficher = isset($data['afficher'])
+    ? (int) $data['afficher']
+    : 1;
+
+/*
+ * =========================================================
+ * VALIDATION
+ * =========================================================
+ */
+
+if ($indice === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ indice est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($nom === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ nom est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($isin === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ ISIN est obligatoire.'
+        ],
+        400
+    );
+}
+
+if ($symbole === '') {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le champ symbole est obligatoire.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * VALIDATION ISIN
+ * =========================================================
+ *
+ * Un ISIN comporte normalement 12 caractères.
+ *
+ * =========================================================
+ */
+
+if (strlen($isin) !== 12) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le code ISIN doit comporter exactement 12 caractères.'
+        ],
+        400
+    );
+}
+
+/*
+ * Vérification du format général :
+ *
+ * 2 lettres pays
+ * 9 caractères
+ * 1 chiffre de contrôle
+ */
+
+if (
+    !preg_match(
+        '/^[A-Z]{2}[A-Z0-9]{9}[0-9]$/',
+        $isin
+    )
+) {
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Le format du code ISIN est invalide.'
+        ],
+        400
+    );
+}
+
+/*
+ * =========================================================
+ * NORMALISATION DES BOOLÉENS
+ * =========================================================
+ */
+
+$actif = $actif === 1 ? 1 : 0;
+
+$afficher = $afficher === 1 ? 1 : 0;
+
+/*
+ * =========================================================
+ * INSERTION MYSQL
+ * =========================================================
+ */
+
+try {
+
+    $sql = "
+        INSERT INTO indice
+        (
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher
+        )
+        VALUES
+        (
+            :indice,
+            :nom,
+            :isin,
+            :symbole,
+            :actif,
+            :afficher
+        )
+    ";
+
+    $stmt = $pdo->prepare($sql);
+
+    $stmt->execute(
+        [
+            ':indice' => $indice,
+            ':nom' => $nom,
+            ':isin' => $isin,
+            ':symbole' => $symbole,
+            ':actif' => $actif,
+            ':afficher' => $afficher
+        ]
+    );
+
+    /*
+     * ID créé
+     */
+
+    $id = (int) $pdo->lastInsertId();
+
+    /*
+     * =====================================================
+     * RELIRE L'ENREGISTREMENT CREE
+     * =====================================================
+     */
+
+    $sqlLecture = "
+        SELECT
+            id,
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher,
+            updated_at,
+            created_at
+        FROM indice
+        WHERE id = :id
+        LIMIT 1
+    ";
+
+    $stmtLecture = $pdo->prepare(
+        $sqlLecture
+    );
+
+    $stmtLecture->execute(
+        [
+            ':id' => $id
+        ]
+    );
+
+    $enregistrement =
+        $stmtLecture->fetch();
+
+    /*
+     * =====================================================
+     * REPONSE
+     * =====================================================
+     */
+
+    reponseJson(
+        [
+            'status' => 'success',
+            'message' => 'Enregistrement créé avec succès.',
+            'id' => $id,
+            'data' => $enregistrement
+        ],
+        201
+    );
+} catch (PDOException $e) {
+
+    /*
+     * =====================================================
+     * GESTION ERREUR MYSQL
+     * =====================================================
+     */
+
+    error_log(
+        'api_create_table_indice.php : ' .
+            $e->getMessage()
+    );
+
+    /*
+     * Détection d'une contrainte UNIQUE
+     */
+
+    if ((int) $e->errorInfo[1] === 1062) {
+
+        reponseJson(
+            [
+                'status' => 'error',
+                'message' => 'Cet enregistrement existe déjà.'
+            ],
+            409
+        );
+    }
+
+    reponseJson(
+        [
+            'status' => 'error',
+            'message' => 'Erreur lors de la création de l\'enregistrement.'
+        ],
+        500
+    );
+}
@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * =========================================================
+ * API : LECTURE COMPLETE DE LA TABLE indice
+ * =========================================================
+ */
+
+require_once __DIR__ . '/database.php';
+
+header(
+    'Content-Type: application/json; charset=utf-8'
+);
+
+try {
+
+    /*
+     * Lecture de toute la table
+     */
+
+    $sql = "
+        SELECT
+            id,
+            indice,
+            nom,
+            isin,
+            symbole,
+            actif,
+            afficher,
+            updated_at,
+            created_at
+        FROM indice
+        ORDER BY
+            indice ASC,
+            nom ASC
+    ";
+
+    $stmt = $pdo->prepare($sql);
+
+    $stmt->execute();
+
+    $data = $stmt->fetchAll();
+
+
+    /*
+     * Réponse JSON
+     */
+
+    echo json_encode(
+        [
+            'status' => 'success',
+            'count'  => count($data),
+            'data'   => $data
+        ],
+        JSON_UNESCAPED_UNICODE |
+            JSON_UNESCAPED_SLASHES
+    );
+} catch (PDOException $e) {
+
+    /*
+     * Erreur MySQL
+     */
+
+    http_response_code(500);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Erreur lors de la lecture de la table indice.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+}