From 0796fc4af33985ff0860686e57ab50c8624ff432 Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Thu, 18 Jun 2026 17:06:57 +0200
Subject: [PATCH] Actualiser admin/dashboard.html

---
 admin/dashboard.html | 277 ++++++++++++++++++++++++-------------------
 1 file changed, 155 insertions(+), 122 deletions(-)
diff --git a/admin/dashboard.html b/admin/dashboard.html
index c614ab6..9f9af26 100644
--- a/admin/dashboard.html
+++ b/admin/dashboard.html
@@ -8,154 +8,170 @@
   <link rel="stylesheet" href="../css/admin.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
 </head>
-<body class="admin-body">
+<body>
 
-<div class="admin-wrap">
+<div class="site-wrap admin-wrap">
 
   <div class="security-banner" id="security-banner" style="display:none;">
-    <span><i class="ti ti-alert-triangle"></i> <strong>Attention :</strong> Aucun mot de passe défini.</span>
-    <button onclick="openPasswordModal()">Sécuriser le compte</button>
+    <div class="sec-text">
+      <i class="ti ti-alert-triangle"></i> 
+      <strong>Attention :</strong> Aucun mot de passe défini pour protéger l'administration.
+    </div>
+    <button onclick="openPasswordModal()" class="btn-action danger-solid btn-small">Sécuriser le compte</button>
   </div>
 
-  <header class="admin-header">
-    <div>
-      <h1 class="admin-title">Espace <span>Admin</span></h1>
-      <p id="admin-subtitle">Gestion centralisée de votre cinémathèque</p>
+  <header class="site-header admin-header">
+    <div class="header-titles">
+      <h1 class="site-title">Espace <span>Admin</span></h1>
+      <p class="site-subtitle">Gestion centralisée de votre cinémathèque</p>
     </div>
-    <div class="admin-actions">
-      <button class="btn btn-outline" onclick="openConfigModal()"><i class="ti ti-key"></i> Clé TMDB</button>
-      <button class="btn btn-outline" onclick="openPasswordModal()"><i class="ti ti-lock"></i> Sécurité</button>
-      <button class="btn btn-danger" onclick="logout()"><i class="ti ti-logout"></i> Quitter</button>
+    <div class="header-actions">
+      <button class="btn-action outline" onclick="openConfigModal()">
+        <i class="ti ti-settings"></i> Configuration
+      </button>
+      <button class="btn-action outline" onclick="openPasswordModal()">
+        <i class="ti ti-shield-lock"></i> Sécurité
+      </button>
+      <button class="btn-action danger outline" onclick="logout()">
+        <i class="ti ti-logout"></i> Quitter
+      </button>
     </div>
   </header>
 
-  <nav class="admin-tabs">
-    <button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
-      <i class="ti ti-message-star"></i> Critiques
-    </button>
-    <button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
-      <i class="ti ti-device-tv"></i> Vidéothèque
-    </button>
-  </nav>
-
-  <section id="import-section" class="import-box">
-    <i class="ti ti-file-upload"></i>
-    <p>Importez vos exports <strong>Letterboxd</strong> (.csv)</p>
-    <input type="file" id="csv-file-input" accept=".csv" style="display:none;" onchange="handleCsvUpload(this)">
-    <button class="btn btn-outline" onclick="document.getElementById('csv-file-input').click()">
-      <i class="ti ti-file-spreadsheet"></i> Choisir un fichier
-    </button>
-  </section>
-
-  <div class="toolbar-container">
-    <div class="bulk-actions-bar" id="bulk-actions-bar" style="display:none;">
-      <span><i class="ti ti-checkbox"></i> <span id="bulk-count">0</span> élément(s) sélectionné(s)</span>
-      <button class="btn btn-danger" onclick="executeBulkDelete()"><i class="ti ti-trash"></i> Supprimer la sélection</button>
-    </div>
-
-    <div class="toolbar-actions">
-      <span class="count" id="admin-count-label">Chargement…</span>
-      <button class="btn btn-gold" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter une œuvre</button>
+  <div class="pub-tabs-container">
+    <div class="pub-tabs">
+      <button id="btn-tab-critique" class="tab-btn active" onclick="switchAdminTab('critique')">
+        <i class="ti ti-message-star"></i> Mes Critiques
+      </button>
+      <button id="btn-tab-videotheque" class="tab-btn" onclick="switchAdminTab('videotheque')">
+        <i class="ti ti-device-tv"></i> Ma Vidéothèque
+      </button>
     </div>
   </div>
 
