CUB-33: Integrate Moonraker filament usage polling with UsageLog persistence

Reviewed-on: #31
Reviewed-by: Joshua <joshua@cnjmail.com>

backend/API/Controllers/FilamentsController.cs

@@ -1,6 +1,7 @@
 using Extrudex.API.DTOs;
 using Extrudex.API.DTOs.Filaments;
 using Extrudex.Domain.Entities;
+using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Data;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
@@ -17,16 +18,22 @@ namespace Extrudex.API.Controllers;
 public class FilamentsController : ControllerBase
 {
     private readonly ExtrudexDbContext _dbContext;
+    private readonly ILowStockDetector _lowStockDetector;
     private readonly ILogger<FilamentsController> _logger;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="FilamentsController"/> class.
     /// </summary>
     /// <param name="dbContext">The database context for data access.</param>
+    /// <param name="lowStockDetector">The low-stock detection service for filament alerts.</param>
     /// <param name="logger">The logger for diagnostic output.</param>
-    public FilamentsController(ExtrudexDbContext dbContext, ILogger<FilamentsController> logger)
+    public FilamentsController(
+        ExtrudexDbContext dbContext,
+        ILowStockDetector lowStockDetector,
+        ILogger<FilamentsController> logger)
     {
         _dbContext = dbContext;
+        _lowStockDetector = lowStockDetector;
         _logger = logger;
     }
 
@@ -95,7 +102,7 @@ public class FilamentsController : ControllerBase
             .OrderByDescending(s => s.CreatedAt)
             .Skip((pageNumber - 1) * pageSize)
             .Take(pageSize)
-            .Select(s => MapToFilamentResponse(s))
+            .Select(s => MapToFilamentResponse(s, _lowStockDetector))
             .ToListAsync();
 
         var response = new PagedResponse<FilamentResponse>
@@ -136,7 +143,7 @@ public class FilamentsController : ControllerBase
             return NotFound(new { error = $"Filament with ID '{id}' not found." });
         }
 
-        return Ok(MapToFilamentResponse(spool));
+        return Ok(MapToFilamentResponse(spool, _lowStockDetector));
     }
 
     /// <summary>
@@ -211,7 +218,7 @@ public class FilamentsController : ControllerBase
         if (entity.MaterialModifierId.HasValue)
             await _dbContext.Entry(entity).Reference(s => s.MaterialModifier).LoadAsync();
 
-        var response = MapToFilamentResponse(entity);
+        var response = MapToFilamentResponse(entity, _lowStockDetector);
         return CreatedAtAction(nameof(GetFilament), new { id = entity.Id }, response);
     }
 
@@ -292,7 +299,37 @@ public class FilamentsController : ControllerBase
         if (entity.MaterialModifierId.HasValue)
             await _dbContext.Entry(entity).Reference(s => s.MaterialModifier).LoadAsync();
 
-        return Ok(MapToFilamentResponse(entity));
+        return Ok(MapToFilamentResponse(entity, _lowStockDetector));
+    }
+
+    /// <summary>
+    /// Gets only the filament spools that are flagged as low stock.
+    /// A spool is considered low stock when its remaining weight percentage
+    /// is at or below the configured threshold.
+    /// </summary>
+    /// <returns>A list of low-stock filament spools with alert metadata.</returns>
+    /// <response code="200">Returns the list of low-stock filament spools.</response>
+    [HttpGet("low-stock")]
+    [ProducesResponseType(typeof(List<FilamentResponse>), StatusCodes.Status200OK)]
+    public async Task<ActionResult<List<FilamentResponse>>> GetLowStockFilaments()
+    {
+        _logger.LogDebug("Getting low-stock filaments (threshold: {Threshold}%)",
+            _lowStockDetector.LowStockThresholdPercent);
+
+        var spools = await _dbContext.Spools
+            .Include(s => s.MaterialBase)
+            .Include(s => s.MaterialFinish)
+            .Include(s => s.MaterialModifier)
+            .Where(s => s.IsActive)
+            .OrderByDescending(s => s.CreatedAt)
+            .ToListAsync();
+
+        var lowStockItems = spools
+            .Where(s => _lowStockDetector.IsLowStock(s.WeightRemainingGrams, s.WeightTotalGrams))
+            .Select(s => MapToFilamentResponse(s, _lowStockDetector))
+            .ToList();
+
+        return Ok(lowStockItems);
     }
 
     /// <summary>
@@ -361,10 +398,12 @@ public class FilamentsController : ControllerBase
     /// Maps a Spool domain entity to a FilamentResponse DTO.
     /// Denormalizes material names for display convenience.
     /// Populates the QrCodeUrl for easy frontend access to the spool's QR code.
