From bc017088f7463e7c1e4b36ec2b873c114b666abe Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 20 Dec 2025 23:21:35 +0000
Subject: [PATCH] Refactor admin page into tabbed interface

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/control.html | 271 ++++++++++++++++++++++++++------------------
 1 file changed, 160 insertions(+), 111 deletions(-)

diff --git a/public/control.html b/public/control.html
index 68a0613..c7be074 100644
--- a/public/control.html
+++ b/public/control.html
@@ -29,7 +29,7 @@
 <body class="bg-light">
 
 <nav class="navbar navbar-expand-lg navbar-custom">
-  <div class="container">
+  <div class="container-fluid px-3 px-lg-4">
     <a class="navbar-brand" style="margin-left: -7px;">
       <img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
     </a>
@@ -51,126 +51,175 @@
   </div>
 </nav>
 
-<div class="container mt-5" style="max-width: 720px;">
-  <h2>Admin - Année active</h2>
-  <p class="text-muted mb-3">
-    Cette année pilote tout le site (films affichés, checklist et statistiques).
-  </p>
-
-  <div class="card p-3 mb-4">
-    <div class="row g-2 align-items-end">
-      <div class="col-md-6">
-        <label for="active_oscar_year" class="form-label">Année active</label>
-        <input type="number" class="form-control" id="active_oscar_year" placeholder="2026" min="1900" max="3000">
-        <div class="form-text">Ex: mets 2025 → tout le monde voit les stats/films 2025.</div>
-      </div>
-      <div class="col-md-6">
-        <button type="button" id="save-active-year" class="btn btn-warning w-100">Appliquer l’année</button>
-      </div>
+<div class="container-fluid px-3 px-lg-4 py-4">
+  <div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
+    <div>
+      <h2 class="mb-0">Admin</h2>
+      <div class="text-muted">Paramètres, utilisateurs et gestion des films.</div>
     </div>
   </div>
 
-  <h2>Admin - Réinitialiser mot de passe utilisateur</h2>
-  <p class="text-muted mb-3">
-    Génère un mot de passe temporaire aléatoire. L'utilisateur devra choisir un nouveau mot de passe à sa prochaine connexion.
-  </p>
-
-  <div id="user-reset-response" class="alert d-none" role="alert"></div>
-
-  <form id="reset-user-password-form" class="card p-3 mb-4">
-    <div class="row g-2 align-items-end">
-      <div class="col-md-8">
-        <label for="reset_user_email" class="form-label">Email utilisateur</label>
-        <input type="email" class="form-control" id="reset_user_email" placeholder="user@email.com" required>
-      </div>
-      <div class="col-md-4">
-        <button type="submit" class="btn btn-danger w-100">Reset</button>
-      </div>
-      <div class="col-12">
-        <div class="form-text">
-          Important: le mot de passe temporaire est affiché une seule fois ici. Copie-le et envoie-le à l'utilisateur.
-        </div>
-      </div>
-    </div>
-  </form>
-
-  <h2>Admin - Ajouter un film</h2>
-  <p class="text-muted mb-4">
-    Ajoute un film via l’API (<code>/api/movies/add</code>). Le serveur récupère automatiquement le titre/plot/affiche depuis OMDb avec l’<code>imdb_id</code>.
-  </p>
-
   <div id="response" class="alert d-none" role="alert"></div>
 
