@burdenoff/microfe-movethewheels 2026.510.105

package/src/movethewheels/components/DataTable.tsx

@@ -0,0 +1,367 @@
+import { useState, useMemo, type ReactNode } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from './ui';
+import { cn } from '../utils/cn';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Search,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+} from 'lucide-react';
+
+export interface Column<T> {
+  id: string;
+  header: string | ReactNode;
+  accessorKey?: keyof T;
+  cell?: (row: T) => ReactNode;
+  sortable?: boolean;
+  className?: string;
+  headerClassName?: string;
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  isLoading?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  searchFields?: (keyof T)[];
+  pagination?: boolean;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  onRowClick?: (row: T) => void;
+  rowClassName?: string | ((row: T) => string);
+  emptyMessage?: string;
+  className?: string;
+  getRowId?: (row: T) => string;
+}
+
+type SortDirection = 'asc' | 'desc' | null;
+
+/**
+ * DataTable - A reusable data table component with sorting, search, and pagination
+ */
+export function DataTable<T extends object>({
+  columns,
+  data,
+  isLoading = false,
+  searchable = false,
+  searchPlaceholder = 'Search...',
+  searchFields,
+  pagination = true,
+  pageSize: initialPageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50],
+  onRowClick,
+  rowClassName,
+  emptyMessage = 'No data found',
+  className,
+  getRowId,
+}: DataTableProps<T>) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  // Filter data based on search
+  const filteredData = useMemo(() => {
+    if (!searchQuery || !searchFields || searchFields.length === 0) {
+      return data;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return data.filter((row) =>
+      searchFields.some((field) => {
+        const value = row[field] as unknown;
+        return value != null && String(value).toLowerCase().includes(query);
+      })
+    );
+  }, [data, searchQuery, searchFields]);
+
+  // Sort data
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) {
+      return filteredData;
+    }
+
+    const column = columns.find((c) => c.id === sortColumn);
+    if (!column?.accessorKey) {
+      return filteredData;
+    }
+
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[column.accessorKey as keyof T] as unknown;
+      const bVal = b[column.accessorKey as keyof T] as unknown;
+
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+
+      let comparison = 0;
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        comparison = aVal.localeCompare(bVal);
+      } else if (typeof aVal === 'number' && typeof bVal === 'number') {
+        comparison = aVal - bVal;
+      } else if (aVal instanceof Date && bVal instanceof Date) {
+        comparison = aVal.getTime() - bVal.getTime();
+      } else {
+        comparison = String(aVal).localeCompare(String(bVal));
+      }
+
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredData, sortColumn, sortDirection, columns]);
+
+  // Paginate data
+  const paginatedData = useMemo(() => {
+    if (!pagination) return sortedData;
+
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize, pagination]);
+
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+
+  // Handle sort
+  const handleSort = (columnId: string) => {
+    if (sortColumn === columnId) {
+      if (sortDirection === 'asc') {
+        setSortDirection('desc');
+      } else if (sortDirection === 'desc') {
+        setSortColumn(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortColumn(columnId);
+      setSortDirection('asc');
+    }
+  };
+
+  // Get sort icon
+  const getSortIcon = (columnId: string) => {
+    if (sortColumn !== columnId) {
+      return <ArrowUpDown className="w-4 h-4 text-muted-foreground/50" />;
+    }
+    if (sortDirection === 'asc') {
+      return <ArrowUp className="w-4 h-4 text-primary" />;
+    }
+    return <ArrowDown className="w-4 h-4 text-primary" />;
+  };
+
+  // Get cell value
+  const getCellValue = (row: T, column: Column<T>) => {
+    if (column.cell) {
+      return column.cell(row);
+    }
+    if (column.accessorKey) {
+      const value = row[column.accessorKey] as unknown;
+      if (value == null) return '-';
+      if (value instanceof Date) return value.toLocaleDateString();
+      return String(value);
+    }
+    return '-';
+  };
+
+  // Loading skeleton
+  if (isLoading) {
+    return (
+      <div className={cn('space-y-4', className)}>
+        {searchable && (
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-10 w-64" />
+          </div>
+        )}
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {columns.map((column) => (
+                  <TableHead key={column.id}>
+                    <Skeleton className="h-4 w-20" />
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  {columns.map((column) => (
+                    <TableCell key={column.id}>
+                      <Skeleton className="h-4 w-full max-w-[100px]" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Search */}
+      {searchable && (
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-9"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead
+                  key={column.id}
+                  className={cn(
+                    column.sortable && 'cursor-pointer select-none hover:bg-muted/50',
+                    column.headerClassName
+                  )}
+                  onClick={() => column.sortable && handleSort(column.id)}
+                >
+                  <div className="flex items-center gap-2">
+                    {column.header}
+                    {column.sortable && getSortIcon(column.id)}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <p className="text-muted-foreground">{emptyMessage}</p>
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((row, index) => {
+                const rowId = getRowId ? getRowId(row) : index;
+                const rowClasses =
+                  typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
+
+                return (
+                  <TableRow
+                    key={rowId}
+                    className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50', rowClasses)}
+                    onClick={() => onRowClick?.(row)}
+                  >
+                    {columns.map((column) => (
+                      <TableCell key={column.id} className={column.className}>
+                        {getCellValue(row, column)}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {pagination && sortedData.length > 0 && (
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>
+              Showing {(currentPage - 1) * pageSize + 1} to{' '}
+              {Math.min(currentPage * pageSize, sortedData.length)} of {sortedData.length}
+            </span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(value) => {
+                setPageSize(Number(value));
+                setCurrentPage(1);
+              }}
+            >
+              <SelectTrigger className="w-[70px] h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span>per page</span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="px-3 text-sm">
+              Page {currentPage} of {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/movethewheels/components/MetricCard.tsx

@@ -0,0 +1,180 @@
+import type { ReactNode } from 'react';
+import { cn } from '../utils/cn';
+import { Card, CardContent } from './ui';
+
+interface MetricCardProps {
+  /** Main value to display */
+  value: string | number;
+  /** Label describing the metric */
+  label: string;
+  /** Optional icon */
+  icon?: ReactNode;
+  /** Change from previous period (e.g., "+12%", "-5%") */
+  change?: string;
+  /** Whether the change is positive, negative, or neutral */
+  changeType?: 'positive' | 'negative' | 'neutral';
+  /** Optional subtitle or additional info */
+  subtitle?: string;
+  /** Optional trend indicator */
+  trend?: 'up' | 'down' | 'flat';
+  /** Card size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Optional click handler */
+  onClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: {
+    card: 'p-3',
+    value: 'text-xl font-bold',
+    label: 'text-xs',
+    icon: 'w-8 h-8',
+  },
+  md: {
+    card: 'p-4',
+    value: 'text-2xl font-bold',
+    label: 'text-sm',
+    icon: 'w-10 h-10',
+  },
+  lg: {
+    card: 'p-6',
+    value: 'text-3xl font-bold',
+    label: 'text-base',
+    icon: 'w-12 h-12',
+  },
+};
+
+/**
+ * MetricCard - Displays a key metric with optional change indicator
+ */
+export function MetricCard({
+  value,
+  label,
+  icon,
+  change,
+  changeType = 'neutral',
+  subtitle,
+  trend,
+  size = 'md',
+  onClick,
+  className,
+}: MetricCardProps) {
+  const styles = sizeClasses[size];
+
+  const changeColors = {
+    positive: 'text-green-600 dark:text-green-400',
+    negative: 'text-red-600 dark:text-red-400',
+    neutral: 'text-muted-foreground',
+  };
+
+  const trendIcons = {
+    up: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M5 10l7-7m0 0l7 7m-7-7v18"
+        />
+      </svg>
+    ),
+    down: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M19 14l-7 7m0 0l-7-7m7 7V3"
+        />
+      </svg>
+    ),
+    flat: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
+      </svg>
+    ),
+  };
+
+  return (
+    <Card
+      className={cn(
+        'overflow-hidden transition-all duration-200',
+        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
+        className
+      )}
+      onClick={onClick}
+    >
+      <CardContent className={styles.card}>
+        <div className="flex items-start justify-between">
+          <div className="space-y-1">
+            <p className={cn('text-muted-foreground', styles.label)}>{label}</p>
+            <p className={cn('text-foreground tracking-tight', styles.value)}>
+              {typeof value === 'number' ? value.toLocaleString() : value}
+            </p>
+            {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
+            {change && (
+              <div className={cn('flex items-center gap-1 text-sm', changeColors[changeType])}>
+                {trend && trendIcons[trend]}
+                <span>{change}</span>
+              </div>
+            )}
+          </div>
+          {icon && (
+            <div
+              className={cn('flex-shrink-0 p-2 rounded-lg bg-primary/10 text-primary', styles.icon)}
+            >
+              {icon}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * MetricCardSkeleton - Loading state for MetricCard
+ */
+export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
+  const styles = sizeClasses[size];
+
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className={styles.card}>
+        <div className="flex items-start justify-between">
+          <div className="space-y-2 flex-1">
+            <div className="h-4 w-24 bg-muted animate-pulse rounded" />
+            <div className="h-8 w-32 bg-muted animate-pulse rounded" />
+            <div className="h-3 w-20 bg-muted animate-pulse rounded" />
+          </div>
+          <div className={cn('bg-muted animate-pulse rounded-lg', styles.icon)} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * MetricGrid - Grid container for metric cards
+ */
+export function MetricGrid({
+  children,
+  columns = 4,
+  className,
+}: {
+  children: ReactNode;
+  columns?: 2 | 3 | 4 | 5 | 6;
+  className?: string;
+}) {
+  const colClasses = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+  };
+
+  return <div className={cn('grid gap-4', colClasses[columns], className)}>{children}</div>;
+}