@littlebearapps/platform-admin-sdk 1.5.0 → 2.1.0

package/templates/shared/dashboard/src/components/usage/react/DashboardShell.tsx

@@ -0,0 +1,263 @@
+/**
+ * DashboardShell Component
+ * Industrial Command Center orchestrator - data fetching, state, auto-refresh
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { Activity, RefreshCw, AlertTriangle } from 'lucide-react';
+import { clsx } from 'clsx';
+import {
+  type Period,
+  type UsageRow,
+  type ProjectStatus,
+  type StatusResponse,
+  type QueryResponse,
+} from './types';
+import { UsageChart } from './UsageChart';
+import { UsageTable } from './UsageTable';
+
+interface DashboardShellProps {
+  initialPeriod?: Period;
+}
+
+const REFRESH_INTERVAL = 60_000; // 60 seconds
+
+/**
+ * Period button component
+ */
+function PeriodButton({
+  period,
+  currentPeriod,
+  onClick,
+}: {
+  period: Period;
+  currentPeriod: Period;
+  onClick: (p: Period) => void;
+}) {
+  const isActive = period === currentPeriod;
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(period)}
+      className={clsx(
+        'px-3 py-1.5 text-xs font-mono font-semibold uppercase tracking-wider rounded-sm transition-all',
+        isActive
+          ? 'bg-gray-200 dark:bg-slate-700 text-gray-900 dark:text-slate-100 shadow-inner'
+          : 'bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-800 dark:hover:text-slate-300'
+      )}
+    >
+      {period}
+    </button>
+  );
+}
+
+/**
+ * Live indicator with pulse
+ */
+function LiveIndicator({ isRefreshing }: { isRefreshing: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      {isRefreshing ? (
+        <RefreshCw className="w-3.5 h-3.5 text-gray-500 dark:text-slate-400 animate-spin" />
+      ) : (
+        <span className="relative flex h-2.5 w-2.5">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+          <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
+        </span>
+      )}
+      <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+        {isRefreshing ? 'Updating' : 'Live'}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Error state component
+ */
+function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <div className="bg-rose-500/10 border border-rose-500/30 rounded-sm p-6 flex items-start gap-4">
+      <AlertTriangle className="w-5 h-5 text-rose-400 flex-shrink-0 mt-0.5" />
+      <div className="flex-1">
+        <h3 className="text-rose-200 font-semibold text-sm">Failed to load data</h3>
+        <p className="text-rose-300/80 text-xs mt-1 font-mono">{message}</p>
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-3 px-3 py-1.5 bg-rose-500/20 hover:bg-rose-500/30 text-rose-200 text-xs font-mono rounded-sm transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton
+ */
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      {/* Header skeleton */}
+      <div className="flex justify-between items-center">
+        <div className="h-8 bg-gray-200 dark:bg-slate-800 rounded w-48" />
+        <div className="h-8 bg-gray-200 dark:bg-slate-800 rounded w-32" />
+      </div>
+
+      {/* Chart skeleton */}
+      <div className="space-y-3">
+        <div className="h-5 bg-gray-200 dark:bg-slate-800 rounded w-36" />
+        <div className="h-64 bg-gray-100 dark:bg-slate-900 rounded-sm border border-gray-200 dark:border-slate-800" />
+      </div>
+
+      {/* Table skeleton */}
+      <div className="space-y-3">
+        <div className="h-5 bg-gray-200 dark:bg-slate-800 rounded w-24" />
+        <div className="h-48 bg-gray-100 dark:bg-slate-900 rounded-sm border border-gray-200 dark:border-slate-800" />
+      </div>
+    </div>
+  );
+}
+
+export function DashboardShell({ initialPeriod = '24h' }: DashboardShellProps) {
+  const [period, setPeriod] = useState<Period>(initialPeriod);
+  const [loading, setLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [usageData, setUsageData] = useState<UsageRow[]>([]);
+  const [statusMap, setStatusMap] = useState<Record<string, ProjectStatus>>({});
+
+  /**
+   * Fetch data from both endpoints
+   */
+  const fetchData = useCallback(
+    async (isBackground = false) => {
+      if (isBackground) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+        setError(null);
+      }
+
+      try {
+        const [statusRes, queryRes] = await Promise.all([
+          fetch(`/api/usage/status?period=${period}`),
+          fetch(`/api/usage/query?period=${period}`),
+        ]);
+
+        if (!statusRes.ok) {
+          throw new Error(`Status endpoint failed: ${statusRes.status}`);
+        }
+        if (!queryRes.ok) {
+          throw new Error(`Query endpoint failed: ${queryRes.status}`);
+        }
+
+        const statusData: StatusResponse = await statusRes.json();
+        const queryData: QueryResponse = await queryRes.json();
+
+        if (!statusData.success || !queryData.success) {
+          throw new Error('API returned unsuccessful response');
+        }
+
+        setStatusMap(statusData.projects);
+        setUsageData(queryData.data);
+        setError(null);
+      } catch (err) {
+        if (!isBackground) {
+          setError(err instanceof Error ? err.message : 'Unknown error occurred');
+        }
+        console.error('[DashboardShell] Fetch error:', err);
+      } finally {
+        setLoading(false);
+        setIsRefreshing(false);
+      }
+    },
+    [period]
+  );
+
+  /**
+   * Handle period change - update URL and refetch
+   */
+  const handlePeriodChange = useCallback((newPeriod: Period) => {
+    setPeriod(newPeriod);
+
+    // Update URL without reload
+    const url = new URL(window.location.href);
+    url.searchParams.set('period', newPeriod);
+    history.replaceState(null, '', url.toString());
+  }, []);
+
+  // Initial fetch and period change
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Auto-refresh interval
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchData(true);
+    }, REFRESH_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  if (loading) {
+    return (
+      <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen">
+        <LoadingSkeleton />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen">
+        <ErrorState message={error} onRetry={() => fetchData()} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen space-y-6">
+      {/* Header */}
+      <header className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <Activity className="w-5 h-5 text-gray-600 dark:text-slate-400" />
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-slate-100 tracking-tight">
+            Usage Monitor
+          </h1>
+          <LiveIndicator isRefreshing={isRefreshing} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <PeriodButton period="24h" currentPeriod={period} onClick={handlePeriodChange} />
+          <PeriodButton period="7d" currentPeriod={period} onClick={handlePeriodChange} />
+        </div>
+      </header>
+
+      {/* Chart section */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider mb-3">
+          Activity Timeline
+        </h2>
+        <UsageChart data={usageData} loading={isRefreshing && usageData.length === 0} />
+      </section>
+
+      {/* Table section */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider mb-3">
+          Projects
+        </h2>
+        <UsageTable
+          data={usageData}
+          statusMap={statusMap}
+          loading={isRefreshing && Object.keys(statusMap).length === 0}
+        />
+      </section>
+    </div>
+  );
+}
+
+export default DashboardShell;

package/templates/shared/dashboard/src/components/usage/react/StatusBadge.tsx

@@ -0,0 +1,77 @@
+/**
+ * StatusBadge Component
+ * Industrial Command Center aesthetic - sharp corners, pulse dot, monospace
+ */
+
+import { type OperationalStatus, STATUS_COLORS } from './types';
+import { clsx } from 'clsx';
+
+interface StatusBadgeProps {
+  status: OperationalStatus;
+  size?: 'sm' | 'md';
+  showLabel?: boolean;
+}
+
+export function StatusBadge({ status, size = 'md', showLabel = true }: StatusBadgeProps) {
+  const colors = STATUS_COLORS[status];
+
+  const sizeClasses = {
+    sm: 'px-1.5 py-0.5 text-[10px] gap-1',
+    md: 'px-2 py-1 text-xs gap-1.5',
+  };
+
+  const dotSizes = {
+    sm: 'w-1.5 h-1.5',
+    md: 'w-2 h-2',
+  };
+
+  return (
+    <span
+      className={clsx(
+        // Base styles - sharp industrial corners
+        'inline-flex items-center rounded-sm font-mono font-semibold uppercase tracking-wider',
+        // Size
+        sizeClasses[size],
+        // Colours
+        colors.bg,
+        colors.text,
+        // Subtle glow effect
+        'shadow-sm',
+        colors.glow
+      )}
+    >
+      {/* Pulse dot indicator */}
+      <span className="relative flex">
+        <span
+          className={clsx(
+            dotSizes[size],
+            'rounded-full',
+            status === 'RUN' ? 'bg-emerald-400' : status === 'WARN' ? 'bg-amber-400' : 'bg-rose-400'
+          )}
+        />
+        {/* Pulse animation for RUN status */}
+        {status === 'RUN' && (
+          <span
+            className={clsx(
+              'absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-75',
+              dotSizes[size]
+            )}
+          />
+        )}
+        {/* Slower pulse for WARN status */}
+        {status === 'WARN' && (
+          <span
+            className={clsx(
+              'absolute inset-0 rounded-full bg-amber-400 animate-pulse opacity-50',
+              dotSizes[size]
+            )}
+          />
+        )}
+      </span>
+
+      {showLabel && <span>{status}</span>}
+    </span>
+  );
+}
+
+export default StatusBadge;