@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,236 @@
+/**
+ * ResourceBreakdown Component
+ *
+ * Displays resource metrics for an expanded project row.
+ * Shows D1, KV, R2, Vectorize, Workers, etc. with sparklines.
+ * Highlights top 3 cost drivers with flame icons.
+ */
+
+import { clsx } from 'clsx';
+import { Flame } from 'lucide-react';
+import type { ProjectBreakdown, ResourceMetric, ResourceType } from './types';
+import { RESOURCE_COLORS, RESOURCE_LABELS } from './types';
+import { Sparkline } from './Sparkline';
+
+interface ResourceBreakdownProps {
+  projectId: string;
+  breakdown: ProjectBreakdown | null;
+  isLoading: boolean;
+}
+
+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)}`;
+}
+
+/**
+ * Loading skeleton for resource breakdown
+ */
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-2 animate-pulse">
+      {[1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 p-2 bg-gray-100/50 dark:bg-slate-800/50 rounded"
+        >
+          <div className="w-3 h-3 rounded bg-slate-700" />
+          <div className="w-20 h-4 bg-gray-200 dark:bg-slate-700 rounded" />
+          <div className="flex-1" />
+          <div className="w-16 h-4 bg-gray-200 dark:bg-slate-700 rounded" />
+          <div className="w-24 h-4 bg-gray-200 dark:bg-slate-700 rounded" />
+          <div className="w-40 h-3 bg-gray-200 dark:bg-slate-700 rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Empty state when no resources found
+ */
+function EmptyState() {
+  return (
+    <div className="py-4 text-center">
+      <p className="text-gray-500 dark:text-slate-500 text-xs font-mono">
+        No resource data available
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Resource type icon/indicator
+ */
+function ResourceIcon({ type }: { type: ResourceType }) {
+  const colors = RESOURCE_COLORS[type] || { stroke: '#64748b', bg: 'rgba(100, 116, 139, 0.3)' };
+
+  return (
+    <div
+      className="w-3 h-3 rounded-sm"
+      style={{ backgroundColor: colors.stroke }}
+      title={RESOURCE_LABELS[type] || type}
+    />
+  );
+}
+
+/**
+ * Progress bar for limit percentage
+ */
+function LimitBar({ percentage }: { percentage: number }) {
+  const pct = Math.min(percentage, 100);
+  const barColor =
+    percentage >= 90
+      ? 'bg-rose-500'
+      : percentage >= 75
+        ? 'bg-orange-500'
+        : percentage >= 50
+          ? 'bg-amber-500'
+          : 'bg-emerald-500';
+
+  return (
+    <div className="w-24 flex items-center gap-2">
+      <div className="flex-1 h-1 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>
+      <span className="text-xs font-mono text-gray-500 dark:text-slate-500 w-10 text-right">
+        {percentage > 999 ? '>999' : percentage.toFixed(0)}%
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Single resource row
+ */
+function ResourceRow({
+  resource,
+  isCostDriver,
+}: {
+  resource: ResourceMetric;
+  isCostDriver: boolean;
+}) {
+  const colors = RESOURCE_COLORS[resource.type] || {
+    stroke: '#64748b',
+    bg: 'rgba(100, 116, 139, 0.3)',
+  };
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-4 px-3 py-2 rounded transition-colors',
+        isCostDriver
+          ? 'bg-amber-50/80 dark:bg-amber-900/20 hover:bg-amber-100/80 dark:hover:bg-amber-900/30'
+          : 'hover:bg-gray-100/50 dark:hover:bg-slate-800/50'
+      )}
+    >
+      {/* Type indicator */}
+      <ResourceIcon type={resource.type} />
+
+      {/* Label with flame icon for cost drivers */}
+      <span
+        className={clsx(
+          'w-28 text-xs font-medium truncate flex items-center gap-1',
+          isCostDriver
+            ? 'text-amber-700 dark:text-amber-400 font-semibold'
+            : 'text-gray-600 dark:text-slate-400'
+        )}
+        title={isCostDriver ? `${resource.label} - Top cost driver this period` : resource.label}
+      >
+        {isCostDriver && <Flame className="w-3 h-3 text-amber-500" />}
+        {RESOURCE_LABELS[resource.type] || resource.label}
+      </span>
+
+      {/* Cost */}
+      <span
+        className={clsx(
+          'w-16 text-xs font-mono text-right',
+          isCostDriver
+            ? 'text-amber-800 dark:text-amber-300 font-semibold'
+            : 'text-gray-700 dark:text-slate-300'
+        )}
+      >
+        {formatCost(resource.cost)}
+      </span>
+
+      {/* Usage */}
+      <span className="w-28 text-xs font-mono text-gray-500 dark:text-slate-500">
+        {resource.usageFormatted}
+      </span>
+
+      {/* Limit bar (if applicable) */}
+      {resource.limitPct !== undefined ? (
+        <LimitBar percentage={resource.limitPct} />
+      ) : (
+        <div className="w-24" /> // Spacer
+      )}
+
+      {/* Sparkline */}
+      {resource.trend && resource.trend.length > 1 ? (
+        <Sparkline data={resource.trend} width={60} height={16} color={colors.stroke} />
+      ) : (
+        <div className="w-[60px]" /> // Spacer
+      )}
+    </div>
+  );
+}
+
+export function ResourceBreakdown({ projectId, breakdown, isLoading }: ResourceBreakdownProps) {
+  if (isLoading) {
+    return <LoadingSkeleton />;
+  }
+
+  if (!breakdown || breakdown.resources.length === 0) {
+    return <EmptyState />;
+  }
+
+  // Sort resources by cost (descending)
+  const sortedResources = [...breakdown.resources].sort((a, b) => b.cost - a.cost);
+
+  // Identify top 3 cost drivers (only if they have non-zero cost)
+  const costDriverTypes = new Set(
+    sortedResources
+      .filter((r) => r.cost > 0)
+      .slice(0, 3)
+      .map((r) => r.type)
+  );
+
+  return (
+    <div className="space-y-1">
+      {/* Header */}
+      <div className="flex items-center gap-4 px-3 py-1 text-xs font-mono text-gray-400 dark:text-slate-600 uppercase tracking-wider">
+        <span className="w-3" /> {/* Icon spacer */}
+        <span className="w-28">Resource</span>
+        <span className="w-16 text-right">Cost</span>
+        <span className="w-28">Usage</span>
+        <span className="w-24">Limit</span>
+        <span className="w-[60px]">Trend</span>
+      </div>
+
+      {/* Resource rows */}
+      {sortedResources.map((resource) => (
+        <ResourceRow
+          key={`${projectId}-${resource.type}`}
+          resource={resource}
+          isCostDriver={costDriverTypes.has(resource.type)}
+        />
+      ))}
+
+      {/* Total row */}
+      <div className="flex items-center gap-4 px-3 py-2 mt-2 border-t border-gray-200 dark:border-slate-800">
+        <span className="w-3" />
+        <span className="w-28 text-xs font-semibold text-gray-600 dark:text-slate-400">Total</span>
+        <span className="w-16 text-xs font-mono font-semibold text-gray-800 dark:text-slate-200 text-right">
+          {formatCost(breakdown.totalCost)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default ResourceBreakdown;

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

@@ -0,0 +1,127 @@
+/**
+ * Sparkline Component
+ *
+ * Inline SVG sparkline for activity trends.
+ * Minimal, industrial aesthetic.
+ */
+
+import { useMemo } from 'react';
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+  showFill?: boolean;
+  className?: string;
+}
+
+export function Sparkline({
+  data,
+  width = 60,
+  height = 20,
+  color = '#3b82f6',
+  strokeWidth = 1.5,
+  showFill = true,
+  className = '',
+}: SparklineProps) {
+  const pathData = useMemo(() => {
+    if (data.length < 2) return { line: '', fill: '' };
+
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+
+    // Padding to prevent clipping
+    const padding = 2;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding * 2;
+
+    const points = data.map((value, index) => {
+      const x = padding + (index / (data.length - 1)) * chartWidth;
+      const y = padding + chartHeight - ((value - min) / range) * chartHeight;
+      return { x, y };
+    });
+
+    // Build line path
+    const linePath = points
+      .map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`))
+      .join(' ');
+
+    // Build fill path (close at bottom)
+    const fillPath = `${linePath} L ${points[points.length - 1].x} ${height - padding} L ${padding} ${height - padding} Z`;
+
+    return { line: linePath, fill: fillPath };
+  }, [data, width, height]);
+
+  if (data.length < 2) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        className={className}
+        viewBox={`0 0 ${width} ${height}`}
+        aria-hidden="true"
+      >
+        <line
+          x1={2}
+          y1={height / 2}
+          x2={width - 2}
+          y2={height / 2}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeOpacity={0.3}
+          strokeDasharray="2 2"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+    >
+      {/* Fill gradient */}
+      {showFill && (
+        <>
+          <defs>
+            <linearGradient
+              id={`sparkline-fill-${color.replace('#', '')}`}
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="1"
+            >
+              <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <path d={pathData.fill} fill={`url(#sparkline-fill-${color.replace('#', '')})`} />
+        </>
+      )}
+      {/* Line */}
+      <path
+        d={pathData.line}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* End dot */}
+      <circle
+        cx={width - 2}
+        cy={pathData.line ? parseFloat(pathData.line.split(' ').slice(-1)[0]) : height / 2}
+        r={2}
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export default Sparkline;