From 30174e3c3ea7ad0155af1ac8fb90066221a0661f Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Mon, 22 Jun 2026 08:48:37 +0200
Subject: [PATCH] Actualiser admin/dashboard.html

---
 admin/dashboard.html | 320 ++++++++++++++-----------------------------
 1 file changed, 103 insertions(+), 217 deletions(-)
diff --git a/admin/dashboard.html b/admin/dashboard.html
index 66ab970..e6f7542 100644
--- a/admin/dashboard.html
+++ b/admin/dashboard.html
@@ -6,17 +6,15 @@
     <title>Administration — Mon Cinéma</title>
     <link rel="stylesheet" href="..\css\admin.css">
     <link rel="stylesheet" href="..\css\public.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabler-icons@2.6.0/font/tabler-icons.min.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">
-        <!-- Security Banner -->
-        <div id="security-banner" class="security-banner" style="display: none;">
-            <span><i class="ti ti-alert-triangle"></i> Attention : Aucun mot de passe défini. Sécuriser le compte.</span>
-            <button class="btn-action danger-solid btn-small" onclick="openPasswordModal()">Sécuriser</button>
+        <div class="security-banner" id="security-banner" style="display: none;">
+            <div class="sec-text"><i class="ti ti-alert-triangle"></i> Attention : Aucun mot de passe défini. Sécuriser le compte.</div>
+            <button class="btn-action btn-small" onclick="openPasswordModal()">Sécuriser</button>
         </div>
 
-        <!-- Header -->
         <header class="admin-header">
             <div class="header-titles">
                 <h1>Espace <span>Admin</span></h1>
@@ -24,21 +22,23 @@
             </div>
             <div class="header-actions">
                 <a href="../index.html" class="btn-action outline">
-                    <i class="ti ti-eye"></i> Voir le site
+                    <i class="ti ti-external-link"></i> Voir le site
                 </a>
-                <button class="btn-action" onclick="openConfigModal()">
+                
+                <button class="btn-action outline" onclick="openConfigModal()">
                     <i class="ti ti-settings"></i> Configuration
                 </button>
-                <button class="btn-action" onclick="openPasswordModal()">
+                
+                <button class="btn-action outline" onclick="openPasswordModal()">
                     <i class="ti ti-lock"></i> Sécurité
                 </button>
-                <button class="btn-action danger-solid" onclick="logout()">
+                
+                <button class="btn-action outline" onclick="logout()">
                     <i class="ti ti-logout"></i> Quitter
                 </button>
-            </div>
+            </div>        
         </header>
 
-        <!-- Tabs -->
         <div class="pub-tabs-container">
             <div class="pub-tabs">
                 <button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
@@ -50,251 +50,137 @@
             </div>
         </div>
 
-        <!-- Toolbar -->
         <div class="admin-toolbar">
-            <div style="display: flex; gap: 1rem; align-items: center;">
-                <button class="btn-action primary" onclick="openAddModal()">
-                    <i class="ti ti-plus"></i> Ajouter une œuvre
-                </button>
-                <span class="count" id="admin-count-label">0 élément(s)</span>
-            </div>
             <div class="search-box">
                 <i class="ti ti-search"></i>
-                <input type="text" id="search-input" placeholder="Rechercher...">
+                <input type="text" id="search-input" placeholder="Rechercher un titre, un réalisateur...">
+            </div>
+
+            <div class="physical-filter-admin">
+                <label class="physical-filter-label">
+                    <input type="checkbox" id="admin-physical-checkbox">
+                    <span class="checkmark"></span>
+                    <span class="filter-text">Uniquement support physique / Cinéma</span>
+                </label>
+            </div>
+            
+            <button class="btn-action primary" onclick="openAddModal()">
+                <i class="ti ti-plus"></i> Ajouter une œuvre
+            </button>
+            
+            <div class="count">
+                <span id="admin-count-label">0 élément(s)</span>
             </div>
         </div>
 
