merge(dev): Re-apply CUB-35 changes after merge conflict resolution

# Conflicts:
#	frontend/src/app/app.config.ts
#	frontend/src/app/components/filament-table/filament-table.component.html
#	frontend/src/app/components/filament-table/filament-table.component.ts
#	frontend/src/app/services/filament.service.ts

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,6 +1,6 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 import { routes } from './app.routes';
@@ -9,7 +9,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
-    provideHttpClient(withFetch()),
+    provideHttpClient(),
     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-dialog/filament-dialog.component.html

@@ -0,0 +1,225 @@
+<!-- Filament Add/Edit Dialog — Angular Material Dialog -->
+<mat-dialog-content class="filament-dialog-content">
+
+  <!-- Dialog Title -->
+  <h2 mat-dialog-title>{{ dialogTitle() }}</h2>
+
+  <!-- Loading state for lookup data -->
+  @if (lookupsLoading()) {
+    <div class="dialog-loading" role="status" aria-label="Loading material options">
+      <mat-spinner diameter="32"></mat-spinner>
+      <p>Loading material options…</p>
+    </div>
+  }
+
+  <!-- Form -->
+  @if (!lookupsLoading()) {
+    <form [formGroup]="form" class="filament-form" (ngSubmit)="save()">
+
+      <!-- Server Error Banner -->
+      @if (serverError()) {
+        <div class="error-banner" role="alert">
+          <mat-icon aria-hidden="true">error</mat-icon>
+          <span>{{ serverError() }}</span>
+        </div>
+      }
+
+      <!-- ── Material Section ──────────────────────────────── -->
+      <div class="form-section">
+        <h3 class="section-title">Material</h3>
+
+        <!-- Base Material -->
+        <mat-form-field appearance="outline" class="form-field full-width">
+          <mat-label>Base Material</mat-label>
+          <mat-select formControlName="materialBaseId" required aria-label="Base material">
+            @for (base of materialBases(); track base.id) {
+              <mat-option [value]="base.id">{{ base.name }}</mat-option>
+            }
+          </mat-select>
+          @if (form.get('materialBaseId')!.hasError('required') && form.get('materialBaseId')!.touched) {
+            <mat-error>Base material is required</mat-error>
+          }
+        </mat-form-field>
+
+        <!-- Finish -->
+        <mat-form-field appearance="outline" class="form-field full-width">
+          <mat-label>Finish</mat-label>
+          <mat-select formControlName="materialFinishId" required aria-label="Material finish">
+            <mat-option [value]="''" disabled>Select a base material first</mat-option>
+            @for (finish of filteredFinishes(); track finish.id) {
+              <mat-option [value]="finish.id">{{ finish.name }}</mat-option>
+            }
+          </mat-select>
+          @if (form.get('materialFinishId')!.hasError('required') && form.get('materialFinishId')!.touched) {
+            <mat-error>Finish is required</mat-error>
+          }
+          @if (filteredFinishes().length === 0 && form.get('materialBaseId')!.value) {
+            <mat-hint>No finishes available for this material</mat-hint>
+          }
+        </mat-form-field>
+
+        <!-- Modifier (optional) -->
+        <mat-form-field appearance="outline" class="form-field full-width">
+          <mat-label>Modifier (optional)</mat-label>
+          <mat-select formControlName="materialModifierId" aria-label="Material modifier">
+            <mat-option [value]="null">None</mat-option>
+            @for (modifier of filteredModifiers(); track modifier.id) {
+              <mat-option [value]="modifier.id">{{ modifier.name }}</mat-option>
+            }
+          </mat-select>
+          @if (filteredModifiers().length === 0 && form.get('materialBaseId')!.value) {
+            <mat-hint>No modifiers available for this material</mat-hint>
+          }
+        </mat-form-field>
+      </div>
+
+      <!-- ── Spool Details Section ──────────────────────────── -->
+      <div class="form-section">
+        <h3 class="section-title">Spool Details</h3>
+
+        <!-- Brand -->
+        <mat-form-field appearance="outline" class="form-field full-width">
+          <mat-label>Brand</mat-label>
+          <input matInput formControlName="brand" required maxlength="200"
+                 placeholder="e.g., Bambu Lab, Polymaker" aria-label="Brand" />
+          @if (form.get('brand')!.hasError('required') && form.get('brand')!.touched) {
+            <mat-error>Brand is required</mat-error>
+          }
+        </mat-form-field>
+
+        <!-- Serial -->
+        <mat-form-field appearance="outline" class="form-field full-width">
+          <mat-label>Serial Number</mat-label>
+          <input matInput formControlName="spoolSerial" required maxlength="200"
+                 placeholder="e.g., SN-001" aria-label="Serial number" />
+          @if (form.get('spoolSerial')!.hasError('required') && form.get('spoolSerial')!.touched) {
+            <mat-error>Serial number is required</mat-error>
+          }
+        </mat-form-field>
+
+        <!-- Color Name + Color Hex (side by side) -->
+        <div class="form-row">
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Color Name</mat-label>
+            <input matInput formControlName="colorName" required maxlength="200"
+                   placeholder="e.g., Fire Engine Red" aria-label="Color name" />
+            @if (form.get('colorName')!.hasError('required') && form.get('colorName')!.touched) {
+              <mat-error>Color name is required</mat-error>
+            }
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="form-field color-hex-field">
+            <mat-label>Color Hex</mat-label>
+            <input matInput formControlName="colorHex" required
+                   placeholder="#FF0000" maxlength="7" aria-label="Color hex code" />
+            <span matTextSuffix class="color-preview">
+              <span class="color-swatch-mini" [style.background-color]="form.get('colorHex')!.value"></span>
+            </span>
+            @if (form.get('colorHex')!.hasError('required') && form.get('colorHex')!.touched) {
+              <mat-error>Color hex is required</mat-error>
+            }
+            @if (form.get('colorHex')!.hasError('pattern') && form.get('colorHex')!.touched) {
+              <mat-error>Must be #RRGGBB format</mat-error>
+            }
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- ── Weight & Dimensions Section ────────────────────── -->
+      <div class="form-section">
+        <h3 class="section-title">Weight &amp; Dimensions</h3>
+
+        <div class="form-row">
+          <!-- Diameter -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Diameter (mm)</mat-label>
+            <input matInput type="number" formControlName="filamentDiameterMm" required
+                   min="0.1" max="10" step="0.01" aria-label="Filament diameter in mm" />
+            @if (form.get('filamentDiameterMm')!.hasError('required') && form.get('filamentDiameterMm')!.touched) {
+              <mat-error>Diameter is required</mat-error>
+            }
+          </mat-form-field>
+        </div>
+
+        <div class="form-row">
+          <!-- Total Weight -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Total Weight (g)</mat-label>
+            <input matInput type="number" formControlName="weightTotalGrams" required
+                   min="0.01" max="100000" step="1" aria-label="Total spool weight in grams" />
+            <mat-hint>Full spool weight</mat-hint>
+            @if (form.get('weightTotalGrams')!.hasError('required') && form.get('weightTotalGrams')!.touched) {
+              <mat-error>Total weight is required</mat-error>
+            }
+          </mat-form-field>
+
+          <!-- Remaining Weight -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Remaining Weight (g)</mat-label>
+            <input matInput type="number" formControlName="weightRemainingGrams" required
+                   min="0" max="100000" step="1" aria-label="Remaining weight in grams" />
+            <mat-hint>Current remaining</mat-hint>
+            @if (form.get('weightRemainingGrams')!.hasError('required') && form.get('weightRemainingGrams')!.touched) {
+              <mat-error>Remaining weight is required</mat-error>
+            }
+            @if (form.get('weightRemainingGrams')!.hasError('exceedsTotal')) {
+              <mat-error>Cannot exceed total weight</mat-error>
+            }
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- ── Purchase & Status Section ──────────────────────── -->
+      <div class="form-section">
+        <h3 class="section-title">Purchase &amp; Status</h3>
+
+        <div class="form-row">
+          <!-- Purchase Price -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Price</mat-label>
+            <input matInput type="number" formControlName="purchasePrice"
+                   min="0" max="1000000" step="0.01"
+                   placeholder="e.g., 25.00" aria-label="Purchase price" />
+            <span matTextSuffix>$</span>
+            @if (form.get('purchasePrice')!.hasError('min') && form.get('purchasePrice')!.touched) {
+              <mat-error>Price must be non-negative</mat-error>
+            }
+          </mat-form-field>
+
+          <!-- Purchase Date -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Purchase Date</mat-label>
+            <input matInput [matDatepicker]="picker" formControlName="purchaseDate"
+                   aria-label="Purchase date" />
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+          </mat-form-field>
+        </div>
+
+        <!-- Active Status -->
+        <div class="checkbox-row">
+          <mat-checkbox formControlName="isActive" aria-label="Active status">
+            Spool is active and available for use
+          </mat-checkbox>
+        </div>
+      </div>
+
+    </form>
+  }
+
+</mat-dialog-content>
+
+<!-- Dialog Actions -->
+<mat-dialog-actions align="end">
+  <button mat-button type="button" (click)="cancel()" [disabled]="saving()"
+          aria-label="Cancel">
+    Cancel
+  </button>
+  <button mat-raised-button color="primary" type="button" (click)="save()"
+          [disabled]="saving() || form.invalid" aria-label="Save filament">
+    @if (saving()) {
+      <mat-spinner diameter="20" class="btn-spinner"></mat-spinner>
+    }
+    {{ isEditMode() ? 'Save Changes' : 'Add Filament' }}
+  </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,175 @@
+/**
+ * Filament Dialog Styles
+ * Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
+ */
+
+$touch-target-min: 48px;
+$spacing-unit: 8px;
+$color-error: #ef4444;
+
+// ── Dialog Layout ──────────────────────────────────────────
+
+.filament-dialog-content {
+  overflow-y: auto;
+  max-height: 70vh;
+  padding: 0 $spacing-unit * 2;
+
+  @media (max-width: 480px) {
+    padding: 0 $spacing-unit;
+  }
+}
+
+[mat-dialog-title] {
+  margin: 0 0 $spacing-unit * 2 0;
+  padding: $spacing-unit * 2 0 0 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+// ── Loading State ──────────────────────────────────────────
+
+.dialog-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px $spacing-unit * 2;
+  color: var(--mat-sys-on-surface-variant);
+
+  p {
+    margin-top: $spacing-unit * 2;
+    font-size: 14px;
+  }
+}
+
+// ── Error Banner ───────────────────────────────────────────
+
+.error-banner {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit;
+  padding: $spacing-unit * 1.5 $spacing-unit * 2;
+  border-radius: 8px;
+  margin-bottom: $spacing-unit * 2;
+  background-color: rgba($color-error, 0.12);
+  color: $color-error;
+  border: 1px solid rgba($color-error, 0.3);
+  font-size: 14px;
+  font-weight: 500;
+
+  mat-icon {
+    font-size: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
+  }
+}
+
+// ── Form Sections ──────────────────────────────────────────
+
+.form-section {
+  margin-bottom: $spacing-unit * 3;
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--mat-sys-on-surface-variant);
+    margin: 0 0 $spacing-unit * 1.5 0;
+    padding-bottom: $spacing-unit * 0.5;
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+  }
+}
+
+.filament-form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-unit;
+}
+
+// ── Form Fields ────────────────────────────────────────────
+
+.form-field {
+  width: 100%;
+
+  // Touch target sizing
+  .mat-mdc-form-field-subscript-wrapper {
+    min-height: 20px;
+  }
+}
+
+.form-row {
+  display: flex;
+  gap: $spacing-unit * 2;
+  width: 100%;
+
+  .form-field {
+    flex: 1;
+  }
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+
+// ── Color Hex Preview ──────────────────────────────────────
+
+.color-hex-field {
+  max-width: 180px;
+
+  @media (max-width: 480px) {
+    max-width: 100%;
+  }
+}
+
+.color-preview {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+}
+
+.color-swatch-mini {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  vertical-align: middle;
+}
+
+// ── Checkbox Row ───────────────────────────────────────────
+
+.checkbox-row {
+  display: flex;
+  align-items: center;
+  padding: $spacing-unit 0;
+
+  mat-checkbox {
+    min-height: $touch-target-min;
+    display: flex;
+    align-items: center;
+  }
+}
+
+// ── Save Button Spinner ────────────────────────────────────
+
+mat-dialog-actions {
+  padding: $spacing-unit $spacing-unit * 2 $spacing-unit * 2;
+  gap: $spacing-unit;
+
+  button {
+    min-height: $touch-target-min;
+    min-width: 100px;
+  }
+}
+
+.btn-spinner {
+  display: inline-block;
+  margin-right: $spacing-unit;
+  vertical-align: middle;
+
+  circle {
+    stroke: currentColor;
+  }
+}

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

@@ -0,0 +1,277 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+  computed,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import { Filament } from '../../models/filament.model';
+import {
+  MaterialBase,
+  MaterialFinish,
+  MaterialModifier,
+} from '../../models/material.model';
+import {
+  FilamentService,
+  CreateFilamentRequest,
+  UpdateFilamentRequest,
+} from '../../services/filament.service';
+
+/** Data passed into the dialog from the opener. */
+export interface FilamentDialogData {
+  /** If provided, the dialog opens in edit mode with pre-populated fields. */
+  filament?: Filament;
+}
+
+@Component({
+  selector: 'app-filament-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './filament-dialog.component.html',
+  styleUrl: './filament-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilamentDialogComponent {
+  private readonly dialogRef = inject(MatDialogRef<FilamentDialogComponent>);
+  private readonly data = inject<FilamentDialogData>(MAT_DIALOG_DATA);
+  private readonly fb = inject(FormBuilder);
+  private readonly filamentService = inject(FilamentService);
+
+  /** Whether this dialog is in edit mode (has existing filament data). */
+  readonly isEditMode = computed(() => !!this.data.filament);
+
+  /** Dialog title based on mode. */
+  readonly dialogTitle = computed(() =>
+    this.isEditMode() ? 'Edit Filament' : 'Add Filament'
+  );
+
+  // ── Lookup data signals ──────────────────────────────────
+
+  /** All material bases for the base material dropdown. */
+  readonly materialBases = signal<MaterialBase[]>([]);
+
+  /** Material finishes filtered by selected base material. */
+  readonly filteredFinishes = signal<MaterialFinish[]>([]);
+
+  /** Material modifiers filtered by selected base material. */
+  readonly filteredModifiers = signal<MaterialModifier[]>([]);
+
+  /** Whether material lookups are loading. */
+  readonly lookupsLoading = signal(true);
+
+  /** Whether the save operation is in progress. */
+  readonly saving = signal(false);
+
+  /** Server error message, if any. */
+  readonly serverError = signal<string | null>(null);
+
+  // ── Form ─────────────────────────────────────────────────
+
+  readonly form: FormGroup = this.fb.group({
+    materialBaseId: ['', Validators.required],
+    materialFinishId: ['', Validators.required],
+    materialModifierId: [null],
+    brand: ['', [Validators.required, Validators.maxLength(200)]],
+    colorName: ['', [Validators.required, Validators.maxLength(200)]],
+    colorHex: ['#000000', [Validators.required, Validators.pattern(/^#[0-9A-Fa-f]{6}$/)]],
+    weightTotalGrams: [1000, [Validators.required, Validators.min(0.01), Validators.max(100000)]],
+    weightRemainingGrams: [1000, [Validators.required, Validators.min(0), Validators.max(100000)]],
+    filamentDiameterMm: [1.75, [Validators.required, Validators.min(0.1), Validators.max(10)]],
+    spoolSerial: ['', [Validators.required, Validators.maxLength(200)]],
+    purchasePrice: [null, [Validators.min(0), Validators.max(1000000)]],
+    purchaseDate: [null],
+    isActive: [true],
+  });
+
+  constructor() {
+    this.loadLookups();
+    this.patchFormIfEditing();
+    this.setupCascadingFilters();
+  }
+
+  // ── Data loading ─────────────────────────────────────────
+
+  /** Load material bases, finishes, and modifiers for dropdowns. */
+  private loadLookups(): void {
+    this.lookupsLoading.set(true);
+    this.filamentService.getMaterialBases().subscribe({
+      next: (bases) => {
+        this.materialBases.set(bases);
+        this.lookupsLoading.set(false);
+      },
+      error: () => {
+        this.lookupsLoading.set(false);
+        this.serverError.set('Failed to load material options. Please try again.');
+      },
+    });
+  }
+
+  /** Pre-populate form fields when editing an existing filament. */
+  private patchFormIfEditing(): void {
+    if (this.data.filament) {
+      const f = this.data.filament;
+      this.form.patchValue({
+        materialBaseId: f.materialBaseId,
+        materialFinishId: f.materialFinishId,
+        materialModifierId: f.materialModifierId,
+        brand: f.brand,
+        colorName: f.colorName,
+        colorHex: f.colorHex,
+        weightTotalGrams: f.weightTotalGrams,
+        weightRemainingGrams: f.weightRemainingGrams,
+        filamentDiameterMm: f.filamentDiameterMm,
+        spoolSerial: f.spoolSerial,
+        purchasePrice: f.purchasePrice,
+        purchaseDate: f.purchaseDate ? new Date(f.purchaseDate) : null,
+        isActive: f.isActive,
+      });
+    }
+  }
+
+  /** Set up cascading filter: when base material changes, reload finishes & modifiers. */
+  private setupCascadingFilters(): void {
+    this.form.get('materialBaseId')!.valueChanges.subscribe((baseId: string | null) => {
+      // Clear dependent selections when base changes
+      this.form.get('materialFinishId')!.setValue('');
+      this.form.get('materialModifierId')!.setValue(null);
+      this.filteredFinishes.set([]);
+      this.filteredModifiers.set([]);
+
+      if (!baseId) return;
+
+      this.filamentService.getMaterialFinishes(baseId).subscribe({
+        next: (finishes) => this.filteredFinishes.set(finishes),
+        error: () => this.filteredFinishes.set([]),
+      });
+
+      this.filamentService.getMaterialModifiers(baseId).subscribe({
+        next: (modifiers) => this.filteredModifiers.set(modifiers),
+        error: () => this.filteredModifiers.set([]),
+      });
+    });
+
+    // If editing, trigger the cascading load for the pre-selected base
+    if (this.data.filament) {
+      const baseId = this.data.filament.materialBaseId;
+      // We need to load finishes and modifiers for the pre-selected base
+      // but also re-select the original finish and modifier after loading
+      this.filamentService.getMaterialFinishes(baseId).subscribe({
+        next: (finishes) => {
+          this.filteredFinishes.set(finishes);
+          // Re-patch finish after load
+          this.form.get('materialFinishId')!.setValue(this.data.filament!.materialFinishId);
+        },
+      });
+      this.filamentService.getMaterialModifiers(baseId).subscribe({
+        next: (modifiers) => {
+          this.filteredModifiers.set(modifiers);
+          // Re-patch modifier after load
+          this.form.get('materialModifierId')!.setValue(this.data.filament!.materialModifierId);
+        },
+      });
+    }
+  }
+
+  // ── Actions ──────────────────────────────────────────────
+
+  /** Cancel and close the dialog without saving. */
+  cancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  /** Submit the form — creates or updates the filament. */
+  save(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    // Cross-field validation: remaining weight must not exceed total weight
+    const total = this.form.value.weightTotalGrams;
+    const remaining = this.form.value.weightRemainingGrams;
+    if (remaining > total) {
+      this.form.get('weightRemainingGrams')!.setErrors({ exceedsTotal: true });
+      return;
+    }
+
+    this.saving.set(true);
+    this.serverError.set(null);
+
+    const formValue = this.form.value;
+    const request: CreateFilamentRequest | UpdateFilamentRequest = {
+      materialBaseId: formValue.materialBaseId,
+      materialFinishId: formValue.materialFinishId,
+      materialModifierId: formValue.materialModifierId || null,
+      brand: formValue.brand.trim(),
+      colorName: formValue.colorName.trim(),
+      colorHex: formValue.colorHex,
+      weightTotalGrams: formValue.weightTotalGrams,
+      weightRemainingGrams: formValue.weightRemainingGrams,
+      filamentDiameterMm: formValue.filamentDiameterMm,
+      spoolSerial: formValue.spoolSerial.trim(),
+      purchasePrice: formValue.purchasePrice ?? null,
+      purchaseDate: formValue.purchaseDate
+        ? new Date(formValue.purchaseDate).toISOString()
+        : null,
+      isActive: formValue.isActive,
+    };
+
+    if (this.isEditMode()) {
+      const id = this.data.filament!.id;
+      this.filamentService.updateFilament(id, request).subscribe({
+        next: (updated) => {
+          this.saving.set(false);
+          this.dialogRef.close(true);
+        },
+        error: (err) => {
+          this.saving.set(false);
+          this.serverError.set(
+            err?.error?.error || err?.message || 'Failed to update filament. Please try again.'
+          );
+        },
+      });
+    } else {
+      this.filamentService.createFilament(request).subscribe({
+        next: (created) => {
+          this.saving.set(false);
+          this.dialogRef.close(true);
+        },
+        error: (err) => {
+          this.saving.set(false);
+          this.serverError.set(
+            err?.error?.error || err?.message || 'Failed to create filament. Please try again.'
+          );
+        },
+      });
+    }
+  }
+}

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

@@ -1,6 +1,16 @@
-<!-- Filament Inventory Table — with low stock indicators and delete actions -->
+<!-- Filament Inventory Table — with low stock indicators -->
 <div class="filament-table-container" role="region" aria-label="Filament inventory">
 
+  <!-- Header Row: title + Add button -->
+  <div class="table-header">
+    <h2 class="table-title">Filament Inventory</h2>
+    <button mat-raised-button color="primary" (click)="openAddDialog()"
+            aria-label="Add filament" class="add-btn">
+      <mat-icon aria-hidden="true">add</mat-icon>
+      Add Filament
+    </button>
+  </div>
+
   <!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
   @if (criticalCount() > 0) {
     <div class="alert-banner critical" role="alert">
@@ -106,23 +116,16 @@
       </td>
     </ng-container>
 
-    <!-- Actions Column — delete button -->
+    <!-- Actions Column -->
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let filament">
+      <td mat-cell *matCellDef="let filament" class="actions-cell">
         <button mat-icon-button
-                type="button"
+                [matTooltip]="'Edit ' + filament.brand + ' ' + filament.colorName"
-                color="warn"
-                [attr.aria-label]="'Delete ' + filament.materialBaseName + ' — ' + filament.colorName"
-                matTooltip="Delete spool"
                 matTooltipPosition="above"
-                [disabled]="deleting() === filament.id"
+                aria-label="Edit filament"
-                (click)="onDeleteClick(filament)">
+                (click)="openEditDialog(filament)">
-          @if (deleting() === filament.id) {
+          <mat-icon>edit</mat-icon>
-            <mat-icon aria-hidden="true">hourglass_empty</mat-icon>
-          } @else {
-            <mat-icon aria-hidden="true">delete</mat-icon>
-          }
         </button>
       </td>
     </ng-container>
@@ -130,8 +133,7 @@
     <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>
 

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

@@ -22,6 +22,35 @@ $color-inactive: #94a3b8;  // Gray — inactive spool
   -webkit-overflow-scrolling: touch;
 }
 
+// Header row: title + add button
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-unit * 2;
+  flex-wrap: wrap;
+  gap: $spacing-unit;
+
+  .table-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .add-btn {
+    min-height: $touch-target-min;
+    mat-icon {
+      margin-right: 4px;
+    }
+  }
+}
+
+// Actions cell
+.actions-cell {
+  text-align: center;
+  width: 56px;
+}
+
 // Alert banner for low stock warnings
 .alert-banner {
   display: flex;
@@ -235,20 +264,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

@@ -15,19 +15,16 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatButtonModule } from '@angular/material/button';
 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,
+  FilamentDialogComponent,
-  DeleteFilamentDialogData,
+  FilamentDialogData,
-} from '../delete-filament-dialog/delete-filament-dialog.component';
+} from '../filament-dialog/filament-dialog.component';
 
 /** Display column definitions for the filament table */
 export type FilamentColumn =
@@ -53,7 +50,6 @@ export type FilamentColumn =
     MatSortModule,
     MatButtonModule,
     MatDialogModule,
-    MatSnackBarModule,
   ],
   templateUrl: './filament-table.component.html',
   styleUrl: './filament-table.component.scss',
@@ -61,16 +57,11 @@ export type FilamentColumn =
 })
 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);