+    /// Calculates low-stock status and remaining weight percentage.
     /// </summary>
     /// <param name="s">The spool entity to map.</param>
-    /// <returns>A FilamentResponse DTO with denormalized material names and QR code URL.</returns>
-    private static FilamentResponse MapToFilamentResponse(Spool s) => new()
+    /// <param name="lowStockDetector">The low-stock detection service for computing alert flags.</param>
+    /// <returns>A FilamentResponse DTO with denormalized material names, QR code URL, and low-stock metadata.</returns>
+    private static FilamentResponse MapToFilamentResponse(Spool s, ILowStockDetector lowStockDetector) => new()
     {
         Id = s.Id,
         MaterialBaseId = s.MaterialBaseId,
@@ -387,6 +426,8 @@ public class FilamentsController : ControllerBase
         StorageLocation = s.StorageLocation,
         CreatedAt = s.CreatedAt,
         UpdatedAt = s.UpdatedAt,
-        QrCodeUrl = $"/api/qr/spool/{s.Id}"
+        QrCodeUrl = $"/api/qr/spool/{s.Id}",
+        IsLowStock = lowStockDetector.IsLowStock(s.WeightRemainingGrams, s.WeightTotalGrams),
+        RemainingWeightPercent = lowStockDetector.GetRemainingWeightPercent(s.WeightRemainingGrams, s.WeightTotalGrams)
     };
 }

backend/API/DTOs/Filaments/FilamentDtos.cs

@@ -76,6 +76,19 @@ public class FilamentResponse
     /// Encodes a deep link to the spool's detail page.
     /// </summary>
     public string QrCodeUrl { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Whether this spool is flagged as low stock — remaining weight is at or
+    /// below the configured low-stock threshold percentage.
+    /// Useful for UI alerts and inventory dashboards.
+    /// </summary>
+    public bool IsLowStock { get; set; }
+
+    /// <summary>
+    /// Remaining filament weight as a percentage of total weight (0–100).
+    /// Rounded to one decimal place. Returns 0 if total weight is zero.
+    /// </summary>
+    public decimal RemainingWeightPercent { get; set; }
 }
 
 /// <summary>

backend/API/Jobs/FilamentUsageSyncJob.cs

@@ -1,5 +1,6 @@
 using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Configuration;
+using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
@@ -15,25 +16,30 @@ namespace Extrudex.API.Jobs;
 /// Configuration is bound from the "FilamentUsageSync" section in
 /// appsettings.json. Set Enabled=false to disable without removing
 /// the service registration.
