@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,170 @@
+---
+/**
+ * AllowanceGauge - Circular gauge showing allowance utilisation
+ *
+ * Displays "X% of Free Tier Used" with a circular progress gauge.
+ * Supports prorated allowances for sub-monthly query periods.
+ *
+ * @created 2026-01-22
+ */
+
+interface Props {
+  /** Resource name (e.g., "Workers Requests", "D1 Reads") */
+  resourceName?: string;
+  /** ID for JavaScript updates */
+  id?: string;
+}
+
+const { resourceName = 'Allowance', id = 'allowance-gauge' } = Astro.props;
+---
+
+<div
+  id={id}
+  class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm"
+>
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-3">
+    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{resourceName}</h3>
+    <span
+      id={`${id}-badge`}
+      class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
+    >
+      Within Limit
+    </span>
+  </div>
+
+  <!-- Circular Gauge -->
+  <div class="flex items-center justify-center mb-3">
+    <div class="relative w-28 h-28">
+      <!-- Background circle -->
+      <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 120 120">
+        <circle
+          cx="60"
+          cy="60"
+          r="50"
+          stroke="currentColor"
+          stroke-width="10"
+          fill="none"
+          class="text-gray-200 dark:text-gray-700"></circle>
+        <!-- Progress circle -->
+        <circle
+          id={`${id}-progress`}
+          cx="60"
+          cy="60"
+          r="50"
+          stroke="currentColor"
+          stroke-width="10"
+          fill="none"
+          stroke-linecap="round"
+          class="text-green-500 transition-all duration-700 ease-out"
+          stroke-dasharray="314"
+          stroke-dashoffset="314"></circle>
+      </svg>
+      <!-- Center text -->
+      <div class="absolute inset-0 flex flex-col items-center justify-center">
+        <span id={`${id}-pct`} class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          --%
+        </span>
+        <span class="text-xs text-gray-500 dark:text-gray-400">used</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Usage details -->
+  <div class="text-center text-sm">
+    <p id={`${id}-usage`} class="text-gray-600 dark:text-gray-300">-- / -- used</p>
+    <p id={`${id}-period`} class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+      (prorated for period)
+    </p>
+  </div>
+</div>
+
+<script>
+  interface GaugeData {
+    used: number;
+    monthlyAllowance: number;
+    proratedAllowance: number;
+    pctUsed: number;
+    unit?: string;
+    periodLabel?: string;
+  }
+
+  function formatNumber(num: number): string {
+    if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B`;
+    if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+    if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+    return num.toFixed(0);
+  }
+
+  function getGaugeColor(pct: number): string {
+    if (pct >= 100) return 'text-red-500';
+    if (pct >= 90) return 'text-orange-500';
+    if (pct >= 70) return 'text-yellow-500';
+    return 'text-green-500';
+  }
+
+  function getBadgeClasses(pct: number): string {
+    if (pct >= 100) {
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+    }
+    if (pct >= 90) {
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400';
+    }
+    if (pct >= 70) {
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
+    }
+    return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
+  }
+
+  function getBadgeText(pct: number): string {
+    if (pct >= 100) return 'Over Limit!';
+    if (pct >= 90) return 'Critical';
+    if (pct >= 70) return 'High Usage';
+    return 'Within Limit';
+  }
+
+  function updateAllowanceGauge(gaugeId: string, data: GaugeData) {
+    const pctEl = document.getElementById(`${gaugeId}-pct`);
+    const progressEl = document.getElementById(`${gaugeId}-progress`);
+    const usageEl = document.getElementById(`${gaugeId}-usage`);
+    const periodEl = document.getElementById(`${gaugeId}-period`);
+    const badgeEl = document.getElementById(`${gaugeId}-badge`);
+
+    const displayPct = Math.min(data.pctUsed, 999);
+
+    // Update percentage display
+    if (pctEl) {
+      pctEl.textContent = `${displayPct.toFixed(0)}%`;
+    }
+
+    // Update circular progress (circumference = 2 * PI * r = 2 * 3.14159 * 50 = 314)
+    if (progressEl) {
+      const circumference = 314;
+      const offset = circumference - (Math.min(data.pctUsed, 100) / 100) * circumference;
+      progressEl.style.strokeDashoffset = String(offset);
+      progressEl.className = `${getGaugeColor(data.pctUsed)} transition-all duration-700 ease-out`;
+    }
+
+    // Update usage text
+    if (usageEl) {
+      const unit = data.unit ?? '';
+      usageEl.textContent = `${formatNumber(data.used)} / ${formatNumber(data.proratedAllowance)} ${unit}`;
+    }
+
+    // Update period label
+    if (periodEl && data.periodLabel) {
+      periodEl.textContent = `(${data.periodLabel} allowance)`;
+    }
+
+    // Update badge
+    if (badgeEl) {
+      badgeEl.className = `px-2 py-0.5 text-xs font-medium rounded-full ${getBadgeClasses(data.pctUsed)}`;
+      badgeEl.textContent = getBadgeText(data.pctUsed);
+    }
+  }
+
+  // Expose globally for page scripts
+  (
+    window as unknown as { updateAllowanceGauge: typeof updateAllowanceGauge }
+  ).updateAllowanceGauge = updateAllowanceGauge;
+</script>