@@ -274,52 +265,6 @@ export class FilamentTableComponent {
     this.sortedFilaments.set(sorted);
   }
 
-  /**
-   * Open the delete confirmation dialog for a filament spool.
-   * On confirm: calls DELETE endpoint and removes the row on success.
-   * 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) => {
-      if (!confirmed) {
-        return; // User cancelled — no action
-      }
-
-      // Mark as deleting for UI feedback
-      this.deleting.set(filament.id);
-
-      this.filamentService.deleteFilament(filament.id).subscribe({
-        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 */
   getRemainingPercent = getRemainingPercent;
 
@@ -361,6 +306,47 @@ export class FilamentTableComponent {
     }
     return `${Math.round(grams)}g`;
   }
+
+  /** Open the add filament dialog. */
+  openAddDialog(): void {
+    const data: FilamentDialogData = {};
+    const ref = this.dialog.open(FilamentDialogComponent, {
+      width: '600px',
+      maxWidth: '95vw',
+      data,
+      autoFocus: 'first-typable',
+    });
+
+    ref.afterClosed().subscribe((result: boolean) => {
+      if (result) {
+        this.onFilamentSaved();
+      }
+    });
+  }
+
+  /** Open the edit filament dialog for a specific spool. */
+  openEditDialog(filament: Filament): void {
+    const data: FilamentDialogData = { filament };
+    const ref = this.dialog.open(FilamentDialogComponent, {
+      width: '600px',
+      maxWidth: '95vw',
+      data,
+      autoFocus: 'first-typable',
+    });
+
+    ref.afterClosed().subscribe((result: boolean) => {
+      if (result) {
+        this.onFilamentSaved();
+      }
+    });
+  }
+
+  /** Called after a successful save — reload filament data. */
+  protected onFilamentSaved(): void {
+    // TODO: Replace with FilamentService.refresh() call when SignalR integration is ready.
+    // For now, this is the hook for refreshing data after a save.
+    // Consumers can override or listen to signal changes.
+  }
 }
 
 /** Compare helper for sorting */

