@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,600 @@
+---
+/**
+ * StatsHero Component
+ *
+ * Hero section for the Usage Dashboard displaying:
+ * - Large total cost with comparison period delta
+ * - Inline mini sparkline showing trend
+ * - Quick stat pills for resource type counts
+ * - Overall threshold status indicator
+ *
+ * Data is populated via JavaScript after API fetch.
+ */
+
+interface Props {
+  period: string;
+  periodLabel: string;
+}
+
+const { period, periodLabel } = Astro.props;
+---
+
+<div class="stats-hero" role="region" aria-label="Usage summary">
+  <!-- Primary Cost Display -->
+  <div class="hero-primary">
+    <div class="cost-block">
+      <div class="cost-header">
+        <span class="cost-period">{periodLabel}</span>
+        <span id="hero-cache-badge" class="cache-badge" style="display: none;">Cached</span>
+      </div>
+
+      <div class="cost-value-row">
+        <span id="hero-cost-value" class="cost-value">$0.00</span>
+        <div id="hero-cost-trend" class="cost-trend">
+          <span id="hero-trend-arrow" class="trend-arrow"></span>
+          <span id="hero-trend-pct" class="trend-pct"></span>
+        </div>
+      </div>
+
+      <div class="cost-delta-row">
+        <span id="hero-cost-delta" class="cost-delta"></span>
+        <span id="hero-comparison-label" class="comparison-label"></span>
+      </div>
+    </div>
+
+    <!-- Mini Sparkline -->
+    <div class="sparkline-block">
+      <canvas
+        id="hero-sparkline"
+        class="hero-sparkline"
+        width="120"
+        height="40"
+        aria-label="Cost trend over time"></canvas>
+      <span class="sparkline-label">7-day trend</span>
+    </div>
+
+    <!-- Status Indicator -->
+    <div class="status-block">
+      <div id="hero-status-dot" class="status-dot status-ok" aria-label="System status"></div>
+      <span id="hero-status-label" class="status-label">All OK</span>
+      <span id="hero-alert-count" class="alert-count" style="display: none;">0 alerts</span>
+    </div>
+  </div>
+
+  <!-- Quick Stats Pills -->
+  <div class="hero-stats-row">
+    <div class="stat-pill" data-type="workers">
+      <span class="pill-icon">&#x2699;&#xFE0F;</span>
+      <span id="stat-workers" class="pill-value">0</span>
+      <span class="pill-label">Workers</span>
+    </div>
+    <div class="stat-pill" data-type="d1">
+      <span class="pill-icon">&#x1F5C3;</span>
+      <span id="stat-d1" class="pill-value">0</span>
+      <span class="pill-label">D1</span>
+    </div>
+    <div class="stat-pill" data-type="kv">
+      <span class="pill-icon">&#x1F511;</span>
+      <span id="stat-kv" class="pill-value">0</span>
+      <span class="pill-label">KV</span>
+    </div>
+    <div class="stat-pill" data-type="r2">
+      <span class="pill-icon">&#x1F4E6;</span>
+      <span id="stat-r2" class="pill-value">0</span>
+      <span class="pill-label">R2</span>
+    </div>
+    <div class="stat-pill" data-type="pages">
+      <span class="pill-icon">&#x1F4C4;</span>
+      <span id="stat-pages" class="pill-value">0</span>
+      <span class="pill-label">Pages</span>
+    </div>
+    <div class="stat-pill" data-type="vectorize">
+      <span class="pill-icon">&#x1F9ED;</span>
+      <span id="stat-vectorize" class="pill-value">0</span>
+      <span class="pill-label">Vectorize</span>
+    </div>
+    <div class="stat-pill" data-type="aigateway">
+      <span class="pill-icon">&#x1F916;</span>
+      <span id="stat-aigateway" class="pill-value">0</span>
+      <span class="pill-label">AI Gateway</span>
+    </div>
+  </div>
+
+  <!-- Response Time / Meta -->
+  <div class="hero-meta">
+    <span id="hero-response-time" class="response-time"></span>
+    <span id="hero-last-updated" class="last-updated"></span>
+  </div>
+</div>
+
+<style>
+  .stats-hero {
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-xl);
+    padding: 1.5rem 2rem;
+    margin-bottom: 1.5rem;
+    transition:
+      background-color var(--usage-transition-normal),
+      border-color var(--usage-transition-normal);
+  }
+
+  .hero-primary {
+    display: flex;
+    align-items: flex-start;
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  /* Cost Block */
+  .cost-block {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .cost-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .cost-period {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-secondary);
+  }
+
+  .cache-badge {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.125rem 0.375rem;
+    background: var(--usage-accent-purple);
+    color: white;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  .cost-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+  }
+
+  .cost-value {
+    font-family: var(--usage-font-mono);
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+    line-height: 1;
+  }
+
+  .cost-trend {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--usage-radius-md);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .cost-trend.up {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .cost-trend.down {
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  .cost-trend.stable {
+    background: var(--usage-bg-tertiary);
+    color: var(--usage-text-secondary);
+  }
+
+  .trend-arrow {
+    font-size: 1rem;
+  }
+
+  .cost-delta-row {
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .cost-delta {
+    font-family: var(--usage-font-mono);
+    font-size: 0.875rem;
+    color: var(--usage-text-secondary);
+  }
+
+  .comparison-label {
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Sparkline Block */
+  .sparkline-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .hero-sparkline {
+    width: 120px;
+    height: 40px;
+  }
+
+  .sparkline-label {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-muted);
+  }
+
+  /* Status Block */
+  .status-block {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-lg);
+    margin-left: auto;
+  }
+
+  .status-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .status-dot.status-ok {
+    background: var(--usage-status-ok);
+    box-shadow: 0 0 8px var(--usage-status-ok);
+  }
+
+  .status-dot.status-warning {
+    background: var(--usage-status-warning);
+    box-shadow: 0 0 8px var(--usage-status-warning);
+  }
+
+  .status-dot.status-critical {
+    background: var(--usage-status-critical);
+    box-shadow: 0 0 8px var(--usage-status-critical);
+  }
+
+  .status-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+  }
+
+  .alert-count {
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+    padding: 0.125rem 0.5rem;
+    background: var(--usage-status-warning-bg);
+    color: var(--usage-status-warning);
+    border-radius: var(--usage-radius-sm);
+  }
+
+  /* Quick Stats Row */
+  .hero-stats-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    padding-top: 1rem;
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .stat-pill {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--usage-bg-tertiary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-lg);
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .stat-pill:hover {
+    background: var(--usage-bg-hover);
+    border-color: var(--usage-border-hover);
+  }
+
+  .stat-pill.active {
+    background: var(--usage-accent-blue);
+    border-color: var(--usage-accent-blue);
+  }
+
+  .stat-pill.active .pill-value,
+  .stat-pill.active .pill-label {
+    color: white;
+  }
+
+  .pill-icon {
+    font-size: 1rem;
+  }
+
+  .pill-value {
+    font-family: var(--usage-font-mono);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+  }
+
+  .pill-label {
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+  }
+
+  /* Hero Meta */
+  .hero-meta {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .response-time,
+  .last-updated {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .stats-hero {
+      padding: 1rem;
+    }
+
+    .hero-primary {
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .cost-value {
+      font-size: 2rem;
+    }
+
+    .status-block {
+      margin-left: 0;
+      width: 100%;
+      justify-content: center;
+    }
+
+    .hero-stats-row {
+      justify-content: center;
+    }
+
+    .stat-pill {
+      flex: 1;
+      min-width: 80px;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .cost-value {
+      font-size: 1.75rem;
+    }
+
+    .hero-stats-row {
+      gap: 0.5rem;
+    }
+
+    .stat-pill {
+      padding: 0.375rem 0.5rem;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+
+    .pill-label {
+      font-size: 0.625rem;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * StatsHero JavaScript
+   *
+   * Handles sparkline rendering and stat pill click-to-filter functionality.
+   */
+
+  // Draw mini sparkline on canvas
+  function drawHeroSparkline(canvas: HTMLCanvasElement, data: number[], color: string = '#58a6ff') {
+    const ctx = canvas.getContext('2d');
+    if (!ctx || data.length < 2) return;
+
+    const width = canvas.width;
+    const height = canvas.height;
+    const padding = 4;
+
+    ctx.clearRect(0, 0, width, height);
+
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+
+    const xStep = (width - padding * 2) / (data.length - 1);
+
+    // Draw line
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    data.forEach((value, index) => {
+      const x = padding + index * xStep;
+      const y = height - padding - ((value - min) / range) * (height - padding * 2);
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+
+    ctx.stroke();
+
+    // Draw gradient fill
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, color + '30');
+    gradient.addColorStop(1, color + '00');
+
+    ctx.lineTo(padding + (data.length - 1) * xStep, height);
+    ctx.lineTo(padding, height);
+    ctx.closePath();
+    ctx.fillStyle = gradient;
+    ctx.fill();
+  }
+
+  // Stat pill click handler - filters table by resource type
+  function initStatPillClicks() {
+    const pills = document.querySelectorAll('.stat-pill');
+
+    pills.forEach((pill) => {
+      pill.addEventListener('click', () => {
+        const type = (pill as HTMLElement).dataset.type;
+        if (!type) return;
+
+        // Toggle active state
+        const wasActive = pill.classList.contains('active');
+        pills.forEach((p) => p.classList.remove('active'));
+
+        if (!wasActive) {
+          pill.classList.add('active');
+          // Dispatch event to filter table
+          window.dispatchEvent(new CustomEvent('usage:filter-type', { detail: { type } }));
+        } else {
+          // Clear filter
+          window.dispatchEvent(new CustomEvent('usage:filter-type', { detail: { type: null } }));
+        }
+      });
+    });
+  }
+
+  // Update hero stats from API data
+  window.updateStatsHero = function (data: {
+    cost: number;
+    costDelta?: number;
+    costDeltaPct?: number;
+    trend?: 'up' | 'down' | 'stable';
+    sparklineData?: number[];
+    resourceCounts: Record<string, number>;
+    alertCount?: number;
+    alertStatus?: 'ok' | 'warning' | 'critical';
+    cached?: boolean;
+    responseTime?: number;
+  }) {
+    // Cost value
+    const costEl = document.getElementById('hero-cost-value');
+    if (costEl) {
+      costEl.textContent = `$${data.cost.toFixed(2)}`;
+    }
+
+    // Cost trend
+    const trendEl = document.getElementById('hero-cost-trend');
+    const trendArrowEl = document.getElementById('hero-trend-arrow');
+    const trendPctEl = document.getElementById('hero-trend-pct');
+
+    if (trendEl && trendArrowEl && trendPctEl && data.trend) {
+      trendEl.className = 'cost-trend ' + data.trend;
+
+      if (data.trend === 'up') {
+        trendArrowEl.textContent = '↑';
+      } else if (data.trend === 'down') {
+        trendArrowEl.textContent = '↓';
+      } else {
+        trendArrowEl.textContent = '→';
+      }
+
+      trendPctEl.textContent = data.costDeltaPct
+        ? `${Math.abs(data.costDeltaPct).toFixed(1)}%`
+        : '';
+    }
+
+    // Cost delta
+    const deltaEl = document.getElementById('hero-cost-delta');
+    if (deltaEl && data.costDelta !== undefined) {
+      const sign = data.costDelta >= 0 ? '+' : '';
+      deltaEl.textContent = `${sign}$${data.costDelta.toFixed(2)}`;
+    }
+
+    // Resource counts
+    const countKeys = ['workers', 'd1', 'kv', 'r2', 'pages', 'vectorize', 'aigateway'];
+    countKeys.forEach((key) => {
+      const el = document.getElementById(`stat-${key}`);
+      if (el) {
+        el.textContent = String(data.resourceCounts[key] || 0);
+      }
+    });
+
+    // Status
+    const statusDotEl = document.getElementById('hero-status-dot');
+    const statusLabelEl = document.getElementById('hero-status-label');
+    const alertCountEl = document.getElementById('hero-alert-count');
+
+    if (statusDotEl && statusLabelEl) {
+      statusDotEl.className = 'status-dot';
+
+      if (data.alertStatus === 'critical') {
+        statusDotEl.classList.add('status-critical');
+        statusLabelEl.textContent = 'Critical';
+      } else if (data.alertStatus === 'warning') {
+        statusDotEl.classList.add('status-warning');
+        statusLabelEl.textContent = 'Warning';
+      } else {
+        statusDotEl.classList.add('status-ok');
+        statusLabelEl.textContent = 'All OK';
+      }
+    }
+
+    if (alertCountEl && data.alertCount && data.alertCount > 0) {
+      alertCountEl.style.display = 'inline';
+      alertCountEl.textContent = `${data.alertCount} alert${data.alertCount > 1 ? 's' : ''}`;
+    }
+
+    // Sparkline
+    const sparklineCanvas = document.getElementById('hero-sparkline') as HTMLCanvasElement;
+    if (sparklineCanvas && data.sparklineData && data.sparklineData.length > 1) {
+      const color = data.trend === 'up' ? '#f85149' : data.trend === 'down' ? '#3fb950' : '#58a6ff';
+      drawHeroSparkline(sparklineCanvas, data.sparklineData, color);
+    }
+
+    // Cache badge
+    const cacheBadgeEl = document.getElementById('hero-cache-badge');
+    if (cacheBadgeEl) {
+      cacheBadgeEl.style.display = data.cached ? 'inline' : 'none';
+    }
+
+    // Response time
+    const responseTimeEl = document.getElementById('hero-response-time');
+    if (responseTimeEl && data.responseTime) {
+      responseTimeEl.textContent = `Response: ${data.responseTime}ms`;
+    }
+
+    // Last updated
+    const lastUpdatedEl = document.getElementById('hero-last-updated');
+    if (lastUpdatedEl) {
+      lastUpdatedEl.textContent = `Updated: ${new Date().toLocaleTimeString()}`;
+    }
+  };
+
+  // Initialize on DOM ready
+  document.addEventListener('DOMContentLoaded', initStatPillClicks);
+</script>