feat: Add advanced filters panel to incident list

frontend/src/routes/components/AdvancedFilters.tsx

@@ -0,0 +1,44 @@
+import {Card} from 'components/Card';
+
+import {ServiceTierSchema, SeveritySchema} from '../types';
+
+import {DateRangeFilter} from './filters/DateRangeFilter';
+import {PillFilter} from './filters/PillFilter';
+import {TagFilter} from './filters/TagFilter';
+import {UserFilter} from './filters/UserFilter';
+
+export {FilterTrigger} from './filters/FilterTrigger';
+
+export function FilterPanel() {
+  return (
+    <Card className="flex flex-col gap-space-md" data-testid="advanced-filters">
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-space-md">
+        <PillFilter
+          label="Severity"
+          filterKey="severity"
+          options={SeveritySchema.options}
+        />
+        <PillFilter
+          label="Service Tier"
+          filterKey="service_tier"
+          options={ServiceTierSchema.options}
+        />
+        <TagFilter label="Impact Type" filterKey="impact_type" tagType="IMPACT_TYPE" />
+        <TagFilter
+          label="Affected Service"
+          filterKey="affected_service"
+          tagType="AFFECTED_SERVICE"
+        />
+        <TagFilter
+          label="Affected Region"
+          filterKey="affected_region"
+          tagType="AFFECTED_REGION"
+        />
+        <TagFilter label="Root Cause" filterKey="root_cause" tagType="ROOT_CAUSE" />
+        <UserFilter label="Captain" filterKey="captain" />
+        <UserFilter label="Reporter" filterKey="reporter" />
+        <DateRangeFilter />
+      </div>
+    </Card>
+  );
+}

frontend/src/routes/components/Header.tsx

@@ -3,7 +3,7 @@ import {Link, useRouterState} from '@tanstack/react-router';
 import {Avatar} from 'components/Avatar';
 
 import {currentUserQueryOptions} from '../queries/currentUserQueryOptions';
-import type {IncidentStatus} from '../types';
+import type {StatusFilterValue} from '../types';
 
 const STORAGE_KEY = 'firetower_list_search';
 
