@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/costs/ProviderCostsGrid.tsx

@@ -0,0 +1,401 @@
+/**
+ * Provider Costs Grid Component
+ *
+ * Displays third-party provider usage and costs in a card grid.
+ * Fetches data from /api/costs/providers endpoint.
+ *
+ * GitHub gets special treatment: subscription fees (GHEC, GHAS) shown
+ * separately from usage overage (Actions, Storage).
+ */
+import { useState, useEffect } from 'react';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface ProviderResource {
+  provider: string;
+  resourceType: string;
+  resourceName?: string;
+  usageValue: number;
+  usageUnit: string;
+  costUsd: number;
+  snapshotDate: string;
+  label?: string;
+  category?: string;
+}
+
+interface ProviderSummary {
+  provider: string;
+  displayName: string;
+  totalCostUsd: number;
+  resources: ProviderResource[];
+  latestSnapshot: string;
+  subscriptionCostUsd?: number;
+}
+
+interface ApiResponse {
+  success: boolean;
+  providers?: ProviderSummary[];
+  totalCostUsd?: number;
+  period?: { startDate: string; endDate: string };
+  error?: string;
+}
+
+interface Props {
+  period: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_ICONS: Record<string, string> = {
+  github: '🐙',
+  openai: '🤖',
+  anthropic: '🧠',
+  apify: '🕷️',
+  resend: '✉️',
+  minimax: '🎯',
+  gemini: '💎',
+};
+
+const PROVIDER_GRADIENTS: Record<string, string> = {
+  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',
+};
+
+const PERIOD_LABELS: Record<string, string> = {
+  '24h': 'Today',
+  '7d': 'Last 7 days',
+  '30d': 'Last 30 days',
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatResourceLabel(resource: ProviderResource): string {
+  if (resource.label) return resource.label;
+  // Fallback: convert snake_case to Title Case
+  return resource.resourceType.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function formatValue(value: number, unit: string): string {
+  if (unit === 'dollars' || unit === 'usd') {
+    return `$${value.toFixed(2)}`;
+  }
+  if (unit === 'tokens') {
+    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M tokens`;
+    if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K tokens`;
+    return `${value.toLocaleString()} tokens`;
+  }
+  if (unit === 'minutes') {
+    return `${value.toLocaleString()} min`;
+  }
+  if (unit === 'requests') {
+    return `${value.toLocaleString()} req`;
+  }
+  if (unit === 'user_months') {
+    return `${value.toFixed(1)} user-mo`;
+  }
+  if (unit === 'seats') {
+    return `${value.toLocaleString()} seats`;
+  }
+  if (unit === 'gb_hours') {
+    return `${value.toFixed(1)} GB-hr`;
+  }
+  if (unit === 'percent') {
+    return `${value.toFixed(1)}%`;
+  }
+  if (unit === 'bytes') {
+    if (value > 1024 * 1024 * 1024) return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    if (value > 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(2)} MB`;
+    return `${(value / 1024).toFixed(2)} KB`;
+  }
+  if (unit === 'gb') {
+    return `${value.toFixed(2)} GB`;
+  }
+  if (unit === 'units') {
+    return `${value.toFixed(2)} units`;
+  }
+  return `${value.toLocaleString()}${unit ? ` ${unit}` : ''}`;
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-AU', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  });
+}
+
+// =============================================================================
+// COMPONENTS
+// =============================================================================
+
+function LoadingState() {
+  return (
+    <div className="space-y-4">
+      <div className="animate-pulse">
+        <div className="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({ message }: { message: string }) {
+  return (
+    <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+      <div className="flex items-center gap-3">
+        <span className="text-xl">⚠️</span>
+        <div>
+          <strong className="text-red-800 dark:text-red-200">Error loading data</strong>
+          <p className="text-sm text-red-600 dark:text-red-300 mt-1">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-12">
+      <div className="text-6xl mb-4">📊</div>
+      <h3 className="text-lg font-medium text-gray-900 dark:text-white">No provider data</h3>
+      <p className="text-gray-500 dark:text-gray-400 mt-1">
+        Third-party usage data will appear here once collected.
+      </p>
+    </div>
+  );
+}
+
+function TotalCostHero({ totalCost, period }: { totalCost: number; period: string }) {
+  return (
+    <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl p-6 text-white">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-purple-100 text-sm font-medium">Total Third-Party Usage Costs</p>
+          <p className="text-4xl font-bold mt-1">${totalCost.toFixed(2)}</p>
+          <p className="text-purple-200 text-sm mt-2">
+            {PERIOD_LABELS[period] || 'Last 30 days'} — excludes fixed subscriptions
+          </p>
+        </div>
+        <div className="text-6xl opacity-20">💳</div>
+      </div>
+    </div>
+  );
+}
+
+function ResourceRow({ resource }: { resource: ProviderResource }) {
+  const isSubscription = resource.category === 'subscription';
+
+  return (
+    <div className="flex justify-between items-center text-sm py-1.5">
+      <span className="text-gray-600 dark:text-gray-400 truncate mr-2 flex items-center gap-1.5">
+        {isSubscription && (
+          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">
+            LICENSE
+          </span>
+        )}
+        {formatResourceLabel(resource)}
+      </span>
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <span className="text-gray-900 dark:text-white font-medium">
+          {formatValue(resource.usageValue, resource.usageUnit)}
+        </span>
+        {resource.costUsd > 0 && (
+          <span className="text-gray-400 dark:text-gray-500 text-xs">
+            (${resource.costUsd.toFixed(2)})
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function GitHubCard({ provider }: { provider: ProviderSummary }) {
+  const icon = PROVIDER_ICONS.github;
+  const gradient = PROVIDER_GRADIENTS.github;
+  const subscriptionResources = provider.resources.filter((r) => r.category === 'subscription');
+  const usageResources = provider.resources.filter((r) => r.category !== 'subscription');
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header */}
+      <div className={`bg-gradient-to-r ${gradient} p-4 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{icon}</span>
+            <span className="font-semibold">{provider.displayName}</span>
+          </div>
+          <div className="text-right">
+            <span className="text-xl font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+            <p className="text-xs text-gray-300 mt-0.5">usage overage</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 space-y-3">
+        {/* Usage section */}
+        {usageResources.length > 0 && (
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
+              Usage (above allowances)
+            </p>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+              {usageResources.map((r, idx) => (
+                <ResourceRow key={idx} resource={r} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Subscription section */}
+        {subscriptionResources.length > 0 && (
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+            <div className="flex justify-between items-center mb-1">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Subscriptions (fixed monthly)
+              </p>
+              {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+                <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
+                  ${provider.subscriptionCostUsd.toFixed(2)}/mo
+                </span>
+              )}
+            </div>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+              {subscriptionResources.map((r, idx) => (
+                <ResourceRow key={idx} resource={r} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        <p className="text-xs text-gray-400 mt-2">
+          Last updated: {formatDate(provider.latestSnapshot)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function StandardCard({ provider }: { provider: ProviderSummary }) {
+  const icon = PROVIDER_ICONS[provider.provider] || '📦';
+  const gradient = PROVIDER_GRADIENTS[provider.provider] || 'from-gray-500 to-gray-600';
+  const displayResources = provider.resources.slice(0, 6);
+  const moreCount = provider.resources.length - 6;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header with gradient */}
+      <div className={`bg-gradient-to-r ${gradient} p-4 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{icon}</span>
+            <span className="font-semibold">{provider.displayName}</span>
+          </div>
+          <span className="text-xl font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+        </div>
+      </div>
+
+      {/* Resources */}
+      <div className="p-4">
+        <div className="divide-y divide-gray-100 dark:divide-gray-700">
+          {displayResources.map((r, idx) => (
+            <ResourceRow key={idx} resource={r} />
+          ))}
+        </div>
+        {moreCount > 0 && (
+          <p className="text-xs text-gray-400 mt-1">+{moreCount} more resources</p>
+        )}
+        <p className="text-xs text-gray-400 mt-3">
+          Last updated: {formatDate(provider.latestSnapshot)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function ProviderCard({ provider }: { provider: ProviderSummary }) {
+  if (provider.provider === 'github') {
+    return <GitHubCard provider={provider} />;
+  }
+  return <StandardCard provider={provider} />;
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export default function ProviderCostsGrid({ period }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [providers, setProviders] = useState<ProviderSummary[]>([]);
+  const [totalCost, setTotalCost] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/costs/providers?period=${period}`);
+        const data: ApiResponse = await response.json();
+
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to load data');
+        }
+
+        setProviders(data.providers || []);
+        setTotalCost(data.totalCostUsd || 0);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [period]);
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error) {
+    return <ErrorState message={error} />;
+  }
+
+  if (providers.length === 0) {
+    return (
+      <div className="space-y-6">
+        <TotalCostHero totalCost={0} period={period} />
+        <EmptyState />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <TotalCostHero totalCost={totalCost} period={period} />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {providers.map((provider) => (
+          <ProviderCard key={provider.provider} provider={provider} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/costs/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Costs Components Export
+ */
+export { default as ProviderCostsGrid } from './ProviderCostsGrid';

package/templates/shared/dashboard/src/components/overview/AlertBanner.tsx

@@ -0,0 +1,94 @@
+/**
+ * Global Alert Banner
+ * Displays at the top of every page when there are critical issues:
+ * - P0/P1 open errors
+ * - Tripped circuit breakers
+ * - Services down (Gatus)
+ */
+import { useState, useEffect } from 'react';
+
+interface AlertData {
+  hasP0P1: boolean;
+  trippedBreakers: number;
+  servicesDown: number;
+  p0Count?: number;
+  p1Count?: number;
+}
+
+export function AlertBanner() {
+  const [alerts, setAlerts] = useState<AlertData | null>(null);
+
+  useEffect(() => {
+    fetch('/api/overview/summary')
+      .then(res => res.json())
+      .then(data => {
+        if (data.alerts) {
+          setAlerts({
+            ...data.alerts,
+            p0Count: data.errors?.p0Count ?? 0,
+            p1Count: data.errors?.p1Count ?? 0,
+          });
+        }
+      })
+      .catch(() => {
+        // Silently fail - banner just won't show
+      });
+  }, []);
+
+  if (!alerts) return null;
+
+  const hasIssues = alerts.hasP0P1 || alerts.trippedBreakers > 0 || alerts.servicesDown > 0;
+  if (!hasIssues) return null;
+
+  const items: Array<{ label: string; count: number; href: string; colour: string }> = [];
+
+  if (alerts.p0Count && alerts.p0Count > 0) {
+    items.push({
+      label: 'P0 error',
+      count: alerts.p0Count,
+      href: '/health?tab=errors',
+      colour: 'bg-red-500',
+    });
+  }
+  if (alerts.p1Count && alerts.p1Count > 0) {
+    items.push({
+      label: 'P1 error',
+      count: alerts.p1Count,
+      href: '/health?tab=errors',
+      colour: 'bg-orange-500',
+    });
+  }
+  if (alerts.trippedBreakers > 0) {
+    items.push({
+      label: 'tripped breaker',
+      count: alerts.trippedBreakers,
+      href: '/resources?tab=features',
+      colour: 'bg-yellow-500',
+    });
+  }
+  if (alerts.servicesDown > 0) {
+    items.push({
+      label: 'service down',
+      count: alerts.servicesDown,
+      href: '/health?tab=infrastructure',
+      colour: 'bg-red-500',
+    });
+  }
+
+  return (
+    <div className="bg-red-600 dark:bg-red-900 text-white px-4 py-2 text-sm flex items-center justify-center gap-4 flex-wrap">
+      <span className="font-semibold">Attention Required</span>
+      {items.map((item, i) => (
+        <a
+          key={i}
+          href={item.href}
+          className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
+        >
+          <span className={`w-2 h-2 rounded-full ${item.colour} animate-pulse`} />
+          {item.count} {item.label}{item.count !== 1 ? 's' : ''}
+          <span className="opacity-75">→</span>
+        </a>
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Overview Components Barrel Export
+ */
+export { MissionControl } from './MissionControl';
+export { AlertBanner } from './AlertBanner';
+export { HealthQuadrant } from './HealthQuadrant';
+export { ErrorsQuadrant } from './ErrorsQuadrant';
+export { CostQuadrant } from './CostQuadrant';
+export { ActivityFeed } from './ActivityFeed';

package/templates/shared/dashboard/src/components/reports/ReportInfoButton.tsx

@@ -0,0 +1,98 @@
+/**
+ * ReportInfoButton Component
+ * Reusable info icon button that toggles a floating panel with report explanation.
+ * Based on PatternInfoButton pattern.
+ */
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+
+interface ReportInfoButtonProps {
+  title: string;
+  children: ReactNode;
+  /** Colour theme: matches the original info panel colours per report */
+  theme?: 'blue' | 'yellow' | 'orange' | 'red' | 'purple' | 'green' | 'teal';
+}
+
+const themeClasses: Record<string, { button: string; panel: string; heading: string }> = {
+  blue: {
+    button: 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900/40 dark:hover:bg-blue-900/60 text-blue-600 dark:text-blue-400',
+    panel: 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800',
+    heading: 'text-blue-800 dark:text-blue-300',
+  },
+  yellow: {
+    button: 'bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900/40 dark:hover:bg-yellow-900/60 text-yellow-600 dark:text-yellow-400',
+    panel: 'bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800',
+    heading: 'text-yellow-800 dark:text-yellow-300',
+  },
+  orange: {
+    button: 'bg-orange-100 hover:bg-orange-200 dark:bg-orange-900/40 dark:hover:bg-orange-900/60 text-orange-600 dark:text-orange-400',
+    panel: 'bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800',
+    heading: 'text-orange-800 dark:text-orange-300',
+  },
+  red: {
+    button: 'bg-red-100 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 text-red-600 dark:text-red-400',
+    panel: 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800',
+    heading: 'text-red-800 dark:text-red-300',
+  },
+  purple: {
+    button: 'bg-purple-100 hover:bg-purple-200 dark:bg-purple-900/40 dark:hover:bg-purple-900/60 text-purple-600 dark:text-purple-400',
+    panel: 'bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800',
+    heading: 'text-purple-800 dark:text-purple-300',
+  },
+  green: {
+    button: 'bg-green-100 hover:bg-green-200 dark:bg-green-900/40 dark:hover:bg-green-900/60 text-green-600 dark:text-green-400',
+    panel: 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800',
+    heading: 'text-green-800 dark:text-green-300',
+  },
+  teal: {
+    button: 'bg-teal-100 hover:bg-teal-200 dark:bg-teal-900/40 dark:hover:bg-teal-900/60 text-teal-600 dark:text-teal-400',
+    panel: 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-800',
+    heading: 'text-teal-800 dark:text-teal-300',
+  },
+};
+
+export function ReportInfoButton({ title, children, theme = 'blue' }: ReportInfoButtonProps) {
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const colours = themeClasses[theme];
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`inline-flex items-center justify-center w-9 h-9 rounded-full ${colours.button} transition-colors`}
+        title={title}
+        aria-label={title}
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className={`absolute right-0 top-12 z-50 w-96 border rounded-lg p-4 shadow-lg ${colours.panel}`}>
+          <h3 className={`font-semibold ${colours.heading} mb-2`}>{title}</h3>
+          {children}
+          <button
+            onClick={() => setOpen(false)}
+            className={`mt-3 text-xs ${colours.heading} hover:underline`}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}