Merge branch 'dev' into agent/rex/CUB-36-delete-confirmation

backend/API/Controllers/CostAnalysisController.cs

@@ -1,108 +0,0 @@
-using Extrudex.API.DTOs.PrintJobs;
-using Extrudex.Domain.Interfaces;
-using Microsoft.AspNetCore.Mvc;
-
-namespace Extrudex.API.Controllers;
-
-/// <summary>
-/// Controller for cost analysis endpoints. Provides spool-level
-/// cost breakdowns and aggregated COGS reporting.
-/// </summary>
-[ApiController]
-[Route("api/cost-analysis")]
-public class CostAnalysisController : ControllerBase
-{
-    private readonly ICostPerPrintService _costService;
-    private readonly ILogger<CostAnalysisController> _logger;
-
-    /// <summary>
-    /// Initializes a new instance of the <see cref="CostAnalysisController"/> class.
-    /// </summary>
-    /// <param name="costService">The cost-per-print calculation service.</param>
-    /// <param name="logger">The logger for diagnostic output.</param>
-    public CostAnalysisController(
-        ICostPerPrintService costService,
-        ILogger<CostAnalysisController> logger)
-    {
-        _costService = costService;
-        _logger = logger;
-    }
-
-    // ── POST /api/cost-analysis/spool ────────────────────────────
-
-    /// <summary>
-    /// Calculates cost breakdowns for all print jobs associated with a specific spool.
-    /// Returns per-job costs plus an aggregated total. Jobs with missing cost data
-    /// include warnings and null cost fields — the endpoint never throws for missing data.
-    /// </summary>
-    /// <param name="request">The request containing the spool identifier.</param>
-    /// <returns>A spool-level cost summary with per-job breakdowns.</returns>
-    /// <response code="200">Returns the spool cost breakdown with per-job details.</response>
-    /// <response code="404">If the spool has no print jobs.</response>
-    [HttpPost("spool")]
-    [ProducesResponseType(typeof(SpoolCostResponse), StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status404NotFound)]
-    public async Task<ActionResult<SpoolCostResponse>> CalculateSpoolCost([FromBody] SpoolCostRequest request)
-    {
-        _logger.LogDebug("Calculating cost breakdown for spool {SpoolId}", request.SpoolId);
-
-        var results = await _costService.CalculateBySpoolAsync(request.SpoolId);
-
-        if (results.Count == 0)
-        {
-            return NotFound(new { error = $"No print jobs found for spool with ID '{request.SpoolId}'." });
-        }
-
-        // Build the spool-level summary
-        var firstResult = results[0];
-        var jobResponses = results.Select(MapCostToResponse).ToList();
-
-        // Aggregate total cost and grams — only include jobs that have a valid cost
-        var calculableJobs = results.Where(r => r.CostPerPrint.HasValue).ToList();
-        var totalCost = calculableJobs.Count == results.Count
-            ? Math.Round(calculableJobs.Sum(r => r.CostPerPrint!.Value), 4)
-            : (decimal?)null;
-
-        var aggregateWarnings = new List<string>();
-        if (calculableJobs.Count < results.Count)
-        {
-            aggregateWarnings.Add(
-                $"{results.Count - calculableJobs.Count} of {results.Count} print jobs have missing cost data. " +
-                "Total cost reflects only jobs with complete data.");
-        }
-
-        var response = new SpoolCostResponse
-        {
-            SpoolId = request.SpoolId,
-            SpoolSerial = firstResult.SpoolSerial,
-            PurchasePrice = firstResult.PurchasePrice,
-            WeightTotalGrams = firstResult.WeightTotalGrams,
-            CostPerGram = firstResult.CostPerGram,
-            TotalGramsConsumed = results.Sum(r => r.GramsDerived),
-            TotalCost = totalCost,
-            JobCount = results.Count,
-            Jobs = jobResponses,
-            Warnings = aggregateWarnings
-        };
-
-        return Ok(response);
-    }
-
-    /// <summary>
-    /// Maps a domain CostPerPrintResult to an API CostPerPrintResponse DTO.
-    /// </summary>
-    private static CostPerPrintResponse MapCostToResponse(CostPerPrintResult r) => new()
-    {
-        PrintJobId = r.PrintJobId,
-        PrintName = r.PrintName,
-        SpoolId = r.SpoolId,
-        SpoolSerial = r.SpoolSerial,
-        MmExtruded = r.MmExtruded,
-        GramsDerived = r.GramsDerived,
-        PurchasePrice = r.PurchasePrice,
-        WeightTotalGrams = r.WeightTotalGrams,
-        CostPerGram = r.CostPerGram,
-        CostPerPrint = r.CostPerPrint,
-        Warnings = r.Warnings
-    };
-}