@@ -13,7 +13,7 @@ export const Header = () => {
 
   const isRootRoute = routerState.location.pathname === '/';
 
-  const getPreservedSearch = (): {status?: IncidentStatus[]} | undefined => {
+  const getPreservedSearch = (): {status?: StatusFilterValue[]} | undefined => {
     const stored = sessionStorage.getItem(STORAGE_KEY);
     if (stored) {
       try {

frontend/src/routes/components/StatusFilter.tsx

@@ -2,10 +2,10 @@ import {Link, useSearch} from '@tanstack/react-router';
 import {arraysEqual} from 'utils/arrays';
 import {cn} from 'utils/cn';
 
-import {STATUS_FILTER_GROUPS, type IncidentStatus} from '../types';
+import {STATUS_FILTER_GROUPS, type StatusFilterValue} from '../types';
 
 interface FilterLinkProps {
-  statuses?: IncidentStatus[];
+  statuses?: StatusFilterValue[];
   label: string;
   isActive: boolean;
   testId?: string;
@@ -58,6 +58,12 @@ export function StatusFilter() {
         isActive={arraysEqual(status ?? [], STATUS_FILTER_GROUPS.closed)}
         testId="filter-closed"
       />
+      <FilterLink
+        statuses={STATUS_FILTER_GROUPS.all}
+        label="All"
+        isActive={arraysEqual(status ?? [], STATUS_FILTER_GROUPS.all)}
+        testId="filter-all"
+      />
     </div>
   );
 }

frontend/src/routes/components/filters/DateRangeFilter.tsx

@@ -0,0 +1,129 @@
+import {useState} from 'react';
+import {useNavigate} from '@tanstack/react-router';
+import {Button} from 'components/Button';
+import {Calendar} from 'components/Calendar';
+import {Popover, PopoverContent, PopoverTrigger} from 'components/Popover';
+import {XIcon} from 'lucide-react';
+
+import {useActiveFilters} from '../useActiveFilters';
+
+function formatDateDisplay(dateStr: string | undefined): string {
+  if (!dateStr) return '';
+  const date = new Date(dateStr.includes('T') ? dateStr : dateStr + 'T00:00:00');
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+function toDateString(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+export function DateRangeFilter() {
+  const navigate = useNavigate();
+  const {search} = useActiveFilters();
+  const after = search.created_after as string | undefined;
+  const before = search.created_before as string | undefined;
+  const [editing, setEditing] = useState<'after' | 'before' | null>(null);
+
+  const afterDate = after ? new Date(after + 'T00:00:00') : undefined;
+  const beforeDate = before ? new Date(before + 'T00:00:00') : undefined;
+
+  const update = (key: 'created_after' | 'created_before', value: string | undefined) => {
+    navigate({
+      to: '/',
+      search: prev => ({...prev, [key]: value}),
+      replace: true,
+    });
+  };
+
+  const handleDateSelect = (
+    key: 'created_after' | 'created_before',
+    date: Date | undefined
+  ) => {
+    update(key, date ? toDateString(date) : undefined);
+    setEditing(null);
+  };
+
+  return (
+    <div className="col-span-1">
+      <div className="mb-space-md">
+        <h3 className="text-size-md text-content-secondary font-semibold">
+          Created Date
+        </h3>
+      </div>
+      <div className="gap-space-xs flex flex-wrap items-center">
+        <div className="flex items-center gap-space-xs">
+          <Popover
+            open={editing === 'after'}
+            onOpenChange={o => setEditing(o ? 'after' : null)}
+          >
+            <PopoverTrigger asChild>
+              <Button variant="secondary" className="text-size-sm">
+                {after ? formatDateDisplay(after) : 'Any'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={afterDate}
+                defaultMonth={afterDate}
+                captionLayout="dropdown"
+                showOutsideDays={false}
+                onSelect={d => handleDateSelect('created_after', d)}
+              />
+            </PopoverContent>
+          </Popover>
+          {after && (
+            <Button
+              variant="close"
+              onClick={() => update('created_after', undefined)}
+              aria-label="Clear start date"
+              size={null}
+            >
+              <XIcon className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+        <span className="text-content-disabled text-size-sm">to</span>
+        <div className="flex items-center gap-space-xs">
+          <Popover
+            open={editing === 'before'}
+            onOpenChange={o => setEditing(o ? 'before' : null)}
+          >
+            <PopoverTrigger asChild>
+              <Button variant="secondary" className="text-size-sm">
+                {before ? formatDateDisplay(before) : 'Any'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={beforeDate}
+                defaultMonth={beforeDate}
+                captionLayout="dropdown"
+                showOutsideDays={false}
+                onSelect={d => handleDateSelect('created_before', d)}
+              />
+            </PopoverContent>
+          </Popover>
+          {before && (
+            <Button
+              variant="close"
+              onClick={() => update('created_before', undefined)}
+              aria-label="Clear end date"
+              size={null}
+            >
+              <XIcon className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/routes/components/filters/FilterTrigger.tsx

@@ -0,0 +1,46 @@
+import {useNavigate} from '@tanstack/react-router';
+import {Button} from 'components/Button';
+import {SlidersHorizontalIcon} from 'lucide-react';
+
+import {useActiveFilters} from '../useActiveFilters';
+
+export function FilterTrigger({open, onToggle}: {open: boolean; onToggle: () => void}) {
+  const navigate = useNavigate();
+  const {activeCount} = useActiveFilters();
+
+  return (
+    <div className="flex items-center gap-space-md">
+      {activeCount > 0 && (
+        <button
+          type="button"
+          className="text-content-accent text-size-sm cursor-pointer hover:underline"
+          onClick={() => {
+            navigate({
+              to: '/',
+              search: {},
+              replace: true,
+            });
+          }}
+          data-testid="clear-all-filters"
+        >
+          Clear all filters
+        </button>
+      )}
+      <Button
+        variant="secondary"
+        size="sm"
+        onClick={onToggle}
+        aria-expanded={open}
+        data-testid="advanced-filters-toggle"
+      >
+        <SlidersHorizontalIcon className="h-3.5 w-3.5" />
+        {open ? 'Hide filters' : 'Show filters'}
+        {activeCount > 0 && (
+          <span className="bg-background-accent-vibrant text-content-on-vibrant-light ml-space-2xs inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs leading-none">
+            {activeCount}
+          </span>
+        )}
+      </Button>
+    </div>
+  );
+}