@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/dashboard/DataTable.tsx

@@ -0,0 +1,273 @@
+import {
+  IconArrowsUpDown,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "../ui/button.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select.js";
+import { Skeleton } from "../ui/skeleton.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table.js";
+import { cn } from "../utils.js";
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+const TABLE_MIN_HEIGHT_CLASS = "min-h-[386px]";
+
+export interface DataTableLabels {
+  noData: string;
+  rowsPerPage: string;
+  of: string;
+  previousPage: string;
+  nextPage: string;
+}
+
+export interface DataTableProps {
+  title?: string;
+  data: Record<string, unknown>[];
+  columns?: string[];
+  loading?: boolean;
+  error?: string;
+  maxRows?: number;
+  pageSizeOptions?: number[];
+  labels?: Partial<DataTableLabels>;
+}
+
+const DEFAULT_LABELS: DataTableLabels = {
+  noData: "No data available.",
+  rowsPerPage: "Rows per page",
+  of: "of",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+};
+
+/** A source-agnostic, sortable and paginated dashboard table. */
+export function DataTable({
+  title,
+  data,
+  columns: columnsProp,
+  loading,
+  error,
+  maxRows,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  labels: labelOverrides,
+}: DataTableProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(pageSizeOptions[0] ?? 10);
+
+  const columns = useMemo(() => {
+    if (columnsProp) return columnsProp;
+    return data.length === 0 ? [] : Object.keys(data[0]);
+  }, [columnsProp, data]);
+  const rows = useMemo(
+    () =>
+      maxRows != null && data.length > maxRows ? data.slice(0, maxRows) : data,
+    [data, maxRows],
+  );
+  const sortedRows = useMemo(() => {
+    if (!sortColumn) return rows;
+    return [...rows].sort((a, b) => {
+      const aValue = a[sortColumn];
+      const bValue = b[sortColumn];
+      if (aValue == null && bValue == null) return 0;
+      if (aValue == null) return 1;
+      if (bValue == null) return -1;
+      const comparison =
+        typeof aValue === "number" && typeof bValue === "number"
+          ? aValue - bValue
+          : String(aValue).localeCompare(String(bValue));
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }, [rows, sortColumn, sortDirection]);
+  const pageCount = Math.ceil(sortedRows.length / pageSize);
+  const pagedRows = sortedRows.slice(page * pageSize, (page + 1) * pageSize);
+
+  const handleSort = (column: string) => {
+    if (sortColumn === column) {
+      setSortDirection((direction) => (direction === "asc" ? "desc" : "asc"));
+    } else {
+      setSortColumn(column);
+      setSortDirection("desc");
+    }
+    setPage(0);
+  };
+
+  const content = loading ? (
+    <DataTableLoadingSkeleton />
+  ) : error ? (
+    <p className="py-4 text-sm text-destructive">{error}</p>
+  ) : data.length === 0 ? (
+    <p className="py-4 text-center text-sm text-muted-foreground">
+      {labels.noData}
+    </p>
+  ) : (
+    <div className={cn("overflow-x-auto", TABLE_MIN_HEIGHT_CLASS)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column}
+                className="cursor-pointer select-none whitespace-nowrap hover:text-foreground"
+                onClick={() => handleSort(column)}
+              >
+                <span className="flex items-center gap-1">
+                  {column}
+                  <IconArrowsUpDown
+                    className={cn(
+                      "h-3 w-3",
+                      sortColumn === column
+                        ? "text-foreground"
+                        : "text-muted-foreground/50",
+                    )}
+                  />
+                </span>
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {pagedRows.map((row, index) => (
+            <TableRow key={index}>
+              {columns.map((column) => (
+                <TableCell
+                  key={column}
+                  className="max-w-[300px] truncate whitespace-nowrap"
+                >
+                  {formatValue(row[column])}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {sortedRows.length > (pageSizeOptions[0] ?? 10) && (
+        <div className="flex items-center justify-between border-t border-border px-2 py-2 text-xs text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>{labels.rowsPerPage}</span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(value) => {
+                setPageSize(Number(value));
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="h-6 w-16 border-border px-2 py-0 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <span>
+              {page * pageSize + 1}–
+              {Math.min((page + 1) * pageSize, sortedRows.length)} {labels.of}{" "}
+              {sortedRows.length}
+            </span>
+            <Button
+              aria-label={labels.previousPage}
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={() => setPage((current) => current - 1)}
+              disabled={page === 0}
+            >
+              <IconChevronLeft className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              aria-label={labels.nextPage}
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={() => setPage((current) => current + 1)}
+              disabled={page >= pageCount - 1}
+            >
+              <IconChevronRight className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  if (!title) return content;
+  return (
+    <Card className="border-border/50 bg-card">
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{content}</CardContent>
+    </Card>
+  );
+}
+
+function formatValue(value: unknown): string {
+  if (value == null) return "-";
+  if (typeof value === "number")
+    return Number.isInteger(value) ? value.toLocaleString() : value.toFixed(4);
+  return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+
+function DataTableLoadingSkeleton() {
+  const columnWidths = ["w-24", "w-32", "w-20", "w-28"];
+  return (
+    <div className={cn("space-y-1", TABLE_MIN_HEIGHT_CLASS)}>
+      <div className="overflow-x-auto">
+        <div className="min-w-[480px]">
+          <div className="grid h-8 grid-cols-4 items-center border-b border-border px-2">
+            {columnWidths.map((width, index) => (
+              <Skeleton key={index} className={cn("h-3", width)} />
+            ))}
+          </div>
+          {Array.from({ length: 10 }).map((_, row) => (
+            <div
+              key={row}
+              className="grid h-8 grid-cols-4 items-center border-b border-border/50 px-2"
+            >
+              {columnWidths.map((width, column) => (
+                <Skeleton
+                  key={column}
+                  className={cn(
+                    "h-3",
+                    column === 0
+                      ? "w-36"
+                      : column === 2
+                        ? "ml-auto w-16"
+                        : width,
+                  )}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex h-8 items-center justify-between border-t border-border px-2 text-xs">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+    </div>
+  );
+}

package/src/dashboard/DateRangePicker.tsx

@@ -0,0 +1,57 @@
+import { Button } from "../ui/button.js";
+import { cn } from "../utils.js";
+
+export type DateRange = "7d" | "30d" | "90d";
+
+export interface DateRangeOption {
+  value: DateRange;
+  label: string;
+}
+
+export interface DateRangePickerProps {
+  value: DateRange;
+  onChange: (range: DateRange) => void;
+  options?: DateRangeOption[];
+  className?: string;
+}
+
+export const DEFAULT_DATE_RANGE_OPTIONS: DateRangeOption[] = [
+  { value: "7d", label: "7 days" },
+  { value: "30d", label: "30 days" },
+  { value: "90d", label: "90 days" },
+];
+
+export function dateRangeToInterval(range: DateRange): number {
+  return Number.parseInt(range, 10);
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  options = DEFAULT_DATE_RANGE_OPTIONS,
+  className,
+}: DateRangePickerProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1 rounded-lg border border-border p-1",
+        className,
+      )}
+    >
+      {options.map((option) => (
+        <Button
+          key={option.value}
+          variant="ghost"
+          size="sm"
+          className={cn(
+            "h-7 px-3 text-xs",
+            value === option.value && "bg-secondary text-secondary-foreground",
+          )}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/src/dashboard/GenericChartPanel.spec.tsx

@@ -0,0 +1,53 @@
+import { AreaChart, BarChart, LineChart, PieChart } from "recharts";
+import { describe, expect, it } from "vitest";
+
+import {
+  GenericChartRenderer,
+  formatGenericChartValue,
+  resolveGenericChartKeys,
+} from "./GenericChartPanel.js";
+
+const rows = [
+  { day: "Mon", revenue: 12, costs: 4 },
+  { day: "Tue", revenue: 18, costs: 7 },
+];
+
+function render(
+  chartType: Parameters<typeof GenericChartRenderer>[0]["config"]["chartType"],
+) {
+  return GenericChartRenderer({ rows, config: { chartType } });
+}
+
+describe("GenericChartPanel renderers", () => {
+  it("derives portable x/y keys and formats provider values", () => {
+    expect(resolveGenericChartKeys(rows, {})).toEqual({
+      xKey: "day",
+      yKeys: ["revenue", "costs"],
+    });
+    expect(formatGenericChartValue("1200")).toBe("1,200");
+  });
+
+  it("renders KPI metrics from an inferred numeric value", () => {
+    const element = render("metric");
+    expect(element.props.children[0].props.children).toBe("30");
+  });
+
+  it.each([
+    ["line", LineChart],
+    ["area", AreaChart],
+    ["stacked-area", AreaChart],
+    ["bar", BarChart],
+    ["stacked-bar", BarChart],
+    ["pie", PieChart],
+    ["donut", PieChart],
+  ] as const)("uses Recharts for %s", (chartType, Component) => {
+    const element = render(chartType);
+    expect(element.props.children.type).toBe(Component);
+  });
+
+  it("uses the shared table renderer for tabular data", () => {
+    const element = render("table");
+    expect(element.type.name).toBe("DataTable");
+    expect(element.props.data).toBe(rows);
+  });
+});