From 210ecc7b18a40f438a9973b83123eb45af58f254 Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Tue, 15 Sep 2026 22:36:59 +0200
Subject: [PATCH] Jira 27

---
 jira.php | 270 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 147 insertions(+), 123 deletions(-)

diff --git a/jira.php b/jira.php
index 983c7ab..130b401 100644
--- a/jira.php
+++ b/jira.php
@@ -517,148 +517,172 @@ $currentUserEmailJson = json_encode($currentUserEmail, JSON_HEX_TAG | JSON_HEX_A
         </div>
     </div>
 
-    <!-- Hoofdbalk: Project Switcher, Wachtrijen, Tabs & Status Filtering -->
+    <!-- Hoofdbalk: Project Switcher met Dropdown Pijltjes voor Status Settings & Uitvoerder -->
     <div class="fociz-card relative z-30 p-4 sm:p-5 space-y-4 shadow-sm border border-slate-200/80 dark:border-slate-800 overflow-visible">
         
-        <!-- Prominente Project Switcher (Toegewezen Projecten: SD, GEN, IN, etc.) -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 pb-3 border-b border-slate-100 dark:border-slate-800/80">
+        <!-- Bovenste balk: Titel links, Zoekveld + Reset rechts -->
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-2.5">
-                <div class="w-7 h-7 rounded-lg bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-bold">
+                <div class="w-7 h-7 rounded-lg bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-bold flex-shrink-0">
                     <i data-lucide="layers" class="w-4 h-4"></i>
                 </div>
                 <div>
                     <span class="text-xs font-black uppercase tracking-wider text-slate-900 dark:text-white">Projecten</span>
-                    <p class="text-[10px] text-slate-400">Direct schakelen tussen jouw toegewezen projecten</p>
+                    <p class="text-[10px] text-slate-400">Direct schakelen tussen projecten • Klik op het pijltje voor status instellingen &amp; uitvoerder</p>
                 </div>
             </div>
 
-            <div class="flex flex-wrap items-center gap-1.5" id="projectPillsContainer">
-                <button type="button" onclick="selectProject('')" data-project="" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow-xs flex-shrink-0">
+            <div class="flex items-center space-x-2 w-full sm:w-auto">
+                <button type="button" onclick="resetAllFilters()" id="btnResetFiltersInline" class="hidden flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-semibold text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer flex-shrink-0">
+                    <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
+                    <span>Filters wissen</span>
+                </button>
+                <div class="relative w-full sm: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" 
+                        id="jiraSearchInput" 
+                        placeholder="Zoek in alle tickets..." 
+                        oninput="applyFilters()" 
+                        class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl pl-7 pr-6 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    >
+                    <button onclick="clearSearch()" id="clearSearchBtn" class="hidden absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-pointer">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Project Knoppen met direct ingebouwde dropdowns voor statusinstellingen & uitvoerder -->
+        <div class="flex flex-wrap items-center gap-2 relative z-50" id="projectPillsContainer">
+            
+            <?php 
+            $hasUserAssignments = !empty($userQueueFilters);
+            $isCodeVisible = function(string $code) use ($hasUserAssignments, $userQueueFilters): bool {
+                if (!$hasUserAssignments) return true;
+                return in_array(strtoupper(trim($code)), $userQueueFilters, true);
+            };
+            ?>
+
+            <!-- Alle Projecten -->
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="" id="projGroup_all">
+                <button type="button" onclick="selectProject('')" data-project="" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-slate-900 dark:bg-white text-white dark:text-slate-900">
                     <i data-lucide="grid" class="w-3.5 h-3.5"></i>
                     <span>Alle<span class="hidden sm:inline"> Projecten</span></span>
                     <span id="projCount_all" class="px-1.5 py-0.5 rounded-full text-[10px] bg-white/20 dark:bg-slate-900/20 font-black"><?= count($allIssues) ?></span>
                 </button>
-
-                <?php 
-                $hasUserAssignments = !empty($userQueueFilters);
-                $isCodeVisible = function(string $code) use ($hasUserAssignments, $userQueueFilters): bool {
-                    if (!$hasUserAssignments) return true;
-                    return in_array(strtoupper(trim($code)), $userQueueFilters, true);
-                };
-                ?>
-
-                <!-- SD: Servicedesk -->
-                <?php if ($isCodeVisible('SD')): ?>
-                    <button type="button" onclick="selectProject('SD')" data-project="SD" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-sky-50 dark:bg-sky-950/40 text-sky-800 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/60 border border-sky-300 dark:border-sky-800 flex-shrink-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-sky-200 dark:bg-sky-800 text-sky-900 dark:text-sky-100">SD</span>
-                        <span class="hidden sm:inline">Servicedesk</span>
-                        <span id="projCount_SD" class="px-1.5 py-0.5 rounded-full text-[10px] bg-sky-200/80 dark:bg-sky-800/80 font-bold">0</span>
-                    </button>
-                <?php endif; ?>
-
-                <!-- GEN: General -->
-                <?php if ($isCodeVisible('GEN')): ?>
-                    <button type="button" onclick="selectProject('GEN')" data-project="GEN" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-indigo-50 dark:bg-indigo-950/40 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/60 border border-indigo-300 dark:border-indigo-800 flex-shrink-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-indigo-200 dark:bg-indigo-800 text-indigo-900 dark:text-indigo-100">GEN</span>
-                        <span class="hidden sm:inline">General</span>
-                        <span id="projCount_GEN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-indigo-200/80 dark:bg-indigo-800/80 font-bold">0</span>
-                    </button>
-                <?php endif; ?>
-
-                <!-- IN: Interfaces -->
-                <?php if ($isCodeVisible('IN')): ?>
-                    <button type="button" onclick="selectProject('IN')" data-project="IN" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/60 border border-amber-300 dark:border-amber-800 flex-shrink-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100">IN</span>
-                        <span class="hidden sm:inline">Interfaces</span>
-                        <span id="projCount_IN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-200/80 dark:bg-amber-800/80 font-bold">0</span>
-                    </button>
-                <?php endif; ?>
-
-                <!-- AAN: Aanvragen -->
-                <?php if ($isCodeVisible('AAN')): ?>
-                    <button type="button" onclick="selectProject('AAN')" data-project="AAN" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900/60 border border-emerald-300 dark:border-emerald-800 flex-shrink-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-emerald-200 dark:bg-emerald-800 text-emerald-900 dark:text-emerald-100">AAN</span>
-                        <span class="hidden sm:inline">Aanvragen</span>
-                        <span id="projCount_AAN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-emerald-200/80 dark:bg-emerald-800/80 font-bold">0</span>
-                    </button>
-                <?php endif; ?>
-
-                <!-- DX: DX Koppelingen -->
-                <?php if ($isCodeVisible('DX')): ?>
-                    <button type="button" onclick="selectProject('DX')" data-project="DX" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/60 border border-amber-300 dark:border-amber-800 flex-shrink-0">
-                        <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
-                        <span>DX</span>
-                        <span id="projCount_DX" class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-200/80 dark:bg-amber-800/80 font-bold">0</span>
-                    </button>
-                <?php endif; ?>
-
-                <!-- Overige geconfigureerde projectfilters -->
-                <?php foreach ($queueFilters as $qf): 
-                    $qCode = strtoupper(trim($qf['filter_code'] ?? ''));
-                    if (in_array($qCode, ['SD', 'IN', 'AAN', 'GEN', 'DX'], true)) continue;
-                    if (!$isCodeVisible($qCode)) continue;
-                ?>
-                    <button type="button" onclick="selectProject('<?= htmlspecialchars(addslashes($qCode)) ?>')" data-project="<?= htmlspecialchars($qCode) ?>" class="project-pill flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700 flex-shrink-0">
-                        <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-slate-200 dark:bg-slate-700"><?= htmlspecialchars($qCode) ?></span>
-                        <span class="hidden sm:inline"><?= htmlspecialchars($qf['filter_name']) ?></span>
-                        <span id="projCount_<?= htmlspecialchars($qCode) ?>" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300">0</span>
-                    </button>
-                <?php endforeach; ?>
-
-                <?php if ($isAdmin): ?>
-                    <a href="/admin.php#projects" title="Wachtrijen & Projecten beheren in Beheer" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer flex-shrink-0">
-                        <i data-lucide="settings" class="w-3.5 h-3.5"></i>
-                    </a>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <!-- 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: Status Dropdowns PER Project -->
-            <div class="flex flex-wrap items-center gap-2 relative z-50">
-                <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>
-
-                <!-- Hier worden de status dropdowns per project dynamisch ingeladen -->
-                <div id="projectStatusDropdownsWrapper" class="flex flex-wrap items-center gap-2">
-                </div>
-
-                <!-- Snelle optie: Toegewezen aan mij (uitvoerder) per geselecteerd project -->
-                <button type="button" 
-                        id="btnToggleAssignedToMePill" 
-                        onclick="toggleCurrentProjectOnlyAssigned()" 
-                        class="flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl text-xs font-semibold border transition cursor-pointer shadow-2xs flex-shrink-0 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-slate-300 dark:hover:border-slate-600"
-                        title="Filter op taken toegewezen aan mijzelf (uitvoerder)">
-                    <i data-lucide="user-check" class="w-3.5 h-3.5 text-indigo-500 flex-shrink-0"></i>
-                    <span id="labelAssignedToMePill">Toegewezen aan mij <span class="hidden sm:inline">(uitvoerder)</span></span>
-                    <span id="badgeAssignedToMeCount" 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">0</span>
-                </button>
-
-                <!-- Actieve filters reset knop als er iets gefilterd is -->
-                <button type="button" onclick="resetAllFilters()" id="btnResetFiltersInline" class="hidden flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-semibold text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
-                    <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
-                    <span>Filters wissen</span>
+                <button type="button" onclick="toggleProjectDropdown('all', event)" id="btnProjectArrow_all" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border-l border-white/20 dark:border-slate-800 text-white dark:text-slate-900 hover:bg-white/10 dark:hover:bg-black/10 transition cursor-pointer relative" title="Status instellingen voor Alle Projecten" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_all" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_all" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
                 </button>
+                <div id="projectDropdownMenu_all" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
             </div>
 
-            <!-- Rechterkant: Zoekveld -->
-            <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" 
-                    id="jiraSearchInput" 
-                    placeholder="Zoek in alle tickets..." 
-                    oninput="applyFilters()" 
-                    class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl pl-7 pr-6 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                >
-                <button onclick="clearSearch()" id="clearSearchBtn" class="hidden absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-pointer">
-                    <i data-lucide="x" class="w-3 h-3"></i>
+            <!-- SD: Servicedesk -->
+            <?php if ($isCodeVisible('SD')): ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="SD" id="projGroup_SD">
+                <button type="button" onclick="selectProject('SD')" data-project="SD" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-sky-50 dark:bg-sky-950/40 text-sky-800 dark:text-sky-300 border border-sky-300 dark:border-sky-800 border-r-0">
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-sky-200 dark:bg-sky-800 text-sky-900 dark:text-sky-100">SD</span>
+                    <span class="hidden sm:inline">Servicedesk</span>
+                    <span id="projCount_SD" class="px-1.5 py-0.5 rounded-full text-[10px] bg-sky-200/80 dark:bg-sky-800/80 font-bold">0</span>
                 </button>
+                <button type="button" onclick="toggleProjectDropdown('SD', event)" id="btnProjectArrow_SD" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-sky-300 dark:border-sky-800 border-l-sky-200 dark:border-l-sky-800 text-sky-700 dark:text-sky-300 hover:bg-sky-100 dark:hover:bg-sky-900/60 transition cursor-pointer relative" title="Status instellingen voor Servicedesk" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_SD" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_SD" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_SD" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
             </div>
+            <?php endif; ?>
+
+            <!-- GEN: General -->
+            <?php if ($isCodeVisible('GEN')): ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="GEN" id="projGroup_GEN">
+                <button type="button" onclick="selectProject('GEN')" data-project="GEN" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-indigo-50 dark:bg-indigo-950/40 text-indigo-800 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-800 border-r-0">
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-indigo-200 dark:bg-indigo-800 text-indigo-900 dark:text-indigo-100">GEN</span>
+                    <span class="hidden sm:inline">General</span>
+                    <span id="projCount_GEN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-indigo-200/80 dark:bg-indigo-800/80 font-bold">0</span>
+                </button>
+                <button type="button" onclick="toggleProjectDropdown('GEN', event)" id="btnProjectArrow_GEN" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-indigo-300 dark:border-indigo-800 border-l-indigo-200 dark:border-l-indigo-800 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/60 transition cursor-pointer relative" title="Status instellingen voor General" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_GEN" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_GEN" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_GEN" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
+            </div>
+            <?php endif; ?>
+
+            <!-- IN: Interfaces -->
+            <?php if ($isCodeVisible('IN')): ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="IN" id="projGroup_IN">
+                <button type="button" onclick="selectProject('IN')" data-project="IN" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-800 border-r-0">
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100">IN</span>
+                    <span class="hidden sm:inline">Interfaces</span>
+                    <span id="projCount_IN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-200/80 dark:bg-amber-800/80 font-bold">0</span>
+                </button>
+                <button type="button" onclick="toggleProjectDropdown('IN', event)" id="btnProjectArrow_IN" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-amber-300 dark:border-amber-800 border-l-amber-200 dark:border-l-amber-800 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/60 transition cursor-pointer relative" title="Status instellingen voor Interfaces" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_IN" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_IN" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_IN" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
+            </div>
+            <?php endif; ?>
+
+            <!-- AAN: Aanvragen -->
+            <?php if ($isCodeVisible('AAN')): ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="AAN" id="projGroup_AAN">
+                <button type="button" onclick="selectProject('AAN')" data-project="AAN" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-800 border-r-0">
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-emerald-200 dark:bg-emerald-800 text-emerald-900 dark:text-emerald-100">AAN</span>
+                    <span class="hidden sm:inline">Aanvragen</span>
+                    <span id="projCount_AAN" class="px-1.5 py-0.5 rounded-full text-[10px] bg-emerald-200/80 dark:bg-emerald-800/80 font-bold">0</span>
+                </button>
+                <button type="button" onclick="toggleProjectDropdown('AAN', event)" id="btnProjectArrow_AAN" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-emerald-300 dark:border-emerald-800 border-l-emerald-200 dark:border-l-emerald-800 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900/60 transition cursor-pointer relative" title="Status instellingen voor Aanvragen" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_AAN" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_AAN" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_AAN" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
+            </div>
+            <?php endif; ?>
+
+            <!-- DX: DX Koppelingen -->
+            <?php if ($isCodeVisible('DX')): ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="DX" id="projGroup_DX">
+                <button type="button" onclick="selectProject('DX')" data-project="DX" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-800 border-r-0">
+                    <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
+                    <span>DX</span>
+                    <span id="projCount_DX" class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-200/80 dark:bg-amber-800/80 font-bold">0</span>
+                </button>
+                <button type="button" onclick="toggleProjectDropdown('DX', event)" id="btnProjectArrow_DX" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-amber-300 dark:border-amber-800 border-l-amber-200 dark:border-l-amber-800 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/60 transition cursor-pointer relative" title="Status instellingen voor DX Koppelingen" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_DX" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_DX" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_DX" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
+            </div>
+            <?php endif; ?>
+
+            <!-- Overige geconfigureerde projectfilters -->
+            <?php foreach ($queueFilters as $qf): 
+                $qCode = strtoupper(trim($qf['filter_code'] ?? ''));
+                if (in_array($qCode, ['SD', 'IN', 'AAN', 'GEN', 'DX'], true)) continue;
+                if (!$isCodeVisible($qCode)) continue;
+            ?>
+            <div class="relative inline-flex items-stretch rounded-xl shadow-xs group flex-shrink-0 project-pill-container" data-project="<?= htmlspecialchars($qCode) ?>" id="projGroup_<?= htmlspecialchars($qCode) ?>">
+                <button type="button" onclick="selectProject('<?= htmlspecialchars(addslashes($qCode)) ?>')" data-project="<?= htmlspecialchars($qCode) ?>" class="project-pill-btn flex items-center space-x-1.5 pl-2.5 sm:pl-3 pr-2 py-1.5 rounded-l-xl text-xs font-bold transition cursor-pointer bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-700 border-r-0">
+                    <span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black bg-slate-200 dark:bg-slate-700"><?= htmlspecialchars($qCode) ?></span>
+                    <span class="hidden sm:inline"><?= htmlspecialchars($qf['filter_name']) ?></span>
+                    <span id="projCount_<?= htmlspecialchars($qCode) ?>" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300">0</span>
+                </button>
+                <button type="button" onclick="toggleProjectDropdown('<?= htmlspecialchars(addslashes($qCode)) ?>', event)" id="btnProjectArrow_<?= htmlspecialchars($qCode) ?>" class="project-pill-arrow px-2 py-1.5 flex items-center justify-center rounded-r-xl border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition cursor-pointer relative" title="Status instellingen voor <?= htmlspecialchars($qf['filter_name']) ?>" aria-expanded="false">
+                    <i data-lucide="chevron-down" id="projChevron_<?= htmlspecialchars($qCode) ?>" class="w-3.5 h-3.5 transition-transform duration-200"></i>
+                    <span id="projFilterActiveDot_<?= htmlspecialchars($qCode) ?>" class="hidden absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400 ring-1 ring-white dark:ring-slate-900"></span>
+                </button>
+                <div id="projectDropdownMenu_<?= htmlspecialchars($qCode) ?>" class="hidden project-dropdown-menu absolute left-0 top-full mt-2 w-72 sm:w-80 max-w-[calc(100vw-2rem)] 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>
+            </div>
+            <?php endforeach; ?>
+
+            <?php if ($isAdmin): ?>
+                <a href="/admin.php#projects" title="Wachtrijen & Projecten beheren in Beheer" class="p-2 rounded-xl text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer flex-shrink-0">
+                    <i data-lucide="settings" class="w-3.5 h-3.5"></i>
+                </a>
+            <?php endif; ?>
         </div>
 
     </div>