@quazardous/qdadm 1.19.3

package/src/styles/_sidebar.scss

@@ -0,0 +1,380 @@
+/**
+ * Sidebar Components
+ *
+ * Generic classes for sidebar footer items (user info, impersonation, etc.)
+ * These provide a consistent structure for icon + text boxes in the sidebar.
+ *
+ * Structure:
+ *   .sidebar-box (container with border-top, hover state)
+ *     .sidebar-box-inner (flex wrapper)
+ *       .sidebar-box-icon (left icon, absolute positioned - FIXED position)
+ *       .sidebar-box-content (text, fades in/out with sidebar)
+ *         .sidebar-box-title
+ *         .sidebar-box-subtitle
+ *
+ * Behavior:
+ *   - Icon stays at fixed left position (never moves horizontally)
+ *   - On close: text disappears immediately
+ *   - On open: text appears with delayed fade after sidebar is fully open
+ *
+ * Modifiers:
+ *   --impersonator: orange color scheme
+ *   --full: full-width content (for controls/dropdowns)
+ */
+
+// =============================================================================
+// Variables
+// =============================================================================
+
+$sidebar-box-icon-left: 0.5rem;
+$sidebar-box-icon-size: 28px;
+$sidebar-box-content-left: 2rem;
+$sidebar-box-height: 3.5rem;
+
+// Timing: sidebar width transition is --fad-transition-slow (200ms)
+// Content should appear AFTER sidebar is open, so delay = 200ms, duration = 100ms
+$sidebar-box-content-delay: 0.2s;
+$sidebar-box-content-duration: 0.1s;
+
+/* =============================================================================
+   Sidebar Box - Generic footer item
+   ============================================================================= */
+
+.sidebar-box {
+  position: relative;
+  z-index: 1;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--p-surface-700, #334155);
+  height: $sidebar-box-height;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background var(--fad-transition-fast);
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-box:hover {
+  background: var(--p-surface-700, #334155);
+}
+
+.sidebar-box-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: $sidebar-box-content-left;
+  height: 100%;
+  width: 100%;
+}
+
+// Icon: FIXED position at left, never moves
+.sidebar-box-icon {
+  position: absolute;
+  left: $sidebar-box-icon-left;
+  top: 50%;
+  transform: translateY(-50%);
+  width: $sidebar-box-icon-size;
+  height: $sidebar-box-icon-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  color: var(--p-surface-400, #94a3b8);
+  // No horizontal transition - icon never moves
+}
+
+.sidebar-box:hover .sidebar-box-icon {
+  color: var(--p-surface-200, #e2e8f0);
+}
+
+// Content: fades in with delay when sidebar opens
+.sidebar-box-content {
+  flex: 1;
+  min-width: 0;
+  opacity: 1;
+  // Delayed fade-in: wait for sidebar to open, then fade in
+  transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay;
+}
+
+.sidebar-box-title {
+  font-weight: var(--fad-font-weight-normal);
+  font-size: var(--fad-font-size-sm);
+  color: var(--p-surface-100, #f1f5f9);
+  white-space: nowrap;
+}
+
+.sidebar-box-subtitle {
+  font-size: var(--fad-font-size-2xs);
+  color: var(--p-surface-400, #94a3b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Sidebar Box - Impersonator variant (orange colors)
+   ============================================================================= */
+
+.sidebar-box--impersonator .sidebar-box-icon {
+  color: var(--p-orange-400, #fb923c);
+}
+
+.sidebar-box--impersonator:hover .sidebar-box-icon {
+  color: var(--p-orange-300, #fdba74);
+}
+
+.sidebar-box--impersonator .sidebar-box-title {
+  color: var(--p-orange-400, #fb923c);
+}
+
+.sidebar-box--impersonator .sidebar-box-subtitle {
+  color: var(--p-orange-300, #fdba74);
+}
+
+/* =============================================================================
+   Sidebar Box - Collapsed state
+   ============================================================================= */
+
+.sidebar--collapsed .sidebar-box {
+  // Remove horizontal padding, keep centered
+  padding: 0;
+}
+
+.sidebar--collapsed .sidebar-box-inner {
+  // Center the icon (which is still absolute)
+  justify-content: center;
+  padding-left: 0;
+}
+
+// Icon: stays at EXACT SAME left position - no movement at all
+// The icon remains at left edge, not centered in collapsed mode
+.sidebar--collapsed .sidebar-box-icon {
+  // Keep same position as expanded - icon does NOT move horizontally
+  // left: $sidebar-box-icon-left; (inherited, no change needed)
+}
+
+// Content: disappears IMMEDIATELY when closing (no transition)
+.sidebar--collapsed .sidebar-box-content {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0s, visibility 0s; // Instant hide
+}
+
+/* =============================================================================
+   Sidebar Box Controls - Dropdown variant (hidden when collapsed)
+   ============================================================================= */
+
+.sidebar-box-controls {
+  padding: 0.5rem 1rem;
+}
+
+.sidebar-box-controls-label {
+  font-size: var(--fad-font-size-xs);
+  font-weight: var(--fad-font-weight-medium);
+  color: var(--p-surface-500, #64748b);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: block;
+  margin-bottom: 0.375rem;
+}
+
+.sidebar-box-controls-input {
+  width: 100%;
+}
+
+.sidebar-box-controls-input :deep(.p-autocomplete-input) {
+  width: 100%;
+  font-size: var(--fad-font-size-sm);
+}
+
+.sidebar-box-controls-input :deep(.p-autocomplete-overlay) {
+  z-index: 9999 !important;
+}
+
+.sidebar--collapsed .sidebar-box-controls {
+  display: none !important;
+}
+
+/* =============================================================================
+   Sidebar Box - Full-width variant (for controls/dropdowns)
+   ============================================================================= */
+
+.sidebar-box--full {
+  height: auto;
+  cursor: default;
+}
+
+.sidebar-box--full:hover {
+  background: transparent;
+}
+
+.sidebar-box-full {
+  width: 100%;
+  padding: 0.25rem 0;
+  opacity: 1;
+  transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay;
+}
+
+.sidebar-box-full-label {
+  font-size: var(--fad-font-size-xs);
+  font-weight: var(--fad-font-weight-medium);
+  color: var(--p-surface-500, #64748b);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: block;
+  margin-bottom: 0.375rem;
+}
+
+.sidebar-box-full-input {
+  width: 100%;
+}
+
+.sidebar-box-full-input :deep(.p-autocomplete-input) {
+  width: 100%;
+  font-size: var(--fad-font-size-sm);
+}
+
+.sidebar-box-full-input :deep(.p-autocomplete-overlay) {
+  z-index: 9999 !important;
+}
+
+// Full-width boxes: hide immediately when collapsed
+.sidebar--collapsed .sidebar-box--full {
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  transition: opacity 0s, visibility 0s, height 0s, padding 0s;
+}
+
+.sidebar--collapsed .sidebar-box-full {
+  opacity: 0;
+  transition: opacity 0s;
+}
+
+/* =============================================================================
+   Nav Item - Sidebar navigation items
+
+   Same behavior as SidebarBox:
+   - Icon stays at fixed left position (never moves horizontally)
+   - On close: text disappears immediately
+   - On open: text appears with delayed fade after sidebar is fully open
+   ============================================================================= */
+
+// Nav item icon width
+$nav-item-icon-width: 1.125rem;
+
+// Nav item content left = icon-left + icon-width + gap
+// Icon is centered in collapsed sidebar: (collapsed-width - icon-width) / 2
+// Content starts after icon: icon-left + icon-width + gap = (collapsed-width + icon-width) / 2 + gap
+$nav-item-content-left: calc((var(--fad-sidebar-width-collapsed) + #{$nav-item-icon-width}) / 2 + 0.375rem);
+
+.sidebar-nav .nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+  padding-left: $nav-item-content-left;
+  color: var(--p-surface-300, #cbd5e1);
+  text-decoration: none;
+  font-size: var(--fad-font-size-sm);
+  font-weight: var(--fad-font-weight-normal);
+  border-radius: 0;
+  transition: background var(--fad-transition-fast), color var(--fad-transition-fast), padding var(--fad-transition-slow);
+}
+
+// Icon: FIXED position at left, centered in collapsed sidebar width
+// Position = (collapsed-width - icon-width) / 2 so icon is centered when collapsed
+.sidebar-nav .nav-item i {
+  position: absolute;
+  left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--fad-nav-icon-size);
+  width: $nav-item-icon-width;
+  text-align: center;
+  opacity: 0.8;
+  // No horizontal transition - icon never moves
+}
+
+// Text: delayed fade-in when sidebar opens
+.sidebar-nav .nav-item span {
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay;
+}
+
+.sidebar-nav .nav-item:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-0, white);
+}
+
+.sidebar-nav .nav-item-active {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-primary-300, #93c5fd);
+  border-left: 2px solid var(--p-primary-400, #60a5fa);
+  padding-left: calc(#{$nav-item-content-left} - 2px);
+}
+
+.sidebar-nav .nav-item-active:hover {
+  background: var(--p-surface-600, #475569);
+}
+
+.sidebar-nav .nav-item-active i {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Nav Item - Collapsed state
+   ============================================================================= */
+
+.sidebar--collapsed .sidebar-nav .nav-item {
+  padding: 0.5rem 0;
+  padding-left: $nav-item-content-left; // Keep same padding - icon position doesn't change
+  border-left: none !important;
+}
+
+.sidebar--collapsed .sidebar-nav .nav-item-active {
+  border-left: none !important;
+  padding-left: $nav-item-content-left;
+}
+
+// Text: disappears IMMEDIATELY when closing (no transition)
+.sidebar--collapsed .sidebar-nav .nav-item span {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0s, visibility 0s; // Instant hide
+}
+
+// Icon: stays at EXACT SAME left position - no movement at all
+// (inherits left: $sidebar-box-icon-left, no change needed)
+
+/* =============================================================================
+   Nav Item - Mobile responsive
+   On mobile, sidebar becomes fullscreen and collapsed state is ignored
+   ============================================================================= */
+
+@media (max-width: 767px) {
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item {
+    justify-content: flex-start;
+    padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+    padding-left: $nav-item-content-left; // Keep same padding for absolute icon
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item span {
+    display: inline;
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay; // Restore delayed fade-in
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item i {
+    // Keep absolute positioning on mobile too - same centered position
+    position: absolute;
+    left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+    font-size: var(--fad-nav-icon-size);
+    width: $nav-item-icon-width;
+  }
+}

package/src/styles/_states.scss

@@ -0,0 +1,115 @@
+/**
+ * qdadm - State Styles
+ *
+ * Loading, empty, and error states
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Loading State
+// =============================================================================
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $space-2xl;
+
+  &--inline {
+    padding: $space-md;
+    gap: 0.75rem;
+    color: var(--p-text-muted-color);
+  }
+}
+
+// =============================================================================
+// Empty State
+// =============================================================================
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-color-secondary);
+
+  &--sm {
+    padding: 1rem;
+  }
+
+  &--lg {
+    padding: 3rem;
+  }
+}
+
+.empty-state-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.5;
+
+  .empty-state--sm & {
+    font-size: 1.5rem;
+  }
+
+  .empty-state--lg & {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+}
+
+.empty-state-title {
+  margin: 0 0 0.25rem 0;
+  font-weight: 500;
+  color: var(--text-color-secondary);
+
+  .empty-state--lg & {
+    font-size: 1.1rem;
+  }
+}
+
+.empty-state-description {
+  opacity: 0.7;
+  max-width: 300px;
+}
+
+.empty-state-actions {
+  margin-top: 1rem;
+}
+
+// =============================================================================
+// Error States
+// =============================================================================
+
+.error-message {
+  background: var(--p-red-50);
+  border: $border-width solid var(--p-red-200);
+  border-radius: $radius-md;
+  padding: 0.75rem $space-md;
+  color: var(--p-red-700);
+  font-family: $font-family-mono;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.error-content {
+  background: var(--p-red-50);
+  color: var(--p-red-700);
+  padding: $space-md;
+  border-radius: $radius-lg;
+  overflow-x: auto;
+  margin: 0;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+}
+
+// Dark mode adjustments
+:root[data-theme='dark'] .error-message,
+:root[data-theme='dark'] .error-content {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--p-red-400);
+  border-color: var(--p-red-900);
+}

package/src/styles/_stats.scss

@@ -0,0 +1,47 @@
+/**
+ * qdadm - Stats Styles
+ *
+ * Dashboard statistics cards and grids
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Stats Grid Layout
+// =============================================================================
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $space-lg;
+  margin-bottom: $space-xl;
+}
+
+// =============================================================================
+// Stat Card
+// =============================================================================
+
+.stat-card {
+  background: var(--p-surface-0);
+  border-radius: $radius-lg;
+  padding: $space-lg;
+  border: $border-width solid var(--p-surface-200);
+}
+
+.stat-card-title {
+  font-size: $font-size-sm;
+  color: var(--p-surface-500);
+  margin-bottom: $space-sm;
+}
+
+.stat-card-value {
+  font-size: 2rem;
+  font-weight: $font-weight-semibold;
+  color: var(--p-surface-900);
+}
+
+.stat-card-subtitle {
+  font-size: $font-size-xs;
+  color: var(--p-surface-400);
+  margin-top: $space-xs;
+}