backend/API/DTOs/PrintJobs/CostPerPrintDtos.cs

@@ -1,99 +0,0 @@
-using System.ComponentModel.DataAnnotations;
-
-namespace Extrudex.API.DTOs.PrintJobs;
-
-/// <summary>
-/// Response DTO for cost-per-print calculation. Contains the full cost
-/// breakdown and any warnings about missing or incomplete data.
-/// </summary>
-public class CostPerPrintResponse
-{
-    /// <summary>The print job identifier this result belongs to.</summary>
-    public Guid PrintJobId { get; set; }
-
-    /// <summary>Human-readable name of the print job.</summary>
-    public string PrintName { get; set; } = string.Empty;
-
-    /// <summary>The spool identifier that provided filament.</summary>
-    public Guid SpoolId { get; set; }
-
-    /// <summary>Serial number of the spool.</summary>
-    public string SpoolSerial { get; set; } = string.Empty;
-
-    /// <summary>Total millimeters of filament extruded.</summary>
-    public decimal MmExtruded { get; set; }
-
-    /// <summary>Derived grams consumed for this print.</summary>
-    public decimal GramsDerived { get; set; }
-
-    /// <summary>The spool's purchase price. Null if not recorded.</summary>
-    public decimal? PurchasePrice { get; set; }
-
-    /// <summary>The spool's total weight in grams when full.</summary>
-    public decimal? WeightTotalGrams { get; set; }
-
-    /// <summary>Cost per gram of filament. Null if purchase price or total weight is missing.</summary>
-    public decimal? CostPerGram { get; set; }
-
-    /// <summary>Calculated cost of this print job. Null if cost data is incomplete.</summary>
-    public decimal? CostPerPrint { get; set; }
-
-    /// <summary>
-    /// Warnings about missing or incomplete data. Empty when all data is available
-    /// and the calculation succeeded.
-    /// </summary>
-    public List<string> Warnings { get; set; } = new();
-}
-
-/// <summary>
-/// Request DTO for batch cost calculation by spool. Returns cost breakdowns
-/// for all print jobs associated with the specified spool.
-/// </summary>
-public class SpoolCostRequest
-{
-    /// <summary>The unique identifier of the spool to calculate costs for.</summary>
-    [Required(ErrorMessage = "SpoolId is required.")]
-    public Guid SpoolId { get; set; }
-}
-
-/// <summary>
-/// Response DTO for spool-level cost calculation. Contains cost breakdowns
-/// for all print jobs on the spool, plus a total cost summary.
-/// </summary>
-public class SpoolCostResponse
-{
-    /// <summary>The spool identifier.</summary>
-    public Guid SpoolId { get; set; }
-
-    /// <summary>Serial number of the spool.</summary>
-    public string SpoolSerial { get; set; } = string.Empty;
-
-    /// <summary>The spool's purchase price. Null if not recorded.</summary>
-    public decimal? PurchasePrice { get; set; }
-
-    /// <summary>The spool's total weight in grams when full.</summary>
-    public decimal? WeightTotalGrams { get; set; }
-
-    /// <summary>Cost per gram of filament. Null if cost data is incomplete.</summary>
-    public decimal? CostPerGram { get; set; }
-
-    /// <summary>Total grams consumed across all print jobs on this spool.</summary>
-    public decimal TotalGramsConsumed { get; set; }
-
-    /// <summary>Total calculated cost across all print jobs. Null if any job has missing data.</summary>
-    public decimal? TotalCost { get; set; }
-
-    /// <summary>Number of print jobs included in this calculation.</summary>
-    public int JobCount { get; set; }
-
-    /// <summary>
-    /// Individual cost breakdowns per print job. Jobs with missing data
-    /// will have null cost fields and populated warnings.
-    /// </summary>
-    public List<CostPerPrintResponse> Jobs { get; set; } = new();
-
-    /// <summary>
-    /// Aggregate warnings about missing data across all jobs.
-    /// </summary>
-    public List<string> Warnings { get; set; } = new();
-}