-  <form id="add-movie-form" class="card p-3">
-    <div class="mb-3">
-      <label for="oscar_year" class="form-label">Oscar year</label>
-      <input type="number" class="form-control" id="oscar_year" placeholder="2026" min="1900" max="3000" required>
-      <div class="form-text">Permet de séparer les films et les stats par année.</div>
-    </div>
-    <div class="mb-3">
-      <label for="imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
-      <input type="text" class="form-control" id="imdb_id" placeholder="tt..." required>
-    </div>
-    <div class="mb-3">
-      <label for="category" class="form-label">Catégorie</label>
-      <input type="text" class="form-control" id="category" placeholder="Best Picture, etc." required>
-    </div>
-    <div class="mb-3">
-      <label for="vod_link" class="form-label">Lien VOD</label>
-      <input type="url" class="form-control" id="vod_link" placeholder="https://..." required>
-    </div>
-    <div class="d-flex gap-2">
-      <button type="submit" class="btn btn-primary">Ajouter</button>
-      <button type="button" id="reset-form" class="btn btn-outline-secondary">Reset</button>
-    </div>
-  </form>
+  <ul class="nav nav-tabs" id="adminTabs" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="admin-settings-tab" data-bs-toggle="tab" data-bs-target="#admin-settings" type="button" role="tab" aria-controls="admin-settings" aria-selected="true">
+        Réglages
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="admin-users-tab" data-bs-toggle="tab" data-bs-target="#admin-users" type="button" role="tab" aria-controls="admin-users" aria-selected="false">
+        Utilisateurs
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="admin-movies-tab" data-bs-toggle="tab" data-bs-target="#admin-movies" type="button" role="tab" aria-controls="admin-movies" aria-selected="false">
+        Films
+      </button>
+    </li>
+  </ul>
 
-  <hr class="my-4">
-
-  <h2>Admin - Gérer les films</h2>
-  <p class="text-muted mb-3">
-    Sélectionne une année, puis coche les films à supprimer.
-  </p>
-
-  <div class="card p-3">
-    <div class="row g-2 align-items-end">
-      <div class="col-md-6">
-        <label for="manage_year" class="form-label">Oscar year</label>
-        <select id="manage_year" class="form-select">
-          <option value="">Toutes</option>
-        </select>
-      </div>
-      <div class="col-md-6 d-flex gap-2">
-        <button type="button" id="refresh-movies" class="btn btn-outline-primary w-100">Rafraîchir</button>
-        <button type="button" id="delete-selected" class="btn btn-danger w-100" disabled>Supprimer la sélection</button>
-      </div>
-    </div>
-
-    <div class="mt-3">
-      <div class="d-flex justify-content-between align-items-center">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="select-all-movies">
-          <label class="form-check-label" for="select-all-movies">Tout sélectionner</label>
+  <div class="tab-content pt-3">
+    <div class="tab-pane fade show active" id="admin-settings" role="tabpanel" aria-labelledby="admin-settings-tab">
+      <div class="row g-3">
+        <div class="col-12 col-xl-8">
+          <div class="card p-3">
+            <h4 class="mb-1">Année active</h4>
+            <p class="text-muted mb-3">
+              Cette année pilote tout le site (films affichés, checklist et statistiques).
+            </p>
+            <div class="row g-2 align-items-end">
+              <div class="col-md-6">
+                <label for="active_oscar_year" class="form-label">Année active</label>
+                <input type="number" class="form-control" id="active_oscar_year" placeholder="2026" min="1900" max="3000">
+                <div class="form-text">Ex: mets 2025 → tout le monde voit les stats/films 2025.</div>
+              </div>
+              <div class="col-md-6">
+                <button type="button" id="save-active-year" class="btn btn-warning w-100">Appliquer l’année</button>
+              </div>
+            </div>
+          </div>
         </div>
-        <small class="text-muted"><span id="selected-count">0</span> sélectionné(s)</small>
       </div>
     </div>
 
