From f486bd532ba93377dc638228f3a42f812f337865 Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Mon, 23 Feb 2026 01:45:43 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20resource=20filter=20=E2=80=94=20Bootstrap?=
 =?UTF-8?q?=20d-flex=20!important=20was=20overriding=20inline=20display:no?=
 =?UTF-8?q?ne?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Active/Inactive/All filter buttons weren't actually hiding rows because
Bootstrap's d-flex class uses display:flex !important, which beats inline
display:none. Switched to V2's approach: a .resource-hidden CSS class with
display:none !important that properly overrides d-flex.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 core/templates/core/index.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 88b18f6..9ff89c7 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,6 +4,10 @@
 {% block title %}Dashboard | FoxFitt{% endblock %}
 
 {% block content %}
+<style>
+    {# Hide resource rows — needs !important to override Bootstrap's d-flex !important #}
+    .resource-hidden { display: none !important; }
+</style>
 <!-- Gradient Header -->
 <div class="dashboard-header mb-5 rounded shadow-sm p-4 d-flex justify-content-between align-items-center">
     <div>
@@ -203,7 +207,7 @@
                         {# === WORKERS TAB === #}
                         <div class="tab-pane fade show active" id="workers" role="tabpanel">
                             {% for item in workers %}
-                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom" data-active="{% if item.active %}true{% else %}false{% endif %}">
+                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                 <strong class="small">{{ item.name }}</strong>
                                 <div class="form-check form-switch">
                                     <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="worker" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
@@ -218,7 +222,7 @@
                         {# === PROJECTS TAB === #}
                         <div class="tab-pane fade" id="projects" role="tabpanel">
                             {% for item in projects %}
-                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom" data-active="{% if item.active %}true{% else %}false{% endif %}">
+                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                 <strong class="small">{{ item.name }}</strong>
                                 <div class="form-check form-switch">
                                     <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="project" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
@@ -233,7 +237,7 @@
                         {# === TEAMS TAB === #}
                         <div class="tab-pane fade" id="teams" role="tabpanel">
                             {% for item in teams %}
-                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom" data-active="{% if item.active %}true{% else %}false{% endif %}">
+                            <div class="resource-row d-flex justify-content-between align-items-center py-2 px-3 border-bottom {% if not item.active %}resource-hidden{% endif %}" data-active="{% if item.active %}true{% else %}false{% endif %}">
                                 <strong class="small">{{ item.name }}</strong>
                                 <div class="form-check form-switch">
                                     <input class="form-check-input toggle-active" type="checkbox" role="switch" data-type="team" data-id="{{ item.id }}" {% if item.active %}checked{% endif %}>
@@ -359,18 +363,25 @@ document.addEventListener('DOMContentLoaded', function() {
     var filterBtns = document.querySelectorAll('#resourceFilter button');
 
     function applyFilter() {
+        // Use the resource-hidden CLASS (not inline display:none) because
+        // Bootstrap's d-flex has !important which overrides inline styles.
+        // Our .resource-hidden also has !important, so it wins.
         document.querySelectorAll('.resource-row').forEach(function(row) {
             var isActive = row.dataset.active === 'true';
             var show = false;
             if (currentFilter === 'all') show = true;
             else if (currentFilter === 'active') show = isActive;
             else if (currentFilter === 'inactive') show = !isActive;
-            row.style.display = show ? '' : 'none';
+            if (show) {
+                row.classList.remove('resource-hidden');
+            } else {
+                row.classList.add('resource-hidden');
+            }
         });
         // Show "No matching items" if a tab has rows but none are visible
         document.querySelectorAll('.tab-pane').forEach(function(pane) {
             var rows = pane.querySelectorAll('.resource-row');
-            var visibleRows = Array.from(rows).filter(function(r) { return r.style.display !== 'none'; });
+            var visibleRows = Array.from(rows).filter(function(r) { return !r.classList.contains('resource-hidden'); });
             var emptyMsg = pane.querySelector('.resource-empty');
             if (emptyMsg) {
                 emptyMsg.style.display = (rows.length > 0 && visibleRows.length === 0) ? '' : 'none';