frontend/package-lock.json

@@ -8,7 +8,6 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/animations": "^21.2.10",
         "@angular/cdk": "^21.2.8",
         "@angular/common": "^21.2.0",
         "@angular/compiler": "^21.2.0",
@@ -327,21 +326,6 @@
         "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular/animations": {
-      "version": "21.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.2.10.tgz",
-      "integrity": "sha512-sIzAcxwtRCJ/fu0tK4mo1ooiEaDxJ+Nl6s9nK1D1NP1em12VX03Jx8CMixp/kVtgh4mZnm1x6psBB0FUz3U3Ug==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "21.2.10"
-      }
-    },
     "node_modules/@angular/build": {
       "version": "21.2.8",
       "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.2.8.tgz",

frontend/package.json

@@ -11,7 +11,6 @@
   "private": true,
   "packageManager": "npm@11.11.0",
   "dependencies": {
-    "@angular/animations": "^21.2.10",
     "@angular/cdk": "^21.2.8",
     "@angular/common": "^21.2.0",
     "@angular/compiler": "^21.2.0",

frontend/src/app/app.config.ts

@@ -1,15 +1,11 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
+    provideRouter(routes)
-    provideHttpClient(withFetch()),
-    provideAnimationsAsync(),
   ]
 };

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.html

@@ -1,78 +0,0 @@
-<!-- Delete Filament Confirmation Dialog -->
-<h2 mat-dialog-title>
-  <mat-icon aria-hidden="true">warning</mat-icon>
-  Delete Filament Spool?
-</h2>
-
-<mat-dialog-content>
-  <p class="dialog-description">
-    You are about to permanently remove this filament spool from inventory.
-  </p>
-
-  <!-- Spool details card -->
-  <div class="spool-details" role="list" aria-label="Spool details">
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Material</span>
-      <span class="detail-value">{{ filament.materialBaseName }}{{ filament.materialFinishName ? ' — ' + filament.materialFinishName : '' }}{{ filament.materialModifierName ? ' (' + filament.materialModifierName + ')' : '' }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Brand</span>
-      <span class="detail-value">{{ filament.brand }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Color</span>
-      <span class="detail-value color-value">
-        <span class="color-swatch-inline"
-              [style.background-color]="filament.colorHex"
-              [attr.aria-label]="filament.colorName">
-        </span>
-        {{ filament.colorName }}
-      </span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Serial</span>
-      <span class="detail-value serial-value">{{ filament.spoolSerial }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Remaining</span>
-      <span class="detail-value">{{ formatWeight(filament.weightRemainingGrams) }} / {{ formatWeight(filament.weightTotalGrams) }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Status</span>
-      <span class="detail-value">
-        <span class="status-badge"
-              [class.active]="filament.isActive"
-              [class.inactive]="!filament.isActive">
-          {{ filament.isActive ? 'Active' : 'Inactive' }}
-        </span>
-      </span>
-    </div>
-  </div>
-
-  <p class="dialog-warning">
-    <mat-icon aria-hidden="true">info</mat-icon>
-    This action cannot be undone.
-  </p>
-</mat-dialog-content>
-
-<mat-dialog-actions align="end">
-  <button mat-button
-          type="button"
-          (click)="onCancel()"
-          class="cancel-button">
-    Cancel
-  </button>
-  <button mat-flat-button
-          type="button"
-          color="warn"
-          (click)="onConfirm()"
-          class="confirm-button">
-    <mat-icon aria-hidden="true">delete</mat-icon>
-    Delete Spool
-  </button>
-</mat-dialog-actions>

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.scss

@@ -1,150 +0,0 @@
-/**
- * Delete Filament Dialog Styles
- * Touch-optimized confirmation dialog for spool removal
- */
-
-$spacing-unit: 8px;
-$color-critical: #ef4444;
-$color-inactive: #94a3b8;
-$color-active: #22c55e;
-
-// Dialog title
-h2[mat-dialog-title] {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  color: $color-critical;
-
-  mat-icon {
-    font-size: 24px !important;
-    width: 24px !important;
-    height: 24px !important;
-  }
-}
-
-// Description text
-.dialog-description {
-  margin: 0 0 $spacing-unit * 2;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--mat-sys-on-surface);
-}
-
-// Spool details card
-.spool-details {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-unit;
-  padding: $spacing-unit * 1.5;
-  background-color: var(--mat-sys-surface-container);
-  border-radius: 8px;
-  margin-bottom: $spacing-unit * 2;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $spacing-unit * 0.5 0;
-  font-size: 14px;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--mat-sys-outline-variant);
-    padding-bottom: $spacing-unit;
-  }
-}
-
-.detail-label {
-  font-weight: 500;
-  color: var(--mat-sys-on-surface-variant);
-  flex-shrink: 0;
-}
-
-.detail-value {
-  font-weight: 400;
-  color: var(--mat-sys-on-surface);
-  text-align: right;
-}
-
-// Color swatch inline
-.color-swatch-inline {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1.5px solid rgba(0, 0, 0, 0.12);
-  vertical-align: middle;
-  margin-right: 4px;
-}
-
-.color-value {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-// Serial value — monospace
-.serial-value {
-  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
-  font-size: 13px;
-  letter-spacing: 0.02em;
-}
-
-// Status badge — matches filament table styling
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-
-  &.active {
-    background-color: rgba($color-active, 0.12);
-    color: $color-active;
-  }
-
-  &.inactive {
-    background-color: rgba($color-inactive, 0.12);
-    color: $color-inactive;
-  }
-}
-
-// Warning text
-.dialog-warning {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  margin: 0;
-  font-size: 13px;
-  color: $color-critical;
-
-  mat-icon {
-    font-size: 18px !important;
-    width: 18px !important;
-    height: 18px !important;
-  }
-}
-
-// Dialog action buttons
-mat-dialog-actions {
-  padding-top: $spacing-unit * 2;
-
-  .cancel-button {
-    min-width: 80px;
-  }
-
-  .confirm-button {
-    min-width: 120px;
-
-    mat-icon {
-      font-size: 18px !important;
-      width: 18px !important;
-      height: 18px !important;
-      margin-right: 4px;
-    }
-  }
-}

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.ts

@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogModule,
-} from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-
-import { Filament } from '../../models/filament.model';
-
-/**
- * Data passed into the delete confirmation dialog.
- */
-export interface DeleteFilamentDialogData {
-  filament: Filament;
-}
-
-/**
- * Delete confirmation dialog for filament spool removal.
- *
- * Displays spool details (material, brand, color, serial, remaining weight)
- * and requires the user to confirm before deletion proceeds.
- * Cancel dismisses the dialog with no action.
- */
-@Component({
-  selector: 'app-delete-filament-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-  ],
-  templateUrl: './delete-filament-dialog.component.html',
-  styleUrl: './delete-filament-dialog.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DeleteFilamentDialogComponent {
-  private readonly dialogRef = inject(
-    MatDialogRef<DeleteFilamentDialogComponent, boolean>
-  );
-  readonly data: DeleteFilamentDialogData = inject(MAT_DIALOG_DATA);
-
-  /** The filament spool being considered for deletion */
-  readonly filament = this.data.filament;
-
-  /** Format weight for display in dialog */
-  formatWeight(grams: number): string {
-    if (grams >= 1000) {
-      return `${(grams / 1000).toFixed(1)}kg`;
-    }
-    return `${Math.round(grams)}g`;
-  }
-
-  /** Cancel — close dialog with false (no deletion) */
-  onCancel(): void {
-    this.dialogRef.close(false);
-  }
-
-  /** Confirm — close dialog with true (proceed with deletion) */
-  onConfirm(): void {
-    this.dialogRef.close(true);
-  }
-}

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>

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;
+  }
+}

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(),
+    });
+  }
+}