-    <div class="table-responsive mt-2">
-      <table class="table table-sm align-middle mb-0">
-        <thead>
-          <tr>
-            <th style="width: 1%;">Sel.</th>
-            <th>Titre</th>
-            <th style="width: 20%;">Catégorie</th>
-            <th style="width: 12%;">Année</th>
-            <th style="width: 1%;">Actions</th>
-          </tr>
-        </thead>
-        <tbody id="admin-movies-body">
-          <tr><td colspan="5" class="text-muted">Charge la liste…</td></tr>
-        </tbody>
-      </table>
+    <div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
+      <div class="row g-3">
+        <div class="col-12 col-xl-8">
+          <div class="card p-3">
+            <h4 class="mb-1">Réinitialiser mot de passe utilisateur</h4>
+            <p class="text-muted mb-3">
+              Génère un mot de passe temporaire aléatoire. L'utilisateur devra choisir un nouveau mot de passe à sa prochaine connexion.
+            </p>
+
+            <div id="user-reset-response" class="alert d-none" role="alert"></div>
+
+            <form id="reset-user-password-form">
+              <div class="row g-2 align-items-end">
+                <div class="col-md-8">
+                  <label for="reset_user_email" class="form-label">Email utilisateur</label>
+                  <input type="email" class="form-control" id="reset_user_email" placeholder="user@email.com" required>
+                </div>
+                <div class="col-md-4">
+                  <button type="submit" class="btn btn-danger w-100">Reset</button>
+                </div>
+                <div class="col-12">
+                  <div class="form-text">
+                    Important: le mot de passe temporaire est affiché une seule fois ici. Copie-le et envoie-le à l'utilisateur.
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tab-pane fade" id="admin-movies" role="tabpanel" aria-labelledby="admin-movies-tab">
+      <div class="row g-3">
+        <div class="col-12 col-xxl-4">
+          <div class="card p-3">
+            <h4 class="mb-1">Ajouter un film</h4>
+            <p class="text-muted mb-3">
+              Ajoute un film via l’API (<code>/api/movies/add</code>). Le serveur récupère automatiquement le titre/plot/affiche depuis OMDb avec l’<code>imdb_id</code>.
+            </p>
+
+            <form id="add-movie-form">
+              <div class="mb-3">
+                <label for="oscar_year" class="form-label">Oscar year</label>
+                <input type="number" class="form-control" id="oscar_year" placeholder="2026" min="1900" max="3000" required>
+                <div class="form-text">Permet de séparer les films et les stats par année.</div>
+              </div>
+              <div class="mb-3">
+                <label for="imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
+                <input type="text" class="form-control" id="imdb_id" placeholder="tt..." required>
+              </div>
+              <div class="mb-3">
+                <label for="category" class="form-label">Catégorie</label>
+                <input type="text" class="form-control" id="category" placeholder="Best Picture, etc." required>
+              </div>
+              <div class="mb-3">
+                <label for="vod_link" class="form-label">Lien VOD</label>
+                <input type="url" class="form-control" id="vod_link" placeholder="https://..." required>
+              </div>
+              <div class="d-flex gap-2">
+                <button type="submit" class="btn btn-primary">Ajouter</button>
+                <button type="button" id="reset-form" class="btn btn-outline-secondary">Reset</button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div class="col-12 col-xxl-8">
+          <div class="card p-3">
+            <div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
+              <div>
+                <h4 class="mb-1">Gérer les films</h4>
+                <div class="text-muted">Sélectionne une année, puis coche les films à supprimer.</div>
+              </div>
+            </div>
+
+            <div class="row g-2 align-items-end">
+              <div class="col-md-6 col-xl-4">
+                <label for="manage_year" class="form-label">Oscar year</label>
+                <select id="manage_year" class="form-select">
+                  <option value="">Toutes</option>
+                </select>
+              </div>
+              <div class="col-md-6 col-xl-4 d-flex gap-2">
+                <button type="button" id="refresh-movies" class="btn btn-outline-primary w-100">Rafraîchir</button>
+                <button type="button" id="delete-selected" class="btn btn-danger w-100" disabled>Supprimer</button>
+              </div>
+              <div class="col-12 col-xl-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="select-all-movies">
+                    <label class="form-check-label" for="select-all-movies">Tout sélectionner</label>
+                  </div>
+                  <small class="text-muted"><span id="selected-count">0</span> sélectionné(s)</small>
+                </div>
+              </div>
+            </div>
+
+            <div class="table-responsive mt-2">
+              <table class="table table-sm align-middle mb-0">
+                <thead>
+                  <tr>
+                    <th style="width: 1%;">Sel.</th>
+                    <th>Titre</th>
+                    <th style="width: 20%;">Catégorie</th>
+                    <th style="width: 12%;">Année</th>
+                    <th style="width: 1%;">Actions</th>
+                  </tr>
+                </thead>
+                <tbody id="admin-movies-body">
+                  <tr><td colspan="5" class="text-muted">Charge la liste…</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
-- 
2.54.0