CUB-42: Show filament cost and usage in UI
All checks were successful
Dev Build / build-test (pull_request) Successful in 2m9s

This commit is contained in:
2026-04-27 21:34:47 -04:00
parent 808d5f909d
commit f2d9b7f455
5 changed files with 181 additions and 3 deletions

View File

@@ -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"