-        <!-- Bulk Actions Bar -->
-        <div id="bulk-actions-bar" class="bulk-actions-bar" style="display: none;">
-            <span><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 class="bulk-actions-bar" id="bulk-actions-bar" style="display: none;">
+            <span><i class="ti ti-check"></i> <span id="bulk-count">0</span> é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>
 
-        <!-- Table -->
         <div class="table-container">
             <table class="admin-table">
                 <thead>
                     <tr>
-                        <th style="width: 40px; text-align: center;">
-                            <input type="checkbox" id="select-all-checkbox">
-                        </th>
-                        <th style="width: 60px;">Affiche</th>
+                        <th style="width: 40px; text-align: center;"><input type="checkbox" id="select-all-checkbox"></th>
+                        <th style="width: 70px; text-align: center;">Affiche</th>
                         <th>Titre</th>
                         <th style="width: 80px;">Année</th>
-                        <th>Réalisateur</th>
-                        <th style="width: 120px;">Informations</th>
-                        <th style="width: 100px;">Actions</th>
+                        <th style="width: 20%;">Réalisateur</th>
+                        <th style="width: 15%;">Informations</th>
+                        <th style="width: 100px; text-align: right;">Actions</th>
                     </tr>
                 </thead>
-                <tbody id="admin-table-body">
-                    <!-- Dynamic content -->
-                </tbody>
+                <tbody id="admin-table-body"></tbody>
             </table>
-            <div id="pagination-container" class="pagination"></div>
         </div>
+
+        <div id="pagination-container" class="pagination"></div>
     </div>
 
-    <!-- Edit/Add Modal -->
-    <div class="overlay" id="admin-modal">
-        <div class="modal">
-            <button class="modal-close" onclick="closeAdminModal()">
-                <i class="ti ti-x"></i>
-            </button>
-            <h2 class="modal-h">
-                <i class="ti ti-edit"></i> Éditer l'œuvre
-            </h2>
-            <form id="film-form">
-                <input type="hidden" id="f-id">
-                <div class="form-grid">
-                    <div class="form-group" style="grid-column: span 2;">
-                        <label>Titre *</label>
-                        <input type="text" id="f-title" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Année</label>
-                        <input type="text" id="f-year">
-                    </div>
-                    <div class="form-group">
-                        <label>Réalisateur</label>
-                        <input type="text" id="f-director">
-                    </div>
-                    <div class="form-group" style="grid-column: span 2;">
-                        <label>URL Affiche</label>
-                        <input type="text" id="f-poster">
-                    </div>
-                </div>
-
-                <!-- Critique Fields -->
-                <div id="form-critique-fields">
-                    <div class="divider">Champs Critiques</div>
-                    <div class="form-grid">
-                        <div class="form-group">
-                            <label>Note (sur 5)</label>
-                            <input type="number" id="f-rating" min="0" max="5" step="0.5" value="3">
-                        </div>
-                        <div class="form-group">
-                            <label>Lien Streaming</label>
-                            <input type="text" id="f-streaming">
-                        </div>
-                        <div class="form-group" style="grid-column: span 2;">
-                            <label>Critique</label>
-                            <textarea id="f-review" rows="4"></textarea>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Videotheque Fields -->
-                <div id="form-videotheque-fields" style="display: none;">
-                    <div class="divider">Champs Vidéothèque</div>
-                    <div class="form-grid">
-                        <div class="form-group">
-                            <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>Éditeur</label>
-                            <input type="text" id="f-publisher">
-                        </div>
-                        <div class="form-group">
-                            <label>Durée (min)</label>
-                            <input type="text" id="f-length">
-                        </div>
-                        <div class="form-group">
-                            <label>Ratio Image</label>
-                            <input type="text" id="f-aspect">
-                        </div>
-                        <div class="form-group">
-                            <label>Code Barre (EAN)</label>
-                            <input type="text" id="f-ean">
-                        </div>
-                        <div class="form-group">
-                            <label>Nb disques</label>
-                            <input type="number" id="f-discs" min="1" value="1">
-                        </div>
-                        <div class="form-group" style="grid-column: span 2;">
-                            <label>Description / État</label>
-                            <textarea id="f-description" rows="3"></textarea>
-                        </div>
-                    </div>
-                </div>
-
-                <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
-                    <button type="button" class="btn-action outline" onclick="closeAdminModal()">Annuler</button>
-                    <button type="submit" class="btn-action primary">Enregistrer</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <!-- Configuration Modal -->
-    <div class="overlay" id="config-modal">
-        <div class="modal">
-            <button class="modal-close" onclick="closeConfigModal()">
-                <i class="ti ti-x"></i>
-            </button>
-            <h2 class="modal-h">
-                <i class="ti ti-settings"></i> Configuration
-            </h2>
-            
-            <div class="form-grid">
-                <div class="form-group" style="grid-column: span 2;">
-                    <label>Clé API TMDB</label>
-                    <input type="text" id="tmdb-key-input" placeholder="Pour les critiques (réalisateur, streaming)">
-                </div>
-                <div class="form-group" style="grid-column: span 2;">
-                    <label>Clé API EAN-Search</label>
-                    <input type="text" id="ean-search-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
-                </div>
-                <div class="form-group" style="grid-column: span 2;">
-                    <label>Clé API Barcode Lookup</label>
-                    <input type="text" id="barcode-lookup-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
-                </div>
+ <!-- MODALE CONFIGURATION -->
+<div class="overlay" id="config-modal">
+    <div class="modal">
+        <button class="modal-close" onclick="closeConfigModal()">
+            <i class="ti ti-x"></i>
+        </button>
+        
+        <h2 class="modal-h">
+            <i class="ti ti-settings"></i>
+            Configuration
+        </h2>
+        
+        <!-- Clés API -->
+        <div class="form-grid">
+            <div class="form-group" style="grid-column: span 2;">
+                <label>Clé API TMDB</label>
+                <input type="text" id="tmdb-key-input" placeholder="Pour les critiques (réalisateur, streaming)">
             </div>
