@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/unified/LiveHeader.tsx

@@ -0,0 +1,169 @@
+/**
+ * LiveHeader Component
+ *
+ * Header bar with live indicator, period buttons, search, and export.
+ * Industrial Command Centre aesthetic.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { Activity, RefreshCw, Search, Download, X } from 'lucide-react';
+import { clsx } from 'clsx';
+import type { Period } from './types';
+
+interface LiveHeaderProps {
+  period: Period;
+  onPeriodChange: (period: Period) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+  isRefreshing: boolean;
+  onExport: () => void;
+}
+
+/**
+ * Live indicator with pulse animation
+ */
+function LiveIndicator({ isRefreshing }: { isRefreshing: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      {isRefreshing ? (
+        <RefreshCw className="w-3.5 h-3.5 text-gray-600 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>
+  );
+}
+
+/**
+ * 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-700 dark:hover:text-slate-300'
+      )}
+    >
+      {period}
+    </button>
+  );
+}
+
+export function LiveHeader({
+  period,
+  onPeriodChange,
+  search,
+  onSearchChange,
+  isRefreshing,
+  onExport,
+}: LiveHeaderProps) {
+  const [localSearch, setLocalSearch] = useState(search);
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (localSearch !== search) {
+        onSearchChange(localSearch);
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [localSearch, search, onSearchChange]);
+
+  // Sync external search changes
+  useEffect(() => {
+    setLocalSearch(search);
+  }, [search]);
+
+  const handleClearSearch = useCallback(() => {
+    setLocalSearch('');
+    onSearchChange('');
+  }, [onSearchChange]);
+
+  return (
+    <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      {/* Left: Title and Live Indicator */}
+      <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>
+
+      {/* Right: Controls */}
+      <div className="flex items-center gap-3">
+        {/* Period Buttons */}
+        <div className="flex items-center gap-1">
+          <PeriodButton period="24h" currentPeriod={period} onClick={onPeriodChange} />
+          <PeriodButton period="7d" currentPeriod={period} onClick={onPeriodChange} />
+          <PeriodButton period="30d" currentPeriod={period} onClick={onPeriodChange} />
+        </div>
+
+        {/* Search Input */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-500 dark:text-slate-500" />
+          <input
+            type="text"
+            value={localSearch}
+            onChange={(e) => setLocalSearch(e.target.value)}
+            placeholder="Search projects..."
+            className={clsx(
+              'w-40 pl-8 pr-7 py-1.5 text-xs font-mono',
+              'bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-sm',
+              'text-gray-800 dark:text-slate-200 placeholder:text-gray-400 dark:placeholder:text-slate-500',
+              'focus:outline-none focus:border-gray-400 dark:focus:border-slate-600 focus:ring-1 focus:ring-gray-400 dark:focus:ring-slate-600',
+              'transition-all'
+            )}
+          />
+          {localSearch && (
+            <button
+              type="button"
+              onClick={handleClearSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-slate-500 hover:text-gray-700 dark:hover:text-slate-300 transition-colors"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+
+        {/* Export Button */}
+        <button
+          type="button"
+          onClick={onExport}
+          className={clsx(
+            'flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono font-semibold uppercase tracking-wider',
+            'bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-slate-400 rounded-sm',
+            'hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-700 dark:hover:text-slate-300 transition-all'
+          )}
+          title="Export to CSV"
+        >
+          <Download className="w-3.5 h-3.5" />
+          <span className="hidden sm:inline">Export</span>
+        </button>
+      </div>
+    </header>
+  );
+}
+
+export default LiveHeader;

package/templates/shared/dashboard/src/components/usage/unified/ProjectsTable.tsx

@@ -0,0 +1,448 @@
+/**
+ * ProjectsTable Component
+ *
+ * Hierarchical table with expandable rows for project resource breakdown.
+ * Industrial Command Centre aesthetic - data-dense, sortable columns.
+ */
+
+import { useMemo, useCallback } from 'react';
+import { ChevronRight, ChevronDown, ArrowUpDown, ArrowUp, ArrowDown, Clock } from 'lucide-react';
+import { clsx } from 'clsx';
+import type {
+  ProjectTableRow,
+  ProjectBreakdown,
+  SortField,
+  SortDir,
+  OperationalStatus,
+  CircuitBreakerState,
+} from './types';
+import { STATUS_COLORS, CB_COLORS } from './types';
+import { ResourceBreakdown } from './ResourceBreakdown';
+import { Sparkline } from './Sparkline';
+
+interface ProjectsTableProps {
+  rows: ProjectTableRow[];
+  expanded: Set<string>;
+  onExpand: (projectId: string) => void;
+  onSort: (field: SortField) => void;
+  sort: SortField;
+  sortDir: SortDir;
+  resourceCache: Map<string, ProjectBreakdown>;
+  fetchResourceBreakdown: (projectId: string) => Promise<ProjectBreakdown | null>;
+}
+
+function formatCost(cost: number): string {
+  if (cost >= 1000) return `$${(cost / 1000).toFixed(1)}K`;
+  if (cost >= 1) return `$${cost.toFixed(2)}`;
+  if (cost >= 0.01) return `$${cost.toFixed(3)}`;
+  return `$${cost.toFixed(4)}`;
+}
+
+function formatDelta(pct: number): { text: string; color: string } {
+  if (pct > 0) {
+    return { text: `+${pct.toFixed(1)}%`, color: 'text-rose-400' };
+  }
+  if (pct < 0) {
+    return { text: `${pct.toFixed(1)}%`, color: 'text-emerald-400' };
+  }
+  return { text: '0%', color: 'text-gray-500 dark:text-slate-500' };
+}
+
+/**
+ * Status Badge Component
+ */
+function StatusBadge({ status }: { status: OperationalStatus }) {
+  const colors = STATUS_COLORS[status];
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-semibold uppercase',
+        colors.bg,
+        colors.text
+      )}
+    >
+      <span className={clsx('w-1.5 h-1.5 rounded-full', colors.text.replace('text-', 'bg-'))} />
+      {status}
+    </span>
+  );
+}
+
+/**
+ * Circuit Breaker Indicator
+ */
+function CircuitBreakerIndicator({ state }: { state: CircuitBreakerState }) {
+  const label = state === 'active' ? 'CB' : state === 'tripped' ? 'TRIP' : 'No CB';
+
+  return (
+    <div className="flex items-center gap-1.5" title={`Circuit Breaker: ${state}`}>
+      <span className={clsx('w-2 h-2 rounded-full', CB_COLORS[state])} />
+      <span
+        className={clsx(
+          'text-xs font-mono',
+          state === 'disabled'
+            ? 'text-gray-400 dark:text-slate-600'
+            : 'text-gray-500 dark:text-slate-500'
+        )}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Heartbeat Indicator - shows last seen timestamp with freshness status
+ */
+function HeartbeatIndicator({ lastSeen }: { lastSeen?: string }) {
+  if (!lastSeen) {
+    return (
+      <div className="flex items-center gap-1.5" title="No heartbeat received">
+        <Clock className="w-3 h-3 text-gray-400 dark:text-slate-600" />
+        <span className="text-xs font-mono text-gray-400 dark:text-slate-600">—</span>
+      </div>
+    );
+  }
+
+  const lastSeenDate = new Date(lastSeen);
+  const now = new Date();
+  const diffMs = now.getTime() - lastSeenDate.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+
+  // Determine freshness: < 10min = fresh, < 1hr = recent, < 24hr = stale, > 24hr = dead
+  let status: 'fresh' | 'recent' | 'stale' | 'dead';
+  let label: string;
+
+  if (diffMins < 10) {
+    status = 'fresh';
+    label = diffMins <= 1 ? 'now' : `${diffMins}m`;
+  } else if (diffMins < 60) {
+    status = 'recent';
+    label = `${diffMins}m`;
+  } else if (diffHours < 24) {
+    status = 'stale';
+    label = `${diffHours}h`;
+  } else {
+    status = 'dead';
+    const diffDays = Math.floor(diffHours / 24);
+    label = `${diffDays}d`;
+  }
+
+  const statusColors = {
+    fresh: 'text-emerald-400',
+    recent: 'text-amber-400',
+    stale: 'text-orange-400',
+    dead: 'text-rose-400',
+  };
+
+  const dotColors = {
+    fresh: 'bg-emerald-500',
+    recent: 'bg-amber-500',
+    stale: 'bg-orange-500',
+    dead: 'bg-rose-500',
+  };
+
+  return (
+    <div
+      className="flex items-center gap-1.5"
+      title={`Last heartbeat: ${lastSeenDate.toLocaleString()}`}
+    >
+      <span className={clsx('w-2 h-2 rounded-full', dotColors[status])} />
+      <span className={clsx('text-xs font-mono', statusColors[status])}>{label}</span>
+    </div>
+  );
+}
+
+/**
+ * Activity Bar Component
+ */
+function ActivityBar({ value, max = 100 }: { value: number; max?: number }) {
+  const pct = Math.min((value / max) * 100, 100);
+  const barColor =
+    pct >= 90
+      ? 'bg-rose-500'
+      : pct >= 75
+        ? 'bg-orange-500'
+        : pct >= 50
+          ? 'bg-amber-500'
+          : 'bg-emerald-500';
+
+  return (
+    <div className="w-20 h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
+      <div
+        className={clsx('h-full rounded-full transition-all', barColor)}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Sortable Column Header
+ */
+function SortHeader({
+  field,
+  label,
+  currentSort,
+  sortDir,
+  onSort,
+  align = 'left',
+}: {
+  field: SortField;
+  label: string;
+  currentSort: SortField;
+  sortDir: SortDir;
+  onSort: (field: SortField) => void;
+  align?: 'left' | 'right';
+}) {
+  const isActive = field === currentSort;
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSort(field)}
+      className={clsx(
+        'flex items-center gap-1 text-xs font-mono uppercase tracking-wider transition-colors',
+        isActive
+          ? 'text-gray-800 dark:text-slate-200'
+          : 'text-gray-500 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-400',
+        align === 'right' && 'flex-row-reverse'
+      )}
+    >
+      <span>{label}</span>
+      {isActive ? (
+        sortDir === 'asc' ? (
+          <ArrowUp className="w-3 h-3" />
+        ) : (
+          <ArrowDown className="w-3 h-3" />
+        )
+      ) : (
+        <ArrowUpDown className="w-3 h-3 opacity-50" />
+      )}
+    </button>
+  );
+}
+
+/**
+ * Project Row Component
+ */
+function ProjectRow({
+  row,
+  isExpanded,
+  onToggle,
+  breakdown,
+  isLoadingBreakdown,
+}: {
+  row: ProjectTableRow;
+  isExpanded: boolean;
+  onToggle: () => void;
+  breakdown: ProjectBreakdown | null;
+  isLoadingBreakdown: boolean;
+}) {
+  const delta = formatDelta(row.costDeltaPct);
+
+  const handleRowClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onToggle();
+  };
+
+  return (
+    <>
+      {/* Main Row */}
+      <tr
+        className={clsx(
+          'border-b border-gray-200 dark:border-slate-800 transition-colors cursor-pointer',
+          isExpanded
+            ? 'bg-gray-100/50 dark:bg-slate-800/50'
+            : 'hover:bg-gray-100/30 dark:hover:bg-slate-800/30'
+        )}
+        onClick={handleRowClick}
+      >
+        {/* Expand Chevron */}
+        <td className="px-3 py-3 w-10">
+          <button
+            type="button"
+            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onToggle();
+            }}
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-4 h-4 text-gray-600 dark:text-slate-400" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-gray-500 dark:text-slate-500" />
+            )}
+          </button>
+        </td>
+
+        {/* Project Name */}
+        <td className="px-3 py-3">
+          <span className="text-sm font-medium text-gray-800 dark:text-slate-200">{row.name}</span>
+        </td>
+
+        {/* Cost */}
+        <td className="px-3 py-3 text-right">
+          <span className="text-sm font-mono text-gray-800 dark:text-slate-200">
+            {formatCost(row.mtdCost)}
+          </span>
+        </td>
+
+        {/* Delta */}
+        <td className="px-3 py-3 text-right">
+          <span className={clsx('text-sm font-mono font-semibold', delta.color)}>{delta.text}</span>
+        </td>
+
+        {/* Activity */}
+        <td className="px-3 py-3">
+          <div className="flex items-center gap-2">
+            <ActivityBar value={row.activity} />
+            {row.activityTrend.length > 0 && (
+              <Sparkline data={row.activityTrend} width={40} height={16} color="#3b82f6" />
+            )}
+          </div>
+        </td>
+
+        {/* Status */}
+        <td className="px-3 py-3">
+          <StatusBadge status={row.status} />
+        </td>
+
+        {/* Circuit Breaker */}
+        <td className="px-3 py-3">
+          <CircuitBreakerIndicator state={row.circuitBreaker} />
+        </td>
+
+        {/* Last Seen / Heartbeat */}
+        <td className="px-3 py-3">
+          <HeartbeatIndicator lastSeen={row.lastSeen} />
+        </td>
+      </tr>
+
+      {/* Expanded Resource Breakdown */}
+      {isExpanded && (
+        <tr className="bg-gray-50 dark:bg-slate-900/50">
+          <td colSpan={8} className="px-6 py-4">
+            <ResourceBreakdown
+              projectId={row.id}
+              breakdown={breakdown}
+              isLoading={isLoadingBreakdown}
+            />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+export function ProjectsTable({
+  rows,
+  expanded,
+  onExpand,
+  onSort,
+  sort,
+  sortDir,
+  resourceCache,
+}: ProjectsTableProps) {
+  const handleToggle = useCallback(
+    (projectId: string) => {
+      onExpand(projectId);
+    },
+    [onExpand]
+  );
+
+  // Determine which rows are loading their breakdown
+  const loadingRows = useMemo(() => {
+    const loading = new Set<string>();
+    for (const id of expanded) {
+      if (!resourceCache.has(id)) {
+        loading.add(id);
+      }
+    }
+    return loading;
+  }, [expanded, resourceCache]);
+
+  if (rows.length === 0) {
+    return (
+      <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-sm p-8 text-center">
+        <p className="text-gray-500 dark:text-slate-500 text-sm">No projects found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-50 dark:bg-slate-900/50 border border-gray-200 dark:border-slate-800 rounded-sm overflow-hidden">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b border-gray-300 dark:border-slate-700 bg-gray-100/50 dark:bg-slate-800/50">
+            <th className="px-3 py-2 w-10" /> {/* Chevron column */}
+            <th className="px-3 py-2 text-left">
+              <SortHeader
+                field="name"
+                label="Project"
+                currentSort={sort}
+                sortDir={sortDir}
+                onSort={onSort}
+              />
+            </th>
+            <th className="px-3 py-2 text-right">
+              <SortHeader
+                field="cost"
+                label="MTD Cost"
+                currentSort={sort}
+                sortDir={sortDir}
+                onSort={onSort}
+                align="right"
+              />
+            </th>
+            <th className="px-3 py-2 text-right">
+              <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+                Delta
+              </span>
+            </th>
+            <th className="px-3 py-2 text-left">
+              <SortHeader
+                field="activity"
+                label="Activity"
+                currentSort={sort}
+                sortDir={sortDir}
+                onSort={onSort}
+              />
+            </th>
+            <th className="px-3 py-2 text-left">
+              <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+                Status
+              </span>
+            </th>
+            <th className="px-3 py-2 text-left">
+              <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+                CB
+              </span>
+            </th>
+            <th className="px-3 py-2 text-left">
+              <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+                Last Seen
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <ProjectRow
+              key={row.id}
+              row={row}
+              isExpanded={expanded.has(row.id)}
+              onToggle={() => handleToggle(row.id)}
+              breakdown={resourceCache.get(row.id) || null}
+              isLoadingBreakdown={loadingRows.has(row.id)}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default ProjectsTable;