@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/UsageCard.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * UsageCard Component
+ *
+ * Displays a resource type usage card with primary metric and secondary items.
+ */
+
+interface SecondaryItem {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  label: string;
+  icon: string;
+  primaryValue: string;
+  primaryLabel: string;
+  secondaryItems?: SecondaryItem[];
+}
+
+const { label, icon, primaryValue, primaryLabel, secondaryItems = [] } = Astro.props;
+---
+
+<div class="usage-card" role="region" aria-label={label}>
+  <div class="card-header">
+    <span class="card-icon" aria-hidden="true" set:html={icon} />
+    <span class="card-label">{label}</span>
+  </div>
+
+  <div class="card-primary">
+    <span class="primary-value">{primaryValue}</span>
+    <span class="primary-label">{primaryLabel}</span>
+  </div>
+
+  {
+    secondaryItems.length > 0 && (
+      <div class="card-secondary">
+        {secondaryItems.map((item) => (
+          <div class="secondary-item">
+            <span class="secondary-label">{item.label}</span>
+            <span class="secondary-value">{item.value}</span>
+          </div>
+        ))}
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .usage-card {
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1.25rem;
+    transition: all 0.15s ease;
+  }
+
+  .usage-card:hover {
+    border-color: #d1d5db;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .card-icon {
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  .card-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  .card-primary {
+    margin-bottom: 1rem;
+  }
+
+  .primary-value {
+    display: block;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1f2937;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+  }
+
+  .primary-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .card-secondary {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .secondary-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .secondary-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+
+  .secondary-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  @media (max-width: 640px) {
+    .usage-card {
+      padding: 1rem;
+    }
+
+    .primary-value {
+      font-size: 1.5rem;
+    }
+  }
+</style>

package/templates/shared/dashboard/src/components/usage/UsageHealthBanner.astro

@@ -0,0 +1,387 @@
+---
+/**
+ * UsageHealthBanner - Top-level health status banner
+ *
+ * Shows combined health status for Cloudflare and GitHub with:
+ * - Colour-coded status pill for each provider
+ * - Warning count badges
+ * - Overall utilisation percentage
+ * - Quick visual at-a-glance health status
+ */
+import type { UtilizationStatus } from './types';
+import UtilizationBar from './UtilizationBar.astro';
+
+interface ProviderHealth {
+  provider: 'cloudflare' | 'github';
+  percentage: number;
+  warnings: number;
+  status: UtilizationStatus;
+}
+
+interface Props {
+  /** Cloudflare health data */
+  cloudflare?: ProviderHealth;
+  /** GitHub health data */
+  github?: ProviderHealth;
+  /** Last updated timestamp */
+  lastUpdated?: string;
+}
+
+const { cloudflare, github, lastUpdated } = Astro.props;
+
+// Calculate overall health (worst status wins)
+const getOverallStatus = (): UtilizationStatus => {
+  const statuses: UtilizationStatus[] = [];
+  if (cloudflare) statuses.push(cloudflare.status);
+  if (github) statuses.push(github.status);
+
+  if (statuses.includes('overage')) return 'overage';
+  if (statuses.includes('critical')) return 'critical';
+  if (statuses.includes('warning')) return 'warning';
+  return 'ok';
+};
+
+const overallStatus = getOverallStatus();
+const totalWarnings = (cloudflare?.warnings ?? 0) + (github?.warnings ?? 0);
+
+const statusLabels: Record<UtilizationStatus, string> = {
+  ok: 'All Systems OK',
+  warning: 'Approaching Limits',
+  critical: 'Near Capacity',
+  overage: 'Over Limit',
+};
+
+const statusIcons: Record<UtilizationStatus, string> = {
+  ok: '&#x2705;',
+  warning: '&#x26A0;&#xFE0F;',
+  critical: '&#x1F6A8;',
+  overage: '&#x274C;',
+};
+---
+
+<div class="health-banner" id="usage-health-banner" data-status={overallStatus}>
+  <div class="health-header">
+    <div class="health-status">
+      <span class="status-icon" set:html={statusIcons[overallStatus]} />
+      <span class="status-label" id="health-status-label">{statusLabels[overallStatus]}</span>
+      {
+        totalWarnings > 0 && (
+          <span class="warning-badge" id="health-warning-count">
+            {totalWarnings} warning{totalWarnings !== 1 ? 's' : ''}
+          </span>
+        )
+      }
+    </div>
+    {
+      lastUpdated && (
+        <span class="last-updated" id="health-last-updated">
+          Updated: {lastUpdated}
+        </span>
+      )
+    }
+  </div>
+
+  <div class="providers-row">
+    {/* Cloudflare Provider */}
+    <div
+      class="provider-card"
+      id="health-cloudflare"
+      data-percentage={cloudflare?.percentage ?? 0}
+      data-status={cloudflare?.status ?? 'ok'}
+    >
+      <div class="provider-header">
+        <span class="provider-icon">☁️</span>
+        <span class="provider-name">Cloudflare</span>
+        {
+          cloudflare?.warnings && cloudflare.warnings > 0 && (
+            <span class="provider-warnings">{cloudflare.warnings}</span>
+          )
+        }
+      </div>
+      <UtilizationBar
+        percentage={cloudflare?.percentage ?? 0}
+        status={cloudflare?.status ?? 'ok'}
+        height={6}
+        showLabel
+      />
+    </div>
+
+    {/* GitHub Provider */}
+    <div
+      class="provider-card"
+      id="health-github"
+      data-percentage={github?.percentage ?? 0}
+      data-status={github?.status ?? 'ok'}
+    >
+      <div class="provider-header">
+        <span class="provider-icon">🐙</span>
+        <span class="provider-name">GitHub</span>
+        {
+          github?.warnings && github.warnings > 0 && (
+            <span class="provider-warnings">{github.warnings}</span>
+          )
+        }
+      </div>
+      <UtilizationBar
+        percentage={github?.percentage ?? 0}
+        status={github?.status ?? 'ok'}
+        height={6}
+        showLabel
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .health-banner {
+    background: var(--color-surface, #ffffff);
+    border: 1px solid var(--color-border, #e5e7eb);
+    border-radius: 12px;
+    padding: 16px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.dark) .health-banner {
+    background: var(--color-surface-dark, #1f2937);
+    border-color: var(--color-border-dark, #374151);
+  }
+
+  .health-banner[data-status='ok'] {
+    border-left: 4px solid var(--color-success, #22c55e);
+  }
+
+  .health-banner[data-status='warning'] {
+    border-left: 4px solid var(--color-warning, #eab308);
+  }
+
+  .health-banner[data-status='critical'],
+  .health-banner[data-status='overage'] {
+    border-left: 4px solid var(--color-critical, #ef4444);
+  }
+
+  .health-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .health-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status-icon {
+    font-size: 18px;
+  }
+
+  .status-label {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text, #111827);
+  }
+
+  :global(.dark) .status-label {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .warning-badge {
+    background: var(--color-warning-bg, #fef3c7);
+    color: var(--color-warning-text, #92400e);
+    font-size: 12px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 9999px;
+  }
+
+  :global(.dark) .warning-badge {
+    background: rgba(234, 179, 8, 0.2);
+    color: #fcd34d;
+  }
+
+  .last-updated {
+    font-size: 12px;
+    color: var(--color-text-secondary, #6b7280);
+  }
+
+  :global(.dark) .last-updated {
+    color: var(--color-text-secondary-dark, #9ca3af);
+  }
+
+  .providers-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+  }
+
+  .provider-card {
+    background: var(--color-surface-secondary, #f9fafb);
+    border-radius: 8px;
+    padding: 12px;
+  }
+
+  :global(.dark) .provider-card {
+    background: var(--color-surface-secondary-dark, #111827);
+  }
+
+  .provider-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+
+  .provider-icon {
+    font-size: 16px;
+  }
+
+  .provider-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text, #111827);
+    flex: 1;
+  }
+
+  :global(.dark) .provider-name {
+    color: var(--color-text-dark, #f9fafb);
+  }
+
+  .provider-warnings {
+    background: var(--color-critical, #ef4444);
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 6px;
+    border-radius: 9999px;
+    min-width: 18px;
+    text-align: center;
+  }
+
+  /* Skeleton loading state */
+  .health-banner.loading .status-label,
+  .health-banner.loading .provider-name {
+    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    color: transparent;
+    border-radius: 4px;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * Update health banner with new data
+   * Called from usage-overview-controller.ts
+   */
+  interface ProviderHealth {
+    provider: 'cloudflare' | 'github';
+    percentage: number;
+    warnings: number;
+    status: 'ok' | 'warning' | 'critical' | 'overage';
+  }
+
+  interface HealthData {
+    cloudflare: ProviderHealth;
+    github: ProviderHealth;
+    lastUpdated?: string;
+  }
+
+  const statusLabels: Record<string, string> = {
+    ok: 'All Systems OK',
+    warning: 'Approaching Limits',
+    critical: 'Near Capacity',
+    overage: 'Over Limit',
+  };
+
+  const statusIcons: Record<string, string> = {
+    ok: '&#x2705;',
+    warning: '&#x26A0;&#xFE0F;',
+    critical: '&#x1F6A8;',
+    overage: '&#x274C;',
+  };
+
+  (window as unknown as { updateHealthBanner: (data: HealthData) => void }).updateHealthBanner = (
+    data: HealthData
+  ) => {
+    const banner = document.getElementById('usage-health-banner');
+    if (!banner) return;
+
+    // Calculate overall status
+    const statuses = [data.cloudflare.status, data.github.status];
+    let overallStatus = 'ok';
+    if (statuses.includes('overage')) overallStatus = 'overage';
+    else if (statuses.includes('critical')) overallStatus = 'critical';
+    else if (statuses.includes('warning')) overallStatus = 'warning';
+
+    banner.dataset.status = overallStatus;
+
+    // Update status label
+    const statusLabel = document.getElementById('health-status-label');
+    if (statusLabel) {
+      statusLabel.textContent = statusLabels[overallStatus];
+    }
+
+    // Update warning count
+    const totalWarnings = data.cloudflare.warnings + data.github.warnings;
+    const warningBadge = document.getElementById('health-warning-count');
+    if (warningBadge) {
+      if (totalWarnings > 0) {
+        warningBadge.textContent = `${totalWarnings} warning${totalWarnings !== 1 ? 's' : ''}`;
+        warningBadge.style.display = '';
+      } else {
+        warningBadge.style.display = 'none';
+      }
+    }
+
+    // Update last updated
+    if (data.lastUpdated) {
+      const lastUpdated = document.getElementById('health-last-updated');
+      if (lastUpdated) {
+        lastUpdated.textContent = `Updated: ${data.lastUpdated}`;
+      }
+    }
+
+    // Update Cloudflare card
+    const cfCard = document.getElementById('health-cloudflare');
+    if (cfCard) {
+      cfCard.dataset.percentage = String(data.cloudflare.percentage);
+      cfCard.dataset.status = data.cloudflare.status;
+      const cfBar = cfCard.querySelector('.utilization-bar-fill') as HTMLElement;
+      if (cfBar) {
+        cfBar.style.width = `${Math.min(data.cloudflare.percentage, 100)}%`;
+      }
+      const cfLabel = cfCard.querySelector('.utilization-bar-label');
+      if (cfLabel) {
+        cfLabel.textContent = `${data.cloudflare.percentage.toFixed(0)}%`;
+      }
+    }
+
+    // Update GitHub card
+    const ghCard = document.getElementById('health-github');
+    if (ghCard) {
+      ghCard.dataset.percentage = String(data.github.percentage);
+      ghCard.dataset.status = data.github.status;
+      const ghBar = ghCard.querySelector('.utilization-bar-fill') as HTMLElement;
+      if (ghBar) {
+        ghBar.style.width = `${Math.min(data.github.percentage, 100)}%`;
+      }
+      const ghLabel = ghCard.querySelector('.utilization-bar-label');
+      if (ghLabel) {
+        ghLabel.textContent = `${data.github.percentage.toFixed(0)}%`;
+      }
+    }
+
+    banner.classList.remove('loading');
+  };
+</script>

package/templates/shared/dashboard/src/components/usage/UtilizationBar.astro

@@ -0,0 +1,159 @@
+---
+/**
+ * UtilizationBar - Reusable progress bar for utilization display
+ *
+ * Displays a progress bar with:
+ * - Colour-coded status (green/yellow/red based on percentage)
+ * - Optional label showing percentage
+ * - Animated fill on mount
+ * - Overage indicator (>100%)
+ */
+import type { UtilizationStatus } from './types';
+
+interface Props {
+  /** Current percentage (0-100+, can exceed for overage) */
+  percentage: number;
+  /** Status for colour coding */
+  status: UtilizationStatus;
+  /** Optional height in pixels (default: 8) */
+  height?: number;
+  /** Show percentage label */
+  showLabel?: boolean;
+  /** Custom CSS class */
+  class?: string;
+}
+
+const { percentage, status, height = 8, showLabel = false, class: className = '' } = Astro.props;
+
+// Clamp display percentage to 100 for bar width, but track overage
+const displayPct = Math.min(percentage, 100);
+const hasOverage = percentage > 100;
+
+// Status colours
+const statusColours: Record<UtilizationStatus, string> = {
+  ok: 'var(--color-success, #22c55e)',
+  warning: 'var(--color-warning, #eab308)',
+  critical: 'var(--color-critical, #ef4444)',
+  overage: 'var(--color-overage, #dc2626)',
+};
+
+const barColour = statusColours[status];
+---
+
+<div
+  class:list={['utilization-bar-container', className]}
+  data-percentage={percentage}
+  data-status={status}
+>
+  <div class="utilization-bar-track" style={`height: ${height}px;`}>
+    <div
+      class="utilization-bar-fill"
+      style={`
+        width: ${displayPct}%;
+        background-color: ${barColour};
+      `}
+      role="progressbar"
+      aria-valuenow={percentage}
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+    </div>
+    {
+      hasOverage && (
+        <div class="utilization-bar-overage-indicator">
+          <span class="overage-stripes" />
+        </div>
+      )
+    }
+  </div>
+  {
+    showLabel && (
+      <span
+        class="utilization-bar-label"
+        class:list={{ overage: hasOverage, [`status-${status}`]: true }}
+      >
+        {percentage.toFixed(0)}%
+      </span>
+    )
+  }
+</div>
+
+<style>
+  .utilization-bar-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .utilization-bar-track {
+    flex: 1;
+    background-color: var(--color-border, #e5e7eb);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  :global(.dark) .utilization-bar-track {
+    background-color: var(--color-border-dark, #374151);
+  }
+
+  .utilization-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.3s ease-out;
+    min-width: 2px;
+  }
+
+  .utilization-bar-overage-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .overage-stripes {
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      rgba(220, 38, 38, 0.5) 2px,
+      rgba(220, 38, 38, 0.5) 4px
+    );
+  }
+
+  .utilization-bar-label {
+    font-size: 12px;
+    font-weight: 500;
+    min-width: 40px;
+    text-align: right;
+    color: var(--color-text-secondary, #6b7280);
+  }
+
+  .utilization-bar-label.status-ok {
+    color: var(--color-success, #22c55e);
+  }
+
+  .utilization-bar-label.status-warning {
+    color: var(--color-warning, #eab308);
+  }
+
+  .utilization-bar-label.status-critical,
+  .utilization-bar-label.status-overage {
+    color: var(--color-critical, #ef4444);
+  }
+
+  .utilization-bar-label.overage {
+    font-weight: 600;
+  }
+
+  :global(.dark) .utilization-bar-label {
+    color: var(--color-text-secondary-dark, #9ca3af);
+  }
+</style>