@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/design-tokens.ts

@@ -0,0 +1,187 @@
+/**
+ * Usage Dashboard Design Tokens
+ *
+ * Theme-aware colour palette and design system values.
+ * Uses CSS custom properties with [data-theme="dark"] selector.
+ */
+
+export const tokens = {
+  light: {
+    bg: {
+      primary: '#ffffff',
+      secondary: '#f6f8fa',
+      tertiary: '#f0f2f4',
+      hover: '#eaeef2',
+    },
+    text: {
+      primary: '#1f2328',
+      secondary: '#656d76',
+      muted: '#8c959f',
+    },
+    accent: {
+      blue: '#0969da',
+      green: '#1a7f37',
+      yellow: '#9a6700',
+      red: '#cf222e',
+      purple: '#8250df',
+    },
+    border: {
+      default: '#d1d9e0',
+      hover: '#b3bcc6',
+      subtle: '#e8ecef',
+    },
+    status: {
+      ok: '#1a7f37',
+      okBg: '#dafbe1',
+      warning: '#9a6700',
+      warningBg: '#fff8c5',
+      critical: '#cf222e',
+      criticalBg: '#ffebe9',
+    },
+  },
+  dark: {
+    bg: {
+      primary: '#0d1117',
+      secondary: '#161b22',
+      tertiary: '#21262d',
+      hover: '#262c36',
+    },
+    text: {
+      primary: '#e6edf3',
+      secondary: '#8b949e',
+      muted: '#484f58',
+    },
+    accent: {
+      blue: '#58a6ff',
+      green: '#3fb950',
+      yellow: '#d29922',
+      red: '#f85149',
+      purple: '#a371f7',
+    },
+    border: {
+      default: '#30363d',
+      hover: '#484f58',
+      subtle: '#21262d',
+    },
+    status: {
+      ok: '#3fb950',
+      okBg: '#1b4721',
+      warning: '#d29922',
+      warningBg: '#4d3a00',
+      critical: '#f85149',
+      criticalBg: '#5c1e1e',
+    },
+  },
+  fonts: {
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace",
+    sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  },
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+    '2xl': '3rem',
+  },
+  radius: {
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '12px',
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+  },
+  transitions: {
+    fast: '150ms ease',
+    normal: '200ms ease',
+    slow: '300ms ease',
+  },
+} as const;
+
+/**
+ * Generate CSS custom properties for injection into stylesheets.
+ * Call this in the page's <style> block or use inline.
+ */
+export function generateCSSVariables(): string {
+  return `
+    :root {
+      /* Light theme (default) */
+      --usage-bg-primary: ${tokens.light.bg.primary};
+      --usage-bg-secondary: ${tokens.light.bg.secondary};
+      --usage-bg-tertiary: ${tokens.light.bg.tertiary};
+      --usage-bg-hover: ${tokens.light.bg.hover};
+
+      --usage-text-primary: ${tokens.light.text.primary};
+      --usage-text-secondary: ${tokens.light.text.secondary};
+      --usage-text-muted: ${tokens.light.text.muted};
+
+      --usage-accent-blue: ${tokens.light.accent.blue};
+      --usage-accent-green: ${tokens.light.accent.green};
+      --usage-accent-yellow: ${tokens.light.accent.yellow};
+      --usage-accent-red: ${tokens.light.accent.red};
+      --usage-accent-purple: ${tokens.light.accent.purple};
+
+      --usage-border-default: ${tokens.light.border.default};
+      --usage-border-hover: ${tokens.light.border.hover};
+      --usage-border-subtle: ${tokens.light.border.subtle};
+
+      --usage-status-ok: ${tokens.light.status.ok};
+      --usage-status-ok-bg: ${tokens.light.status.okBg};
+      --usage-status-warning: ${tokens.light.status.warning};
+      --usage-status-warning-bg: ${tokens.light.status.warningBg};
+      --usage-status-critical: ${tokens.light.status.critical};
+      --usage-status-critical-bg: ${tokens.light.status.criticalBg};
+
+      --usage-font-mono: ${tokens.fonts.mono};
+      --usage-font-sans: ${tokens.fonts.sans};
+
+      --usage-radius-sm: ${tokens.radius.sm};
+      --usage-radius-md: ${tokens.radius.md};
+      --usage-radius-lg: ${tokens.radius.lg};
+      --usage-radius-xl: ${tokens.radius.xl};
+
+      --usage-shadow-sm: ${tokens.shadows.sm};
+      --usage-shadow-md: ${tokens.shadows.md};
+      --usage-shadow-lg: ${tokens.shadows.lg};
+
+      --usage-transition-fast: ${tokens.transitions.fast};
+      --usage-transition-normal: ${tokens.transitions.normal};
+      --usage-transition-slow: ${tokens.transitions.slow};
+    }
+
+    [data-theme="dark"] {
+      --usage-bg-primary: ${tokens.dark.bg.primary};
+      --usage-bg-secondary: ${tokens.dark.bg.secondary};
+      --usage-bg-tertiary: ${tokens.dark.bg.tertiary};
+      --usage-bg-hover: ${tokens.dark.bg.hover};
+
+      --usage-text-primary: ${tokens.dark.text.primary};
+      --usage-text-secondary: ${tokens.dark.text.secondary};
+      --usage-text-muted: ${tokens.dark.text.muted};
+
+      --usage-accent-blue: ${tokens.dark.accent.blue};
+      --usage-accent-green: ${tokens.dark.accent.green};
+      --usage-accent-yellow: ${tokens.dark.accent.yellow};
+      --usage-accent-red: ${tokens.dark.accent.red};
+      --usage-accent-purple: ${tokens.dark.accent.purple};
+
+      --usage-border-default: ${tokens.dark.border.default};
+      --usage-border-hover: ${tokens.dark.border.hover};
+      --usage-border-subtle: ${tokens.dark.border.subtle};
+
+      --usage-status-ok: ${tokens.dark.status.ok};
+      --usage-status-ok-bg: ${tokens.dark.status.okBg};
+      --usage-status-warning: ${tokens.dark.status.warning};
+      --usage-status-warning-bg: ${tokens.dark.status.warningBg};
+      --usage-status-critical: ${tokens.dark.status.critical};
+      --usage-status-critical-bg: ${tokens.dark.status.criticalBg};
+    }
+  `;
+}
+
+export type ThemeMode = 'light' | 'dark';
+export type TokenColors = typeof tokens.light;

