CUB-43: add inventory dashboard summary component with FilamentService

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

@@ -2,9 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
+  OnInit,
   computed,
+  inject,
   signal,
 } from '@angular/core';
+import { FilamentService } from '../../services/filament.service';
 import { CommonModule } from '@angular/common';
 import { MatTableModule } from '@angular/material/table';
 import { MatChipsModule } from '@angular/material/chips';
@@ -47,9 +50,11 @@ export type FilamentColumn =
   styleUrl: './filament-table.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilamentTableComponent {
-  /** Filament data input — reactive signal for live updates */
-  readonly filaments = signal<Filament[]>([]);
+export class FilamentTableComponent implements OnInit {
+  private readonly filamentService = inject(FilamentService);
+
+  /** Filament data — reactive signal driven by FilamentService */
+  readonly filaments = this.filamentService.filaments;
 
   /** Columns to display — defaults to all columns */
   @Input()
@@ -102,129 +107,14 @@ export class FilamentTableComponent {
     this.filaments().filter((f) => classifyStockLevel(f) === 'critical').length
   );
 
-  constructor() {
-    // Initialize sorted data from filaments
-    // (MatSort handles sorting via sortChange; we start unsorted)
-
-    // Development: seed with sample data for visual testing
-    // TODO: Replace with service data from FilamentService / SignalR
-    this.updateFilaments([
-      {
-        id: '1',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Bambu Lab',
-        colorName: 'White',
-        colorHex: '#F5F5F5',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 850,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-001',
-        purchasePrice: 25.00,
-        purchaseDate: '2026-01-15T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-01-15T00:00:00Z',
-        updatedAt: '2026-04-20T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '2',
-        materialBaseId: 'm2',
-        materialBaseName: 'PETG',
-        materialFinishId: 'f2',
-        materialFinishName: 'Matte',
-        materialModifierId: 'mod1',
-        materialModifierName: 'Carbon Fiber',
-        brand: 'Polymaker',
-        colorName: 'Fire Engine Red',
-        colorHex: '#FF0000',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 80,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-002',
-        purchasePrice: 35.00,
-        purchaseDate: '2026-02-01T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-02-01T00:00:00Z',
-        updatedAt: '2026-04-25T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '3',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'eSun',
-        colorName: 'Sky Blue',
-        colorHex: '#87CEEB',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 200,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-003',
-        purchasePrice: 20.00,
-        purchaseDate: '2026-03-10T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-03-10T00:00:00Z',
-        updatedAt: '2026-04-26T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '4',
-        materialBaseId: 'm3',
-        materialBaseName: 'ABS',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Hatchbox',
-        colorName: 'Black',
-        colorHex: '#1A1A1A',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 450,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-004',
-        purchasePrice: 22.00,
-        purchaseDate: null,
-        isActive: true,
-        createdAt: '2026-01-20T00:00:00Z',
-        updatedAt: '2026-04-18T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '5',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f3',
-        materialFinishName: 'Silk',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Overturn',
-        colorName: 'Gold',
-        colorHex: '#FFD700',
-        weightTotalGrams: 500,
-        weightRemainingGrams: 15,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-005',
-        purchasePrice: 28.00,
-        purchaseDate: null,
-        isActive: false,
-        createdAt: '2025-12-01T00:00:00Z',
-        updatedAt: '2026-04-01T00:00:00Z',
-        qrCodeUrl: '',
-      },
-    ]);
+  ngOnInit(): void {
+    // Initialize sorted data from FilamentService
+    this.sortedFilaments.set([...this.filaments()]);
   }
 
-  /** Update filament data — called by parent or service */
+  /** Update filament data — called externally or from a SignalR handler */
   updateFilaments(data: Filament[]): void {
-    this.filaments.set(data);
+    this.filamentService.setFilaments(data);
     this.sortedFilaments.set([...data]);
   }