frontend/src/app/models/material.model.ts

@@ -0,0 +1,50 @@
+/**
+ * Material lookup models matching the Extrudex backend Material DTOs.
+ * Used for populating dropdowns in the filament add/edit form.
+ */
+
+/** Material base (e.g., PLA, PETG, ABS). */
+export interface MaterialBase {
+  /** Unique identifier. */
+  id: string;
+  /** Human-readable name (e.g., "PLA", "PETG"). */
+  name: string;
+  /** Density in g/cm³. */
+  densityGperCm3: number;
+  /** Created timestamp (UTC). */
+  createdAt: string;
+  /** Updated timestamp (UTC). */
+  updatedAt: string;
+}
+
+/** Material finish (e.g., Basic, Matte, Silk). */
+export interface MaterialFinish {
+  /** Unique identifier. */
+  id: string;
+  /** Human-readable name (e.g., "Basic", "Matte"). */
+  name: string;
+  /** Foreign key to the parent material base. */
+  materialBaseId: string;
+  /** Name of the parent material base (for display). */
+  materialBaseName: string;
+  /** Created timestamp (UTC). */
+  createdAt: string;
+  /** Updated timestamp (UTC). */
+  updatedAt: string;
+}
+
+/** Material modifier (e.g., Carbon Fiber, Wood Fill). Optional. */
+export interface MaterialModifier {
+  /** Unique identifier. */
+  id: string;
+  /** Human-readable name (e.g., "Carbon Fiber"). */
+  name: string;
+  /** Foreign key to the parent material base. */
+  materialBaseId: string;
+  /** Name of the parent material base (for display). */
+  materialBaseName: string;
+  /** Created timestamp (UTC). */
+  createdAt: string;
+  /** Updated timestamp (UTC). */
+  updatedAt: string;
+}