+/// 
+/// Uses an IServiceScopeFactory to resolve scoped dependencies
+/// (IFilamentUsageSyncService, IUsageLogService) on each sync cycle,
+/// avoiding captive-dependency issues from injecting scoped services
+/// into the singleton BackgroundService lifetime.
 /// </summary>
 public class FilamentUsageSyncJob : BackgroundService
 {
-    private readonly IFilamentUsageSyncService _syncService;
+    private readonly IServiceScopeFactory _scopeFactory;
     private readonly FilamentUsageSyncOptions _options;
     private readonly ILogger<FilamentUsageSyncJob> _logger;
 
     /// <summary>
     /// Creates a new FilamentUsageSyncJob.
     /// </summary>
-    /// <param name="syncService">The service that performs the actual sync logic.</param>
+    /// <param name="scopeFactory">Factory for creating DI scopes to resolve scoped services.</param>
     /// <param name="options">Configuration options for polling interval and timeouts.</param>
     /// <param name="logger">Logger for diagnostic output.</param>
     public FilamentUsageSyncJob(
-        IFilamentUsageSyncService syncService,
+        IServiceScopeFactory scopeFactory,
         IOptions<FilamentUsageSyncOptions> options,
         ILogger<FilamentUsageSyncJob> logger)
     {
-        _syncService = syncService;
+        _scopeFactory = scopeFactory;
         _options = options.Value;
         _logger = logger;
     }
@@ -57,8 +63,10 @@ public class FilamentUsageSyncJob : BackgroundService
         while (!stoppingToken.IsCancellationRequested)
         {
             try
-            {
-                var syncedCount = await _syncService.SyncAllAsync(stoppingToken);
+                       {
+                using var scope = _scopeFactory.CreateScope();
+                var syncService = scope.ServiceProvider.GetRequiredService<IFilamentUsageSyncService>();
+                var syncedCount = await syncService.SyncAllAsync(stoppingToken);
 
                 _logger.LogInformation(
                     "Filament usage sync completed — {SyncedCount} printer(s) synced. Next sync in {Interval}",

backend/API/Jobs/MoonrakerPrinterSyncJob.cs

@@ -1,5 +1,6 @@
 using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Configuration;
+using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
@@ -19,22 +20,22 @@ namespace Extrudex.API.Jobs;
 /// </summary>
 public class MoonrakerPrinterSyncJob : BackgroundService
 {
-    private readonly IMoonrakerPrinterSyncService _syncService;
+    private readonly IServiceScopeFactory _scopeFactory;
     private readonly MoonrakerPrinterSyncOptions _options;
     private readonly ILogger<MoonrakerPrinterSyncJob> _logger;
 
     /// <summary>
     /// Creates a new MoonrakerPrinterSyncJob.
     /// </summary>
-    /// <param name="syncService">The service that performs the actual sync logic.</param>
+    /// <param name="scopeFactory">Factory for creating DI scopes to resolve scoped services.</param>
     /// <param name="options">Configuration options for polling interval and timeouts.</param>
     /// <param name="logger">Logger for diagnostic output.</param>
     public MoonrakerPrinterSyncJob(
-        IMoonrakerPrinterSyncService syncService,
+        IServiceScopeFactory scopeFactory,
         IOptions<MoonrakerPrinterSyncOptions> options,
         ILogger<MoonrakerPrinterSyncJob> logger)
     {
-        _syncService = syncService;
+        _scopeFactory = scopeFactory;
         _options = options.Value;
         _logger = logger;
     }
@@ -59,7 +60,9 @@ public class MoonrakerPrinterSyncJob : BackgroundService
         {
             try
             {
-                var syncedCount = await _syncService.SyncAllAsync(stoppingToken);
+                using var scope = _scopeFactory.CreateScope();
+                var syncService = scope.ServiceProvider.GetRequiredService<IMoonrakerPrinterSyncService>();
+                var syncedCount = await syncService.SyncAllAsync(stoppingToken);
 
                 _logger.LogInformation(
                     "Moonraker printer sync completed — {SyncedCount} printer(s) synced. Next sync in {Interval}",

backend/Domain/Interfaces/ILowStockDetector.cs

@@ -0,0 +1,39 @@
+namespace Extrudex.Domain.Interfaces;
+
+/// <summary>
+/// Detects low-stock filament spools based on configurable weight thresholds.
+/// Determines whether a spool's remaining filament falls below a critical level
+/// so that alerts and API flags can be surfaced to the user.
+/// </summary>
+public interface ILowStockDetector
+{
+    /// <summary>
+    /// Determines whether a spool is considered low stock based on its remaining
+    /// weight relative to its total weight and the configured threshold percentage.
+    /// </summary>
+    /// <param name="weightRemainingGrams">The current remaining weight in grams.</param>
+    /// <param name="weightTotalGrams">The total spool weight in grams when full.</param>
+    /// <returns>
+    /// <c>true</c> if the remaining weight percentage is at or below the configured
+    /// low-stock threshold; <c>false</c> otherwise. Returns <c>false</c> for spools
+    /// with zero total weight to avoid division-by-zero.
+    /// </returns>
+    bool IsLowStock(decimal weightRemainingGrams, decimal weightTotalGrams);
+
+    /// <summary>
+    /// Calculates the remaining weight as a percentage of total weight.
+    /// </summary>
+    /// <param name="weightRemainingGrams">The current remaining weight in grams.</param>
+    /// <param name="weightTotalGrams">The total spool weight in grams when full.</param>
+    /// <returns>
+    /// A value between 0 and 100 representing the percentage of filament remaining.
+    /// Returns 0 if total weight is zero to avoid division-by-zero.
+    /// </returns>
+    decimal GetRemainingWeightPercent(decimal weightRemainingGrams, decimal weightTotalGrams);
+
+    /// <summary>
+    /// Gets the currently configured low-stock threshold percentage.
+    /// Useful for API responses so clients know what threshold is in effect.
+    /// </summary>
+    decimal LowStockThresholdPercent { get; }
+}

backend/Infrastructure/Services/FilamentUsageSyncService.cs

@@ -1,21 +1,24 @@
+using Extrudex.Domain.DTOs.Moonraker;
+using Extrudex.Domain.Entities;
 using Extrudex.Domain.Enums;
 using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Data;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Logging;
 
-namespace Extrudex.Infrastructure.Configuration;
+namespace Extrudex.Infrastructure.Services;
 
 /// <summary>
 /// Service that syncs filament usage data from Moonraker printers into the
 /// Extrudex database. Queries all active Moonraker printers, fetches their
-/// current filament usage metrics, and updates spool remaining weights and
-/// print job records.
+/// current filament usage metrics, persists usage entries to the UsageLog table,
+/// creates FilamentUsage records for completed jobs, and updates spool remaining weights.
 /// </summary>
 public class FilamentUsageSyncService : IFilamentUsageSyncService
 {
     private readonly ExtrudexDbContext _dbContext;
     private readonly IMoonrakerClient _moonrakerClient;
+    private readonly IUsageLogService _usageLogService;
     private readonly ILogger<FilamentUsageSyncService> _logger;
 
     /// <summary>
@@ -23,14 +26,17 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
     /// </summary>
     /// <param name="dbContext">The EF Core database context for persisting updates.</param>
     /// <param name="moonrakerClient">The Moonraker HTTP client for fetching printer data.</param>
+    /// <param name="usageLogService">The usage log service for persisting usage entries.</param>
     /// <param name="logger">Logger for diagnostic output.</param>
     public FilamentUsageSyncService(
         ExtrudexDbContext dbContext,
         IMoonrakerClient moonrakerClient,
+        IUsageLogService usageLogService,
         ILogger<FilamentUsageSyncService> logger)
     {
         _dbContext = dbContext;
         _moonrakerClient = moonrakerClient;
+        _usageLogService = usageLogService;
         _logger = logger;
     }
 
@@ -43,7 +49,9 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
             .Where(p => p.IsActive && p.ConnectionType == ConnectionType.Moonraker)
             .Include(p => p.AmsUnits)
                 .ThenInclude(u => u.Slots)
-                    .ThenInclude(s => s.Spool)
+                    .ThenInclude(s => s.Spool!)
+                        .ThenInclude(s => s.MaterialBase)
+            .Include(p => p.PrintJobs)
             .ToListAsync(cancellationToken);
 
         if (printers.Count == 0)
@@ -60,33 +68,18 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
         {
             try
             {
-                var usageData = await _moonrakerClient.GetFilamentUsageAsync(
-                    printer.HostnameOrIp,
-                    printer.Port,
-                    printer.ApiKey,
-                    cancellationToken);
-
-                if (usageData.Count == 0)
-                {
-                    _logger.LogWarning(
-                        "No usage data returned from printer {PrinterName} ({Host}:{Port})",
-                        printer.Name, printer.HostnameOrIp, printer.Port);
-                    continue;
-                }
-
-                // Update spool remaining weights from AMS data
-                UpdateSpoolWeights(printer, usageData);
-
-                // Mark printer as seen and idle (reachable = idle, not printing)
-                printer.LastSeenAt = DateTime.UtcNow;
-                printer.Status = PrinterStatus.Idle;
-
+                await SyncPrinterAsync(printer, cancellationToken);
                 syncedCount++;
-                _logger.LogInformation(
-                    "Successfully synced filament usage from printer {PrinterName}",
-                    printer.Name);
             }
-            catch (Exception ex)
+            catch (HttpRequestException ex)
+            {
+                _logger.LogError(ex,
+                    "Connection error syncing filament usage from printer {PrinterName} ({Host}:{Port}) — printer may be offline",
+                    printer.Name, printer.HostnameOrIp, printer.Port);
+
+                printer.Status = PrinterStatus.Offline;
+            }
+            catch (Exception ex) when (ex is not OperationCanceledException)
             {
                 _logger.LogError(ex,
                     "Error syncing filament usage from printer {PrinterName} ({Host}:{Port})",
@@ -103,12 +96,168 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
         return syncedCount;
     }
 
+    /// <summary>
+    /// Syncs a single Moonraker printer: fetches print stats and history,
+    /// persists usage data to UsageLog and FilamentUsage tables, and
+    /// updates spool remaining weights.
+    /// </summary>
+    private async Task SyncPrinterAsync(Printer printer, CancellationToken cancellationToken)
+    {
+        // Step 1: Fetch current print stats for real-time filament usage
+        var printStats = await _moonrakerClient.GetPrintStatsAsync(
+            printer.HostnameOrIp, printer.Port, printer.ApiKey, cancellationToken);
+
+        // Step 2: Fetch usage dictionary for backward-compatible metrics
+        var usageData = await _moonrakerClient.GetFilamentUsageAsync(
+            printer.HostnameOrIp, printer.Port, printer.ApiKey, cancellationToken);
+
+        // Step 3: Update printer status based on print stats
+        if (printStats != null)
+        {
+            printer.Status = printStats.State.ToLowerInvariant() switch
+            {
+                "printing" => PrinterStatus.Printing,
+                "paused" => PrinterStatus.Paused,
+                "complete" => PrinterStatus.Idle,
+                "standby" => PrinterStatus.Idle,
+                "cancelled" => PrinterStatus.Idle,
+                "error" => PrinterStatus.Error,
+                _ => printer.Status
+            };
+        }
+
+        printer.LastSeenAt = DateTime.UtcNow;
+
+        // Step 4: Update spool remaining weights from AMS data
+        UpdateSpoolWeights(printer, usageData);
+
+        // Step 5: If there's filament usage from print stats, persist it
+        if (printStats != null && printStats.FilamentUsedMm > 0)
+        {
+            await PersistFilamentUsageAsync(printer, printStats, cancellationToken);
+        }
+        else if (usageData.TryGetValue("mm_extruded", out var mmExtruded) && mmExtruded > 0)
+        {
+            // Fall back to dictionary metrics if print stats aren't available
+            _logger.LogInformation(
+                "Printer {PrinterName} reports {MmExtruded}mm filament extruded in latest job (from usage dictionary)",
+                printer.Name, mmExtruded);
+        }
+
+        _logger.LogInformation(
+            "Successfully synced filament usage from printer {PrinterName}",
+            printer.Name);
+    }
+
+    /// <summary>
+    /// Persists filament usage data from print stats to the database.
+    /// Creates a FilamentUsage record and a UsageLog entry, and deducts
+    /// consumed grams from the spool's remaining weight.
+    /// </summary>
+    private async Task PersistFilamentUsageAsync(
+        Printer printer,
+        MoonrakerPrintStats printStats,
+        CancellationToken cancellationToken)
+    {
+        // Find the default spool for this printer
+        var defaultSpool = FindDefaultSpool(printer);
+
+        if (defaultSpool == null)
+        {
+            _logger.LogWarning(
+                "No default spool found for printer {PrinterName} — cannot persist filament usage of {MmExtruded}mm",
+                printer.Name, printStats.FilamentUsedMm);
+            return;
+        }
+
+        // Calculate derived grams
+        var gramsDerived = CalculateGrams(
+            printStats.FilamentUsedMm,
+            defaultSpool.FilamentDiameterMm,
+            defaultSpool.MaterialBase.DensityGperCm3);
+
+        if (gramsDerived <= 0)
+        {
+            _logger.LogDebug(
+                "No grams derived for printer {PrinterName} — skipping usage persistence",
+                printer.Name);
+            return;
+        }
+
+        // Deduct from spool remaining weight (floor at 0)
+        var previousWeight = defaultSpool.WeightRemainingGrams;
+        defaultSpool.WeightRemainingGrams = Math.Max(0, defaultSpool.WeightRemainingGrams - gramsDerived);
+
+        _logger.LogInformation(
+            "Deducted {Grams:F1}g from spool {SpoolSerial} (was {Previous:F1}g, now {Current:F1}g) for printer {PrinterName}",
+            gramsDerived, defaultSpool.SpoolSerial, previousWeight, defaultSpool.WeightRemainingGrams, printer.Name);
+
+        // Check if we already have a recent FilamentUsage for this printer
+        // to avoid double-counting on repeated poll cycles for the same job
+        var recentUsageThreshold = DateTime.UtcNow.AddMinutes(-10);
+        var existingRecentUsage = await _dbContext.FilamentUsages
+            .Where(fu => fu.PrinterId == printer.Id && fu.RecordedAt >= recentUsageThreshold)
+            .AnyAsync(cancellationToken);
+
+        if (existingRecentUsage)
+        {
+            _logger.LogDebug(
+                "Recent FilamentUsage record exists for printer {PrinterName} — skipping to avoid double-counting",
+                printer.Name);
+            return;
+        }
+
+        // Create a FilamentUsage entity for the consumption
+        var filamentUsage = new FilamentUsage
+        {
+            SpoolId = defaultSpool.Id,
+            PrinterId = printer.Id,
+            GramsUsed = gramsDerived,
+            MmExtruded = printStats.FilamentUsedMm,
+            RecordedAt = DateTime.UtcNow,
+            Notes = $"Auto-recorded from Moonraker print stats (state: {printStats.State})"
+        };
+
+        // If there's a matching print job, link it
+        var matchingJob = FindMatchingPrintJob(printer, printStats);
+        if (matchingJob != null)
+        {
+            filamentUsage.PrintJobId = matchingJob.Id;
+            filamentUsage.PrintJob = matchingJob;
+        }
+
+        _dbContext.FilamentUsages.Add(filamentUsage);
+
+        // Also persist to UsageLog via the usage logging service
+        try
+        {
+            await _usageLogService.RecordUsageAsync(
+                spoolId: defaultSpool.Id,
+                gramsUsed: gramsDerived,
+                dataSource: DataSource.Moonraker,
+                printerId: printer.Id,
+                printJobId: matchingJob?.Id,
+                mmExtruded: printStats.FilamentUsedMm,
+                notes: $"Auto-recorded from Moonraker print stats (state: {printStats.State})");
+
+            _logger.LogInformation(
+                "Persisted usage log: {Grams:F1}g / {Mm:F1}mm for spool {SpoolSerial} on printer {PrinterName}",
+                gramsDerived, printStats.FilamentUsedMm, defaultSpool.SpoolSerial, printer.Name);
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex,
+                "Failed to persist usage log for printer {PrinterName} — FilamentUsage entity was still created",
+                printer.Name);
+        }
+    }
+
     /// <summary>
     /// Updates spool remaining weights based on usage data received from Moonraker.
     /// For printers with AMS units, updates the remaining weight on each slot's spool.
     /// </summary>
     private void UpdateSpoolWeights(
-        Domain.Entities.Printer printer,
+        Printer printer,
         Dictionary<string, decimal> usageData)
     {
         // Update AMS slot remaining weights if available
@@ -122,7 +271,7 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
                     slot.Spool.WeightRemainingGrams = slot.RemainingWeightG.Value;
 
                     _logger.LogDebug(
-                        "Updated spool {SpoolSerial} remaining weight to {Weight}g",
+                        "Updated spool {SpoolSerial} remaining weight to {Weight}g from AMS data",
                         slot.Spool.SpoolSerial, slot.RemainingWeightG.Value);
                 }
             }
@@ -136,4 +285,56 @@ public class FilamentUsageSyncService : IFilamentUsageSyncService
                 printer.Name, mmExtruded);
         }
     }
+
+    /// <summary>
+    /// Finds the default spool for a printer. Returns the first active, non-archived spool
+    /// loaded in an AMS slot, or null if no spool is available.
+    /// </summary>
+    private static Spool? FindDefaultSpool(Printer printer)
+    {
+        foreach (var amsUnit in printer.AmsUnits)
+        {
+            foreach (var slot in amsUnit.Slots)
+            {
+                if (slot.Spool != null && slot.Spool.IsActive && !slot.Spool.IsArchived)
+                {
+                    return slot.Spool;
+                }
+            }
+        }
+
+        return null;
+    }
+
+    /// <summary>
+    /// Finds a PrintJob on this printer that matches the current print stats.
+    /// Matches by filename and non-completed status to avoid double-linking.
+    /// </summary>
+    private PrintJob? FindMatchingPrintJob(Printer printer, MoonrakerPrintStats printStats)
+    {
+        if (string.IsNullOrEmpty(printStats.Filename))
+            return null;
+
+        return printer.PrintJobs
+            .FirstOrDefault(pj => pj.PrintName == printStats.Filename
+                && pj.Status != JobStatus.Completed
+                && pj.Status != JobStatus.Cancelled);
+    }
+
+    /// <summary>
+    /// Calculates derived grams from millimeters extruded using the standard formula:
+    /// grams = mm_extruded × cross_section_area × material_density
+    /// where cross_section_area = π × (diameter / 2)²
+    /// </summary>
+    private static decimal CalculateGrams(decimal mmExtruded, decimal diameterMm, decimal densityGperCm3)
+    {
+        if (mmExtruded <= 0) return 0m;
+
+        var radiusCm = (double)diameterMm / 2.0 / 10.0; // mm to cm
+        var crossSectionAreaCm2 = Math.PI * radiusCm * radiusCm;
+        var mmToCm = (double)mmExtruded / 10.0;
+
+        var grams = mmToCm * crossSectionAreaCm2 * (double)densityGperCm3;
+        return (decimal)grams;
+    }
 }

backend/Infrastructure/Services/LowStockDetector.cs

@@ -0,0 +1,95 @@
+using Extrudex.Domain.Interfaces;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace Extrudex.Infrastructure.Services;
+
+/// <summary>
+/// Detects low-stock filament spools by comparing the remaining weight percentage
+/// against a configurable threshold. The threshold can be set via:
+///   1. EXTRUDEX_LOW_STOCK_THRESHOLD env var (highest priority, e.g. "25")
+///   2. FilamentAlerts:LowStockThresholdPercent in appsettings.json
+///   3. Default: 20% (a standard spool is "low" when ≤20% remains)
+/// </summary>
+public class LowStockDetector : ILowStockDetector
+{
+    private readonly ILogger<LowStockDetector> _logger;
+
+    /// <summary>
+    /// The percentage threshold below which a spool is considered low stock.
+    /// For example, 20 means a spool is "low" when ≤20% of its filament remains.
+    /// </summary>
+    public decimal LowStockThresholdPercent { get; }
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="LowStockDetector"/> class.
+    /// Reads the low-stock threshold from configuration with env var override support.
+    /// </summary>
+    /// <param name="configuration">Application configuration for threshold settings.</param>
+    /// <param name="logger">Logger for diagnostic output.</param>
+    public LowStockDetector(IConfiguration configuration, ILogger<LowStockDetector> logger)
+    {
+        _logger = logger;
+
+        // Priority: env var > appsettings > default (20%)
+        var envThreshold = Environment.GetEnvironmentVariable("EXTRUDEX_LOW_STOCK_THRESHOLD");
+        var configThreshold = configuration.GetValue<decimal?>("FilamentAlerts:LowStockThresholdPercent");
+
+        if (!string.IsNullOrEmpty(envThreshold) && decimal.TryParse(envThreshold, out var parsedEnv))
+        {
+            LowStockThresholdPercent = Math.Clamp(parsedEnv, 0m, 100m);
+            _logger.LogInformation(
+                "Low-stock threshold set from env var EXTRUDEX_LOW_STOCK_THRESHOLD: {Threshold}%",
+                LowStockThresholdPercent);
+        }
+        else if (configThreshold.HasValue)
+        {
+            LowStockThresholdPercent = Math.Clamp(configThreshold.Value, 0m, 100m);
+            _logger.LogInformation(
+                "Low-stock threshold set from config FilamentAlerts:LowStockThresholdPercent: {Threshold}%",
+                LowStockThresholdPercent);
+        }
+        else
+        {
+            LowStockThresholdPercent = 20m;
+            _logger.LogInformation(
+                "Low-stock threshold using default: {Threshold}%", LowStockThresholdPercent);
+        }
+    }
+
+    /// <inheritdoc />
+    public bool IsLowStock(decimal weightRemainingGrams, decimal weightTotalGrams)
+    {
+        if (weightTotalGrams <= 0m)
+        {
+            _logger.LogDebug(
+                "Spool with total weight {Total}g cannot be evaluated for low stock — treating as not low",
+                weightTotalGrams);
+            return false;
+        }
+
+        var remainingPercent = GetRemainingWeightPercent(weightRemainingGrams, weightTotalGrams);
+        var isLow = remainingPercent <= LowStockThresholdPercent;
+
+        if (isLow)
+        {
+            _logger.LogDebug(
+                "Spool is LOW STOCK: {Remaining}g / {Total}g = {Percent:F1}% (threshold: {Threshold}%)",
+                weightRemainingGrams, weightTotalGrams, remainingPercent, LowStockThresholdPercent);
+        }
+
+        return isLow;
+    }
+
+    /// <inheritdoc />
+    public decimal GetRemainingWeightPercent(decimal weightRemainingGrams, decimal weightTotalGrams)
+    {
+        if (weightTotalGrams <= 0m)
+            return 0m;
+
+        return Math.Round(
+            (weightRemainingGrams / weightTotalGrams) * 100m,
+            1,
+            MidpointRounding.AwayFromZero);
+    }
+}

backend/Infrastructure/Services/MoonrakerPrinterSyncService.cs

@@ -46,7 +46,7 @@ public class MoonrakerPrinterSyncService : IMoonrakerPrinterSyncService
             .Where(p => p.IsActive && p.ConnectionType == ConnectionType.Moonraker)
             .Include(p => p.AmsUnits)
                 .ThenInclude(u => u.Slots)
-                    .ThenInclude(s => s.Spool)
+                    .ThenInclude(s => s.Spool!)
                         .ThenInclude(s => s.MaterialBase)
             .Include(p => p.PrintJobs)
             .ToListAsync(cancellationToken);

backend/Program.cs

@@ -55,6 +55,9 @@ builder.Services.AddSingleton<IQrCodeService, QrCodeService>();
 // ── Cost Per Print Calculation ─────────────────────────────
 builder.Services.AddScoped<ICostPerPrintService, CostPerPrintService>();
 
+// ── Low Stock Detection ────────────────────────────────────
+builder.Services.AddSingleton<ILowStockDetector, LowStockDetector>();
+
 // ── Usage Logging ───────────────────────────────────────────
 builder.Services.AddScoped<IUsageLogService, UsageLogService>();
 

backend/appsettings.json

@@ -20,5 +20,8 @@
     "RequestTimeout": "00:00:15",
     "Enabled": true,
     "HistoryBatchSize": 25
+  },
+  "FilamentAlerts": {
+    "LowStockThresholdPercent": 20
   }
 }

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

@@ -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 */

frontend/src/app/components/inventory-summary/inventory-summary.component.html

@@ -87,6 +87,43 @@
       </div>
     </div>
 
+    <!-- Average Cost per Gram -->
+    @if (avgCostPerGram() !== null) {
+      <div class="summary-item metric-card"
+           matTooltip="Average cost per gram across priced, active spools"
+           matTooltipPosition="below">
+        <mat-icon aria-hidden="true" class="metric-icon">scale</mat-icon>
+        <div class="metric-content">
+          <span class="metric-value">${{ avgCostPerGram()!.toFixed(2) }}/g</span>
+          <span class="metric-label">Avg Cost/g</span>
+        </div>
+      </div>
+    }
+
+    <!-- Total Usage -->
+    <div class="summary-item metric-card"
+         matTooltip="Total filament used across all spools"
+         matTooltipPosition="below">
+      <mat-icon aria-hidden="true" class="metric-icon">trending_down</mat-icon>
+      <div class="metric-content">
+        <span class="metric-value">{{ formatWeight(totalGramsUsed()) }}</span>
+        <span class="metric-label">Total Used</span>
+      </div>
+    </div>
+
+    <!-- Estimated Used Value -->
+    @if (estimatedUsedValue() !== null) {
+      <div class="summary-item metric-card"
+           matTooltip="Estimated value of filament consumed"
+           matTooltipPosition="below">
+        <mat-icon aria-hidden="true" class="metric-icon">receipt_long</mat-icon>
+        <div class="metric-content">
+          <span class="metric-value">{{ formatCurrency(estimatedUsedValue()!) }}</span>
+          <span class="metric-label">Used Value</span>
+        </div>
+      </div>
+    }
+
     <!-- Overall Remaining Stock Bar -->
     <div class="summary-item metric-card stock-bar-card"
          matTooltip="{{ formatWeight(totalRemainingGrams()) }} of {{ formatWeight(totalCapacityGrams()) }} remaining"

frontend/src/app/components/inventory-summary/inventory-summary.component.ts

@@ -88,6 +88,37 @@ export class InventorySummaryComponent implements OnInit, OnDestroy {
       .reduce((sum, f) => sum + (f.purchasePrice ?? 0), 0)
   );
 
+  /** Computed: average cost per gram across active spools with a price */
+  readonly avgCostPerGram = computed(() => {
+    const priced = this.filaments().filter(
+      (f) => f.isActive && f.purchasePrice !== null && f.purchasePrice! > 0 && f.weightTotalGrams > 0
+    );
+    if (priced.length === 0) return null;
+    const totalCost = priced.reduce((sum, f) => sum + f.purchasePrice!, 0);
+    const totalWeight = priced.reduce((sum, f) => sum + f.weightTotalGrams, 0);
+    return totalWeight > 0 ? totalCost / totalWeight : null;
+  });
+
+  /** Computed: total grams used across all spools */
+  readonly totalGramsUsed = computed(() =>
+    this.filaments().reduce(
+      (sum, f) => sum + (f.weightTotalGrams - f.weightRemainingGrams),
+      0
+    )
+  );
+
+  /** Computed: total estimated value of used filament */
+  readonly estimatedUsedValue = computed(() => {
+    const priced = this.filaments().filter(
+      (f) => f.isActive && f.purchasePrice !== null && f.purchasePrice! > 0 && f.weightTotalGrams > 0
+    );
+    if (priced.length === 0) return null;
+    return priced.reduce((sum, f) => {
+      const usedFraction = (f.weightTotalGrams - f.weightRemainingGrams) / f.weightTotalGrams;
+      return sum + f.purchasePrice! * usedFraction;
+    }, 0);
+  });
+
   /** Computed: total remaining weight across all spools in grams */
   readonly totalRemainingGrams = computed(() =>
     this.filaments().reduce((sum, f) => sum + f.weightRemainingGrams, 0)
@@ -169,8 +200,8 @@ export class InventorySummaryComponent implements OnInit, OnDestroy {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
     }).format(value);
   }
 }

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/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',
+};