-            
-            <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
-                <button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
-                <button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
+            <div class="form-group" style="grid-column: span 2;">
+                <label>Clé API EAN-Search</label>
+                <input type="text" id="ean-search-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
+            </div>
+            <div class="form-group" style="grid-column: span 2;">
+                <label>Clé API Barcode Lookup</label>
+                <input type="text" id="barcode-lookup-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
             </div>
-            
-            <hr class="divider">
-            <h3 style="font-size: 1rem; margin: 1.5rem 0 1rem; color: var(--text);">
-                <i class="ti ti-file-upload" style="color: var(--gold); margin-right: 0.5rem;"></i>
-                Importer un CSV
-            </h3>
-            
-            <label class="import-box" for="csv-file">
-                <i class="ti ti-file-upload"></i>
-                <p><strong>Cliquez ou déposez votre CSV</strong></p>
-                <p style="color: var(--muted); font-size: 0.85rem;">
-                    Les jaquettes seront recherchées via EAN/UPC
-                </p>
-            </label>
-            <input type="file" id="csv-file" accept=".csv" style="display: none;">
         </div>
+        
+        <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
+            <button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
+            <button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
+        </div>
+        
+        <!-- Zone d'import CSV -->
+        <hr class="divider">
+        <h3 style="font-size: 1rem; margin: 1.5rem 0 1rem; color: var(--text);">
+            <i class="ti ti-file-upload" style="color: var(--gold); margin-right: 0.5rem;"></i>
+            Importer un CSV
+        </h3>
+        
+        <label class="import-box" for="csv-file">
+            <i class="ti ti-file-upload"></i>
+            <p><strong>Cliquez ou déposez votre CSV</strong></p>
+            <p style="color: var(--muted); font-size: 0.85rem;">
+                Les jaquettes seront recherchées via EAN/UPC
+            </p>
+        </label>
+        <input type="file" id="csv-file" accept=".csv" style="display: none;">
     </div>
