From d207c49ffd8149fea2bab7a4ae61d700bac211a6 Mon Sep 17 00:00:00 2001
From: dex-bot <dex@cubecraftcreations.com>
Date: Mon, 27 Apr 2026 15:08:31 -0400
Subject: [PATCH] CUB-34: add filament filter bar with material type, color,
 and low stock filters

---
 .../filament-filter.component.html            |  76 +++++++++
 .../filament-filter.component.scss            | 134 +++++++++++++++
 .../filament-filter.component.ts              | 158 ++++++++++++++++++
 .../filament-table.component.html             |  20 ++-
 .../filament-table.component.ts               |  60 +++++++
 5 files changed, 445 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/components/filament-filter/filament-filter.component.html
 create mode 100644 frontend/src/app/components/filament-filter/filament-filter.component.scss
 create mode 100644 frontend/src/app/components/filament-filter/filament-filter.component.ts

diff --git a/frontend/src/app/components/filament-filter/filament-filter.component.html b/frontend/src/app/components/filament-filter/filament-filter.component.html
new file mode 100644
index 0000000..fd93087
--- /dev/null
+++ b/frontend/src/app/components/filament-filter/filament-filter.component.html
@@ -0,0 +1,76 @@
+<!-- Filament Filter Bar — material type, color search, low stock, active-only -->
+<div class="filament-filter-bar" role="search" aria-label="Filter filament inventory">
+
+  <!-- Material Type Multi-Select -->
+  <mat-form-field appearance="outline" class="filter-field material-filter">
+    <mat-label>Material</mat-label>
+    <mat-select multiple
+                [value]="selectedMaterials()"
+                (selectionChange)="onMaterialChange($event.value)"
+                aria-label="Filter by material type">
+      @for (material of materialOptions(); track material) {
+        <mat-option [value]="material">{{ material }}</mat-option>
+      }
+    </mat-select>
+    @if (selectedMaterials().length > 0) {
+      <mat-chip-set class="selected-chips" matSuffix>
+        @for (mat of selectedMaterials(); track mat) {
+          <mat-chip (removed)="removeMaterial(mat)"
+                    class="filter-chip">
+            <span>{{ mat }}</span>
+            <mat-icon matChipRemove>cancel</mat-icon>
+          </mat-chip>
+        }
+      </mat-chip-set>
+    }
+  </mat-form-field>
+
+  <!-- Color Search -->
+  <mat-form-field appearance="outline" class="filter-field color-filter">
+    <mat-label>Color</mat-label>
+    <input matInput
+           type="text"
+           [value]="colorSearch()"
+           (input)="onColorSearchChange($any($event.target).value)"
+           placeholder="Search color..."
+           aria-label="Filter by color name" />
+    @if (colorSearch().trim()) {
+      <mat-icon matSuffix class="filter-active-icon">filter_list</mat-icon>
+    }
+  </mat-form-field>
+
+  <!-- Low Stock Toggle -->
+  <mat-checkbox [checked]="lowStockOnly()"
+                (change)="onLowStockToggle($event.checked)"
+                class="filter-checkbox"
+                aria-label="Show low stock only"
+                matTooltip="Show only spools at 25% or less remaining"
+                matTooltipPosition="below">
+    <mat-icon class="checkbox-icon" [class.active]="lowStockOnly()">warning</mat-icon>
+    Low Stock
+  </mat-checkbox>
+
+  <!-- Active Only Toggle -->
+  <mat-checkbox [checked]="activeOnly()"
+                (change)="onActiveOnlyToggle($event.checked)"
+                class="filter-checkbox"
+                aria-label="Show active spools only"
+                matTooltip="Show only spools currently in use"
+                matTooltipPosition="below">
+    <mat-icon class="checkbox-icon" [class.active]="activeOnly()">check_circle</mat-icon>
+    Active Only
+  </mat-checkbox>
+
+  <!-- Clear All Filters -->
+  @if (hasActiveFilters()) {
+    <button mat-button
+            class="clear-filters-btn"
+            (click)="clearAll()"
+            aria-label="Clear all filters"
+            matTooltip="Remove all filters"
+            matTooltipPosition="below">
+      <mat-icon>filter_alt_off</mat-icon>
+      Clear
+    </button>
+  }
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/filament-filter/filament-filter.component.scss b/frontend/src/app/components/filament-filter/filament-filter.component.scss
new file mode 100644
index 0000000..8ebbaaf
--- /dev/null
+++ b/frontend/src/app/components/filament-filter/filament-filter.component.scss
@@ -0,0 +1,134 @@
+/**
+ * Filament Filter Bar Styles
+ * Responsive filter layout for kiosk and mobile
+ */
+
+$spacing-unit: 8px;
+
+.filament-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit * 2;
+  flex-wrap: wrap;
+  padding: $spacing-unit * 2 0;
+  margin-bottom: $spacing-unit * 2;
+}
+
+// Form field sizing
+.filter-field {
+  flex: 0 1 auto;
+  min-width: 160px;
+
+  &.material-filter {
+    min-width: 200px;
+  }
+
+  &.color-filter {
+    min-width: 180px;
+  }
+
+  // Reduce vertical spacing inside filter fields
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none; // No hint/error text needed for filters
+  }
+}
+
+// Selected material chips
+.selected-chips {
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.filter-chip {
+  font-size: 12px !important;
+  min-height: 24px !important;
+
+  mat-icon {
+    font-size: 14px !important;
+    width: 14px !important;
+    height: 14px !important;
+  }
+}
+
+// Active filter icon
+.filter-active-icon {
+  color: var(--mat-sys-primary);
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+}
+
+// Checkbox styling
+.filter-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  user-select: none;
+  touch-action: manipulation; // Prevent zoom on double-tap
+
+  .checkbox-icon {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+    color: var(--mat-sys-on-surface-variant);
+    transition: color 0.2s ease;
+
+    &.active {
+      color: var(--mat-sys-primary);
+    }
+  }
+}
+
+// Clear filters button
+.clear-filters-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+
+  mat-icon {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+  }
+}
+
+// Responsive: stack filters vertically on small screens
+@media (max-width: 768px) {
+  .filament-filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-unit;
+  }
+
+  .filter-field {
+    width: 100%;
+    min-width: unset;
+
+    &.material-filter,
+    &.color-filter {
+      min-width: unset;
+    }
+  }
+
+  .filter-checkbox {
+    padding: $spacing-unit 0;
+  }
+
+  .clear-filters-btn {
+    align-self: flex-start;
+  }
+}
+
+// Extra-small screens (phone portrait)
+@media (max-width: 480px) {
+  .filament-filter-bar {
+    padding: $spacing-unit 0;
+    margin-bottom: $spacing-unit;
+  }
+
+  .filter-checkbox {
+    font-size: 13px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/filament-filter/filament-filter.component.ts b/frontend/src/app/components/filament-filter/filament-filter.component.ts
new file mode 100644
index 0000000..7559afc
--- /dev/null
+++ b/frontend/src/app/components/filament-filter/filament-filter.component.ts
@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  computed,
+  signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {
+  Filament,
+  StockLevel,
+  classifyStockLevel,
+} from '../../models/filament.model';
+
+/** Filter state emitted by the filament filter component */
+export interface FilamentFilterState {
+  /** Selected material base names — empty means all */
+  materialBaseNames: string[];
+
+  /** Color search text — empty string means all */
+  colorSearch: string;
+
+  /** Whether to show only low/critical stock */
+  lowStockOnly: boolean;
+
+  /** Whether to show only active spools */
+  activeOnly: boolean;
+}
+
+/**
+ * FilamentFilterComponent — Filter bar for the filament inventory list.
+ *
+ * Provides:
+ * - Material type multi-select filter
+ * - Color name text search
+ * - Low stock toggle (shows only critical/low spools)
+ * - Active-only toggle
+ * - Clear all filters action
+ */
+@Component({
+  selector: 'app-filament-filter',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatChipsModule,
+    MatButtonModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './filament-filter.component.html',
+  styleUrl: './filament-filter.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilamentFilterComponent {
+  /** Filament data input — used to derive material options */
+  @Input() set filaments(value: Filament[]) {
+    this._filaments.set(value);
+    const materials = [...new Set(value.map((f) => f.materialBaseName))].sort();
+    this.materialOptions.set(materials);
+  }
+  get filaments(): Filament[] {
+    return this._filaments();
+  }
+  private readonly _filaments = signal<Filament[]>([]);
+
+  /** Available material base names derived from filament data */
+  readonly materialOptions = signal<string[]>([]);
+
+  /** Selected material base names */
+  readonly selectedMaterials = signal<string[]>([]);
+
+  /** Color search text */
+  readonly colorSearch = signal('');
+
+  /** Low stock only toggle */
+  readonly lowStockOnly = signal(false);
+
+  /** Active only toggle */
+  readonly activeOnly = signal(false);
+
+  /** Computed: whether any filters are active */
+  readonly hasActiveFilters = computed(
+    () =>
+      this.selectedMaterials().length > 0 ||
+      this.colorSearch().trim().length > 0 ||
+      this.lowStockOnly() ||
+      this.activeOnly()
+  );
+
+  /** Emits the current filter state whenever filters change */
+  @Output() readonly filterChange = new EventEmitter<FilamentFilterState>();
+
+  /** Handle material selection change */
+  onMaterialChange(selected: string[]): void {
+    this.selectedMaterials.set(selected);
+    this.emitFilterState();
+  }
+
+  /** Handle color search input */
+  onColorSearchChange(value: string): void {
+    this.colorSearch.set(value);
+    this.emitFilterState();
+  }
+
+  /** Handle low stock toggle */
+  onLowStockToggle(checked: boolean): void {
+    this.lowStockOnly.set(checked);
+    this.emitFilterState();
+  }
+
+  /** Handle active-only toggle */
+  onActiveOnlyToggle(checked: boolean): void {
+    this.activeOnly.set(checked);
+    this.emitFilterState();
+  }
+
+  /** Remove a single material chip */
+  removeMaterial(material: string): void {
+    const updated = this.selectedMaterials().filter((m) => m !== material);
+    this.selectedMaterials.set(updated);
+    this.emitFilterState();
+  }
+
+  /** Clear all filters */
+  clearAll(): void {
+    this.selectedMaterials.set([]);
+    this.colorSearch.set('');
+    this.lowStockOnly.set(false);
+    this.activeOnly.set(false);
+    this.emitFilterState();
+  }
+
+  /** Emit the current filter state */
+  private emitFilterState(): void {
+    this.filterChange.emit({
+      materialBaseNames: this.selectedMaterials(),
+      colorSearch: this.colorSearch().trim().toLowerCase(),
+      lowStockOnly: this.lowStockOnly(),
+      activeOnly: this.activeOnly(),
+    });
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/filament-table/filament-table.component.html b/frontend/src/app/components/filament-table/filament-table.component.html
index 75d798f..5beccd4 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.html
+++ b/frontend/src/app/components/filament-table/filament-table.component.html
@@ -1,6 +1,12 @@
-<!-- Filament Inventory Table — with low stock indicators -->
+<!-- Filament Inventory Table — with filters and low stock indicators -->
 <div class="filament-table-container" role="region" aria-label="Filament inventory">
 
+  <!-- Filter Bar -->
+  <app-filament-filter
+    [filaments]="allFilaments()"
+    (filterChange)="onFilterChange($event)"
+    aria-label="Filter filament inventory" />
+
   <!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
   @if (criticalCount() > 0) {
     <div class="alert-banner critical" role="alert">
@@ -16,7 +22,7 @@
 
   <!-- Filament Table -->
   <table mat-table
-         [dataSource]="sortedFilaments()"
+         [dataSource]="filteredFilaments()"
          matSort
          (matSortChange)="sortData($event)"
          class="filament-table"
@@ -113,7 +119,15 @@
     </tr>
   </table>
 
-  <!-- Empty state -->
+  <!-- Filtered empty state -->
+  @if (filteredFilaments().length === 0 && filaments().length > 0) {
+    <div class="empty-state" role="status">
+      <mat-icon aria-hidden="true">filter_alt_off</mat-icon>
+      <p>No filaments match the current filters</p>
+    </div>
+  }
+
+  <!-- No data empty state -->
   @if (filaments().length === 0) {
     <div class="empty-state" role="status">
       <mat-icon aria-hidden="true">inventory_2</mat-icon>
diff --git a/frontend/src/app/components/filament-table/filament-table.component.ts b/frontend/src/app/components/filament-table/filament-table.component.ts
index 47025ac..f20b831 100644
--- a/frontend/src/app/components/filament-table/filament-table.component.ts
+++ b/frontend/src/app/components/filament-table/filament-table.component.ts
@@ -12,6 +12,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSortModule, Sort } from '@angular/material/sort';
+import { FilamentFilterComponent, FilamentFilterState } from '../filament-filter/filament-filter.component';
 import {
   Filament,
   StockLevel,
@@ -40,6 +41,7 @@ export type FilamentColumn =
     MatProgressBarModule,
     MatTooltipModule,
     MatSortModule,
+    FilamentFilterComponent,
   ],
   templateUrl: './filament-table.component.html',
   styleUrl: './filament-table.component.scss',
@@ -70,9 +72,24 @@ export class FilamentTableComponent {
   /** Default columns for template binding */
   readonly columns = this._displayedColumns;
 
+  /** Current filter state */
+  readonly filterState = signal<FilamentFilterState>({
+    materialBaseNames: [],
+    colorSearch: '',
+    lowStockOnly: false,
+    activeOnly: false,
+  });
+
   /** Sorted filament data */
   readonly sortedFilaments = signal<Filament[]>([]);
 
+  /** Computed: filtered + sorted filament data for display */
+  readonly filteredFilaments = computed(() => {
+    const data = this.sortedFilaments();
+    const filters = this.filterState();
+    return data.filter((f) => this.matchesFilter(f, filters));
+  });
+
   /** Computed: count of low/critical spools */
   readonly lowStockCount = computed(() =>
     this.filaments().filter(
@@ -211,6 +228,9 @@ export class FilamentTableComponent {
     this.sortedFilaments.set([...data]);
   }
 
+  /** All filament data — for the filter component to derive material options */
+  readonly allFilaments = this.filaments;
+
   /** Handle sort changes from MatSort */
   sortData(sort: Sort): void {
     const data = [...this.filaments()];
@@ -252,6 +272,46 @@ export class FilamentTableComponent {
     this.sortedFilaments.set(sorted);
   }
 
+  /** Handle filter changes from FilamentFilterComponent */
+  onFilterChange(state: FilamentFilterState): void {
+    this.filterState.set(state);
+  }
+
+  /** Check if a filament matches the current filter state */
+  private matchesFilter(filament: Filament, filters: FilamentFilterState): boolean {
+    // Material filter — empty means all
+    if (
+      filters.materialBaseNames.length > 0 &&
+      !filters.materialBaseNames.includes(filament.materialBaseName)
+    ) {
+      return false;
+    }
+
+    // Color search — empty means all
+    if (
+      filters.colorSearch &&
+      !filament.colorName.toLowerCase().includes(filters.colorSearch) &&
+      !filament.colorHex.toLowerCase().includes(filters.colorSearch)
+    ) {
+      return false;
+    }
+
+    // Low stock filter — show only critical/low
+    if (filters.lowStockOnly) {
+      const level = classifyStockLevel(filament);
+      if (level !== 'critical' && level !== 'low') {
+        return false;
+      }
+    }
+
+    // Active only filter
+    if (filters.activeOnly && !filament.isActive) {
+      return false;
+    }
+
+    return true;
+  }
+
   /** Template helper: get remaining percent */
   getRemainingPercent = getRemainingPercent;