frontend/src/app/components/filament-table/filament-table.component.html

@@ -1,6 +1,12 @@
-<!-- Filament Inventory Table — with low stock indicators and delete actions -->
+<!-- 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"
@@ -106,36 +112,22 @@
       </td>
     </ng-container>
 
-    <!-- Actions Column — delete button -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let filament">
-        <button mat-icon-button
-                type="button"
-                color="warn"
-                [attr.aria-label]="'Delete ' + filament.materialBaseName + ' — ' + filament.colorName"
-                matTooltip="Delete spool"
-                matTooltipPosition="above"
-                [disabled]="deleting() === filament.id"
-                (click)="onDeleteClick(filament)">
-          @if (deleting() === filament.id) {
-            <mat-icon aria-hidden="true">hourglass_empty</mat-icon>
-          } @else {
-            <mat-icon aria-hidden="true">delete</mat-icon>
-          }
-        </button>
-      </td>
-    </ng-container>
-
     <tr mat-header-row *matHeaderRowDef="columns()"></tr>
     <tr mat-row *matRowDef="let row; columns: columns();"
         [class.row-critical]="classifyStockLevel(row) === 'critical'"
-        [class.row-low]="classifyStockLevel(row) === 'low'"
+        [class.row-low]="classifyStockLevel(row) === 'low'">
-        [class.row-deleting]="deleting() === row.id">
     </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>

frontend/src/app/components/filament-table/filament-table.component.scss

@@ -235,20 +235,6 @@ mat-chip {
   }
 }
 
