@invect/ui 0.0.1

package/src/components/dashboard/RecentActivityTable.tsx

@@ -0,0 +1,92 @@
+import { Link } from 'react-router';
+import { Activity } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/components/ui/table';
+import { StatusBadge, formatRelativeTime, formatDuration } from './status-helpers';
+import type { Flow, FlowRun } from '@invect/core/types';
+import { InvectLoader } from '../shared/InvectLoader';
+
+interface RecentActivityTableProps {
+  runs: FlowRun[];
+  flows: Flow[];
+  basePath: string;
+  isLoading: boolean;
+}
+
+export function RecentActivityTable({
+  runs,
+  flows,
+  basePath,
+  isLoading,
+}: RecentActivityTableProps) {
+  const flowMap = new Map(flows.map((f) => [f.id, f]));
+
+  if (isLoading) {
+    return <InvectLoader className="py-8" iconClassName="h-10" label="Loading activity..." />;
+  }
+
+  if (runs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-sm text-muted-foreground">
+        <div className="rounded-full bg-muted p-3 mb-3">
+          <Activity className="h-6 w-6 text-muted-foreground" />
+        </div>
+        <p className="font-medium text-sm">No activity yet</p>
+        <p className="text-xs mt-1 text-center max-w-[200px]">
+          Run your first flow to see execution history here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[160px]">Flow</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>When</TableHead>
+          <TableHead className="text-right">Duration</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {runs.map((run) => {
+          const flow = flowMap.get(run.flowId);
+          const duration =
+            run.completedAt && run.startedAt
+              ? new Date(String(run.completedAt)).getTime() -
+                new Date(String(run.startedAt)).getTime()
+              : null;
+
+          return (
+            <TableRow key={run.id} className="cursor-pointer">
+              <TableCell className="font-medium">
+                <Link
+                  to={`${basePath}/flow/${run.flowId}`}
+                  className="hover:underline truncate block max-w-[160px] text-xs"
+                >
+                  {flow?.name ?? run.flowId.slice(0, 16)}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={run.status} />
+              </TableCell>
+              <TableCell className="text-xs text-muted-foreground">
+                {formatRelativeTime(run.startedAt)}
+              </TableCell>
+              <TableCell className="text-right text-xs font-mono text-muted-foreground">
+                {duration !== null ? formatDuration(duration) : '—'}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/dashboard/StatCard.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { cn } from '~/lib/utils';
+import { Card, CardContent, CardDescription, CardHeader } from '~/components/ui/card';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon: React.ElementType;
+  className?: string;
+}
+
+export function StatCard({ title, value, subtitle, icon: Icon, className }: StatCardProps) {
+  return (
+    <Card className={cn('gap-0 py-4', className)}>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardDescription className="text-xs font-medium uppercase tracking-wider">
+            {title}
+          </CardDescription>
+          <div className="rounded-md bg-muted p-1.5">
+            <Icon className="h-4 w-4 text-muted-foreground" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold tracking-tight">{value}</div>
+        {subtitle && <p className="mt-1 text-xs text-muted-foreground">{subtitle}</p>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/index.ts

@@ -0,0 +1,5 @@
+export { FailedRunsAlert } from './FailedRunsAlert';
+export { FlowCard } from './FlowCard';
+export { RecentActivityTable } from './RecentActivityTable';
+export { StatCard } from './StatCard';
+export { formatRelativeTime, formatDuration, StatusBadge } from './status-helpers';

package/src/components/dashboard/status-helpers.tsx

@@ -0,0 +1,102 @@
+import { cn } from '~/lib/utils';
+import { CheckCircle2, XCircle, Loader2, Clock, CircleDot } from 'lucide-react';
+
+export function formatRelativeTime(date: string | Date) {
+  const now = new Date();
+  const d = new Date(date);
+  const diffMs = now.getTime() - d.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  const diffHr = Math.floor(diffMs / 3_600_000);
+  const diffDay = Math.floor(diffMs / 86_400_000);
+
+  if (diffMin < 1) {
+    return 'Just now';
+  }
+  if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  }
+  if (diffHr < 24) {
+    return `${diffHr}h ago`;
+  }
+  if (diffDay < 7) {
+    return `${diffDay}d ago`;
+  }
+  return d.toLocaleDateString();
+}
+
+export function formatDuration(ms: number): string {
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remainSec = seconds % 60;
+  if (seconds < 3600) {
+    return remainSec > 0 ? `${minutes}m ${remainSec}s` : `${minutes}m`;
+  }
+  const hours = Math.floor(seconds / 3600);
+  const remainMin = Math.floor((seconds % 3600) / 60);
+  return remainMin > 0 ? `${hours}h ${remainMin}m` : `${hours}h`;
+}
+
+function statusColor(status: string) {
+  switch (status) {
+    case 'SUCCESS':
+      return 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-950/40 dark:border-emerald-800';
+    case 'FAILED':
+      return 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-950/40 dark:border-red-800';
+    case 'RUNNING':
+      return 'text-blue-600 bg-blue-50 border-blue-200 dark:text-blue-400 dark:bg-blue-950/40 dark:border-blue-800';
+    case 'PENDING':
+      return 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-950/40 dark:border-amber-800';
+    case 'PAUSED_FOR_BATCH':
+      return 'text-purple-600 bg-purple-50 border-purple-200 dark:text-purple-400 dark:bg-purple-950/40 dark:border-purple-800';
+    case 'CANCELLED':
+      return 'text-muted-foreground bg-muted border-border';
+    default:
+      return 'text-muted-foreground bg-muted border-border';
+  }
+}
+
+function StatusIcon({ status, className }: { status: string; className?: string }) {
+  const base = cn('h-3.5 w-3.5', className);
+  switch (status) {
+    case 'SUCCESS':
+      return <CheckCircle2 className={cn(base, 'text-emerald-500')} />;
+    case 'FAILED':
+      return <XCircle className={cn(base, 'text-red-500')} />;
+    case 'RUNNING':
+      return <Loader2 className={cn(base, 'text-blue-500 animate-spin')} />;
+    case 'PENDING':
+      return <Clock className={cn(base, 'text-amber-500')} />;
+    case 'PAUSED_FOR_BATCH':
+      return <Loader2 className={cn(base, 'text-purple-500 animate-spin')} />;
+    case 'CANCELLED':
+      return <CircleDot className={cn(base, 'text-muted-foreground')} />;
+    default:
+      return <CircleDot className={cn(base, 'text-muted-foreground')} />;
+  }
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const labels: Record<string, string> = {
+    SUCCESS: 'Success',
+    FAILED: 'Failed',
+    RUNNING: 'Running',
+    PENDING: 'Pending',
+    PAUSED_FOR_BATCH: 'Batch',
+    CANCELLED: 'Cancelled',
+    PAUSED: 'Paused',
+  };
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium',
+        statusColor(status),
+      )}
+    >
+      <StatusIcon status={status} className="h-3 w-3" />
+      {labels[status] ?? status}
+    </span>
+  );
+}