package/templates/shared/dashboard/src/components/usage/filters/InlineDateRange.astro

@@ -0,0 +1,285 @@
+---
+/**
+ * InlineDateRange Component
+ *
+ * Inline date inputs shown when period === 'custom'.
+ * Uses native <input type="date"> for accessibility and mobile support.
+ * Enforces max 90 day range with user feedback.
+ *
+ * Part of task-21.2: Add inline Custom date inputs
+ */
+
+interface Props {
+  /** Initial start date (YYYY-MM-DD) */
+  initialStart?: string;
+  /** Initial end date (YYYY-MM-DD) */
+  initialEnd?: string;
+  /** Max days allowed in range */
+  maxDays?: number;
+}
+
+const { initialStart = '', initialEnd = '', maxDays = 90 } = Astro.props;
+
+// Calculate default dates (last 7 days) if not provided
+const today = new Date();
+const defaultEnd = today.toISOString().split('T')[0];
+const weekAgo = new Date(today);
+weekAgo.setDate(weekAgo.getDate() - 7);
+const defaultStart = weekAgo.toISOString().split('T')[0];
+---
+
+<div
+  class="inline-date-range"
+  data-component="inline-date-range"
+  data-max-days={maxDays}
+  style="display: none;"
+>
+  <div class="date-inputs">
+    <div class="date-field">
+      <label for="custom-start-date" class="date-label">From</label>
+      <input
+        type="date"
+        id="custom-start-date"
+        class="date-input"
+        value={initialStart || defaultStart}
+        max={defaultEnd}
+      />
+    </div>
+    <span class="date-separator">-</span>
+    <div class="date-field">
+      <label for="custom-end-date" class="date-label">To</label>
+      <input
+        type="date"
+        id="custom-end-date"
+        class="date-input"
+        value={initialEnd || defaultEnd}
+        max={defaultEnd}
+      />
+    </div>
+  </div>
+  <div class="date-error" id="date-range-error" style="display: none;"></div>
+</div>
+
+<style>
+  .inline-date-range {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    animation: slideIn 0.15s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .date-inputs {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .date-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .date-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--usage-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .date-input {
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    font-family: inherit;
+    color: var(--usage-text-primary);
+    background-color: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .date-input:hover {
+    border-color: var(--usage-border-hover);
+  }
+
+  .date-input:focus {
+    outline: none;
+    border-color: var(--usage-accent-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--usage-accent-primary) 25%, transparent);
+  }
+
+  .date-input::-webkit-calendar-picker-indicator {
+    filter: var(--usage-calendar-icon-filter, none);
+    cursor: pointer;
+  }
+
+  .date-separator {
+    color: var(--usage-text-muted);
+    font-size: 0.875rem;
+    padding-top: 1rem;
+  }
+
+  .date-error {
+    font-size: 0.75rem;
+    color: var(--usage-error-text, #dc2626);
+    padding: 0.25rem 0;
+  }
+
+  @media (max-width: 480px) {
+    .date-inputs {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .date-separator {
+      display: none;
+    }
+
+    .date-field {
+      flex-direction: row;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .date-label {
+      min-width: 2.5rem;
+    }
+
+    .date-input {
+      flex: 1;
+    }
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .date-label,
+  :global(.dark) .date-label {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .date-input,
+  :global(.dark) .date-input {
+    background-color: #161b22;
+    border-color: #30363d;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .date-input:hover,
+  :global(.dark) .date-input:hover {
+    border-color: #484f58;
+  }
+
+  :global([data-theme='dark']) .date-input::-webkit-calendar-picker-indicator,
+  :global(.dark) .date-input::-webkit-calendar-picker-indicator {
+    filter: invert(0.8);
+  }
+
+  :global([data-theme='dark']) .date-separator,
+  :global(.dark) .date-separator {
+    color: #484f58;
+  }
+
+  :global([data-theme='dark']) .date-error,
+  :global(.dark) .date-error {
+    color: #f85149;
+  }
+</style>
+
+<script>
+  import { $period, $customDateRange } from '../state/usageStore';
+  import { setCustomDateRange } from '../state/usageActions';
+
+  function initInlineDateRange(): void {
+    const container = document.querySelector<HTMLElement>('[data-component="inline-date-range"]');
+    if (!container) return;
+
+    const startInput = container.querySelector<HTMLInputElement>('#custom-start-date');
+    const endInput = container.querySelector<HTMLInputElement>('#custom-end-date');
+    const errorEl = container.querySelector<HTMLElement>('#date-range-error');
+    const maxDays = parseInt(container.dataset.maxDays || '90', 10);
+
+    if (!startInput || !endInput || !errorEl) return;
+
+    // Show/hide based on period
+    $period.subscribe((period) => {
+      container.style.display = period === 'custom' ? 'flex' : 'none';
+
+      // Set default dates when switching to custom
+      if (period === 'custom') {
+        const { start, end } = $customDateRange.get();
+        if (!start || !end) {
+          // Use current input values as defaults
+          setCustomDateRange(startInput.value, endInput.value);
+        }
+      }
+    });
+
+    // Sync inputs with store
+    $customDateRange.subscribe(({ start, end }) => {
+      if (start && startInput.value !== start) {
+        startInput.value = start;
+      }
+      if (end && endInput.value !== end) {
+        endInput.value = end;
+      }
+    });
+
+    // Validate date range
+    function validateRange(): boolean {
+      const start = new Date(startInput.value);
+      const end = new Date(endInput.value);
+
+      // Check if end is after start
+      if (end < start) {
+        errorEl.textContent = 'End date must be after start date';
+        errorEl.style.display = 'block';
+        return false;
+      }
+
+      // Check max range
+      const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+      if (diffDays > maxDays) {
+        errorEl.textContent = `Maximum range is ${maxDays} days`;
+        errorEl.style.display = 'block';
+        return false;
+      }
+
+      errorEl.style.display = 'none';
+      return true;
+    }
+
+    // Handle date changes
+    function handleDateChange(): void {
+      if (validateRange() && startInput.value && endInput.value) {
+        setCustomDateRange(startInput.value, endInput.value);
+      }
+    }
+
+    startInput.addEventListener('change', handleDateChange);
+    endInput.addEventListener('change', handleDateChange);
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initInlineDateRange);
+  } else {
+    initInlineDateRange();
+  }
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener('astro:page-load', initInlineDateRange);
+</script>

package/templates/shared/dashboard/src/components/usage/filters/PeriodButtons.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * PeriodButtons Component
+ *
+ * Period selection buttons (24h, 7d, 30d, Custom) that use nanostores
+ * for reactive state management. No page reload on selection.
+ *
+ * Part of task-21: Usage Dashboard Refactor Phase 3 - Integrated Filter Bar
+ */
+
+interface Props {
+  /** Initial period from URL (for SSR hydration) */
+  initialPeriod?: string;
+}
+
+const { initialPeriod = '30d' } = Astro.props;
+
+const periods = [
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+  { value: '30d', label: '30d' },
+  { value: 'custom', label: 'Custom' },
+];
+---
+
+<div class="period-buttons" data-component="period-buttons" data-initial={initialPeriod}>
+  <div class="button-group" role="group" aria-label="Select time period">
+    {
+      periods.map((period) => (
+        <button
+          type="button"
+          class:list={['period-btn', { active: initialPeriod === period.value }]}
+          data-period={period.value}
+          aria-pressed={initialPeriod === period.value}
+        >
+          {period.label}
+        </button>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .period-buttons {
+    display: flex;
+    align-items: center;
+  }
+
+  .button-group {
+    display: flex;
+    background-color: var(--usage-bg-tertiary, #eaeef2);
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    border: 1px solid var(--usage-border-default, #d0d7de);
+    gap: 0.125rem;
+  }
+
+  .period-btn {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary, #656d76);
+    border: none;
+    background: transparent;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .period-btn:hover:not(.active) {
+    background-color: var(--usage-bg-secondary, #f6f8fa);
+    color: var(--usage-text-primary, #1f2328);
+  }
+
+  .period-btn.active {
+    background-color: var(--usage-accent-primary, #2563eb);
+    color: white;
+    box-shadow: var(--usage-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  }
+
+  .period-btn:focus-visible {
+    outline: 2px solid var(--usage-accent-primary, #2563eb);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 640px) {
+    .period-btn {
+      padding: 0.375rem 0.625rem;
+      font-size: 0.75rem;
+    }
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .button-group,
+  :global(.dark) .button-group {
+    background-color: #21262d;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .period-btn,
+  :global(.dark) .period-btn {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .period-btn:hover:not(.active),
+  :global(.dark) .period-btn:hover:not(.active) {
+    background-color: #161b22;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .period-btn.active,
+  :global(.dark) .period-btn.active {
+    background-color: #58a6ff;
+    color: white;
+  }
+</style>
+
+<script>
+  import { $period, type Period } from '../state/usageStore';
+
+  function initPeriodButtons(): void {
+    const container = document.querySelector('[data-component="period-buttons"]');
+    if (!container) return;
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>('.period-btn');
+
+    // Handle button clicks
+    buttons.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const period = btn.dataset.period as Period;
+        if (period) {
+          $period.set(period);
+        }
+      });
+    });
+
+    // Subscribe to store changes and update UI
+    $period.subscribe((period) => {
+      buttons.forEach((btn) => {
+        const isActive = btn.dataset.period === period;
+        btn.classList.toggle('active', isActive);
+        btn.setAttribute('aria-pressed', String(isActive));
+      });
+    });
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPeriodButtons);
+  } else {
+    initPeriodButtons();
+  }
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener('astro:page-load', initPeriodButtons);
+</script>