-// Actions column
-.actions-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Row being deleted — subtle fade
-:host ::ng-deep .row-deleting {
-  opacity: 0.5;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
 // Empty state
 .empty-state {
   display: flex;

frontend/src/app/components/filament-table/filament-table.component.ts

@@ -3,7 +3,6 @@ import {
   Component,
   Input,
   computed,
-  inject,
   signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -13,21 +12,13 @@ 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 { MatButtonModule } from '@angular/material/button';
+import { FilamentFilterComponent, FilamentFilterState } from '../filament-filter/filament-filter.component';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-
 import {
   Filament,
   StockLevel,
   getRemainingPercent,
   classifyStockLevel,
 } from '../../models/filament.model';
-import { FilamentService } from '../../services/filament.service';
-import {
-  DeleteFilamentDialogComponent,
-  DeleteFilamentDialogData,
-} from '../delete-filament-dialog/delete-filament-dialog.component';
 
 /** Display column definitions for the filament table */
 export type FilamentColumn =
@@ -37,8 +28,7 @@ export type FilamentColumn =
   | 'serial'
   | 'remaining'
   | 'stockLevel'
-  | 'status'
+  | 'status';
-  | 'actions';
 
 @Component({
   selector: 'app-filament-table',
@@ -51,26 +41,17 @@ export type FilamentColumn =
     MatProgressBarModule,
     MatTooltipModule,
     MatSortModule,
-    MatButtonModule,
+    FilamentFilterComponent,
-    MatDialogModule,
-    MatSnackBarModule,
   ],
   templateUrl: './filament-table.component.html',
   styleUrl: './filament-table.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilamentTableComponent {
-  private readonly dialog = inject(MatDialog);
-  private readonly snackBar = inject(MatSnackBar);
-  private readonly filamentService = inject(FilamentService);
-
   /** Filament data input — reactive signal for live updates */
   readonly filaments = signal<Filament[]>([]);
 
-  /** Whether a delete operation is in progress */
+  /** Columns to display — defaults to all columns */
-  readonly deleting = signal<string | null>(null);
-
-  /** Columns to display — defaults to all columns including actions */
   @Input()
   set displayedColumns(cols: FilamentColumn[]) {
     this._displayedColumns.set(cols);
@@ -86,15 +67,29 @@ export class FilamentTableComponent {
     'remaining',
     'stockLevel',
     'status',
-    'actions',
   ]);
 
   /** 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(
@@ -233,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()];
@@ -274,50 +272,44 @@ export class FilamentTableComponent {
     this.sortedFilaments.set(sorted);
   }
 
-  /**
+  /** Handle filter changes from FilamentFilterComponent */
-   * Open the delete confirmation dialog for a filament spool.
+  onFilterChange(state: FilamentFilterState): void {
-   * On confirm: calls DELETE endpoint and removes the row on success.
+    this.filterState.set(state);
-   * On cancel: dialog dismissed, no action taken.
+  }
-   */
-  onDeleteClick(filament: Filament): void {
-    const dialogData: DeleteFilamentDialogData = { filament };
-    const dialogRef = this.dialog.open(DeleteFilamentDialogComponent, {
-      data: dialogData,
-      width: '480px',
-      disableClose: true,
-    });
 
-    dialogRef.afterClosed().subscribe((confirmed: boolean | undefined) => {
+  /** Check if a filament matches the current filter state */
-      if (!confirmed) {
+  private matchesFilter(filament: Filament, filters: FilamentFilterState): boolean {
-        return; // User cancelled — no action
+    // 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;
       }
+    }
 
-      // Mark as deleting for UI feedback
+    // Active only filter
-      this.deleting.set(filament.id);
+    if (filters.activeOnly && !filament.isActive) {
+      return false;
+    }
 
-      this.filamentService.deleteFilament(filament.id).subscribe({
+    return true;
-        next: () => {
-          // Remove the deleted filament from local data
-          const updated = this.filaments().filter((f) => f.id !== filament.id);
-          this.updateFilaments(updated);
-          this.deleting.set(null);
-
-          this.snackBar.open(
-            `Deleted ${filament.materialBaseName} — ${filament.colorName}`,
-            'Dismiss',
-            { duration: 4000 }
-          );
-        },
-        error: () => {
-          this.deleting.set(null);
-          this.snackBar.open(
-            `Failed to delete ${filament.materialBaseName} — ${filament.colorName}. Please try again.`,
-            'Dismiss',
-            { duration: 6000 }
-          );
-        },
-      });
-    });
   }
 
   /** Template helper: get remaining percent */

frontend/src/app/services/filament.service.ts

@@ -1,37 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-import { Filament } from '../models/filament.model';
-
-/**
- * API base URL — matches the Extrudex backend default.
- * TODO: Move to environment config when multi-environment support is added.
- */
-const API_BASE_URL = '/api';
-
-/**
- * Service for CRUD operations on filament spools.
- * Communicates with the Extrudex backend SpoolsController.
- */
-@Injectable({ providedIn: 'root' })
-export class FilamentService {
-  private readonly http = inject(HttpClient);
-
-  /**
-   * Fetch all filament spools from the backend.
-   * GET /api/spools
-   */
-  getFilaments(): Observable<Filament[]> {
-    return this.http.get<Filament[]>(`${API_BASE_URL}/spools`);
-  }
-
-  /**
-   * Soft-delete a filament spool by ID.
-   * DELETE /api/spools/{id}
-   * Returns 204 No Content on success.
-   */
-  deleteFilament(id: string): Observable<void> {
-    return this.http.delete<void>(`${API_BASE_URL}/spools/${id}`);
-  }
-}