CUB-41: Add low stock indicators to filament UI

2026-04-26 14:27:08 +00:00
parent 230c3b295d
commit 3d67610575
34 changed files with 10758 additions and 0 deletions
--- a/frontend/src/app/components/filament-table/filament-table.component.scss
+++ b/frontend/src/app/components/filament-table/filament-table.component.scss
@@ -0,0 +1,259 @@
+/**
+ * Filament Table Component Styles
+ * Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
+ * Low stock indicators use high-contrast colors for workshop visibility
+ */
+
+// Touch-optimized sizing
+$touch-target-min: 48px;
+$spacing-unit: 8px;
+
+// Stock level colors — high contrast, accessible
+$color-critical: #ef4444;   // Red — critically low
+$color-low: #f59e0b;       // Amber — running low
+$color-moderate: #3b82f6;  // Blue — moderate
+$color-healthy: #22c55e;   // Green — healthy/OK
+$color-active: #22c55e;    // Green — active spool
+$color-inactive: #94a3b8;  // Gray — inactive spool
+
+.filament-table-container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+// Alert banner for low stock warnings
+.alert-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;
+  font-size: 14px;
+  font-weight: 500;
+
+  mat-icon {
+    font-size: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  &.critical {
+    background-color: rgba($color-critical, 0.12);
+    color: $color-critical;
+    border: 1px solid rgba($color-critical, 0.3);
+  }
+
+  &.low {
+    background-color: rgba($color-low, 0.12);
+    color: $color-low;
+    border: 1px solid rgba($color-low, 0.3);
+  }
+}
+
+// Table styling
+.filament-table {
+  width: 100%;
+  min-width: 700px;
+
+  th {
+    font-weight: 600;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  td {
+    font-size: 14px;
+    padding: 12px 16px !important;
+    min-height: $touch-target-min;
+
+    @media (max-width: 480px) {
+      padding: 8px 12px !important;
+      font-size: 13px;
+    }
+  }
+
+  // Row highlight for low stock
+  .mat-mdc-row {
+    transition: background-color 0.2s ease;
+  }
+
+  &.row-critical {
+    background-color: rgba($color-critical, 0.06) !important;
+
+    &:hover {
+      background-color: rgba($color-critical, 0.1) !important;
+    }
+  }
+
+  &.row-low {
+    background-color: rgba($color-low, 0.06) !important;
+
+    &:hover {
+      background-color: rgba($color-low, 0.1) !important;
+    }
+  }
+}
+
+// Color swatch
+.color-swatch {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0.12);
+  vertical-align: middle;
+  cursor: default;
+
+  @media (max-width: 480px) {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+// Material name
+.material-name {
+  font-weight: 500;
+}
+
+.material-modifier {
+  font-size: 12px;
+  color: var(--mat-sys-on-surface-variant);
+  margin-left: 4px;
+}
+
+// Serial cell — monospace
+.serial-cell {
+  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+  font-size: 13px;
+  letter-spacing: 0.02em;
+}
+
+// Remaining weight cell
+.remaining-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 120px;
+
+  .remaining-text {
+    font-size: 13px;
+    color: var(--mat-sys-on-surface-variant);
+  }
+}
+
+// Progress bar stock level variants
+mat-progress-bar {
+  &.critical {
+    --mat-progress-bar-active-indicator-color: #{$color-critical};
+  }
+
+  &.low {
+    --mat-progress-bar-active-indicator-color: #{$color-low};
+  }
+
+  &.moderate {
+    --mat-progress-bar-active-indicator-color: #{$color-moderate};
+  }
+
+  &.healthy {
+    --mat-progress-bar-active-indicator-color: #{$color-healthy};
+  }
+}
+
+// Stock level chip variants
+mat-chip {
+  min-height: 32px !important;
+  font-size: 12px !important;
+
+  &.critical {
+    background-color: rgba($color-critical, 0.15) !important;
+    color: $color-critical;
+
+    mat-icon {
+      color: $color-critical;
+    }
+  }
+
+  &.low {
+    background-color: rgba($color-low, 0.15) !important;
+    color: $color-low;
+
+    mat-icon {
+      color: $color-low;
+    }
+  }
+
+  &.moderate {
+    background-color: rgba($color-moderate, 0.1) !important;
+    color: $color-moderate;
+
+    mat-icon {
+      color: $color-moderate;
+    }
+  }
+
+  &.healthy {
+    background-color: rgba($color-healthy, 0.1) !important;
+    color: $color-healthy;
+
+    mat-icon {
+      color: $color-healthy;
+    }
+  }
+
+  mat-icon {
+    font-size: 16px !important;
+    width: 16px !important;
+    height: 16px !important;
+    margin-right: 4px;
+  }
+}
+
+// Status badge
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  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;
+  }
+}
+
+// Empty state
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px $spacing-unit * 2;
+  color: var(--mat-sys-on-surface-variant);
+
+  mat-icon {
+    font-size: 48px !important;
+    width: 48px !important;
+    height: 48px !important;
+    opacity: 0.4;
+    margin-bottom: $spacing-unit * 2;
+  }
+
+  p {
+    font-size: 16px;
+    margin: 0;
+  }
+}