backend/Domain/Interfaces/ICostPerPrintService.cs

@@ -1,76 +0,0 @@
-namespace Extrudex.Domain.Interfaces;
-
-/// <summary>
-/// Service interface for calculating the cost of goods sold (COGS) per print job.
-/// Uses the spool's purchase price and the print job's derived grams consumed
-/// to produce a cost breakdown. Handles missing cost data gracefully by returning
-/// warnings rather than throwing exceptions.
-/// </summary>
-public interface ICostPerPrintService
-{
-    /// <summary>
-    /// Calculates the cost per print for a specific print job.
-    /// </summary>
-    /// <param name="printJobId">The unique identifier of the print job.</param>
-    /// <param name="cancellationToken">Optional cancellation token.</param>
-    /// <returns>
-    /// A <see cref="CostPerPrintResult"/> containing the cost breakdown,
-    /// or warnings if cost data is missing or incomplete.
-    /// </returns>
-    Task<CostPerPrintResult> CalculateAsync(Guid printJobId, CancellationToken cancellationToken = default);
-
-    /// <summary>
-    /// Calculates cost breakdowns for all print jobs associated with a specific spool.
-    /// Useful for spool-level COGS reporting.
-    /// </summary>
-    /// <param name="spoolId">The unique identifier of the spool.</param>
-    /// <param name="cancellationToken">Optional cancellation token.</param>
-    /// <returns>
-    /// A list of <see cref="CostPerPrintResult"/> for each print job on the spool.
-    /// Jobs with missing cost data will include warnings.
-    /// </returns>
-    Task<IReadOnlyList<CostPerPrintResult>> CalculateBySpoolAsync(Guid spoolId, CancellationToken cancellationToken = default);
-}
-
-/// <summary>
-/// Result of a cost-per-print calculation. Contains the cost breakdown
-/// and any warnings about missing or incomplete cost data.
-/// </summary>
-public class CostPerPrintResult
-{
-    /// <summary>The print job identifier this result belongs to.</summary>
-    public Guid PrintJobId { get; set; }
-
-    /// <summary>Human-readable name of the print job.</summary>
-    public string PrintName { get; set; } = string.Empty;
-
-    /// <summary>The spool identifier that provided filament.</summary>
-    public Guid SpoolId { get; set; }
-
-    /// <summary>Serial number of the spool.</summary>
-    public string SpoolSerial { get; set; } = string.Empty;
-
-    /// <summary>Total millimeters of filament extruded.</summary>
-    public decimal MmExtruded { get; set; }
-
-    /// <summary>Derived grams consumed for this print.</summary>
-    public decimal GramsDerived { get; set; }
-
-    /// <summary>The spool's purchase price. Null if not recorded.</summary>
-    public decimal? PurchasePrice { get; set; }
-
-    /// <summary>The spool's total weight in grams when full.</summary>
-    public decimal? WeightTotalGrams { get; set; }
-
-    /// <summary>Cost per gram of filament. Null if purchase price or total weight is missing.</summary>
-    public decimal? CostPerGram { get; set; }
-
-    /// <summary>Calculated cost of this print job. Null if cost data is incomplete.</summary>
-    public decimal? CostPerPrint { get; set; }
-
-    /// <summary>
-    /// Warnings about missing or incomplete data that prevented a full calculation.
-    /// Empty when all data is available and the calculation succeeded.
-    /// </summary>
-    public List<string> Warnings { get; set; } = new();
-}

backend/Infrastructure/Services/CostPerPrintService.cs

