28 lines
1.2 KiB
HTML
28 lines
1.2 KiB
HTML
|
<!-- Inventory Summary Bar — filament metrics at a glance -->
|
||
|
|
<section class="inventory-summary" role="status" aria-label="Inventory summary">
|
||
|
|
|
||
|
|
<!-- Total Filament Count -->
|
||
|
|
<div class="summary-item" matTooltip="Total active spools in inventory" matTooltipPosition="below">
|
||
|
|
<mat-icon aria-hidden="true">inventory_2</mat-icon>
|
||
|
|
<span class="metric-value">{{ totalFilamentCount() }}</span>
|
||
|
|
<span class="metric-label">Spools</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Low Stock Count -->
|
||
|
|
<div class="summary-item low-stock"
|
||
|
|
[class.has-alerts]="hasLowStock()"
|
||
|
|
[class.has-critical]="hasCriticalStock()"
|
||
|
|
matTooltip="Spools below 25% remaining" matTooltipPosition="below">
|
||
|
|
<mat-icon aria-hidden="true">{{ hasCriticalStock() ? 'error' : hasLowStock() ? 'warning' : 'check_circle' }}</mat-icon>
|
||
|
|
<span class="metric-value">{{ lowStockCount() }}</span>
|
||
|
|
<span class="metric-label">Low Stock</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Estimated Total Value -->
|
||
|
|
<div class="summary-item" matTooltip="Estimated total value of active spools" matTooltipPosition="below">
|
||
|
|
<mat-icon aria-hidden="true">payments</mat-icon>
|
||
|
|
<span class="metric-value">{{ formatCurrency(estimatedTotalValue()) }}</span>
|
||
|
|
<span class="metric-label">Value</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|