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>