@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/TableFilters.astro

@@ -0,0 +1,1033 @@
+---
+/**
+ * TableFilters.astro
+ *
+ * Enhanced filtering controls for the usage dashboard.
+ * Features: search, resource type multi-select, project filter, status filter,
+ * sort controls, and URL parameter persistence.
+ */
+
+interface Props {
+  projects?: string[];
+  resourceTypes?: string[];
+  initialFilters?: {
+    search?: string;
+    types?: string[];
+    project?: string;
+    status?: string;
+    sort?: string;
+    sortDir?: 'asc' | 'desc';
+  };
+}
+
+const {
+  projects = [],
+  resourceTypes = [
+    'Workers',
+    'D1',
+    'KV',
+    'R2',
+    'Pages',
+    'Vectorize',
+    'AI Gateway',
+    'Queues',
+    'Workflows',
+    'Durable Objects',
+  ],
+  initialFilters = {},
+} = Astro.props;
+
+// Parse URL params for initial state
+const url = new URL(Astro.request.url);
+const urlSearch = url.searchParams.get('search') || initialFilters.search || '';
+const urlTypes =
+  url.searchParams.get('types')?.split(',').filter(Boolean) || initialFilters.types || [];
+const urlProject = url.searchParams.get('project') || initialFilters.project || '';
+const urlStatus = url.searchParams.get('status') || initialFilters.status || '';
+const urlSort = url.searchParams.get('sort') || initialFilters.sort || 'cost';
+const urlSortDir =
+  (url.searchParams.get('sortDir') as 'asc' | 'desc') || initialFilters.sortDir || 'desc';
+---
+
+<div class="table-filters" data-filters>
+  <!-- Search Input -->
+  <div class="filter-group search-group">
+    <label for="filter-search" class="filter-label">Search</label>
+    <div class="search-input-wrapper">
+      <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path
+          d="M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10zM14 14l-3.5-3.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+      </svg>
+      <input
+        type="text"
+        id="filter-search"
+        class="filter-input search-input"
+        placeholder="Search resources..."
+        value={urlSearch}
+        data-filter-search
+      />
+      <button
+        type="button"
+        class="clear-search"
+        data-clear-search
+        aria-label="Clear search"
+        style={urlSearch ? '' : 'display: none'}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path
+            d="M10.5 3.5L3.5 10.5M3.5 3.5l7 7"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Resource Type Multi-Select -->
+  <div class="filter-group">
+    <label class="filter-label">Resource Types</label>
+    <div class="multi-select" data-multi-select="types">
+      <button type="button" class="multi-select-trigger" data-trigger>
+        <span class="multi-select-value" data-value>
+          {
+            urlTypes.length === 0
+              ? 'All Types'
+              : urlTypes.length === 1
+                ? urlTypes[0]
+                : `${urlTypes.length} selected`
+          }
+        </span>
+        <svg class="dropdown-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path
+            d="M3 4.5l3 3 3-3"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <div class="multi-select-dropdown" data-dropdown>
+        <div class="dropdown-header">
+          <button type="button" class="select-action" data-select-all>Select All</button>
+          <button type="button" class="select-action" data-clear-all>Clear</button>
+        </div>
+        <div class="dropdown-options">
+          {
+            resourceTypes.map((type) => (
+              <label class="dropdown-option">
+                <input
+                  type="checkbox"
+                  value={type}
+                  checked={urlTypes.includes(type)}
+                  data-type-checkbox
+                />
+                <span class="checkbox-custom" />
+                <span class="option-label">{type}</span>
+              </label>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Project Filter -->
+  <div class="filter-group">
+    <label for="filter-project" class="filter-label">Project</label>
+    <div class="select-wrapper">
+      <select id="filter-project" class="filter-select" data-filter-project>
+        <option value="">All Projects</option>
+        {
+          projects.map((project) => (
+            <option value={project} selected={urlProject === project}>
+              {project}
+            </option>
+          ))
+        }
+      </select>
+      <svg class="select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path
+          d="M3 4.5l3 3 3-3"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+      </svg>
+    </div>
+  </div>
+
+  <!-- Status Filter -->
+  <div class="filter-group">
+    <label for="filter-status" class="filter-label">Status</label>
+    <div class="status-buttons" data-status-filter>
+      <button type="button" class={`status-btn ${urlStatus === '' ? 'active' : ''}`} data-status=""
+        >All</button
+      >
+      <button
+        type="button"
+        class={`status-btn status-ok ${urlStatus === 'ok' ? 'active' : ''}`}
+        data-status="ok"
+      >
+        <span class="status-dot ok"></span>
+        OK
+      </button>
+      <button
+        type="button"
+        class={`status-btn status-warning ${urlStatus === 'warning' ? 'active' : ''}`}
+        data-status="warning"
+      >
+        <span class="status-dot warning"></span>
+        Warning
+      </button>
+      <button
+        type="button"
+        class={`status-btn status-critical ${urlStatus === 'critical' ? 'active' : ''}`}
+        data-status="critical"
+      >
+        <span class="status-dot critical"></span>
+        Critical
+      </button>
+    </div>
+  </div>
+
+  <!-- Sort Controls -->
+  <div class="filter-group sort-group">
+    <label for="filter-sort" class="filter-label">Sort By</label>
+    <div class="sort-controls">
+      <div class="select-wrapper">
+        <select id="filter-sort" class="filter-select" data-filter-sort>
+          <option value="cost" selected={urlSort === 'cost'}>Cost</option>
+          <option value="name" selected={urlSort === 'name'}>Name</option>
+          <option value="usage" selected={urlSort === 'usage'}>Usage</option>
+          <option value="requests" selected={urlSort === 'requests'}>Requests</option>
+          <option value="status" selected={urlSort === 'status'}>Status</option>
+        </select>
+        <svg class="select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path
+            d="M3 4.5l3 3 3-3"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+        </svg>
+      </div>
+      <button
+        type="button"
+        class="sort-direction"
+        data-sort-direction={urlSortDir}
+        aria-label={`Sort ${urlSortDir === 'asc' ? 'ascending' : 'descending'}`}
+      >
+        <!-- Ascending arrow (shown when sortDir is asc) -->
+        <svg
+          class="sort-arrow sort-asc"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          style={urlSortDir === 'asc' ? '' : 'display: none'}
+        >
+          <path
+            d="M7 11V3M7 3l3 3M7 3 4 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+        </svg>
+        <!-- Descending arrow (shown when sortDir is desc) -->
+        <svg
+          class="sort-arrow sort-desc"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          style={urlSortDir === 'desc' ? '' : 'display: none'}
+        >
+          <path
+            d="M7 3v8M7 11l3-3M7 11 4 8"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Clear All -->
+  <div class="filter-group clear-group">
+    <button type="button" class="clear-all-btn" data-clear-all-filters>
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path
+          d="M10.5 3.5L3.5 10.5M3.5 3.5l7 7"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"></path>
+      </svg>
+      Clear All
+    </button>
+  </div>
+
+  <!-- Active Filters Display -->
+  <div class="active-filters" data-active-filters style="display: none">
+    <span class="active-filters-label">Active:</span>
+    <div class="filter-tags" data-filter-tags></div>
+  </div>
+</div>
+
+<style>
+  .table-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--usage-spacing-md, 1rem);
+    align-items: flex-end;
+    padding: var(--usage-spacing-md, 1rem);
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-lg, 8px);
+    margin-bottom: var(--usage-spacing-lg, 1.5rem);
+  }
+
+  .filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-xs, 0.25rem);
+  }
+
+  .filter-label {
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Search Input */
+  .search-group {
+    flex: 1;
+    min-width: 200px;
+    max-width: 320px;
+  }
+
+  .search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.75rem;
+    color: var(--usage-text-muted);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.5rem 2rem 0.5rem 2.25rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.875rem;
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md, 6px);
+    transition:
+      border-color var(--usage-transition-fast),
+      box-shadow var(--usage-transition-fast);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--usage-accent-blue);
+    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
+  }
+
+  .search-input::placeholder {
+    color: var(--usage-text-muted);
+  }
+
+  .clear-search {
+    position: absolute;
+    right: 0.5rem;
+    padding: 0.25rem;
+    background: none;
+    border: none;
+    color: var(--usage-text-muted);
+    cursor: pointer;
+    border-radius: var(--usage-radius-sm, 4px);
+    transition:
+      color var(--usage-transition-fast),
+      background var(--usage-transition-fast);
+  }
+
+  .clear-search:hover {
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-hover);
+  }
+
+  /* Multi-Select Dropdown */
+  .multi-select {
+    position: relative;
+  }
+
+  .multi-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    min-width: 140px;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.875rem;
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md, 6px);
+    cursor: pointer;
+    transition: border-color var(--usage-transition-fast);
+  }
+
+  .multi-select-trigger:hover {
+    border-color: var(--usage-border-hover);
+  }
+
+  .multi-select-trigger:focus {
+    outline: none;
+    border-color: var(--usage-accent-blue);
+    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
+  }
+
+  .dropdown-chevron {
+    color: var(--usage-text-muted);
+    transition: transform var(--usage-transition-fast);
+  }
+
+  .multi-select.open .dropdown-chevron {
+    transform: rotate(180deg);
+  }
+
+  .multi-select-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 100;
+    min-width: 200px;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md, 6px);
+    box-shadow: var(--usage-shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition:
+      opacity var(--usage-transition-fast),
+      transform var(--usage-transition-fast),
+      visibility var(--usage-transition-fast);
+  }
+
+  .multi-select.open .multi-select-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  .dropdown-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--usage-border-subtle);
+  }
+
+  .select-action {
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    color: var(--usage-accent-blue);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .select-action:hover {
+    text-decoration: underline;
+  }
+
+  .dropdown-options {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+  }
+
+  .dropdown-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    transition: background var(--usage-transition-fast);
+  }
+
+  .dropdown-option:hover {
+    background: var(--usage-bg-hover);
+  }
+
+  .dropdown-option input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .checkbox-custom {
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid var(--usage-border-default);
+    border-radius: 3px;
+    background: var(--usage-bg-primary);
+    transition: all var(--usage-transition-fast);
+    position: relative;
+  }
+
+  .dropdown-option input:checked + .checkbox-custom {
+    background: var(--usage-accent-blue);
+    border-color: var(--usage-accent-blue);
+  }
+
+  .dropdown-option input:checked + .checkbox-custom::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    width: 5px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  .option-label {
+    font-family: var(--usage-font-sans);
+    font-size: 0.875rem;
+    color: var(--usage-text-primary);
+  }
+
+  /* Select Wrapper */
+  .select-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .filter-select {
+    appearance: none;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.875rem;
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md, 6px);
+    cursor: pointer;
+    transition: border-color var(--usage-transition-fast);
+  }
+
+  .filter-select:hover {
+    border-color: var(--usage-border-hover);
+  }
+
+  .filter-select:focus {
+    outline: none;
+    border-color: var(--usage-accent-blue);
+    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
+  }
+
+  .select-chevron {
+    position: absolute;
+    right: 0.75rem;
+    color: var(--usage-text-muted);
+    pointer-events: none;
+  }
+
+  /* Status Buttons */
+  .status-buttons {
+    display: flex;
+    gap: 0.25rem;
+    background: var(--usage-bg-tertiary);
+    padding: 0.25rem;
+    border-radius: var(--usage-radius-md, 6px);
+  }
+
+  .status-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.8125rem;
+    color: var(--usage-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--usage-radius-sm, 4px);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .status-btn:hover {
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-hover);
+  }
+
+  .status-btn.active {
+    color: var(--usage-text-primary);
+    background: var(--usage-bg-primary);
+    box-shadow: var(--usage-shadow-sm);
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .status-dot.ok {
+    background: var(--usage-status-ok);
+  }
+
+  .status-dot.warning {
+    background: var(--usage-status-warning);
+  }
+
+  .status-dot.critical {
+    background: var(--usage-status-critical);
+  }
+
+  /* Sort Controls */
+  .sort-controls {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .sort-direction {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md, 6px);
+    color: var(--usage-text-secondary);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .sort-direction:hover {
+    border-color: var(--usage-border-hover);
+    color: var(--usage-text-primary);
+  }
+
+  .sort-direction:focus {
+    outline: none;
+    border-color: var(--usage-accent-blue);
+    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
+  }
+
+  /* Clear All Button */
+  .clear-group {
+    margin-left: auto;
+  }
+
+  .clear-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.875rem;
+    color: var(--usage-text-secondary);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--usage-radius-md, 6px);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .clear-all-btn:hover {
+    color: var(--usage-accent-red);
+    background: var(--usage-status-critical-bg);
+    border-color: var(--usage-accent-red);
+  }
+
+  /* Active Filters */
+  .active-filters {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-top: var(--usage-spacing-sm, 0.5rem);
+    border-top: 1px solid var(--usage-border-subtle);
+    margin-top: var(--usage-spacing-xs, 0.25rem);
+  }
+
+  .active-filters-label {
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+  }
+
+  .filter-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .filter-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    color: var(--usage-accent-blue);
+    background: rgba(9, 105, 218, 0.1);
+    border-radius: var(--usage-radius-sm, 4px);
+  }
+
+  .filter-tag button {
+    display: flex;
+    padding: 0;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--usage-transition-fast);
+  }
+
+  .filter-tag button:hover {
+    opacity: 1;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .table-filters {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .filter-group {
+      width: 100%;
+    }
+
+    .search-group {
+      max-width: none;
+    }
+
+    .clear-group {
+      margin-left: 0;
+    }
+
+    .status-buttons {
+      flex-wrap: wrap;
+    }
+  }
+</style>
+
+<script>
+  // Initialize filters
+  const filtersContainer = document.querySelector('[data-filters]') as HTMLElement;
+  if (filtersContainer) {
+    // State
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    // Elements
+    const searchInput = filtersContainer.querySelector('[data-filter-search]') as HTMLInputElement;
+    const clearSearchBtn = filtersContainer.querySelector(
+      '[data-clear-search]'
+    ) as HTMLButtonElement;
+    const multiSelect = filtersContainer.querySelector(
+      '[data-multi-select="types"]'
+    ) as HTMLElement;
+    const multiSelectTrigger = multiSelect?.querySelector('[data-trigger]') as HTMLButtonElement;
+    const multiSelectDropdown = multiSelect?.querySelector('[data-dropdown]') as HTMLElement;
+    const multiSelectValue = multiSelect?.querySelector('[data-value]') as HTMLElement;
+    const typeCheckboxes = filtersContainer.querySelectorAll(
+      '[data-type-checkbox]'
+    ) as NodeListOf<HTMLInputElement>;
+    const selectAllBtn = multiSelect?.querySelector('[data-select-all]') as HTMLButtonElement;
+    const clearAllTypesBtn = multiSelect?.querySelector('[data-clear-all]') as HTMLButtonElement;
+    const projectSelect = filtersContainer.querySelector(
+      '[data-filter-project]'
+    ) as HTMLSelectElement;
+    const statusButtons = filtersContainer.querySelectorAll(
+      '[data-status]'
+    ) as NodeListOf<HTMLButtonElement>;
+    const sortSelect = filtersContainer.querySelector('[data-filter-sort]') as HTMLSelectElement;
+    const sortDirBtn = filtersContainer.querySelector('[data-sort-direction]') as HTMLButtonElement;
+    const clearAllFiltersBtn = filtersContainer.querySelector(
+      '[data-clear-all-filters]'
+    ) as HTMLButtonElement;
+    const activeFiltersContainer = filtersContainer.querySelector(
+      '[data-active-filters]'
+    ) as HTMLElement;
+    const filterTagsContainer = filtersContainer.querySelector('[data-filter-tags]') as HTMLElement;
+
+    // Get current filter state
+    function getFilters() {
+      const selectedTypes: string[] = [];
+      typeCheckboxes.forEach((cb) => {
+        if (cb.checked) selectedTypes.push(cb.value);
+      });
+
+      const activeStatus = filtersContainer.querySelector(
+        '.status-btn.active'
+      ) as HTMLButtonElement;
+
+      return {
+        search: searchInput?.value || '',
+        types: selectedTypes,
+        project: projectSelect?.value || '',
+        status: activeStatus?.dataset.status || '',
+        sort: sortSelect?.value || 'cost',
+        sortDir: (sortDirBtn?.dataset.sortDirection || 'desc') as 'asc' | 'desc',
+      };
+    }
+
+    // Update URL params
+    function updateURL(filters: ReturnType<typeof getFilters>) {
+      const url = new URL(window.location.href);
+
+      if (filters.search) url.searchParams.set('search', filters.search);
+      else url.searchParams.delete('search');
+
+      if (filters.types.length > 0) url.searchParams.set('types', filters.types.join(','));
+      else url.searchParams.delete('types');
+
+      if (filters.project) url.searchParams.set('project', filters.project);
+      else url.searchParams.delete('project');
+
+      if (filters.status) url.searchParams.set('status', filters.status);
+      else url.searchParams.delete('status');
+
+      if (filters.sort !== 'cost') url.searchParams.set('sort', filters.sort);
+      else url.searchParams.delete('sort');
+
+      if (filters.sortDir !== 'desc') url.searchParams.set('sortDir', filters.sortDir);
+      else url.searchParams.delete('sortDir');
+
+      window.history.replaceState({}, '', url.toString());
+    }
+
+    // Dispatch filter change event
+    function emitFilterChange() {
+      const filters = getFilters();
+      updateURL(filters);
+      updateActiveFilters(filters);
+
+      window.dispatchEvent(
+        new CustomEvent('usage:filters-changed', {
+          detail: filters,
+        })
+      );
+    }
+
+    // Update active filters display
+    function updateActiveFilters(filters: ReturnType<typeof getFilters>) {
+      const tags: string[] = [];
+
+      if (filters.search) tags.push(`Search: "${filters.search}"`);
+      if (filters.types.length > 0 && filters.types.length < typeCheckboxes.length) {
+        tags.push(`Types: ${filters.types.join(', ')}`);
+      }
+      if (filters.project) tags.push(`Project: ${filters.project}`);
+      if (filters.status) tags.push(`Status: ${filters.status}`);
+
+      if (tags.length > 0) {
+        activeFiltersContainer.style.display = '';
+        filterTagsContainer.textContent = ''; // Clear existing
+
+        tags.forEach((tag) => {
+          const tagEl = document.createElement('span');
+          tagEl.className = 'filter-tag';
+
+          const textSpan = document.createElement('span');
+          textSpan.textContent = tag;
+          tagEl.appendChild(textSpan);
+
+          const removeBtn = document.createElement('button');
+          removeBtn.type = 'button';
+          removeBtn.setAttribute('aria-label', `Remove ${tag}`);
+
+          const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          svg.setAttribute('width', '10');
+          svg.setAttribute('height', '10');
+          svg.setAttribute('viewBox', '0 0 10 10');
+          svg.setAttribute('fill', 'none');
+
+          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+          path.setAttribute('d', 'M7.5 2.5L2.5 7.5M2.5 2.5l5 5');
+          path.setAttribute('stroke', 'currentColor');
+          path.setAttribute('stroke-width', '1.5');
+          path.setAttribute('stroke-linecap', 'round');
+
+          svg.appendChild(path);
+          removeBtn.appendChild(svg);
+          tagEl.appendChild(removeBtn);
+
+          filterTagsContainer.appendChild(tagEl);
+        });
+      } else {
+        activeFiltersContainer.style.display = 'none';
+      }
+    }
+
+    // Update multi-select display text
+    function updateMultiSelectValue() {
+      const selected: string[] = [];
+      typeCheckboxes.forEach((cb) => {
+        if (cb.checked) selected.push(cb.value);
+      });
+
+      if (selected.length === 0) {
+        multiSelectValue.textContent = 'All Types';
+      } else if (selected.length === 1) {
+        multiSelectValue.textContent = selected[0];
+      } else if (selected.length === typeCheckboxes.length) {
+        multiSelectValue.textContent = 'All Types';
+      } else {
+        multiSelectValue.textContent = `${selected.length} selected`;
+      }
+    }
+
+    // Search input with debounce
+    searchInput?.addEventListener('input', () => {
+      clearTimeout(debounceTimer);
+      if (clearSearchBtn) {
+        clearSearchBtn.style.display = searchInput.value ? '' : 'none';
+      }
+      debounceTimer = setTimeout(emitFilterChange, 300);
+    });
+
+    clearSearchBtn?.addEventListener('click', () => {
+      searchInput.value = '';
+      clearSearchBtn.style.display = 'none';
+      emitFilterChange();
+    });
+
+    // Multi-select dropdown toggle
+    multiSelectTrigger?.addEventListener('click', () => {
+      multiSelect.classList.toggle('open');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+      if (multiSelect && !multiSelect.contains(e.target as Node)) {
+        multiSelect.classList.remove('open');
+      }
+    });
+
+    // Type checkboxes
+    typeCheckboxes.forEach((cb) => {
+      cb.addEventListener('change', () => {
+        updateMultiSelectValue();
+        emitFilterChange();
+      });
+    });
+
+    selectAllBtn?.addEventListener('click', () => {
+      typeCheckboxes.forEach((cb) => (cb.checked = true));
+      updateMultiSelectValue();
+      emitFilterChange();
+    });
+
+    clearAllTypesBtn?.addEventListener('click', () => {
+      typeCheckboxes.forEach((cb) => (cb.checked = false));
+      updateMultiSelectValue();
+      emitFilterChange();
+    });
+
+    // Project select
+    projectSelect?.addEventListener('change', emitFilterChange);
+
+    // Status buttons
+    statusButtons.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        statusButtons.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        emitFilterChange();
+      });
+    });
+
+    // Sort select
+    sortSelect?.addEventListener('change', emitFilterChange);
+
+    // Sort direction toggle - using visibility toggle instead of innerHTML
+    sortDirBtn?.addEventListener('click', () => {
+      const currentDir = sortDirBtn.dataset.sortDirection;
+      const newDir = currentDir === 'asc' ? 'desc' : 'asc';
+      sortDirBtn.dataset.sortDirection = newDir;
+      sortDirBtn.setAttribute(
+        'aria-label',
+        `Sort ${newDir === 'asc' ? 'ascending' : 'descending'}`
+      );
+
+      // Toggle visibility of arrow SVGs
+      const ascArrow = sortDirBtn.querySelector('.sort-asc') as HTMLElement;
+      const descArrow = sortDirBtn.querySelector('.sort-desc') as HTMLElement;
+
+      if (ascArrow && descArrow) {
+        ascArrow.style.display = newDir === 'asc' ? '' : 'none';
+        descArrow.style.display = newDir === 'desc' ? '' : 'none';
+      }
+
+      emitFilterChange();
+    });
+
+    // Clear all filters
+    clearAllFiltersBtn?.addEventListener('click', () => {
+      searchInput.value = '';
+      if (clearSearchBtn) clearSearchBtn.style.display = 'none';
+      typeCheckboxes.forEach((cb) => (cb.checked = false));
+      updateMultiSelectValue();
+      projectSelect.value = '';
+      statusButtons.forEach((b) => b.classList.remove('active'));
+      statusButtons[0]?.classList.add('active');
+      sortSelect.value = 'cost';
+      sortDirBtn.dataset.sortDirection = 'desc';
+
+      // Reset arrow visibility
+      const ascArrow = sortDirBtn.querySelector('.sort-asc') as HTMLElement;
+      const descArrow = sortDirBtn.querySelector('.sort-desc') as HTMLElement;
+      if (ascArrow && descArrow) {
+        ascArrow.style.display = 'none';
+        descArrow.style.display = '';
+      }
+
+      emitFilterChange();
+    });
+
+    // Listen for external filter type events (from StatsHero pills)
+    window.addEventListener('usage:filter-type', ((e: CustomEvent) => {
+      const type = e.detail?.type;
+      if (type) {
+        // Clear all checkboxes first
+        typeCheckboxes.forEach((cb) => (cb.checked = false));
+        // Check only the selected type
+        const targetCheckbox = Array.from(typeCheckboxes).find((cb) => cb.value === type);
+        if (targetCheckbox) {
+          targetCheckbox.checked = true;
+        }
+        updateMultiSelectValue();
+        emitFilterChange();
+      }
+    }) as EventListener);
+
+    // Initial state
+    updateActiveFilters(getFilters());
+  }
+</script>