@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

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

@@ -0,0 +1,170 @@
+/**
+ * CostChart — Stacked bar chart for daily costs by provider
+ *
+ * Pure CSS bars (no chart library). Shows daily cost breakdown across all
+ * providers, or filtered to a single provider when a card is selected.
+ * Matches existing HourlyUsageChart pattern.
+ */
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface ChartDataPoint {
+  date: string;
+  providers: Record<string, number>;
+}
+
+interface Props {
+  data: ChartDataPoint[];
+  selectedProvider: string | null;
+  providerColours: Record<string, string>;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const DEFAULT_COLOURS: Record<string, string> = {
+  cloudflare: '#f97316', // orange-500
+  github: '#6b7280',     // gray-500
+  openai: '#10b981',     // emerald-500
+  anthropic: '#f59e0b',  // amber-500
+  gemini: '#6366f1',     // indigo-500
+  apify: '#14b8a6',      // teal-500
+  resend: '#8b5cf6',     // violet-500
+  minimax: '#3b82f6',    // blue-500
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatDateLabel(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00Z');
+  return d.toLocaleDateString('en-AU', { day: 'numeric', month: 'short' });
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function CostChart({ data, selectedProvider, providerColours }: Props) {
+  const colours = { ...DEFAULT_COLOURS, ...providerColours };
+
+  if (data.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center">
+        <p className="text-sm text-gray-500 dark:text-gray-400">No chart data available for this period.</p>
+      </div>
+    );
+  }
+
+  // Compute max total for scaling
+  const barData = data.map(point => {
+    const entries = Object.entries(point.providers);
+    const filtered = selectedProvider
+      ? entries.filter(([p]) => p === selectedProvider)
+      : entries;
+    const total = filtered.reduce((s, [, v]) => s + v, 0);
+    return { date: point.date, segments: filtered, total };
+  });
+
+  const maxTotal = Math.max(...barData.map(d => d.total), 0.01);
+
+  // Determine label density (show every Nth label to avoid crowding)
+  const labelStep = data.length > 30 ? 7 : data.length > 14 ? 3 : data.length > 7 ? 2 : 1;
+
+  // Collect all providers for legend
+  const allProviders = new Set<string>();
+  for (const point of data) {
+    for (const p of Object.keys(point.providers)) {
+      if (!selectedProvider || p === selectedProvider) allProviders.add(p);
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3 mb-3">
+        {Array.from(allProviders).map(p => (
+          <div key={p} className="flex items-center gap-1.5">
+            <div
+              className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
+              style={{ backgroundColor: colours[p] ?? '#9ca3af' }}
+            />
+            <span className="text-[10px] text-gray-600 dark:text-gray-400 capitalize">{p}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Y-axis max label */}
+      <div className="flex items-end mb-1">
+        <span className="text-[9px] text-gray-400 dark:text-gray-500 w-12 text-right mr-2">
+          ${maxTotal.toFixed(2)}
+        </span>
+        <div className="flex-1 border-b border-dashed border-gray-200 dark:border-gray-700" />
+      </div>
+
+      {/* Bars */}
+      <div className="flex items-end gap-px" style={{ height: '120px' }}>
+        {barData.map((bar, idx) => {
+          const heightPct = maxTotal > 0 ? (bar.total / maxTotal) * 100 : 0;
+          return (
+            <div key={bar.date} className="flex-1 flex flex-col justify-end h-full group relative">
+              {/* Stacked bar */}
+              <div
+                className="w-full rounded-t-sm overflow-hidden flex flex-col-reverse transition-all"
+                style={{ height: `${heightPct}%`, minHeight: bar.total > 0 ? '2px' : '0px' }}
+              >
+                {bar.segments.map(([provider, cost]) => {
+                  const segPct = bar.total > 0 ? (cost / bar.total) * 100 : 0;
+                  return (
+                    <div
+                      key={provider}
+                      style={{
+                        height: `${segPct}%`,
+                        backgroundColor: colours[provider] ?? '#9ca3af',
+                        minHeight: cost > 0 ? '1px' : '0px',
+                      }}
+                    />
+                  );
+                })}
+              </div>
+
+              {/* Tooltip */}
+              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10 pointer-events-none">
+                <div className="bg-gray-900 text-white text-[10px] rounded px-2 py-1.5 whitespace-nowrap shadow-lg">
+                  <div className="font-medium mb-0.5">{formatDateLabel(bar.date)}</div>
+                  {bar.segments.map(([p, cost]) => (
+                    <div key={p} className="flex items-center gap-1">
+                      <div className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colours[p] }} />
+                      <span className="capitalize">{p}:</span>
+                      <span className="font-medium">${cost.toFixed(2)}</span>
+                    </div>
+                  ))}
+                  <div className="border-t border-gray-700 mt-0.5 pt-0.5 font-medium">
+                    Total: ${bar.total.toFixed(2)}
+                  </div>
+                </div>
+              </div>
+
+              {/* X-axis label (sparse) */}
+              {idx % labelStep === 0 && (
+                <span className="text-[8px] text-gray-400 dark:text-gray-500 mt-1 text-center block truncate">
+                  {formatDateLabel(bar.date)}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Zero line */}
+      <div className="flex items-start mt-0.5">
+        <span className="text-[9px] text-gray-400 dark:text-gray-500 w-12 text-right mr-2">$0</span>
+        <div className="flex-1 border-t border-gray-200 dark:border-gray-700" />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,272 @@
+/**
+ * ProviderCard — Compact cost card for a single provider
+ *
+ * Variants:
+ * - Allowance-based (Cloudflare, GitHub): progress bar + overage
+ * - Pay-as-you-go (OpenAI, Anthropic, Gemini, Apify, Resend): total spend + key metric
+ * - Subscription + PAYG (Minimax): subscription cost + API usage
+ */
+
+// =============================================================================
+// TYPES (match /api/costs/overview response)
+// =============================================================================
+
+export interface ModelUsage {
+  model: string;
+  inputTokens: number;
+  outputTokens: number;
+}
+
+export interface ProviderCostSummary {
+  provider: string;
+  displayName: string;
+  type: 'allowance' | 'pay-as-you-go' | 'subscription-payg' | 'balance';
+  totalCostUsd: number;
+  subscriptionCostUsd?: number;
+  allowanceUsagePct?: number;
+  keyMetric?: { label: string; value: string };
+  status: 'ok' | 'warning' | 'critical' | 'incomplete';
+  lastUpdated: string;
+  resources?: ProviderResource[];
+  modelBreakdown?: ModelUsage[];
+}
+
+export interface ProviderResource {
+  name: string;
+  label: string;
+  used: number;
+  allowance?: number;
+  pctUsed?: number;
+  overageCost?: number;
+  costUsd: number;
+  unit: string;
+  category?: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_ICONS: Record<string, string> = {
+  cloudflare: '☁️',
+  github: '🐙',
+  openai: '🤖',
+  anthropic: '🧠',
+  apify: '🕷️',
+  resend: '✉️',
+  minimax: '🎯',
+  gemini: '💎',
+};
+
+const PROVIDER_GRADIENTS: Record<string, string> = {
+  cloudflare: 'from-orange-500 to-amber-600',
+  github: 'from-gray-700 to-gray-900',
+  openai: 'from-green-500 to-emerald-600',
+  anthropic: 'from-orange-500 to-amber-600',
+  apify: 'from-teal-500 to-green-600',
+  resend: 'from-violet-500 to-purple-600',
+  minimax: 'from-indigo-500 to-blue-600',
+  gemini: 'from-blue-400 to-indigo-500',
+};
+
+// =============================================================================
+// 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';
+}
+
+function statusBadge(status: string): { label: string; cls: string } | null {
+  if (status === 'critical') return { label: 'OVERAGE', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' };
+  if (status === 'warning') return { label: 'HIGH', cls: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' };
+  if (status === 'incomplete') return { label: 'PARTIAL', cls: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' };
+  return null;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+interface Props {
+  provider: ProviderCostSummary;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function ProviderCard({ provider, selected, onClick }: Props) {
+  const icon = PROVIDER_ICONS[provider.provider] ?? '📦';
+  const gradient = PROVIDER_GRADIENTS[provider.provider] ?? 'from-gray-500 to-gray-600';
+  const badge = statusBadge(provider.status);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        w-full text-left bg-white dark:bg-gray-800 rounded-lg border overflow-hidden
+        transition-all duration-150 cursor-pointer
+        ${selected
+          ? 'border-blue-500 ring-2 ring-blue-500/30 shadow-md'
+          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm'
+        }
+      `}
+    >
+      {/* Gradient header */}
+      <div className={`bg-gradient-to-r ${gradient} px-3 py-2.5 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-lg flex-shrink-0">{icon}</span>
+            <span className="text-sm font-semibold truncate">{provider.displayName}</span>
+            {badge && (
+              <span className={`ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold ${badge.cls}`}>
+                {badge.label}
+              </span>
+            )}
+          </div>
+          <div className="text-right flex-shrink-0 ml-2">
+            {provider.type === 'allowance' && provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 ? (
+              <div>
+                <span className="text-base font-bold">${provider.subscriptionCostUsd.toFixed(2)}</span>
+                <span className="text-[9px] opacity-75 block">
+                  {provider.totalCostUsd > 0 ? `+$${provider.totalCostUsd.toFixed(2)} overage` : '/mo'}
+                </span>
+              </div>
+            ) : (
+              <span className="text-base font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Card body */}
+      <div className="px-3 py-2.5 space-y-2">
+        {provider.type === 'allowance' && <AllowanceBody provider={provider} />}
+        {provider.type === 'pay-as-you-go' && <PayAsYouGoBody provider={provider} />}
+        {provider.type === 'subscription-payg' && <SubscriptionBody provider={provider} />}
+        {provider.type === 'balance' && <BalanceBody provider={provider} />}
+
+        {/* Footer */}
+        <div className="text-[9px] text-gray-400 dark:text-gray-500 pt-1">
+          Updated {provider.lastUpdated}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// =============================================================================
+// BODY VARIANTS
+// =============================================================================
+
+function AllowanceBody({ provider }: { provider: ProviderCostSummary }) {
+  const pct = provider.allowanceUsagePct ?? 0;
+  const clampedPct = Math.min(pct, 100);
+
+  return (
+    <>
+      {/* Subscription line */}
+      {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">
+            {provider.provider === 'cloudflare' ? 'Workers Paid plan' : 'License'}
+          </span>
+          <span className="text-gray-600 dark:text-gray-300 font-medium">
+            ${provider.subscriptionCostUsd.toFixed(2)}/mo
+          </span>
+        </div>
+      )}
+
+      {/* Progress bar */}
+      <div>
+        <div className="flex justify-between text-[10px] mb-0.5">
+          <span className="text-gray-500 dark:text-gray-400">Allowance usage</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">
+            {pct >= 1000 ? '999+%' : `${Math.round(pct)}%`}
+          </span>
+        </div>
+        <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>
+
+      {/* Key metric */}
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+    </>
+  );
+}
+
+function PayAsYouGoBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+      {/* Show top resources compactly */}
+      {provider.resources && provider.resources.length > 0 && (
+        <div className="space-y-0.5">
+          {provider.resources.slice(0, 3).map(r => (
+            <div key={r.name} className="flex justify-between text-[9px] text-gray-400 dark:text-gray-500">
+              <span className="truncate mr-1">{r.label}</span>
+              <span className="flex-shrink-0">{formatCompact(r.used)} {r.unit === 'dollars' ? '' : r.unit}</span>
+            </div>
+          ))}
+          {provider.resources.length > 3 && (
+            <span className="text-[9px] text-gray-400">+{provider.resources.length - 3} more</span>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+function SubscriptionBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+      <div className="flex justify-between text-[10px]">
+        <span className="text-gray-500 dark:text-gray-400">Type</span>
+        <span className="text-indigo-600 dark:text-indigo-400 font-medium text-[9px]">Subscription + API</span>
+      </div>
+    </>
+  );
+}
+
+function BalanceBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+    </>
+  );
+}