Merge pull request 'Jira 25' (#90) from dev into main

Reviewed-on: #90

jira.php

@@ -202,6 +202,20 @@ foreach ($usedProjectKeys as $uKey => $val) {
 if (empty($activeProjectKeys)) {
     $activeProjectKeys = array_fill_keys(['SD', 'IN', 'AAN', 'GEN'], true);
 }
+if (!empty($userQueueFilters)) {
+    $filteredActiveKeys = [];
+    foreach ($userQueueFilters as $code) {
+        $clean = strtoupper(trim($code));
+        if ($clean === 'DX') {
+            $filteredActiveKeys['SD'] = true;
+        } elseif ($clean !== 'MY_QUEUES') {
+            $filteredActiveKeys[$clean] = true;
+        }
+    }
+    if (!empty($filteredActiveKeys)) {
+        $activeProjectKeys = $filteredActiveKeys;
+    }
+}
 
 // Haal projectstatussen op uit jiraData
 $rawProjectStatuses = $jiraData['project_statuses'] ?? [];
@@ -587,54 +601,18 @@ $statusesJson = json_encode($allStatusesList, JSON_HEX_TAG | JSON_HEX_APOS | JSO
             </div>
         </div>
 
-        <!-- Rij 3: Status Multi-select Dropdown & Zoekveld -->
-        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 relative z-30">
+        <!-- Rij 2: Status Filters PER Project (Direct onder de projectknoppen) & Zoekveld -->
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 pt-0.5 relative z-30">
             
-            <!-- Linkerkant: Statussen multi-select dropdown -->
+            <!-- Linkerkant: Status Dropdowns PER Project -->
             <div class="flex flex-wrap items-center gap-2 relative z-50">
-                <div class="relative z-50" id="statusDropdownWrapper">
-                    <button 
-                        type="button" 
-                        onclick="toggleStatusDropdown()" 
-                        id="statusDropdownBtn" 
-                        class="flex items-center space-x-2 px-3.5 py-2 rounded-xl text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-slate-800 dark:text-slate-200 transition cursor-pointer shadow-2xs"
-                        aria-expanded="false"
-                    >
-                        <i data-lucide="check-square" class="w-3.5 h-3.5 text-indigo-500"></i>
-                        <span>Status:</span>
-                        <span id="statusDropdownLabel" class="font-bold text-indigo-600 dark:text-indigo-400">Alle statussen</span>
-                        <span id="statusDropdownBadge" class="hidden px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-100 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300"></span>
-                        <i data-lucide="chevron-down" id="statusDropdownChevron" class="w-3.5 h-3.5 text-slate-400 transition-transform duration-200"></i>
-                    </button>
-
-                    <!-- Dropdown Menu met Checkboxes (Gegroepeerd per project) -->
-                    <div 
-                        id="statusDropdownMenu" 
-                        class="hidden absolute left-0 top-full mt-2 w-[calc(100vw-2.5rem)] sm:w-96 max-w-sm bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 py-3 px-3.5 z-50 text-xs space-y-2.5"
-                    >
-                        <!-- Quick actions header -->
-                        <div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800">
-                            <span class="font-bold text-slate-900 dark:text-white text-[11px] uppercase tracking-wider">Statussen per Project</span>
-                            <div class="flex items-center space-x-1.5">
-                                <button type="button" onclick="selectAllStatuses(true)" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950/60 transition cursor-pointer">
-                                    Alles
-                                </button>
-                                <span class="text-slate-300 dark:text-slate-700">•</span>
-                                <button type="button" onclick="selectActiveStatusesOnly()" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950/60 transition cursor-pointer" title="Alleen actieve taken (geen gesloten)">
-                                    Actief
-                                </button>
-                                <span class="text-slate-300 dark:text-slate-700">•</span>
-                                <button type="button" onclick="selectAllStatuses(false)" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
-                                    Geen
-                                </button>
-                            </div>
+                <div class="flex items-center space-x-1.5 text-slate-400 dark:text-slate-500 mr-0.5 flex-shrink-0">
+                    <i data-lucide="filter" class="w-3.5 h-3.5 text-indigo-500"></i>
+                    <span class="text-[11px] font-bold uppercase tracking-wider">Status:</span>
                 </div>
 
-                        <!-- Status Checkboxes List (scrollable, gegroepeerd per project) -->
-                        <div class="max-h-80 overflow-y-auto space-y-2.5 pr-1 custom-scrollbar" id="statusCheckboxList">
-                            <!-- Dynamisch gevuld via renderStatusCheckboxes() -->
-                        </div>
-                    </div>
+                <!-- Hier worden de status dropdowns per project dynamisch ingeladen -->
+                <div id="projectStatusDropdownsWrapper" class="flex flex-wrap items-center gap-2">
                 </div>
 
                 <!-- Actieve filters reset knop als er iets gefilterd is -->
@@ -645,7 +623,7 @@ $statusesJson = json_encode($allStatusesList, JSON_HEX_TAG | JSON_HEX_APOS | JSO
             </div>
 
             <!-- Rechterkant: Zoekveld -->
-            <div class="relative w-full sm:w-64">
+            <div class="relative w-full md:w-64 flex-shrink-0">
                 <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                 <input 
                     type="text" 
@@ -1148,7 +1126,7 @@ function updateActiveFilterBadge() {
 }
 
 // =========================================================================
-// STATUS MULTI-SELECT CHECKBOX DROPDOWN LOGICA (GEGROEPEERD PER PROJECT)
+// STATUS MULTI-SELECT CHECKBOX DROPDOWN LOGICA (PER PROJECT DROPDOWNS)
 // =========================================================================
 
 function getTotalStatusCount() {
@@ -1175,63 +1153,48 @@ function isIssueStatusSelected(iss) {
     return false;
 }
 
+// Renders the per-project status dropdowns into #projectStatusDropdownsWrapper
 function renderStatusCheckboxes() {
-    const container = document.getElementById('statusCheckboxList');
+    const container = document.getElementById('projectStatusDropdownsWrapper');
     if (!container) return;
 
     if (!projectStatusesData || projectStatusesData.length === 0) {
-        container.innerHTML = '<div class="py-2 text-center text-slate-400 italic text-[11px]">Geen project statussen gevonden</div>';
+        container.innerHTML = '<span class="text-slate-400 italic text-[11px]">Geen project statussen gevonden</span>';
         return;
     }
 
     const colorClasses = {
         sky: {
-            badge: 'bg-sky-100 dark:bg-sky-900/60 text-sky-800 dark:text-sky-200 border border-sky-300 dark:border-sky-800',
-            hdrBg: 'bg-sky-50/60 dark:bg-sky-950/30'
+            badge: 'bg-sky-100 text-sky-800 dark:bg-sky-950/70 dark:text-sky-300 border border-sky-300 dark:border-sky-800',
+            hdrBg: 'bg-sky-50/70 dark:bg-sky-950/40'
         },
         amber: {
-            badge: 'bg-amber-100 dark:bg-amber-900/60 text-amber-800 dark:text-amber-200 border border-amber-300 dark:border-amber-800',
-            hdrBg: 'bg-amber-50/60 dark:bg-amber-950/30'
+            badge: 'bg-amber-100 text-amber-800 dark:bg-amber-950/70 dark:text-amber-300 border border-amber-300 dark:border-amber-800',
+            hdrBg: 'bg-amber-50/70 dark:bg-amber-950/40'
         },
         emerald: {
-            badge: 'bg-emerald-100 dark:bg-emerald-900/60 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-800',
-            hdrBg: 'bg-emerald-50/60 dark:bg-emerald-950/30'
+            badge: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/70 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-800',
+            hdrBg: 'bg-emerald-50/70 dark:bg-emerald-950/40'
         },
         indigo: {
-            badge: 'bg-indigo-100 dark:bg-indigo-900/60 text-indigo-800 dark:text-indigo-200 border border-indigo-300 dark:border-indigo-800',
-            hdrBg: 'bg-indigo-50/60 dark:bg-indigo-950/30'
+            badge: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-950/70 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-800',
+            hdrBg: 'bg-indigo-50/70 dark:bg-indigo-950/40'
         },
         slate: {
-            badge: 'bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700',
+            badge: 'bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700',
             hdrBg: 'bg-slate-50 dark:bg-slate-800/40'
         }
     };
 
     let html = '';
     projectStatusesData.forEach((proj, pIdx) => {
-        const pKey = (proj.key || '').toUpperCase();
+        const pKey = (proj.key || '').toUpperCase().trim();
         const pKeyLower = pKey.toLowerCase();
         const pColor = proj.color || 'slate';
         const styles = colorClasses[pColor] || colorClasses.slate;
         const statuses = proj.statuses || [];
 
-        html += `
-            <div class="project-status-group pb-2 mb-2 border-b border-slate-100 dark:border-slate-800/80 last:border-b-0 last:pb-0 last:mb-0">
-                <div class="flex items-center justify-between px-2 py-1.5 mb-1.5 rounded-lg ${styles.hdrBg}">
-                    <div class="flex items-center space-x-2 min-w-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black ${styles.badge}">${escapeHtml(pKey)}</span>
-                        <span class="font-bold text-slate-800 dark:text-slate-200 text-xs truncate">${escapeHtml(proj.name || pKey)}</span>
-                        <span id="projTotal_${pKey}" class="text-[10px] text-slate-400 font-bold">(0)</span>
-                    </div>
-                    <div class="flex items-center space-x-1.5 text-[10px] flex-shrink-0">
-                        <button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', true)" class="px-1.5 py-0.5 rounded font-semibold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950/60 transition cursor-pointer">Alles</button>
-                        <span class="text-slate-300 dark:text-slate-700">•</span>
-                        <button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', false)" class="px-1.5 py-0.5 rounded font-semibold text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition cursor-pointer">Geen</button>
-                    </div>
-                </div>
-                <div class="space-y-0.5 pl-1">
-        `;
-
+        let statusRowsHtml = '';
         statuses.forEach((st, sIdx) => {
             const sNorm = (st.name || '').toLowerCase().trim();
             const compoundVal = `${pKeyLower}::${sNorm}`;
@@ -1253,10 +1216,10 @@ function renderStatusCheckboxes() {
             }
 
             const safeKey = `${pKey}_${sNorm.replace(/[^a-z0-9]/gi, '_')}`;
-            const safeId = `chkStatus_${pIdx}_${sIdx}`;
+            const safeId = `chkStatus_${pKey}_${sIdx}`;
 
-            html += `
-                <label for="${safeId}" class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/70 cursor-pointer transition select-none group">
+            statusRowsHtml += `
+                <label for="${safeId}" class="flex items-center justify-between px-2.5 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/70 cursor-pointer transition select-none group">
                     <div class="flex items-center space-x-2.5 min-w-0 flex-1">
                         <input 
                             type="checkbox" 
@@ -1266,8 +1229,8 @@ function renderStatusCheckboxes() {
                             data-status="${escapeHtml(sNorm)}"
                             data-is-done="${isDone ? 1 : 0}"
                             ${isChecked ? 'checked' : ''} 
-                            onchange="onStatusCheckboxChange()" 
-                            class="status-checkbox w-4 h-4 rounded text-indigo-600 border-slate-300 dark:border-slate-700 focus:ring-indigo-500 cursor-pointer flex-shrink-0"
+                            onchange="onStatusCheckboxChange('${escapeHtml(pKey)}')" 
+                            class="status-checkbox status-checkbox-${escapeHtml(pKey)} w-4 h-4 rounded text-indigo-600 border-slate-300 dark:border-slate-700 focus:ring-indigo-500 cursor-pointer flex-shrink-0"
                         >
                         <span class="w-2 h-2 rounded-full ${dotColor} flex-shrink-0"></span>
                         <span class="font-semibold text-slate-700 dark:text-slate-300 truncate text-xs group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition">${escapeHtml(st.name)}</span>
@@ -1278,13 +1241,132 @@ function renderStatusCheckboxes() {
         });
 
         html += `
+            <div class="relative project-status-dropdown-item" data-project="${escapeHtml(pKey)}" id="statusDropdownWrapper_${escapeHtml(pKey)}">
+                <button 
+                    type="button" 
+                    onclick="toggleProjectStatusDropdown('${escapeHtml(pKey)}')" 
+                    id="statusDropdownBtn_${escapeHtml(pKey)}" 
+                    class="flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-slate-800 dark:text-slate-200 transition cursor-pointer shadow-2xs flex-shrink-0"
+                    aria-expanded="false"
+                >
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black ${styles.badge}">${escapeHtml(pKey)}</span>
+                    <span id="statusDropdownLabel_${escapeHtml(pKey)}" class="font-bold text-slate-700 dark:text-slate-300 truncate max-w-[130px]">Alle</span>
+                    <span id="statusDropdownBadge_${escapeHtml(pKey)}" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300"></span>
+                    <i data-lucide="chevron-down" id="statusDropdownChevron_${escapeHtml(pKey)}" class="w-3.5 h-3.5 text-slate-400 transition-transform duration-200 flex-shrink-0"></i>
+                </button>
+
+                <div 
+                    id="statusDropdownMenu_${escapeHtml(pKey)}" 
+                    class="hidden absolute left-0 top-full mt-1.5 w-72 sm:w-80 max-w-[calc(100vw-2.5rem)] bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 py-3 px-3.5 z-50 text-xs space-y-2.5"
+                >
+                    <div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800 ${styles.hdrBg} -mx-3.5 -mt-3 p-3 rounded-t-2xl">
+                        <div class="flex items-center space-x-1.5 min-w-0">
+                            <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black ${styles.badge}">${escapeHtml(pKey)}</span>
+                            <span class="font-bold text-slate-900 dark:text-white text-xs truncate">${escapeHtml(proj.name || pKey)}</span>
+                            <span id="projTotal_${escapeHtml(pKey)}" class="text-[10px] text-slate-400 font-bold">(0)</span>
+                        </div>
+                        <div class="flex items-center space-x-1 text-[10px] flex-shrink-0">
+                            <button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', true)" class="px-1.5 py-0.5 rounded font-bold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950/60 transition cursor-pointer">
+                                Alles
+                            </button>
+                            <span class="text-slate-300 dark:text-slate-700">•</span>
+                            <button type="button" onclick="selectProjectActiveStatuses('${escapeHtml(pKey)}')" class="px-1.5 py-0.5 rounded font-bold text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950/60 transition cursor-pointer" title="Alleen actieve taken">
+                                Actief
+                            </button>
+                            <span class="text-slate-300 dark:text-slate-700">•</span>
+                            <button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', false)" class="px-1.5 py-0.5 rounded font-bold text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition cursor-pointer">
+                                Geen
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="max-h-60 overflow-y-auto space-y-1 pr-1 custom-scrollbar" id="statusCheckboxList_${escapeHtml(pKey)}">
+                        ${statusRowsHtml}
+                    </div>
                 </div>
             </div>
         `;
     });
 
     container.innerHTML = html;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
     updateStatusCounts();
+    updateStatusDropdownLabel();
+    updateProjectStatusDropdownVisibility();
+}
+
+function updateProjectStatusDropdownVisibility() {
+    const items = document.querySelectorAll('.project-status-dropdown-item');
+    const curNorm = (currentProject || '').toUpperCase().trim();
+    items.forEach(item => {
+        const pKey = (item.getAttribute('data-project') || '').toUpperCase().trim();
+        if (!curNorm) {
+            // "Alle Projecten": toon alle toegewezen project dropdowns
+            item.classList.remove('hidden');
+        } else if (curNorm === pKey) {
+            item.classList.remove('hidden');
+        } else if (curNorm === 'DX' && pKey === 'SD') {
+            item.classList.remove('hidden');
+        } else {
+            item.classList.add('hidden');
+        }
+    });
+}
+
+function toggleProjectStatusDropdown(projectKey, force) {
+    const targetKey = (projectKey || '').toUpperCase().trim();
+    const menu = document.getElementById(`statusDropdownMenu_${targetKey}`);
+    const chevron = document.getElementById(`statusDropdownChevron_${targetKey}`);
+    const btn = document.getElementById(`statusDropdownBtn_${targetKey}`);
+    if (!menu) return;
+
+    const willOpen = (typeof force === 'boolean') ? force : menu.classList.contains('hidden');
+
+    // Sluit alle andere geopende status dropdowns
+    closeAllProjectStatusDropdowns(targetKey);
+
+    if (willOpen) {
+        menu.classList.remove('hidden');
+        if (chevron) chevron.classList.add('rotate-180');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+        updateStatusCounts();
+    } else {
+        menu.classList.add('hidden');
+        if (chevron) chevron.classList.remove('rotate-180');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+    }
+}
+
+function closeAllProjectStatusDropdowns(exceptKey = '') {
+    const exceptNorm = (exceptKey || '').toUpperCase().trim();
+    (projectStatusesData || []).forEach(proj => {
+        const pKey = (proj.key || '').toUpperCase().trim();
+        if (pKey === exceptNorm) return;
+        const menu = document.getElementById(`statusDropdownMenu_${pKey}`);
+        const chevron = document.getElementById(`statusDropdownChevron_${pKey}`);
+        const btn = document.getElementById(`statusDropdownBtn_${pKey}`);
+        if (menu && !menu.classList.contains('hidden')) {
+            menu.classList.add('hidden');
+            if (chevron) chevron.classList.remove('rotate-180');
+            if (btn) btn.setAttribute('aria-expanded', 'false');
+        }
+    });
+}
+
+// Sluit dropdowns bij klikken buiten dropdowns
+document.addEventListener('click', (e) => {
+    const isInside = e.target.closest('.project-status-dropdown-item');
+    if (!isInside) {
+        closeAllProjectStatusDropdowns();
+    }
+});
+
+function toggleStatusDropdown(force) {
+    if (currentProject) {
+        toggleProjectStatusDropdown(currentProject, force);
+    } else if (projectStatusesData && projectStatusesData.length > 0) {
+        toggleProjectStatusDropdown(projectStatusesData[0].key, force);
+    }
 }
 
 function updateStatusCounts() {
@@ -1321,37 +1403,18 @@ function updateStatusCounts() {
     });
 }
 
-function toggleStatusDropdown(force) {
-    const menu = document.getElementById('statusDropdownMenu');
-    const chevron = document.getElementById('statusDropdownChevron');
-    const btn = document.getElementById('statusDropdownBtn');
-    if (!menu) return;
+function onStatusCheckboxChange(projectKey) {
+    const pNorm = (projectKey || '').toUpperCase().trim();
+    const pKeyLower = pNorm.toLowerCase();
+    const chks = document.querySelectorAll(`.status-checkbox-${pNorm}`);
 
-    const willOpen = (typeof force === 'boolean') ? force : menu.classList.contains('hidden');
-    if (willOpen) {
-        menu.classList.remove('hidden');
-        if (chevron) chevron.classList.add('rotate-180');
-        if (btn) btn.setAttribute('aria-expanded', 'true');
-        updateStatusCounts();
+    chks.forEach(chk => {
+        const val = chk.value.toLowerCase().trim();
+        if (chk.checked) {
+            selectedStatuses.add(val);
         } else {
-        menu.classList.add('hidden');
-        if (chevron) chevron.classList.remove('rotate-180');
-        if (btn) btn.setAttribute('aria-expanded', 'false');
+            selectedStatuses.delete(val);
         }
-}
-
-document.addEventListener('click', (e) => {
-    const wrapper = document.getElementById('statusDropdownWrapper');
-    if (wrapper && !wrapper.contains(e.target)) {
-        toggleStatusDropdown(false);
-    }
-});
-
-function onStatusCheckboxChange() {
-    selectedStatuses.clear();
-    const checked = document.querySelectorAll('.status-checkbox:checked');
-    checked.forEach(chk => {
-        if (chk.value) selectedStatuses.add(chk.value.toLowerCase().trim());
     });
 
     try {
@@ -1364,7 +1427,9 @@ function onStatusCheckboxChange() {
 
 function selectProjectStatuses(projectKey, selectAll) {
     const targetKey = (projectKey || '').toUpperCase().trim();
+    const pKeyLower = targetKey.toLowerCase();
     const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`);
+    
     chks.forEach(chk => {
         chk.checked = !!selectAll;
         const val = chk.value.toLowerCase().trim();
@@ -1383,6 +1448,29 @@ function selectProjectStatuses(projectKey, selectAll) {
     applyFilters();
 }
 
+function selectProjectActiveStatuses(projectKey) {
+    const targetKey = (projectKey || '').toUpperCase().trim();
+    const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`);
+    
+    chks.forEach(chk => {
+        const isDone = chk.getAttribute('data-is-done') === '1';
+        chk.checked = !isDone;
+        const val = chk.value.toLowerCase().trim();
+        if (!isDone) {
+            selectedStatuses.add(val);
+        } else {
+            selectedStatuses.delete(val);
+        }
+    });
+
+    try {
+        localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
+    } catch (e) {}
+
+    updateStatusDropdownLabel();
+    applyFilters();
+}
+
 function selectAllStatuses(selectAll) {
     selectedStatuses.clear();
     const chks = document.querySelectorAll('.status-checkbox');
@@ -1401,55 +1489,78 @@ function selectAllStatuses(selectAll) {
     applyFilters();
 }
 
-function selectActiveStatusesOnly() {
-    selectedStatuses.clear();
-    const chks = document.querySelectorAll('.status-checkbox');
-    chks.forEach(chk => {
-        const isDone = chk.getAttribute('data-is-done') === '1';
-        chk.checked = !isDone;
-        if (!isDone && chk.value) {
-            selectedStatuses.add(chk.value.toLowerCase().trim());
+function updateStatusDropdownLabel() {
+    let hasAnyCustomFilter = false;
+
+    (projectStatusesData || []).forEach(proj => {
+        const pKey = (proj.key || '').toUpperCase().trim();
+        const pKeyLower = pKey.toLowerCase();
+        const labelEl = document.getElementById(`statusDropdownLabel_${pKey}`);
+        const badgeEl = document.getElementById(`statusDropdownBadge_${pKey}`);
+        if (!labelEl) return;
+
+        const statuses = proj.statuses || [];
+        const total = statuses.length;
+        let selectedCount = 0;
+        let activeTotal = 0;
+        let activeSelected = 0;
+        let singleStatusName = '';
+
+        statuses.forEach(st => {
+            const sNorm = (st.name || '').toLowerCase().trim();
+            const compound = `${pKeyLower}::${sNorm}`;
+            const cat = (st.status_category || '').toLowerCase().trim();
+            const isDone = (cat === 'done' || isDoneStatus(sNorm));
+
+            if (!isDone) activeTotal++;
+
+            if (selectedStatuses.has(compound) || selectedStatuses.has(sNorm)) {
+                selectedCount++;
+                singleStatusName = st.name;
+                if (!isDone) activeSelected++;
             }
         });
 
-    try {
-        localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
-    } catch (e) {}
+        if (selectedCount < total) {
+            hasAnyCustomFilter = true;
+        }
 
-    updateStatusDropdownLabel();
-    applyFilters();
-}
-
-function updateStatusDropdownLabel() {
-    const labelEl = document.getElementById('statusDropdownLabel');
-    const badgeEl = document.getElementById('statusDropdownBadge');
-    if (!labelEl) return;
-
-    const total = getTotalStatusCount();
-    const selected = selectedStatuses.size;
-
-    if (selected === total || (total === 0 && selected === 0)) {
+        if (selectedCount === total || (total === 0 && selectedCount === 0)) {
             labelEl.innerText = "Alle statussen";
-        if (badgeEl) badgeEl.classList.add('hidden');
-    } else if (selected === 0) {
-        labelEl.innerText = "Geen geselecteerd";
+            if (badgeEl) {
+                badgeEl.innerText = total;
+                badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400";
+            }
+        } else if (selectedCount === 0) {
+            labelEl.innerText = "Geen";
             if (badgeEl) {
                 badgeEl.innerText = "0";
-            badgeEl.classList.remove('hidden');
                 badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-100 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300";
             }
-    } else {
-        labelEl.innerText = `${selected} statussen`;
+        } else if (selectedCount === activeTotal && activeSelected === activeTotal && activeTotal > 0) {
+            labelEl.innerText = "Actief";
             if (badgeEl) {
-            badgeEl.innerText = `${selected}/${total}`;
-            badgeEl.classList.remove('hidden');
+                badgeEl.innerText = `${activeSelected}/${total}`;
+                badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300";
+            }
+        } else if (selectedCount === 1) {
+            labelEl.innerText = singleStatusName;
+            if (badgeEl) {
+                badgeEl.innerText = `1/${total}`;
+                badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-100 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300";
+            }
+        } else {
+            labelEl.innerText = `${selectedCount} statussen`;
+            if (badgeEl) {
+                badgeEl.innerText = `${selectedCount}/${total}`;
                 badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-100 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300";
             }
         }
+    });
 
     const btnReset = document.getElementById('btnResetFiltersInline');
     if (btnReset) {
-        const isCustom = selected < total || currentProject !== '' || document.getElementById('jiraSearchInput')?.value;
+        const isCustom = hasAnyCustomFilter || currentProject !== '' || document.getElementById('jiraSearchInput')?.value;
         if (isCustom) btnReset.classList.remove('hidden');
         else btnReset.classList.add('hidden');
     }
@@ -1465,16 +1576,16 @@ function initStatusSelection() {
 
     let validSaved = false;
     if (Array.isArray(saved) && saved.length > 0) {
+        const hasCompound = saved.some(s => String(s).includes('::'));
+        if (hasCompound) {
             saved.forEach(s => {
                 if (s) selectedStatuses.add(String(s).toLowerCase().trim());
             });
-        if (selectedStatuses.size > 0) {
             validSaved = true;
         }
     }
 
-    if (!validSaved || selectedStatuses.size === 0) {
-        selectedStatuses.clear();
+    if (!validSaved) {
         // Standaard alle actieve statussen selecteren, gesloten uit conform gebruikerswens
         (projectStatusesData || []).forEach(proj => {
             const pKeyLower = (proj.key || '').toLowerCase().trim();
@@ -1509,13 +1620,15 @@ function initStatusSelection() {
     }
 
     renderStatusCheckboxes();
-    updateStatusDropdownLabel();
 }
 
 // Project selectie via pill tabs
 function selectProject(proj) {
     currentProject = (proj || '').trim();
+    closeAllProjectStatusDropdowns();
     updateProjectPills();
+    updateProjectStatusDropdownVisibility();
+    updateStatusCounts();
     applyFilters();
 }
 
@@ -1882,6 +1995,7 @@ function clearSearch() {
 function resetAllFilters() {
     currentProject = '';
     currentQueue = '';
+    closeAllProjectStatusDropdowns();
     selectAllStatuses(true);
 
     const searchInput = document.getElementById('jiraSearchInput');
@@ -1894,7 +2008,8 @@ function resetAllFilters() {
 
     document.getElementById('clearSearchBtn')?.classList.add('hidden');
     updateProjectPills();
-    updateQueuePills();
+    updateProjectStatusDropdownVisibility();
+    updateStatusCounts();
     applyFilters();
 }