CUB-42: Show filament cost and usage in UI

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

@@ -83,6 +83,35 @@
       </td>
     </ng-container>
 
+    <!-- Cost Column -->
+    <ng-container matColumnDef="cost">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="cost">Cost</th>
+      <td mat-cell *matCellDef="let filament">
+        <div class="cost-cell">
+          @if (filament.purchasePrice !== null) {
+            <span class="cost-price">{{ formatCurrency(filament.purchasePrice) }}</span>
+            @let cpg = getCostPerGram(filament);
+            @if (cpg !== null) {
+              <span class="cost-per-gram">${{ cpg.toFixed(2) }}/g</span>
+            }
+          } @else {
+            <span class="cost-unknown">&mdash;</span>
+          }
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Usage Column -->
+    <ng-container matColumnDef="usage">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="usage">Usage</th>
+      <td mat-cell *matCellDef="let filament">
+        <div class="usage-cell">
+          <span class="usage-grams">{{ formatWeight(getGramsUsed(filament)) }} used</span>
+          <span class="usage-remaining">{{ formatWeight(filament.weightRemainingGrams) }} left</span>
+        </div>
+      </td>
+    </ng-container>
+
     <!-- Stock Level Indicator Column -->
     <ng-container matColumnDef="stockLevel">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="stockLevel">Stock</th>

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

@@ -55,7 +55,7 @@ $color-inactive: #94a3b8;  // Gray — inactive spool
 // Table styling
 .filament-table {
   width: 100%;
-  min-width: 700px;
+  min-width: 900px;
 
   th {
     font-weight: 600;
@@ -132,6 +132,48 @@ $color-inactive: #94a3b8;  // Gray — inactive spool
   letter-spacing: 0.02em;
 }
 
+// Cost cell
+.cost-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 80px;
+
+  .cost-price {
+    font-weight: 600;
+    color: var(--mat-sys-on-surface);
+  }
+
+  .cost-per-gram {
+    font-size: 11px;
+    color: var(--mat-sys-on-surface-variant);
+    letter-spacing: 0.02em;
+  }
+
+  .cost-unknown {
+    color: var(--mat-sys-on-surface-variant);
+    font-style: italic;
+  }
+}
+
+// Usage cell
+.usage-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 100px;
+
+  .usage-grams {
+    font-weight: 500;
+    color: var(--mat-sys-on-surface);
+  }
+
+  .usage-remaining {
+    font-size: 12px;
+    color: var(--mat-sys-on-surface-variant);
+  }
+}
+
 // Remaining weight cell
 .remaining-cell {
   display: flex;

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

@@ -30,6 +30,8 @@ export type FilamentColumn =
   | 'brand'
   | 'serial'
   | 'remaining'
+  | 'cost'
+  | 'usage'
   | 'stockLevel'
   | 'status';
 
@@ -70,6 +72,8 @@ export class FilamentTableComponent implements OnInit {
     'brand',
     'serial',
     'remaining',
+    'cost',
+    'usage',
     'stockLevel',
     'status',
   ]);
@@ -143,6 +147,18 @@ export class FilamentTableComponent implements OnInit {
             getRemainingPercent(b),
             isAsc
           );
+        case 'cost':
+          return compare(
+            a.purchasePrice ?? 0,
+            b.purchasePrice ?? 0,
+            isAsc
+          );
+        case 'usage':
+          return compare(
+            a.weightTotalGrams - a.weightRemainingGrams,
+            b.weightTotalGrams - b.weightRemainingGrams,
+            isAsc
+          );
         case 'stockLevel':
           return compare(
             stockLevelOrder(classifyStockLevel(a)),
@@ -243,6 +259,29 @@ export class FilamentTableComponent implements OnInit {
     }
     return `${Math.round(grams)}g`;
   }
+
+  /** Template helper: format currency */
+  formatCurrency(value: number): string {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  }
+
+  /** Template helper: compute cost per gram for a filament */
+  getCostPerGram(filament: Filament): number | null {
+    if (filament.purchasePrice === null || filament.purchasePrice === 0 || filament.weightTotalGrams <= 0) {
+      return null;
+    }
+    return filament.purchasePrice / filament.weightTotalGrams;
+  }
+
+  /** Template helper: compute grams used for a filament */
+  getGramsUsed(filament: Filament): number {
+    return filament.weightTotalGrams - filament.weightRemainingGrams;
+  }
 }
 
 /** Compare helper for sorting */