-  <div class="admin-table-wrap">
+  <div class="admin-toolbar">
+    <div class="toolbar-left">
+      <span class="count" id="admin-count-label">0 élément</span>
+    </div>
+    <div class="toolbar-right">
+      <button class="btn-action primary" onclick="openAddModal()">
+        <i class="ti ti-plus"></i> Ajouter une œuvre
+      </button>
+    </div>
+  </div>
+
+  <div class="bulk-actions-bar" id="bulk-actions-bar" style="display:none;">
+    <span><i class="ti ti-checkbox"></i> <strong id="bulk-count">0</strong> élément(s) sélectionné(s)</span>
+    <button class="btn-action danger-solid btn-small" onclick="executeBulkDelete()">
+      <i class="ti ti-trash"></i> Supprimer la sélection
+    </button>
+  </div>
+
+  <div class="table-container">
     <table class="admin-table">
       <thead>
         <tr>
-          <th style="width:48px; text-align:center;">
-            <input type="checkbox" id="select-all-checkbox" class="film-checkbox" onclick="toggleSelectAll(this)">
+          <th style="width: 50px; text-align: center;">
+            <input type="checkbox" id="select-all-checkbox" onclick="toggleSelectAll(this)">
           </th>
-          <th style="width:60px; text-align:center;">Affiche</th>
+          <th style="width: 80px; text-align: center;">Affiche</th>
           <th>Titre</th>
           <th>Année</th>
           <th>Réalisateur</th>
-          <th id="th-dynamic">Note</th>
-          <th style="width:120px; text-align:center;">Actions</th>
+          <th>Informations</th>
+          <th style="width: 100px; text-align: right;">Actions</th>
         </tr>
       </thead>
-      <tbody id="admin-table-body"></tbody>
+      <tbody id="admin-table-body">
+        </tbody>
     </table>
   </div>
+  
+  <footer style="text-align: center; margin-top: 3rem; color: var(--muted); font-size: 0.9rem;">
+    Mon Cinéma &mdash; Administration
+  </footer>
 
 </div>
 
-
-<div class="overlay" id="admin-modal" onclick="if(event.target===this) closeAdminModal()">
-  <div class="modal" style="max-width:600px;">
+<div class="overlay" id="admin-modal">
+  <div class="modal" style="max-width: 700px;">
     <button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
-    <h3 class="modal-h" id="modal-form-title">Ajouter une œuvre</h3>
-
-    <form id="film-form" onsubmit="saveFilmForm(event)">
+    <h3 class="modal-h"><i class="ti ti-movie"></i> Éditer l'œuvre</h3>
+    
+    <form id="film-form">
       <input type="hidden" id="f-id">
-
-      <div class="form-group">
-        <label>Titre du film *</label>
-        <input type="text" id="f-title" required autocomplete="off">
-      </div>
-
-      <div class="form-row">
+      
+      <div class="form-grid">
+        <div class="form-group" style="grid-column: span 2;">
+          <label>Titre</label>
+          <input type="text" id="f-title" required placeholder="Ex: Inception">
+        </div>
         <div class="form-group">
           <label>Année</label>
-          <input type="number" id="f-year" min="1800" max="2100">
+          <input type="text" id="f-year" placeholder="Ex: 2010">
         </div>
         <div class="form-group">
           <label>Réalisateur</label>
-          <input type="text" id="f-director">
+          <input type="text" id="f-director" placeholder="Ex: Christopher Nolan">
+        </div>
+        <div class="form-group" style="grid-column: span 2;">
+          <label>URL de l'affiche</label>
+          <input type="text" id="f-poster" placeholder="https://...">
         </div>
-      </div>
-
-      <div class="form-group">
-        <label>URL de l'affiche</label>
-        <input type="url" id="f-poster" placeholder="https://image.tmdb.org/…">
       </div>
 
       <div id="form-critique-fields">