frontend/src/app/models/paged-response.model.ts

@@ -0,0 +1,13 @@
+/**
+ * Generic paged response wrapper matching the Extrudex backend PagedResponse<T>.
+ */
+export interface PagedResponse<T> {
+  /** The items in this page. */
+  items: T[];
+  /** Total number of items across all pages. */
+  totalCount: number;
+  /** The current page number (1-based). */
+  pageNumber: number;
+  /** The number of items per page. */
+  pageSize: number;
+}

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

@@ -2,36 +2,133 @@ import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
+import { environment } from '../../environments/environment';
 import { Filament } from '../models/filament.model';
+import { PagedResponse } from '../models/paged-response.model';
+import {
+  MaterialBase,
+  MaterialFinish,
+  MaterialModifier,
+} from '../models/material.model';
 
 /**
- * API base URL — matches the Extrudex backend default.
+ * Request body for creating a new filament spool.
- * TODO: Move to environment config when multi-environment support is added.
+ * Matches the backend CreateFilamentRequest DTO.
  */
-const API_BASE_URL = '/api';
+export interface CreateFilamentRequest {
+  materialBaseId: string;
+  materialFinishId: string;
+  materialModifierId: string | null;
+  brand: string;
+  colorName: string;
+  colorHex: string;
+  weightTotalGrams: number;
+  weightRemainingGrams: number;
+  filamentDiameterMm: number;
+  spoolSerial: string;
+  purchasePrice: number | null;
+  purchaseDate: string | null;
+  isActive: boolean;
+}
 
 /**
- * Service for CRUD operations on filament spools.
+ * Request body for updating an existing filament spool.
- * Communicates with the Extrudex backend SpoolsController.
+ * Matches the backend UpdateFilamentRequest DTO.
+ */
+export interface UpdateFilamentRequest {
+  materialBaseId: string;
+  materialFinishId: string;
+  materialModifierId: string | null;
+  brand: string;
+  colorName: string;
+  colorHex: string;
+  weightTotalGrams: number;
+  weightRemainingGrams: number;
+  filamentDiameterMm: number;
+  spoolSerial: string;
+  purchasePrice: number | null;
+  purchaseDate: string | null;
+  isActive: boolean;
+}
+
+/**
+ * Service for interacting with the Extrudex filament and material APIs.
+ * Handles CRUD for filament spools and material lookup data.
  */
 @Injectable({ providedIn: 'root' })
 export class FilamentService {
   private readonly http = inject(HttpClient);
+  private readonly baseUrl = environment.apiBaseUrl;
+
+  // ── Filament CRUD ────────────────────────────────────────
 
   /**
-   * Fetch all filament spools from the backend.
+   * Get a paginated list of filament spools.
-   * GET /api/spools
    */
-  getFilaments(): Observable<Filament[]> {
+  getFilaments(params?: {
-    return this.http.get<Filament[]>(`${API_BASE_URL}/spools`);
+    pageNumber?: number;
+    pageSize?: number;
+    materialBaseId?: string;
+    materialFinishId?: string;
+    materialModifierId?: string;
+    brand?: string;
+    isActive?: boolean;
+  }): Observable<PagedResponse<Filament>> {
+    return this.http.get<PagedResponse<Filament>>(
+      `${this.baseUrl}/api/filaments`,
+      { params: params as Record<string, string | number | boolean> }
+    );
   }
 
   /**
-   * Soft-delete a filament spool by ID.
+   * Get a single filament spool by ID.
-   * DELETE /api/spools/{id}
-   * Returns 204 No Content on success.
    */
-  deleteFilament(id: string): Observable<void> {
+  getFilament(id: string): Observable<Filament> {
-    return this.http.delete<void>(`${API_BASE_URL}/spools/${id}`);
+    return this.http.get<Filament>(`${this.baseUrl}/api/filaments/${id}`);
+  }
+
+  /**
+   * Create a new filament spool.
+   */
+  createFilament(request: CreateFilamentRequest): Observable<Filament> {
+    return this.http.post<Filament>(`${this.baseUrl}/api/filaments`, request);
+  }
+
+  /**
+   * Update an existing filament spool.
+   */
+  updateFilament(id: string, request: UpdateFilamentRequest): Observable<Filament> {
+    return this.http.put<Filament>(`${this.baseUrl}/api/filaments/${id}`, request);
+  }
+
+  // ── Material Lookups ─────────────────────────────────────
+
+  /**
+   * Get all material bases (PLA, PETG, ABS, etc.).
+   */
+  getMaterialBases(): Observable<MaterialBase[]> {
+    return this.http.get<MaterialBase[]>(`${this.baseUrl}/api/materials/bases`);
+  }
+
+  /**
+   * Get all material finishes, optionally filtered by material base.
+   */
+  getMaterialFinishes(materialBaseId?: string): Observable<MaterialFinish[]> {
+    const params: Record<string, string> = {};
+    if (materialBaseId) {
+      params['materialBaseId'] = materialBaseId;
+    }
+    return this.http.get<MaterialFinish[]>(`${this.baseUrl}/api/materials/finishes`, { params });
+  }
+
+  /**
+   * Get all material modifiers, optionally filtered by material base.
+   */
+  getMaterialModifiers(materialBaseId?: string): Observable<MaterialModifier[]> {
+    const params: Record<string, string> = {};
+    if (materialBaseId) {
+      params['materialBaseId'] = materialBaseId;
+    }
+    return this.http.get<MaterialModifier[]>(`${this.baseUrl}/api/materials/modifiers`, { params });
   }
 }

frontend/src/environments/environment.prod.ts

@@ -0,0 +1,8 @@
+/**
+ * Environment configuration for the Extrudex frontend (production).
+ * Override API URL for deployed environments.
+ */
+export const environment = {
+  production: true,
+  apiBaseUrl: '/api',
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,8 @@
+/**
+ * Environment configuration for the Extrudex frontend.
+ * Replace API URL with the actual backend endpoint in production.
+ */
+export const environment = {
+  production: false,
+  apiBaseUrl: 'http://localhost:5000',
+};