@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,539 @@
+---
+/**
+ * BurnRateHero Component
+ *
+ * Global "Total Cloudflare Burn Rate" hero section displaying:
+ * - Month-to-date (MTD) total spend across all Cloudflare services
+ * - Projected Monthly Total based on current velocity
+ * - Daily burn rate average
+ * - Days remaining in billing period
+ *
+ * Data is populated via JavaScript after API fetch.
+ */
+---
+
+<div class="burn-rate-hero" role="region" aria-label="Cloudflare burn rate summary">
+  <!-- Primary Stats Row -->
+  <div class="burn-hero-primary">
+    <!-- MTD Spend -->
+    <div class="burn-stat-block mtd-block">
+      <div class="burn-stat-header">
+        <span class="burn-stat-label">Month-to-Date Spend</span>
+        <span id="burn-mtd-period" class="burn-period-badge">Jan 1-12</span>
+      </div>
+      <div class="burn-stat-value-row">
+        <span id="burn-mtd-value" class="burn-stat-value">$0.00</span>
+        <div id="burn-mtd-trend" class="burn-trend" style="display: none;">
+          <span id="burn-mtd-arrow" class="trend-arrow"></span>
+          <span id="burn-mtd-pct" class="trend-pct"></span>
+        </div>
+      </div>
+      <div class="burn-stat-meta">
+        <span id="burn-mtd-vs-last" class="burn-comparison"></span>
+      </div>
+    </div>
+
+    <!-- Projected Monthly -->
+    <div class="burn-stat-block projected-block">
+      <div class="burn-stat-header">
+        <span class="burn-stat-label">Projected Monthly Total</span>
+        <span class="burn-velocity-badge">Current Velocity</span>
+      </div>
+      <div class="burn-stat-value-row">
+        <span id="burn-projected-value" class="burn-stat-value projected">$0.00</span>
+        <div id="burn-projected-confidence" class="confidence-badge" style="display: none;">
+          <span id="burn-confidence-label">Medium</span>
+        </div>
+      </div>
+      <div class="burn-stat-meta">
+        <span id="burn-projected-note" class="burn-note">Based on 12 days of data</span>
+      </div>
+    </div>
+
+    <!-- Daily Rate -->
+    <div class="burn-stat-block rate-block">
+      <div class="burn-stat-header">
+        <span class="burn-stat-label">Daily Burn Rate</span>
+      </div>
+      <div class="burn-stat-value-row">
+        <span id="burn-daily-value" class="burn-stat-value small">$0.00</span>
+        <span class="burn-daily-unit">/day</span>
+      </div>
+      <div class="burn-stat-meta">
+        <span id="burn-days-remaining" class="burn-note">19 days remaining</span>
+      </div>
+    </div>
+
+    <!-- Quick Status -->
+    <div class="burn-stat-block status-block">
+      <div class="burn-status-indicator">
+        <div id="burn-status-dot" class="status-dot status-green" aria-label="Budget status"></div>
+        <div class="status-text">
+          <span id="burn-status-label" class="status-label">On Track</span>
+          <span id="burn-status-detail" class="status-detail">Under budget</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Secondary Info Row -->
+  <div class="burn-hero-secondary">
+    <div class="burn-info-item">
+      <span class="info-icon">&#x1F4C5;</span>
+      <span id="burn-billing-period" class="info-text">Billing: Jan 1 - Jan 31</span>
+    </div>
+    <div class="burn-info-item">
+      <span class="info-icon">&#x23F0;</span>
+      <span id="burn-last-updated" class="info-text">Updated: --</span>
+    </div>
+    <div class="burn-info-item">
+      <span class="info-icon">&#x1F4BE;</span>
+      <span id="burn-data-source" class="info-text">Source: D1 Warehouse</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .burn-rate-hero {
+    background: linear-gradient(
+      135deg,
+      var(--usage-bg-secondary) 0%,
+      var(--usage-bg-tertiary) 100%
+    );
+    border: 2px solid var(--usage-accent-blue);
+    border-radius: var(--usage-radius-xl);
+    padding: 1.5rem 2rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .burn-rate-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(
+      90deg,
+      var(--usage-accent-blue),
+      var(--usage-accent-purple),
+      var(--usage-accent-blue)
+    );
+    background-size: 200% 100%;
+    animation: shimmer 3s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .burn-hero-primary {
+    display: grid;
+    grid-template-columns: 1.5fr 1.5fr 1fr auto;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .burn-stat-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .burn-stat-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .burn-stat-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-secondary);
+  }
+
+  .burn-period-badge,
+  .burn-velocity-badge {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  .burn-period-badge {
+    background: var(--usage-accent-blue);
+    color: white;
+  }
+
+  .burn-velocity-badge {
+    background: var(--usage-accent-purple);
+    color: white;
+  }
+
+  .burn-stat-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .burn-stat-value {
+    font-family: var(--usage-font-mono);
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+    line-height: 1;
+  }
+
+  .burn-stat-value.projected {
+    color: var(--usage-accent-purple);
+  }
+
+  .burn-stat-value.small {
+    font-size: 1.5rem;
+  }
+
+  .burn-daily-unit {
+    font-size: 0.875rem;
+    color: var(--usage-text-secondary);
+    font-weight: 500;
+  }
+
+  .burn-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;
+  }
+
+  .burn-trend.up {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .burn-trend.down {
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  .burn-trend.stable {
+    background: var(--usage-bg-tertiary);
+    color: var(--usage-text-secondary);
+  }
+
+  .trend-arrow {
+    font-size: 0.875rem;
+  }
+
+  .confidence-badge {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--usage-radius-sm);
+    background: var(--usage-bg-tertiary);
+    color: var(--usage-text-secondary);
+  }
+
+  .confidence-badge.high {
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  .confidence-badge.medium {
+    background: var(--usage-status-warning-bg);
+    color: var(--usage-status-warning);
+  }
+
+  .confidence-badge.low {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .burn-stat-meta {
+    min-height: 1rem;
+  }
+
+  .burn-comparison {
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+  }
+
+  .burn-note {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Status Block */
+  .status-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .burn-status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-lg);
+  }
+
+  .status-dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .status-dot.status-green {
+    background: var(--usage-status-ok);
+    box-shadow: 0 0 12px var(--usage-status-ok);
+  }
+
+  .status-dot.status-yellow {
+    background: var(--usage-status-warning);
+    box-shadow: 0 0 12px var(--usage-status-warning);
+  }
+
+  .status-dot.status-red {
+    background: var(--usage-status-critical);
+    box-shadow: 0 0 12px var(--usage-status-critical);
+  }
+
+  .status-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .status-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+  }
+
+  .status-detail {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Secondary Info Row */
+  .burn-hero-secondary {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .burn-info-item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .info-icon {
+    font-size: 0.875rem;
+  }
+
+  .info-text {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Responsive */
+  @media (max-width: 1024px) {
+    .burn-hero-primary {
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+    }
+
+    .status-block {
+      grid-column: span 2;
+      justify-content: flex-start;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .burn-rate-hero {
+      padding: 1rem;
+    }
+
+    .burn-hero-primary {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .burn-stat-value {
+      font-size: 1.75rem;
+    }
+
+    .burn-stat-value.small {
+      font-size: 1.25rem;
+    }
+
+    .status-block {
+      grid-column: span 1;
+    }
+
+    .burn-hero-secondary {
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * BurnRateHero JavaScript
+   *
+   * Updates the burn rate display from API data.
+   */
+
+  interface BurnRateData {
+    mtdCost: number;
+    mtdStartDate: string;
+    mtdEndDate: string;
+    projectedMonthlyCost: number;
+    dailyBurnRate: number;
+    daysIntoMonth: number;
+    daysRemaining: number;
+    confidence: 'low' | 'medium' | 'high';
+    vsLastMonthPct: number | null;
+    billingPeriodStart: string;
+    billingPeriodEnd: string;
+    status: 'green' | 'yellow' | 'red';
+    statusLabel: string;
+    statusDetail: string;
+    dataSource: 'D1 Warehouse' | 'Live API' | 'Cached';
+    lastUpdated: string;
+  }
+
+  // Update burn rate hero from API data
+  window.updateBurnRateHero = function (data: BurnRateData) {
+    // MTD Value
+    const mtdValueEl = document.getElementById('burn-mtd-value');
+    if (mtdValueEl) {
+      mtdValueEl.textContent = `$${data.mtdCost.toFixed(2)}`;
+    }
+
+    // MTD Period badge
+    const mtdPeriodEl = document.getElementById('burn-mtd-period');
+    if (mtdPeriodEl) {
+      const start = new Date(data.mtdStartDate);
+      const end = new Date(data.mtdEndDate);
+      mtdPeriodEl.textContent = `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}-${end.getDate()}`;
+    }
+
+    // MTD vs Last Month
+    const mtdVsLastEl = document.getElementById('burn-mtd-vs-last');
+    const mtdTrendEl = document.getElementById('burn-mtd-trend');
+    const mtdArrowEl = document.getElementById('burn-mtd-arrow');
+    const mtdPctEl = document.getElementById('burn-mtd-pct');
+
+    if (data.vsLastMonthPct !== null && mtdVsLastEl && mtdTrendEl && mtdArrowEl && mtdPctEl) {
+      mtdTrendEl.style.display = 'flex';
+      const isUp = data.vsLastMonthPct > 0;
+      mtdTrendEl.className =
+        'burn-trend ' + (isUp ? 'up' : data.vsLastMonthPct < 0 ? 'down' : 'stable');
+      mtdArrowEl.textContent = isUp ? '↑' : data.vsLastMonthPct < 0 ? '↓' : '→';
+      // Cap extreme percentages at 999%
+      const absPct = Math.abs(data.vsLastMonthPct);
+      mtdPctEl.textContent = absPct > 999 ? '>999%' : `${absPct.toFixed(1)}%`;
+      mtdVsLastEl.textContent = `vs last month (same period)`;
+    }
+
+    // Projected Monthly
+    const projectedValueEl = document.getElementById('burn-projected-value');
+    if (projectedValueEl) {
+      projectedValueEl.textContent = `$${data.projectedMonthlyCost.toFixed(2)}`;
+    }
+
+    // Confidence badge
+    const confidenceEl = document.getElementById('burn-projected-confidence');
+    const confidenceLabelEl = document.getElementById('burn-confidence-label');
+    if (confidenceEl && confidenceLabelEl) {
+      confidenceEl.style.display = 'inline-flex';
+      confidenceEl.className = 'confidence-badge ' + data.confidence;
+      confidenceLabelEl.textContent =
+        data.confidence.charAt(0).toUpperCase() + data.confidence.slice(1);
+    }
+
+    // Projected note
+    const projectedNoteEl = document.getElementById('burn-projected-note');
+    if (projectedNoteEl) {
+      projectedNoteEl.textContent = `Based on ${data.daysIntoMonth} days of data`;
+    }
+
+    // Daily burn rate
+    const dailyValueEl = document.getElementById('burn-daily-value');
+    if (dailyValueEl) {
+      dailyValueEl.textContent = `$${data.dailyBurnRate.toFixed(2)}`;
+    }
+
+    // Days remaining
+    const daysRemainingEl = document.getElementById('burn-days-remaining');
+    if (daysRemainingEl) {
+      daysRemainingEl.textContent = `${data.daysRemaining} days remaining`;
+    }
+
+    // Status indicator
+    const statusDotEl = document.getElementById('burn-status-dot');
+    const statusLabelEl = document.getElementById('burn-status-label');
+    const statusDetailEl = document.getElementById('burn-status-detail');
+
+    if (statusDotEl) {
+      statusDotEl.className = 'status-dot status-' + data.status;
+    }
+    if (statusLabelEl) {
+      statusLabelEl.textContent = data.statusLabel;
+    }
+    if (statusDetailEl) {
+      statusDetailEl.textContent = data.statusDetail;
+    }
+
+    // Billing period
+    const billingPeriodEl = document.getElementById('burn-billing-period');
+    if (billingPeriodEl) {
+      const start = new Date(data.billingPeriodStart);
+      const end = new Date(data.billingPeriodEnd);
+      billingPeriodEl.textContent = `Billing: ${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`;
+    }
+
+    // Last updated
+    const lastUpdatedEl = document.getElementById('burn-last-updated');
+    if (lastUpdatedEl) {
+      lastUpdatedEl.textContent = `Updated: ${data.lastUpdated}`;
+    }
+
+    // Data source
+    const dataSourceEl = document.getElementById('burn-data-source');
+    if (dataSourceEl) {
+      dataSourceEl.textContent = `Source: ${data.dataSource}`;
+    }
+  };
+
+  // Type declaration for global window
+  declare global {
+    interface Window {
+      updateBurnRateHero: (data: BurnRateData) => void;
+    }
+  }
+</script>