-        <div class="form-group">
-          <label>Note (1 à 5 étoiles)</label>
-          <select id="f-rating">
-            <option value="5">★★★★★ (5/5)</option>
-            <option value="4">★★★★☆ (4/5)</option>
-            <option value="3" selected>★★★☆☆ (3/5)</option>
-            <option value="2">★★☆☆☆ (2/5)</option>
-            <option value="1">★☆☆☆☆ (1/5)</option>
-          </select>
+        <div class="divider">Spécifique aux critiques</div>
+        <div class="form-grid">
+          <div class="form-group">
+            <label>Note (sur 5)</label>
+            <select id="f-rating">
+              <option value="5">5 - Chef d'œuvre</option>
+              <option value="4">4 - Très bon</option>
+              <option value="3" selected>3 - Bon</option>
+              <option value="2">2 - Moyen</option>
+              <option value="1">1 - Mauvais</option>
+              <option value="0">0 - Navet</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Lien Streaming / VOD</label>
+            <input type="text" id="f-streaming" placeholder="Lien Netflix, Canal+, etc.">
+          </div>
         </div>
         <div class="form-group">
-          <label>Critique</label>
-          <textarea id="f-review" rows="5"></textarea>
-        </div>
-        <div class="form-group">
-          <label>Plateforme / Mode de visionnage</label>
-          <input type="text" id="f-streaming" placeholder="Ex : Canal+, Cinéma, Blu-ray…">
+          <label>Critique / Avis</label>
+          <textarea id="f-review" rows="4" placeholder="Votre avis sur le film..."></textarea>
         </div>
       </div>
 
       <div id="form-videotheque-fields" style="display:none;">
-        <div class="form-row">
+        <div class="divider">Spécifique à la vidéothèque</div>
+        <div class="form-grid">
           <div class="form-group">
-            <label>Format physique</label>
-            <input type="text" id="f-format" placeholder="4K Ultra HD, Blu-ray, DVD…">
+            <label>Format</label>
+            <select id="f-format">
+              <option value="Blu-ray 4K">Blu-ray 4K</option>
+              <option value="Blu-ray">Blu-ray</option>
+              <option value="DVD">DVD</option>
+              <option value="VHS">VHS</option>
+            </select>
           </div>
-          <div class="form-group">
-            <label>Durée (minutes)</label>
-            <input type="number" id="f-length">
-          </div>
-        </div>
-        <div class="form-row">
           <div class="form-group">
             <label>Éditeur</label>
-            <input type="text" id="f-publisher">
+            <input type="text" id="f-publisher" placeholder="Ex: Warner Bros">
           </div>
           <div class="form-group">
-            <label>Format image</label>
-            <input type="text" id="f-aspect" placeholder="2.39:1, 1.85:1…">
+            <label>Durée</label>
+            <input type="text" id="f-length" placeholder="Ex: 148 min">
           </div>
-        </div>
-        <div class="form-row">
           <div class="form-group">
-            <label>Code barre (EAN)</label>
-            <input type="text" id="f-ean">
+            <label>Format Image</label>
+            <input type="text" id="f-aspect" placeholder="Ex: 2.39:1">
+          </div>
+          <div class="form-group">
+            <label>Code Barre (EAN)</label>
+            <input type="text" id="f-ean" placeholder="Ex: 3344428068...">
           </div>
           <div class="form-group">
             <label>Nombre de disques</label>
@@ -163,36 +179,46 @@
           </div>
         </div>
         <div class="form-group">
-          <label>Synopsis / Notes d'édition</label>
-          <textarea id="f-description" rows="4"></textarea>
+          <label>Description / Synopsis</label>
+          <textarea id="f-description" rows="3" placeholder="Notes ou synopsis de l'édition..."></textarea>
         </div>
       </div>
 
-      <button type="submit" class="btn-save"><i class="ti ti-device-floppy"></i> Enregistrer</button>
+      <div style="text-align: right; margin-top: 1.5rem;">
+        <button type="submit" class="btn-action primary"><i class="ti ti-device-floppy"></i> Sauvegarder</button>
+      </div>
     </form>
   </div>
 </div>
 
-<div class="overlay" id="config-modal" onclick="if(event.target===this) closeConfigModal()">
-  <div class="modal" style="max-width:440px;">
+<div class="overlay" id="config-modal">
+  <div class="modal" style="max-width: 500px;">
     <button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