-
-    <!-- Password Modal -->
+</div>
     <div class="overlay" id="password-modal">
-        <div class="modal">
-            <button class="modal-close" onclick="closePasswordModal()">
-                <i class="ti ti-x"></i>
-            </button>
-            <h2 class="modal-h">
-                <i class="ti ti-lock"></i> Sécurité
-            </h2>
-            <div class="form-grid">
-                <div class="form-group" style="grid-column: span 2;">
-                    <label>Nouveau mot de passe</label>
-                    <input type="password" id="new-password-input">
-                </div>
-                <div class="form-group" style="grid-column: span 2;">
-                    <label>Confirmer</label>
-                    <input type="password" id="new-password-confirm">
-                </div>
-            </div>
-            <div id="pwd-error" style="color: #ff4757; margin: 1rem 0; display: none;"></div>
-            <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
-                <button class="btn-action outline" onclick="closePasswordModal()">Annuler</button>
-                <button class="btn-action primary" onclick="saveNewPassword()">Mettre à jour</button>
-            </div>
+        <div class="modal" style="max-width:450px;">
+            <button class="modal-close" onclick="closePasswordModal()"><i class="ti ti-x"></i></button>
+            <h2 class="modal-h"><i class="ti ti-lock"></i> Sécurité</h2>
+            <div class="form-group" style="margin-bottom: 1rem;"><label>Nouveau mot de passe</label><input type="password" id="new-password-input"></div>
+            <div class="form-group" style="margin-bottom: 1.5rem;"><label>Confirmer</label><input type="password" id="new-password-confirm"></div>
+            <div id="pwd-error" style="color: #ff4757; font-size: 0.85rem; margin-bottom: 1rem; display: none;"></div>
+            <button class="btn-action primary" style="width: 100%; justify-content: center;" onclick="saveNewPassword()">Mettre à jour</button>
         </div>
     </div>
 
-    <!-- Confirm Modal -->
     <div class="overlay" id="confirm-modal">
-        <div class="modal" style="max-width: 400px;">
-            <h2 class="modal-h">
-                <i class="ti ti-alert-triangle" style="color: #ff4757;"></i> Suppression définitive
-            </h2>
+        <div class="modal" style="max-width:450px; text-align:center;">
+            <h2 class="modal-h" style="justify-content:center;"><i class="ti ti-alert-triangle" style="color:#ff4757;"></i> Suppression définitive</h2>
             <p>Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
-            <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
+            <div style="display:flex; gap:1rem; margin-top:2rem; 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>
 
-    <!-- Progress Modal -->
     <div class="overlay" id="progress-overlay">
-        <div class="modal" style="max-width: 400px; text-align: center;">
-            <h2 class="modal-h">
-                <i class="ti ti-loader" style="animation: spin 1s linear infinite;"></i> Import en cours...
-            </h2>
+        <div class="modal" style="max-width:450px; text-align:center;">
+            <h2 class="modal-h" style="justify-content:center;"><i class="ti ti-loader"></i> Import en cours...</h2>
             <p id="progress-text">Préparation et récupération TMDB...</p>
-            <div style="background: var(--surface); border-radius: 8px; padding: 0.5rem; margin: 1rem 0;">
-                <div id="progress-bar" style="background: var(--gold); height: 8px; border-radius: 4px; width: 0%; transition: width 0.3s;"></div>
+            <div style="background:var(--border); border-radius:6px; overflow:hidden; margin:1.5rem 0; height:12px;">
+                <div id="progress-bar" style="height:100%; background:var(--gold); width:0%; transition:width 0.3s;"></div>
             </div>
-            <p id="progress-count" style="color: var(--muted);">0 / 0</p>
+            <p id="progress-count" style="font-weight:bold;">0 / 0</p>
         </div>
     </div>
 
-    <script src="..\js\admin.js"></script>
+    <script src="../js/admin.js"></script>
 </body>
 </html>
\ No newline at end of file
