@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/resources/ProviderDetail.tsx

@@ -0,0 +1,293 @@
+/**
+ * ProviderDetail — Expandable detail panel for a selected provider
+ *
+ * Shows per-service/resource breakdown with:
+ * - Cloudflare: allowance bars per service (D1, KV, R2, DO, etc.)
+ * - GitHub: subscription vs usage overage breakdown
+ * - Others: resource-level detail with usage values and costs
+ */
+import type { ProviderCostSummary, ProviderResource, ModelUsage } from './ProviderCard';
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatCompact(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.toFixed(0);
+}
+
+function barColour(pct: number): string {
+  if (pct >= 100) return 'bg-red-500';
+  if (pct >= 75) return 'bg-amber-500';
+  if (pct >= 50) return 'bg-yellow-400';
+  return 'bg-emerald-500';
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+interface Props {
+  provider: ProviderCostSummary;
+}
+
+export function ProviderDetail({ provider }: Props) {
+  if (!provider.resources || provider.resources.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          No detailed resource data available for {provider.displayName}.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 animate-in slide-in-from-top-2">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {provider.displayName} — Service Breakdown
+        </h3>
+        <div className="flex items-center gap-3 text-xs font-medium text-gray-500 dark:text-gray-400">
+          {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+            <span>License: ${provider.subscriptionCostUsd.toFixed(2)}/mo</span>
+          )}
+          {provider.totalCostUsd > 0 && (
+            <span className="text-red-600 dark:text-red-400">Overage: ${provider.totalCostUsd.toFixed(2)}</span>
+          )}
+          {provider.totalCostUsd === 0 && !provider.subscriptionCostUsd && (
+            <span>$0.00</span>
+          )}
+        </div>
+      </div>
+
+      {provider.type === 'allowance' && provider.provider === 'cloudflare' && (
+        <CloudflareDetail resources={provider.resources} />
+      )}
+      {provider.provider === 'github' && (
+        <GitHubDetail resources={provider.resources} subscriptionCost={provider.subscriptionCostUsd} />
+      )}
+      {provider.type === 'pay-as-you-go' && provider.provider !== 'github' && (
+        <GenericDetail resources={provider.resources} modelBreakdown={provider.modelBreakdown} />
+      )}
+      {provider.type === 'subscription-payg' && (
+        <GenericDetail resources={provider.resources} modelBreakdown={provider.modelBreakdown} />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// CLOUDFLARE DETAIL — Allowance bars per service
+// =============================================================================
+
+function CloudflareDetail({ resources }: { resources: ProviderResource[] }) {
+  return (
+    <div className="space-y-3">
+      {resources.map(r => {
+        const hasAllowance = r.allowance != null && r.allowance > 0;
+        const pct = r.pctUsed ?? 0;
+        const clampedPct = Math.min(pct, 100);
+
+        return (
+          <div key={r.name}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{r.label}</span>
+              <div className="flex items-center gap-2">
+                {hasAllowance && (
+                  <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                    {formatCompact(r.used)} / {formatCompact(r.allowance!)}
+                  </span>
+                )}
+                {r.overageCost != null && r.overageCost > 0 ? (
+                  <span className="text-[10px] font-medium text-red-600 dark:text-red-400">
+                    +${r.overageCost.toFixed(2)}
+                  </span>
+                ) : (
+                  <span className="text-[10px] text-emerald-500">$0.00</span>
+                )}
+              </div>
+            </div>
+            {hasAllowance && (
+              <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all ${barColour(pct)}`}
+                  style={{ width: `${clampedPct}%` }}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// =============================================================================
+// GITHUB DETAIL — Subscription vs usage
+// =============================================================================
+
+function GitHubDetail({ resources, subscriptionCost }: { resources: ProviderResource[]; subscriptionCost?: number }) {
+  const subs = resources.filter(r => r.category === 'subscription');
+  const usage = resources.filter(r => r.category === 'usage');
+
+  return (
+    <div className="space-y-4">
+      {/* Usage vs allowance section (like Cloudflare) */}
+      {usage.length > 0 && (
+        <div>
+          <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">
+            Usage vs Enterprise Allowances
+          </p>
+          <div className="space-y-3">
+            {usage.map(r => {
+              const hasAllowance = r.allowance != null && r.allowance > 0;
+              const pct = r.pctUsed ?? 0;
+              const clampedPct = Math.min(pct, 100);
+
+              return (
+                <div key={r.name}>
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{r.label}</span>
+                    <div className="flex items-center gap-2">
+                      {hasAllowance && (
+                        <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                          {formatCompact(r.used)} / {formatCompact(r.allowance!)} {r.unit}
+                        </span>
+                      )}
+                      {r.overageCost != null && r.overageCost > 0 ? (
+                        <span className="text-[10px] font-medium text-red-600 dark:text-red-400">
+                          +${r.overageCost.toFixed(2)}
+                        </span>
+                      ) : (
+                        <span className="text-[10px] text-emerald-500">Within allowance</span>
+                      )}
+                    </div>
+                  </div>
+                  {hasAllowance && (
+                    <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full rounded-full transition-all ${barColour(pct)}`}
+                        style={{ width: `${clampedPct}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Subscription section */}
+      {subs.length > 0 && (
+        <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center mb-1.5">
+            <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              Subscriptions (fixed monthly)
+            </p>
+            {subscriptionCost != null && subscriptionCost > 0 && (
+              <span className="text-[10px] text-gray-500 dark:text-gray-400 font-medium">
+                ${subscriptionCost.toFixed(2)}/mo
+              </span>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            {subs.map(r => (
+              <ResourceRow key={r.name} resource={r} showLicenseBadge />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// GENERIC DETAIL — Simple resource list
+// =============================================================================
+
+function GenericDetail({ resources, modelBreakdown }: { resources: ProviderResource[]; modelBreakdown?: ModelUsage[] }) {
+  return (
+    <div className="space-y-1.5">
+      {resources.map(r => (
+        <ResourceRow key={r.name} resource={r} />
+      ))}
+      {modelBreakdown && modelBreakdown.length > 0 && (
+        <ModelBreakdownSection models={modelBreakdown} />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// MODEL BREAKDOWN — Per-model token usage table
+// =============================================================================
+
+function ModelBreakdownSection({ models }: { models: ModelUsage[] }) {
+  return (
+    <div className="pt-2 mt-1 border-t border-gray-200 dark:border-gray-700">
+      <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">
+        Model Breakdown
+      </p>
+      <div className="space-y-1">
+        {/* Header */}
+        <div className="flex text-[9px] text-gray-400 dark:text-gray-500 font-medium">
+          <span className="flex-1">Model</span>
+          <span className="w-16 text-right">Input</span>
+          <span className="w-16 text-right">Output</span>
+          <span className="w-16 text-right">Total</span>
+        </div>
+        {/* Rows */}
+        {models.map(m => (
+          <div key={m.model} className="flex text-[10px] items-center">
+            <span className="flex-1 text-gray-700 dark:text-gray-300 font-medium truncate mr-1">
+              {m.model}
+            </span>
+            <span className="w-16 text-right text-gray-500 dark:text-gray-400">
+              {formatCompact(m.inputTokens)}
+            </span>
+            <span className="w-16 text-right text-gray-500 dark:text-gray-400">
+              {formatCompact(m.outputTokens)}
+            </span>
+            <span className="w-16 text-right text-gray-700 dark:text-gray-300 font-medium">
+              {formatCompact(m.inputTokens + m.outputTokens)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// RESOURCE ROW
+// =============================================================================
+
+function ResourceRow({ resource, showLicenseBadge }: { resource: ProviderResource; showLicenseBadge?: boolean }) {
+  return (
+    <div className="flex justify-between items-center text-xs py-1">
+      <span className="text-gray-600 dark:text-gray-400 truncate mr-2 flex items-center gap-1.5">
+        {showLicenseBadge && (
+          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">
+            LICENSE
+          </span>
+        )}
+        {resource.label}
+      </span>
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <span className="text-gray-900 dark:text-white font-medium">
+          {formatCompact(resource.used)} {resource.unit !== 'dollars' ? resource.unit : ''}
+        </span>
+        {resource.costUsd > 0 && (
+          <span className="text-gray-400 dark:text-gray-500 text-[10px]">
+            (${resource.costUsd.toFixed(2)})
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/settings/SettingsCard.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * SettingsCard.astro
+ * Reusable card component for settings sections
+ *
+ * @created 2026-02-03
+ * @task task-303.4
+ */
+
+interface Props {
+  title: string;
+  description: string;
+  icon: string;
+  href: string;
+  badge?: string;
+  badgeColor?: 'blue' | 'green' | 'yellow' | 'red' | 'gray' | 'purple';
+  external?: boolean;
+}
+
+const {
+  title,
+  description,
+  icon,
+  href,
+  badge,
+  badgeColor = 'gray',
+  external = false,
+} = Astro.props;
+
+const badgeColors = {
+  blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  green: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  red: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+  gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400',
+  purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
+};
+---
+
+<a
+  href={href}
+  class="group block p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md transition-all"
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener noreferrer' : undefined}
+>
+  <div class="flex items-start gap-4">
+    <!-- Icon -->
+    <div
+      class="flex-shrink-0 w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-2xl"
+    >
+      {icon}
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-1">
+        <h3
+          class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"
+        >
+          {title}
+        </h3>
+        {
+          badge && (
+            <span class={`text-xs font-medium px-2 py-0.5 rounded-full ${badgeColors[badgeColor]}`}>
+              {badge}
+            </span>
+          )
+        }
+        {
+          external && (
+            <svg
+              class="w-4 h-4 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          )
+        }
+      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {description}
+      </p>
+    </div>
+
+    <!-- Arrow -->
+    <div
+      class="flex-shrink-0 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
+        ></path>
+      </svg>
+    </div>
+  </div>
+</a>

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>