@@ -1,158 +0,0 @@
-using Extrudex.Domain.Interfaces;
-using Extrudex.Infrastructure.Data;
-using Microsoft.EntityFrameworkCore;
-using Microsoft.Extensions.Logging;
-
-namespace Extrudex.Infrastructure.Services;
-
-/// <summary>
-/// Calculates the cost of goods sold (COGS) per print job using the spool's
-/// purchase price and the print job's derived grams consumed.
-///
-/// Formula:
-///   cost_per_gram = purchase_price / weight_total_grams
-///   cost_per_print = grams_derived × cost_per_gram
-///
-/// Handles missing data gracefully — if the spool has no purchase price or
-/// weight recorded, the result includes warnings and null cost fields
-/// instead of throwing exceptions.
-/// </summary>
-public class CostPerPrintService : ICostPerPrintService
-{
-    private readonly ExtrudexDbContext _dbContext;
-    private readonly ILogger<CostPerPrintService> _logger;
-
-    /// <summary>
-    /// Initializes a new instance of the <see cref="CostPerPrintService"/> class.
-    /// </summary>
-    /// <param name="dbContext">The database context for data access.</param>
-    /// <param name="logger">The logger for diagnostic output.</param>
-    public CostPerPrintService(ExtrudexDbContext dbContext, ILogger<CostPerPrintService> logger)
-    {
-        _dbContext = dbContext;
-        _logger = logger;
-    }
-
-    /// <inheritdoc />
-    public async Task<CostPerPrintResult> CalculateAsync(Guid printJobId, CancellationToken cancellationToken = default)
-    {
-        _logger.LogDebug("Calculating cost per print for job {PrintJobId}", printJobId);
-
-        var job = await _dbContext.PrintJobs
-            .Include(j => j.Spool)
-            .ThenInclude(s => s!.MaterialBase)
-            .FirstOrDefaultAsync(j => j.Id == printJobId, cancellationToken);
-
-        if (job is null)
-        {
-            _logger.LogWarning("Print job {PrintJobId} not found for cost calculation", printJobId);
-            return new CostPerPrintResult
-            {
-                PrintJobId = printJobId,
-                Warnings = new List<string> { $"Print job with ID '{printJobId}' not found." }
-            };
-        }
-
-        return BuildResult(job);
-    }
-
-    /// <inheritdoc />
-    public async Task<IReadOnlyList<CostPerPrintResult>> CalculateBySpoolAsync(
-        Guid spoolId, CancellationToken cancellationToken = default)
-    {
-        _logger.LogDebug("Calculating cost per print for all jobs on spool {SpoolId}", spoolId);
-
-        var jobs = await _dbContext.PrintJobs
-            .Include(j => j.Spool)
-            .ThenInclude(s => s!.MaterialBase)
-            .Where(j => j.SpoolId == spoolId)
-            .OrderByDescending(j => j.CreatedAt)
-            .ToListAsync(cancellationToken);
-
-        if (jobs.Count == 0)
-        {
-            _logger.LogDebug("No print jobs found for spool {SpoolId}", spoolId);
-            return Array.Empty<CostPerPrintResult>();
-        }
-
-        return jobs.Select(BuildResult).ToList();
-    }
-
-    /// <summary>
-    /// Builds a <see cref="CostPerPrintResult"/> from a print job entity.
-    /// Computes cost_per_gram and cost_per_print when all required data is available.
-    /// Populates warnings when data is missing or incomplete.
-    /// </summary>
-    /// <param name="job">The print job entity with Spool navigation loaded.</param>
-    /// <returns>A cost calculation result with breakdown and any warnings.</returns>
-    private CostPerPrintResult BuildResult(Domain.Entities.PrintJob job)
-    {
-        var warnings = new List<string>();
-        var spool = job.Spool;
-
-        // Map what we always have
-        var result = new CostPerPrintResult
-        {
-            PrintJobId = job.Id,
-            PrintName = job.PrintName,
-            SpoolId = job.SpoolId,
-            SpoolSerial = spool?.SpoolSerial ?? string.Empty,
-            MmExtruded = job.MmExtruded,
-            GramsDerived = job.GramsDerived,
-        };
-
-        // Guard: spool must be loaded
-        if (spool is null)
-        {
-            warnings.Add("Spool data is not available for this print job.");
-            result.Warnings = warnings;
-            return result;
-        }
-
-        // Capture purchase price
-        result.PurchasePrice = spool.PurchasePrice;
-        result.WeightTotalGrams = spool.WeightTotalGrams;
-
-        // Check for missing purchase price
-        if (!spool.PurchasePrice.HasValue)
-        {
-            warnings.Add(
-                "Spool purchase price is not recorded. Cost calculation requires a purchase price on the spool.");
-        }
-
-        // Check for zero or negative weight — prevents division by zero
-        if (spool.WeightTotalGrams <= 0)
-        {
-            warnings.Add(
-                "Spool total weight is zero or not recorded. Cost calculation requires a positive weight_total_grams on the spool.");
-        }
-
-        // Check for zero grams derived
-        if (job.GramsDerived <= 0)
-        {
-            warnings.Add(
-                "Derived grams consumed is zero. Ensure mm_extruded, filament diameter, and material density are recorded for this print job.");
-        }
-
-        // If all data is present and valid, compute the cost
-        if (spool.PurchasePrice.HasValue && spool.WeightTotalGrams > 0 && job.GramsDerived > 0)
-        {
-            var costPerGram = spool.PurchasePrice.Value / spool.WeightTotalGrams;
-            result.CostPerGram = Math.Round(costPerGram, 6);
-            result.CostPerPrint = Math.Round(job.GramsDerived * costPerGram, 4);
-
-            _logger.LogDebug(
-                "Cost calculated for job {PrintJobId}: {GramsDerived}g × {CostPerGram:C}/g = {CostPerPrint:C}",
-                job.Id, job.GramsDerived, result.CostPerGram, result.CostPerPrint);
-        }
-        else
-        {
-            _logger.LogDebug(
-                "Cost calculation incomplete for job {PrintJobId}: missing data (warnings: {WarningCount})",
-                job.Id, warnings.Count);
-        }
-
-        result.Warnings = warnings;
-        return result;
-    }
-}

