Fix: Gallery tab filters now populate from database

PROBLÈME UTILISATEUR:
- Filtres Galerie: Seul le filtre nom fonctionnait
- Département/Compagnie dropdowns: Vides (pas d'options)
- Utilisateur ne pouvait pas filtrer par bataillon

ROOT CAUSE:
- loadTabData('gallery') appelait seulement refreshGallery()
- Aucun appel pour charger les départements dans les dropdowns
- Comparaison: Reports tab appelle loadReportDepartments() ✅

FIX IMPLÉMENTÉ:
✅ Nouvelle fonction: loadGalleryDepartments()
✅ Fetch /api/departments (même endpoint que Reports)
✅ Populate filterDepartment dropdown avec bataillons
✅ Store sub_departments data globalement (cascade)
✅ Appelée quand Gallery tab se charge

LOGIQUE DROPDOWN CASCADE:
1. User selects battalion → filterDepartment
2. JavaScript popule filterSubDepartment avec compagnies de ce bataillon
3. User peut affiner par compagnie/section
4. applyGalleryFilters() envoie les 2 filtres à l'API

RÉSULTAT:
✅ filterDepartment: Affiche tous les bataillons (10BPAG, 1BCAS, etc.)
✅ filterSubDepartment: Affiche compagnies selon bataillon sélectionné
✅ Filtres fonctionnent correctement avec nouvelle architecture metadata
✅ API /api/images/gallery reçoit: name, department, sub_department, status

TEST UTILISATEUR:
1. Gallery tab → Dropdown "Bataillon / Unité" → Options visibles
2. Sélectionner bataillon → Dropdown "Compagnie / Section" → Cascade
3. Filtrer → Images filtrées correctement

dashboard-service/src/static/js/dashboard.js:115,871-898,1030

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: claude

dashboard-service/src/static/js/dashboard.js

@@ -112,6 +112,7 @@ function loadTabData(tabName) {
             refreshUnauthorized();
             break;
         case 'gallery':
+            loadGalleryDepartments(); // Load department options for filters
             refreshGallery();
             break;
         case 'cameras':
@@ -867,6 +868,35 @@ async function loadDepartments() {
     }
 }
 
+async function loadGalleryDepartments() {
+    //Load departments from database to populate gallery filter dropdowns
+    try {
+        const response = await fetch(`${CONFIG.API_BASE_URL}/api/departments`);
+        const data = await response.json();
+
+        // Populate department dropdown
+        const deptSelect = document.getElementById('filterDepartment');
+        if (deptSelect && data.departments) {
+            deptSelect.innerHTML = '<option value="">Tous les bataillons</option>';
+            data.departments.forEach(dept => {
+                const option = document.createElement('option');
+                option.value = dept;
+                option.textContent = dept;
+                deptSelect.appendChild(option);
+            });
+        }
+
+        // Store sub-departments data globally for cascade
+        if (data.sub_departments) {
+            window.subDepartmentsData = data.sub_departments;
+        }
+
+        console.log('Gallery filter departments loaded:', data.departments);
+    } catch (error) {
+        console.error('Error loading gallery departments:', error);
+    }
+}
+
 async function refreshGallery(page = 1) {
     //Load gallery images with current filters
     const imageGrid = document.getElementById('galleryImagesGrid');
@@ -997,7 +1027,7 @@ document.addEventListener('DOMContentLoaded', function() {
             const selectedDept = this.value;
 
             // Clear sub-department dropdown
-            subDeptSelect.innerHTML = '<option value="">Tous les sous-départements</option>';
+            subDeptSelect.innerHTML = '<option value="">Toutes les compagnies</option>';
 
             // Populate with matching sub-departments
             if (selectedDept && window.subDepartmentsData && window.subDepartmentsData[selectedDept]) {