-    <h3 class="modal-h"><i class="ti ti-key"></i> Clé API TMDB</h3>
-    <div class="api-notice">
-      Obtenez votre clé gratuite sur <a href="https://www.themoviedb.org/settings/api" target="_blank">themoviedb.org</a>.
-      Elle sera chiffrée en base de données.
+    <h3 class="modal-h"><i class="ti ti-settings"></i> Configuration globale</h3>
+    
+    <div class="form-group" style="margin-bottom: 2rem;">
+      <label>Clé API TMDB (Pour récupération auto)</label>
+      <div style="display:flex; gap:0.5rem;">
+        <input type="text" id="tmdb-key-input" placeholder="Votre clé secrète TMDB">
+        <button class="btn-action outline" onclick="saveTmdbKey()"><i class="ti ti-check"></i></button>
+      </div>
     </div>
-    <div class="form-group">
-      <label>Clé API (v3)</label>
-      <input type="password" id="tmdb-key-input" placeholder="Saisir la clé…">
+
+    <div class="divider">Importation de données</div>
+    <div class="import-box">
+      <i class="ti ti-file-upload"></i>
+      <h4>Importer un fichier CSV</h4>
+      <p style="color:var(--muted); font-size:0.85rem; margin-top:0.5rem;">Glissez votre fichier ici ou cliquez pour parcourir</p>
+      <input type="file" id="csv-file" accept=".csv">
     </div>
-    <button class="btn-save" onclick="saveTmdbKey()">Sauvegarder</button>
   </div>
 </div>
 
-<div class="overlay" id="password-modal" onclick="if(event.target===this) closePasswordModal()">
-  <div class="modal" style="max-width:400px;">
+<div class="overlay" id="password-modal">
+  <div class="modal" style="max-width: 400px;">
     <button class="modal-close" onclick="closePasswordModal()"><i class="ti ti-x"></i></button>
-    <h3 class="modal-h"><i class="ti ti-lock"></i> Changer le mot de passe</h3>
+    <h3 class="modal-h"><i class="ti ti-shield-lock"></i> Sécurité du compte</h3>
+    
     <div class="form-group">
       <label>Nouveau mot de passe</label>
       <input type="password" id="new-password-input" placeholder="Minimum 4 caractères">
@@ -201,18 +227,25 @@
       <label>Confirmation</label>
       <input type="password" id="new-password-confirm" placeholder="Répétez le mot de passe">
     </div>
-    <p id="pwd-error" style="color:#c0392b; font-size:0.82rem; display:none; margin-bottom:0.8rem;"></p>
-    <button class="btn-save" onclick="saveNewPassword()">Mettre à jour</button>
+    <p id="pwd-error" style="color:#ff6b6b; font-size:0.85rem; display:none; margin-bottom:1rem;"></p>
+    
+    <div style="text-align: right;">
+      <button class="btn-action primary" onclick="saveNewPassword()"><i class="ti ti-lock-check"></i> Mettre à jour</button>
+    </div>
   </div>
 </div>
 
-<div class="overlay" id="confirm-modal" onclick="if(event.target===this) closeConfirmModal()">
-  <div class="modal" style="max-width:350px; text-align:center;">
-    <h3 class="modal-h" style="color:var(--red);">Suppression</h3>
-    <p style="margin-bottom: 2rem; color:var(--text-secondary);">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
-    <div style="display:flex; gap:1rem;">
-      <button class="btn btn-outline" style="flex:1;" onclick="closeConfirmModal()">Annuler</button>
-      <button class="btn btn-danger" style="flex:1;" id="confirm-btn">Supprimer</button>
+<div class="overlay" id="confirm-modal">
+  <div class="modal" style="max-width: 380px; text-align: center;">
+    <button class="modal-close" onclick="closeConfirmModal()"><i class="ti ti-x"></i></button>
+    <div style="font-size: 3rem; color: #ff6b6b; margin-bottom: 1rem;">
+      <i class="ti ti-alert-circle"></i>
+    </div>
+    <h3 style="color:var(--text); margin-bottom: 1rem; font-size: 1.2rem;">Suppression définitive</h3>
+    <p style="margin-bottom: 2rem; color:var(--muted); font-size: 0.95rem;">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible et supprimera les données de la base.</p>
+    <div style="display: flex; gap: 1rem; justify-content: center;">
+      <button class="btn-action outline" onclick="closeConfirmModal()">Annuler</button>
+      <button class="btn-action danger-solid" id="confirm-btn">Oui, supprimer</button>
     </div>
   </div>
 </div>