backend/Program.cs

@@ -50,9 +50,6 @@ builder.Services.AddSwaggerGen(c =>
 // ── QR Code Generation ──────────────────────────────────────
 builder.Services.AddSingleton<IQrCodeService, QrCodeService>();
 
-// ── Cost Per Print Calculation ─────────────────────────────
-builder.Services.AddScoped<ICostPerPrintService, CostPerPrintService>();
-
 // ── FluentValidation ──────────────────────────────────────
 // Registers all validators from the API assembly into DI.
 builder.Services.AddValidatorsFromAssembly(Assembly.GetExecutingAssembly());

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "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",
@@ -326,6 +327,21 @@
         "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,6 +11,7 @@
   "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,11 +1,15 @@
 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

@@ -0,0 +1,78 @@
+<!-- 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

@@ -0,0 +1,150 @@
+/**
+ * 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

@@ -0,0 +1,68 @@
+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-table/filament-table.component.html

@@ -1,4 +1,4 @@
-<!-- Filament Inventory Table — with low stock indicators -->
+<!-- Filament Inventory Table — with low stock indicators and delete actions -->
 <div class="filament-table-container" role="region" aria-label="Filament inventory">
 
   <!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
@@ -106,10 +106,32 @@
       </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>
 

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

@@ -235,6 +235,20 @@ 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,6 +3,7 @@ import {
   Component,
   Input,
   computed,
+  inject,
   signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,12 +13,21 @@ 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 { 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 =
@@ -27,7 +37,8 @@ export type FilamentColumn =
   | 'serial'
   | 'remaining'
   | 'stockLevel'
-  | 'status';
+  | 'status'
+  | 'actions';
 
 @Component({
   selector: 'app-filament-table',
@@ -40,16 +51,26 @@ export type FilamentColumn =
     MatProgressBarModule,
     MatTooltipModule,
     MatSortModule,
+    MatButtonModule,
+    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[]>([]);
 
-  /** Columns to display — defaults to all columns */
+  /** Whether a delete operation is in progress */
+  readonly deleting = signal<string | null>(null);
+
+  /** Columns to display — defaults to all columns including actions */
   @Input()
   set displayedColumns(cols: FilamentColumn[]) {
     this._displayedColumns.set(cols);
@@ -65,6 +86,7 @@ export class FilamentTableComponent {
     'remaining',
     'stockLevel',
     'status',
+    'actions',
   ]);
 
   /** Default columns for template binding */
@@ -252,6 +274,52 @@ 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;
 

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

@@ -0,0 +1,37 @@
+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}`);
+  }
+}