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/dashboard-summary/dashboard-summary.component.scss
+++ b/frontend/src/app/components/dashboard-summary/dashboard-summary.component.scss
@@ -0,0 +1,174 @@
+/**
+ * Dashboard Summary Component Styles
+ * Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
+ * Uses Angular Material utility classes where possible
+ */
+
+// Touch-optimized sizing
+$touch-target-min: 48px;
+$kiosk-font-primary: 20px;
+$mobile-font-primary: 16px;
+$spacing-unit: 8px;
+
+// Status colors — high contrast for workshop/bright environments
+$color-active: #4ade70;    // Green — printing/active
+$color-idle: #94a3b8;      // Gray — idle/offline
+$color-thinking: #60a5fa;  // Blue — thinking/processing
+$color-error: #f87171;     // Red — error/failed
+$color-connected: #4ade70; // Green — SignalR connected
+$color-disconnected: #f87171; // Red — disconnected
+
+.dashboard-summary {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit * 2;
+  padding: $spacing-unit * 2;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  // Responsive: on mobile, allow horizontal scroll
+  @media (max-width: 480px) {
+    padding: $spacing-unit;
+    gap: $spacing-unit;
+  }
+}
+
+.summary-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit;
+  min-height: $touch-target-min;
+  white-space: nowrap;
+
+  .metric-value {
+    font-size: $kiosk-font-primary;
+    font-weight: 600;
+    line-height: 1.2;
+
+    @media (max-width: 480px) {
+      font-size: $mobile-font-primary;
+    }
+  }
+
+  .metric-label {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
+    @media (max-width: 480px) {
+      font-size: 10px;
+    }
+  }
+}
+
+// Health indicator
+.health-indicator {
+  padding: $spacing-unit $spacing-unit * 2;
+  border-radius: 24px;
+  transition: background-color 0.3s ease;
+
+  &.healthy {
+    background-color: rgba($color-active, 0.15);
+  }
+
+  &.degraded {
+    background-color: rgba($color-thinking, 0.15);
+  }
+
+  &.down {
+    background-color: rgba($color-error, 0.15);
+  }
+
+  .connection-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    transition: background-color 0.3s ease;
+
+    &.connected {
+      background-color: $color-connected;
+      box-shadow: 0 0 6px $color-connected;
+    }
+
+    &:not(.connected) {
+      background-color: $color-disconnected;
+      box-shadow: 0 0 6px $color-disconnected;
+    }
+  }
+
+  .health-label {
+    font-size: 14px;
+    font-weight: 500;
+
+    @media (max-width: 480px) {
+      font-size: 12px;
+    }
+  }
+}
+
+// Status breakdown chips
+.status-breakdown {
+  flex-shrink: 0;
+}
+
+.status-chip {
+  min-height: $touch-target-min !important;
+  font-size: 14px !important;
+
+  @media (max-width: 480px) {
+    min-height: 40px !important;
+    font-size: 12px !important;
+    padding: 0 8px !important;
+  }
+
+  .chip-count {
+    font-weight: 700;
+    margin: 0 4px;
+  }
+
+  .chip-label {
+    font-size: 12px;
+    opacity: 0.8;
+  }
+
+  mat-icon {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+  }
+}
+
+// Status chip color variants
+.chip-active {
+  --mdc-chip-outline-color: #{$color-active};
+
+  &.has-count {
+    background-color: rgba($color-active, 0.15) !important;
+  }
+}
+
+.chip-idle {
+  --mdc-chip-outline-color: #{$color-idle};
+
+  &.has-count {
+    background-color: rgba($color-idle, 0.15) !important;
+  }
+}
+
+.chip-thinking {
+  --mdc-chip-outline-color: #{$color-thinking};
+
+  &.has-count {
+    background-color: rgba($color-thinking, 0.15) !important;
+  }
+}
+
+.chip-error {
+  --mdc-chip-outline-color: #{$color-error};
+
+  &.has-count {
+    background-color: rgba($color-error, 0.2) !important;
+  }
+}