@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,640 @@
+---
+/**
+ * ProjectCard Component
+ *
+ * Individual project card for the usage dashboard displaying:
+ * - Project name and icon
+ * - MTD Cost (USD)
+ * - Utilization bar showing usage vs. primary Cloudflare resource limit
+ * - Traffic light status (Green <70%, Yellow 70-90%, Red >90%)
+ * - 7-day sparkline trend from hourly_usage_snapshots
+ * - Circuit breaker status indicator
+ *
+ * Props are optional - data is populated via JavaScript after API fetch.
+ */
+
+interface Props {
+  projectId?: string;
+  projectName?: string;
+  primaryResource?: string;
+}
+
+const { projectId = '', projectName = '', primaryResource = '' } = Astro.props;
+---
+
+<div
+  class="project-card"
+  data-project-id={projectId}
+  role="article"
+  aria-label={`${projectName} project usage`}
+>
+  <!-- Card Header -->
+  <div class="card-header">
+    <div class="project-identity">
+      <span class="project-icon" data-project={projectId}></span>
+      <div class="project-info">
+        <h3 class="project-name">{projectName}</h3>
+        <span class="project-resource">Primary: {primaryResource}</span>
+      </div>
+    </div>
+    <div class="traffic-light" data-status="green">
+      <div class="traffic-dot"></div>
+    </div>
+  </div>
+
+  <!-- MTD Cost -->
+  <div class="card-cost">
+    <span class="cost-label">MTD Cost</span>
+    <div class="cost-row">
+      <span class="cost-value">$0.00</span>
+      <span class="cost-delta"></span>
+    </div>
+  </div>
+
+  <!-- Utilization Bar -->
+  <div class="card-utilization">
+    <div class="utilization-header">
+      <span class="utilization-label">Utilization</span>
+      <span class="utilization-value">0%</span>
+    </div>
+    <div class="utilization-bar-container">
+      <div class="utilization-bar" style="width: 0%;">
+        <div class="utilization-fill"></div>
+      </div>
+      <div class="utilization-markers">
+        <div class="marker marker-70" title="70% threshold"></div>
+        <div class="marker marker-90" title="90% threshold"></div>
+      </div>
+    </div>
+    <div class="utilization-meta">
+      <span class="utilization-current">0 / 0</span>
+      <span class="utilization-unit"></span>
+    </div>
+  </div>
+
+  <!-- 7-Day Sparkline -->
+  <div class="card-sparkline">
+    <div class="sparkline-header">
+      <span class="sparkline-label">7-Day Trend</span>
+    </div>
+    <canvas class="sparkline-canvas" width="180" height="40" aria-label="7-day usage trend"
+    ></canvas>
+  </div>
+
+  <!-- Circuit Breaker Status -->
+  <div class="card-circuit-breaker">
+    <div class="cb-indicator" data-status="active">
+      <span class="cb-dot"></span>
+      <span class="cb-label">Circuit OK</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .project-card {
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-xl);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    transition: all var(--usage-transition-normal);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .project-card:hover {
+    border-color: var(--usage-border-hover);
+    box-shadow: var(--usage-shadow-md);
+  }
+
+  .project-card[data-status='red'] {
+    border-color: var(--usage-status-critical);
+    background: linear-gradient(
+      135deg,
+      var(--usage-bg-secondary) 0%,
+      var(--usage-status-critical-bg) 100%
+    );
+  }
+
+  .project-card[data-status='yellow'] {
+    border-color: var(--usage-status-warning);
+    background: linear-gradient(
+      135deg,
+      var(--usage-bg-secondary) 0%,
+      var(--usage-status-warning-bg) 100%
+    );
+  }
+
+  /* Card Header */
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .project-identity {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .project-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--usage-radius-lg);
+    background: var(--usage-bg-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+  }
+
+  .project-icon[data-project='scout']::before {
+    content: '🔍';
+  }
+  .project-icon[data-project='brand-copilot']::before {
+    content: '🎨';
+  }
+  .project-icon[data-project='australian-history-mcp']::before {
+    content: '📚';
+  }
+  .project-icon[data-project='platform']::before {
+    content: '🏗️';
+  }
+
+  .project-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .project-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  .project-resource {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  /* Traffic Light */
+  .traffic-light {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--usage-bg-tertiary);
+    border: 2px solid var(--usage-border-default);
+  }
+
+  .traffic-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    transition: all var(--usage-transition-normal);
+  }
+
+  .traffic-light[data-status='green'] {
+    border-color: var(--usage-status-ok);
+  }
+  .traffic-light[data-status='green'] .traffic-dot {
+    background: var(--usage-status-ok);
+    box-shadow: 0 0 8px var(--usage-status-ok);
+  }
+
+  .traffic-light[data-status='yellow'] {
+    border-color: var(--usage-status-warning);
+  }
+  .traffic-light[data-status='yellow'] .traffic-dot {
+    background: var(--usage-status-warning);
+    box-shadow: 0 0 8px var(--usage-status-warning);
+  }
+
+  .traffic-light[data-status='red'] {
+    border-color: var(--usage-status-critical);
+  }
+  .traffic-light[data-status='red'] .traffic-dot {
+    background: var(--usage-status-critical);
+    box-shadow: 0 0 8px var(--usage-status-critical);
+  }
+
+  /* MTD Cost */
+  .card-cost {
+    padding: 0.75rem;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-lg);
+  }
+
+  .cost-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-muted);
+  }
+
+  .cost-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+  }
+
+  .cost-value {
+    font-family: var(--usage-font-mono);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+    line-height: 1;
+  }
+
+  .cost-delta {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--usage-radius-sm);
+  }
+
+  .cost-delta.up {
+    background: var(--usage-status-critical-bg);
+    color: var(--usage-status-critical);
+  }
+
+  .cost-delta.down {
+    background: var(--usage-status-ok-bg);
+    color: var(--usage-status-ok);
+  }
+
+  /* Utilization Bar */
+  .card-utilization {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .utilization-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .utilization-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--usage-text-muted);
+  }
+
+  .utilization-value {
+    font-family: var(--usage-font-mono);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--usage-text-primary);
+  }
+
+  .utilization-bar-container {
+    position: relative;
+    height: 12px;
+    background: var(--usage-bg-tertiary);
+    border-radius: var(--usage-radius-md);
+    overflow: visible;
+  }
+
+  .utilization-bar {
+    height: 100%;
+    border-radius: var(--usage-radius-md);
+    transition: width var(--usage-transition-slow);
+    overflow: hidden;
+  }
+
+  .utilization-fill {
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--usage-status-ok) 0%,
+      var(--usage-status-ok) 70%,
+      var(--usage-status-warning) 70%,
+      var(--usage-status-warning) 90%,
+      var(--usage-status-critical) 90%
+    );
+    background-size: 143% 100%; /* 100/70 to align gradient with fill */
+  }
+
+  .utilization-markers {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .marker {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    width: 2px;
+    background: var(--usage-bg-primary);
+    opacity: 0.6;
+  }
+
+  .marker-70 {
+    left: 70%;
+  }
+
+  .marker-90 {
+    left: 90%;
+  }
+
+  .utilization-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .utilization-current {
+    font-family: var(--usage-font-mono);
+    font-size: 0.6875rem;
+    color: var(--usage-text-secondary);
+  }
+
+  .utilization-unit {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Sparkline */
+  .card-sparkline {
+    border-top: 1px solid var(--usage-border-subtle);
+    padding-top: 0.75rem;
+  }
+
+  .sparkline-header {
+    margin-bottom: 0.375rem;
+  }
+
+  .sparkline-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--usage-text-muted);
+  }
+
+  .sparkline-canvas {
+    width: 100%;
+    height: 40px;
+  }
+
+  /* Circuit Breaker */
+  .card-circuit-breaker {
+    border-top: 1px solid var(--usage-border-subtle);
+    padding-top: 0.5rem;
+  }
+
+  .cb-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .cb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    transition: all var(--usage-transition-normal);
+  }
+
+  .cb-indicator[data-status='active'] .cb-dot {
+    background: var(--usage-status-ok);
+  }
+
+  .cb-indicator[data-status='tripped'] .cb-dot {
+    background: var(--usage-status-critical);
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  .cb-indicator[data-status='degraded'] .cb-dot {
+    background: var(--usage-status-warning);
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .cb-label {
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  /* Responsive */
+  @media (max-width: 480px) {
+    .project-card {
+      padding: 1rem;
+    }
+
+    .cost-value {
+      font-size: 1.25rem;
+    }
+
+    .project-icon {
+      width: 32px;
+      height: 32px;
+      font-size: 1rem;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * ProjectCard JavaScript
+   *
+   * Handles sparkline drawing and data updates.
+   */
+
+  interface ProjectCardData {
+    projectId: string;
+    projectName: string;
+    primaryResource: string;
+    mtdCost: number;
+    costDelta?: number;
+    costDeltaPct?: number;
+    utilizationPct: number;
+    utilizationCurrent: number;
+    utilizationLimit: number;
+    utilizationUnit: string;
+    status: 'green' | 'yellow' | 'red';
+    sparklineData: number[];
+    circuitBreakerStatus: 'active' | 'tripped' | 'degraded';
+    circuitBreakerLabel: string;
+  }
+
+  // Draw sparkline on canvas
+  function drawCardSparkline(
+    canvas: HTMLCanvasElement,
+    data: number[],
+    status: 'green' | 'yellow' | 'red'
+  ) {
+    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);
+
+    // Color based on status
+    const colors = {
+      green:
+        getComputedStyle(document.documentElement).getPropertyValue('--usage-status-ok').trim() ||
+        '#3fb950',
+      yellow:
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--usage-status-warning')
+          .trim() || '#d29922',
+      red:
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--usage-status-critical')
+          .trim() || '#f85149',
+    };
+    const color = colors[status];
+
+    // 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();
+  }
+
+  // Format large numbers
+  function formatNumber(n: number): string {
+    if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+    return n.toLocaleString();
+  }
+
+  // Update a single project card
+  window.updateProjectCard = function (data: ProjectCardData) {
+    const card = document.querySelector(`.project-card[data-project-id="${data.projectId}"]`);
+    if (!card) return;
+
+    // Update card status
+    card.setAttribute('data-status', data.status);
+
+    // Project name and resource (if changed)
+    const nameEl = card.querySelector('.project-name');
+    const resourceEl = card.querySelector('.project-resource');
+    if (nameEl) nameEl.textContent = data.projectName;
+    if (resourceEl) resourceEl.textContent = `Primary: ${data.primaryResource}`;
+
+    // Traffic light
+    const trafficLight = card.querySelector('.traffic-light');
+    if (trafficLight) {
+      trafficLight.setAttribute('data-status', data.status);
+    }
+
+    // MTD Cost
+    const costValueEl = card.querySelector('.cost-value');
+    const costDeltaEl = card.querySelector('.cost-delta');
+    if (costValueEl) {
+      costValueEl.textContent = `$${data.mtdCost.toFixed(2)}`;
+    }
+    if (costDeltaEl && data.costDeltaPct !== undefined) {
+      const isUp = data.costDeltaPct > 0;
+      costDeltaEl.className = 'cost-delta ' + (isUp ? 'up' : 'down');
+      costDeltaEl.textContent = `${isUp ? '+' : ''}${data.costDeltaPct.toFixed(1)}%`;
+    }
+
+    // Utilization
+    const utilValueEl = card.querySelector('.utilization-value');
+    const utilBarEl = card.querySelector('.utilization-bar') as HTMLElement;
+    const utilCurrentEl = card.querySelector('.utilization-current');
+    const utilUnitEl = card.querySelector('.utilization-unit');
+
+    if (utilValueEl) {
+      utilValueEl.textContent = `${Math.min(data.utilizationPct, 999).toFixed(1)}%`;
+    }
+    if (utilBarEl) {
+      utilBarEl.style.width = `${Math.min(data.utilizationPct, 100)}%`;
+    }
+    if (utilCurrentEl) {
+      utilCurrentEl.textContent = `${formatNumber(data.utilizationCurrent)} / ${formatNumber(data.utilizationLimit)}`;
+    }
+    if (utilUnitEl) {
+      utilUnitEl.textContent = data.utilizationUnit;
+    }
+
+    // Sparkline
+    const canvas = card.querySelector('.sparkline-canvas') as HTMLCanvasElement;
+    if (canvas && data.sparklineData && data.sparklineData.length > 1) {
+      drawCardSparkline(canvas, data.sparklineData, data.status);
+    }
+
+    // Circuit breaker
+    const cbIndicator = card.querySelector('.cb-indicator');
+    const cbLabel = card.querySelector('.cb-label');
+    if (cbIndicator) {
+      cbIndicator.setAttribute('data-status', data.circuitBreakerStatus);
+    }
+    if (cbLabel) {
+      cbLabel.textContent = data.circuitBreakerLabel;
+    }
+  };
+
+  // Type declaration for global window
+  declare global {
+    interface Window {
+      updateProjectCard: (data: ProjectCardData) => void;
+    }
+  }
+</script>