diff --git a/core/templates/core/report.html b/core/templates/core/report.html
index d2266f0..bc34843 100644
--- a/core/templates/core/report.html
+++ b/core/templates/core/report.html
@@ -30,6 +30,25 @@
+{# === FILTER PILLS === #}
+
+
+ {{ start_date|date:"d M Y" }} – {{ end_date|date:"d M Y" }}
+
+
+ {{ project_name }}
+ {% if selected_project_ids %}
+ ×
+ {% endif %}
+
+
+ {{ team_name }}
+ {% if selected_team_ids %}
+ ×
+ {% endif %}
+
+
+
FoxFitt Construction — Payroll Report
diff --git a/core/views.py b/core/views.py
index b557aab..8f1cdfe 100644
--- a/core/views.py
+++ b/core/views.py
@@ -2382,6 +2382,17 @@ def generate_report(request):
)
# Pass the raw query params so the "Download PDF" button can use them
context['query_string'] = request.GET.urlencode()
+ # === FILTER PILL CLEAR LINKS ===
+ # For the filter-pill x buttons: rebuild the querystring with one filter removed.
+ # QueryDict.pop() only removes the first occurrence, so for multi-value keys
+ # (e.g. project=1&project=2) we follow up with setlist(key, []) to strip them all.
+ def _qs_without(key):
+ qd = request.GET.copy()
+ qd.pop(key, None)
+ qd.setlist(key, [])
+ return qd.urlencode()
+ context['query_string_without_project'] = _qs_without('project')
+ context['query_string_without_team'] = _qs_without('team')
# Pass projects and teams so the "New Report" modal's dropdowns can
# populate (same lists the Dashboard modal uses)
context['projects'] = Project.objects.all().order_by('name')
diff --git a/static/css/custom.css b/static/css/custom.css
index 68894ec..cdbba0c 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1491,3 +1491,34 @@ body, .card, .modal-content, .form-control, .form-select,
.work-log-row:hover td {
background: var(--bg-card-hover);
}
+
+/* === Report filter pills === */
+.filter-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.35rem 0.75rem;
+ font-size: 0.825rem;
+ background: var(--bg-inset);
+ color: var(--text-primary);
+ border: 1px solid var(--border-default);
+ border-radius: 999px;
+ line-height: 1.2;
+}
+.filter-pill i {
+ color: var(--accent);
+ font-size: 0.75rem;
+}
+.filter-pill__x {
+ margin-left: 0.5rem;
+ padding: 0 0.35rem;
+ color: var(--text-tertiary);
+ text-decoration: none;
+ font-weight: 600;
+ border-radius: 50%;
+ transition: color 120ms, background-color 120ms;
+}
+.filter-pill__x:hover {
+ color: var(--text-primary);
+ background: var(--bg-card-hover);
+ text-decoration: none;
+}