@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,170 @@
+---
+/**
+ * TopSpenderCard - Shows resource with highest cost
+ *
+ * Part of task-usage-rebuild: Single Pane of Glass
+ * Displays the service type with highest cost in the period
+ */
+---
+
+<div
+  class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm h-full flex flex-col"
+>
+  <!-- Header -->
+  <div class="flex items-center gap-2 mb-3">
+    <div
+      class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center"
+    >
+      <svg
+        class="w-4 h-4 text-amber-600 dark:text-amber-400"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+      </svg>
+    </div>
+    <div>
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Top Spender</h3>
+    </div>
+  </div>
+
+  <!-- Main metric -->
+  <div class="mb-3">
+    <div class="flex items-baseline gap-2">
+      <span id="top-spender-cost" class="text-3xl font-bold text-gray-900 dark:text-gray-100"
+        >$--</span
+      >
+      <span id="top-spender-pct" class="text-sm text-gray-500 dark:text-gray-400">-- of total</span>
+    </div>
+    <div id="top-spender-name" class="text-sm font-medium text-amber-600 dark:text-amber-400 mt-1">
+      Loading...
+    </div>
+  </div>
+
+  <!-- Breakdown mini-bars -->
+  <div id="top-spender-breakdown" class="space-y-1.5 flex-grow flex flex-col justify-end">
+    <!-- Populated by JavaScript -->
+  </div>
+</div>
+
+<script>
+  interface BurnRateData {
+    mtdCost?: number;
+    projectedMonthlyCost?: number;
+    breakdown?: Record<string, number>;
+  }
+
+  const SERVICE_LABELS: Record<string, string> = {
+    workers: 'Workers',
+    d1: 'D1 Database',
+    kv: 'KV Storage',
+    r2: 'R2 Storage',
+    durableObjects: 'Durable Objects',
+    vectorize: 'Vectorize',
+    aiGateway: 'AI Gateway',
+    workersAI: 'Workers AI',
+    queues: 'Queues',
+  };
+
+  const SERVICE_COLORS: Record<string, string> = {
+    workers: 'bg-blue-500',
+    d1: 'bg-green-500',
+    kv: 'bg-purple-500',
+    r2: 'bg-orange-500',
+    durableObjects: 'bg-pink-500',
+    vectorize: 'bg-cyan-500',
+    aiGateway: 'bg-indigo-500',
+    workersAI: 'bg-red-500',
+    queues: 'bg-yellow-500',
+  };
+
+  function formatCost(cost: number): string {
+    if (cost >= 1000) return `$${(cost / 1000).toFixed(1)}K`;
+    if (cost >= 1) return `$${cost.toFixed(2)}`;
+    if (cost >= 0.01) return `$${cost.toFixed(3)}`;
+    return `$${cost.toFixed(4)}`;
+  }
+
+  function createBreakdownRow(service: string, cost: number, maxCost: number): HTMLDivElement {
+    const widthPct = (cost / maxCost) * 100;
+    const label = SERVICE_LABELS[service] || service;
+    const color = SERVICE_COLORS[service] || 'bg-gray-500';
+
+    const row = document.createElement('div');
+    row.className = 'flex items-center gap-2 text-xs';
+
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'w-24 truncate text-gray-600 dark:text-gray-400';
+    labelSpan.textContent = label;
+    labelSpan.title = label; // Tooltip shows full name on hover
+
+    const barContainer = document.createElement('div');
+    barContainer.className =
+      'flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden';
+
+    const bar = document.createElement('div');
+    bar.className = `h-full ${color} rounded-full`;
+    bar.style.width = `${widthPct}%`;
+    barContainer.appendChild(bar);
+
+    const costSpan = document.createElement('span');
+    costSpan.className = 'w-14 text-right text-gray-500 dark:text-gray-400';
+    costSpan.textContent = formatCost(cost);
+
+    row.appendChild(labelSpan);
+    row.appendChild(barContainer);
+    row.appendChild(costSpan);
+
+    return row;
+  }
+
+  function updateTopSpender(data: BurnRateData) {
+    const breakdown = data.breakdown || {};
+    const totalCost = data.mtdCost || Object.values(breakdown).reduce((sum, v) => sum + v, 0);
+
+    // Sort by cost descending
+    const sorted = Object.entries(breakdown)
+      .filter(([_, cost]) => cost > 0)
+      .sort((a, b) => b[1] - a[1]);
+
+    if (sorted.length === 0) {
+      const costEl = document.getElementById('top-spender-cost');
+      const nameEl = document.getElementById('top-spender-name');
+      if (costEl) costEl.textContent = '$0.00';
+      if (nameEl) nameEl.textContent = 'No costs recorded';
+      return;
+    }
+
+    const [topService, topCost] = sorted[0];
+    const pctOfTotal = totalCost > 0 ? (topCost / totalCost) * 100 : 0;
+
+    const costEl = document.getElementById('top-spender-cost');
+    const pctEl = document.getElementById('top-spender-pct');
+    const nameEl = document.getElementById('top-spender-name');
+    const breakdownEl = document.getElementById('top-spender-breakdown');
+
+    if (costEl) costEl.textContent = formatCost(topCost);
+    if (pctEl) pctEl.textContent = `${pctOfTotal.toFixed(0)}% of total`;
+    if (nameEl) nameEl.textContent = SERVICE_LABELS[topService] || topService;
+
+    // Build mini breakdown bars (top 4) using safe DOM methods
+    if (breakdownEl) {
+      breakdownEl.replaceChildren(); // Clear existing content safely
+      const topFour = sorted.slice(0, 4);
+      const maxCost = topFour[0][1];
+
+      for (const [service, cost] of topFour) {
+        breakdownEl.appendChild(createBreakdownRow(service, cost, maxCost));
+      }
+    }
+  }
+
+  // Expose globally for index.astro to call
+  (window as unknown as { updateTopSpender: typeof updateTopSpender }).updateTopSpender =
+    updateTopSpender;
+</script>