stagent 0.6.2 → 0.7.0

package/src/components/tables/table-chart-builder.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { BarChart3, LineChart, PieChart, ScatterChart } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+type ChartType = "bar" | "line" | "pie" | "scatter";
+type Aggregation = "sum" | "avg" | "count" | "min" | "max";
+
+export interface EditChartData {
+  id: string;
+  name: string;
+  config: {
+    type: ChartType;
+    xColumn: string;
+    yColumn?: string;
+    aggregation?: Aggregation;
+  };
+}
+
+interface TableChartBuilderProps {
+  tableId: string;
+  columns: Array<{ name: string; displayName: string; dataType: string }>;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onChartSaved: () => void;
+  editChart?: EditChartData | null;
+}
+
+const CHART_TYPES: Array<{
+  value: ChartType;
+  label: string;
+  icon: typeof BarChart3;
+}> = [
+  { value: "bar", label: "Bar", icon: BarChart3 },
+  { value: "line", label: "Line", icon: LineChart },
+  { value: "pie", label: "Pie", icon: PieChart },
+  { value: "scatter", label: "Scatter", icon: ScatterChart },
+];
+
+const AGGREGATIONS: Array<{ value: Aggregation; label: string }> = [
+  { value: "count", label: "Count" },
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "min", label: "Min" },
+  { value: "max", label: "Max" },
+];
+
+const NUMERIC_TYPES = new Set(["number", "currency", "percent", "integer", "float"]);
+
+export function TableChartBuilder({
+  tableId,
+  columns,
+  open,
+  onOpenChange,
+  onChartSaved,
+  editChart,
+}: TableChartBuilderProps) {
+  const [chartType, setChartType] = useState<ChartType>("bar");
+  const [title, setTitle] = useState("");
+  const [xColumn, setXColumn] = useState("");
+  const [yColumn, setYColumn] = useState("");
+  const [aggregation, setAggregation] = useState<Aggregation>("count");
+  const [saving, setSaving] = useState(false);
+
+  const isEditing = !!editChart;
+  const numericColumns = columns.filter((c) => NUMERIC_TYPES.has(c.dataType));
+
+  // Populate form when editing
+  useEffect(() => {
+    if (editChart) {
+      setChartType(editChart.config.type);
+      setTitle(editChart.name);
+      setXColumn(editChart.config.xColumn);
+      setYColumn(editChart.config.yColumn ?? "");
+      setAggregation(editChart.config.aggregation ?? "count");
+    } else {
+      resetForm();
+    }
+  }, [editChart]);
+
+  function resetForm() {
+    setChartType("bar");
+    setTitle("");
+    setXColumn("");
+    setYColumn("");
+    setAggregation("count");
+  }
+
+  async function handleSave() {
+    if (!title.trim()) {
+      toast.error("Chart title is required");
+      return;
+    }
+    if (!xColumn) {
+      toast.error("X-axis column is required");
+      return;
+    }
+    if (aggregation !== "count" && !yColumn) {
+      toast.error("Y-axis column is required for this aggregation");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const payload = {
+        type: chartType,
+        title: title.trim(),
+        xColumn,
+        yColumn: yColumn || null,
+        aggregation,
+      };
+
+      const url = isEditing
+        ? `/api/tables/${tableId}/charts/${editChart.id}`
+        : `/api/tables/${tableId}/charts`;
+
+      const res = await fetch(url, {
+        method: isEditing ? "PATCH" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (res.ok) {
+        toast.success(isEditing ? `Chart "${title}" updated` : `Chart "${title}" created`);
+      } else {
+        const data = await res.json().catch(() => null);
+        toast.error(data?.error ?? `Failed to ${isEditing ? "update" : "create"} chart`);
+        return;
+      }
+
+      onOpenChange(false);
+      onChartSaved();
+      if (!isEditing) resetForm();
+    } catch {
+      toast.error(`Failed to ${isEditing ? "update" : "create"} chart`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[420px] sm:max-w-[420px]">
+        <SheetHeader>
+          <SheetTitle>{isEditing ? "Edit Chart" : "Create Chart"}</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 space-y-5 overflow-y-auto">
+          {/* Chart type selector */}
+          <div className="space-y-2">
+            <Label>Chart Type</Label>
+            <div className="grid grid-cols-4 gap-2">
+              {CHART_TYPES.map((ct) => {
+                const Icon = ct.icon;
+                return (
+                  <button
+                    key={ct.value}
+                    type="button"
+                    onClick={() => setChartType(ct.value)}
+                    className={cn(
+                      "flex flex-col items-center gap-1.5 rounded-lg border p-3 text-xs transition-colors",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      chartType === ct.value
+                        ? "border-primary bg-primary/5 text-primary"
+                        : "border-border text-muted-foreground"
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                    {ct.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Title */}
+          <div className="space-y-2">
+            <Label htmlFor="chart-title">Title</Label>
+            <Input
+              id="chart-title"
+              placeholder="e.g. Revenue by Month"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          {/* X-axis column */}
+          <div className="space-y-2">
+            <Label>X-Axis Column</Label>
+            <Select value={xColumn} onValueChange={setXColumn}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select column" />
+              </SelectTrigger>
+              <SelectContent>
+                {columns.map((col) => (
+                  <SelectItem key={col.name} value={col.name}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Aggregation */}
+          <div className="space-y-2">
+            <Label>Aggregation</Label>
+            <Select
+              value={aggregation}
+              onValueChange={(v) => setAggregation(v as Aggregation)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {AGGREGATIONS.map((agg) => (
+                  <SelectItem key={agg.value} value={agg.value}>
+                    {agg.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Y-axis column (only for non-count aggregations) */}
+          {aggregation !== "count" && (
+            <div className="space-y-2">
+              <Label>Y-Axis Column (numeric)</Label>
+              <Select value={yColumn} onValueChange={setYColumn}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select numeric column" />
+                </SelectTrigger>
+                <SelectContent>
+                  {numericColumns.length === 0 ? (
+                    <SelectItem value="_none" disabled>
+                      No numeric columns available
+                    </SelectItem>
+                  ) : (
+                    numericColumns.map((col) => (
+                      <SelectItem key={col.name} value={col.name}>
+                        {col.displayName}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+              {numericColumns.length === 0 && (
+                <p className="text-xs text-muted-foreground">
+                  Add a numeric column to use sum, average, min, or max aggregations.
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="px-6">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving
+              ? isEditing ? "Updating..." : "Creating..."
+              : isEditing ? "Update Chart" : "Create Chart"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/tables/table-chart-view.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+
+interface ChartConfig {
+  type: "bar" | "line" | "pie" | "scatter";
+  xColumn: string;
+  yColumn?: string;
+  aggregation?: "sum" | "avg" | "count" | "min" | "max";
+}
+
+interface TableChartViewProps {
+  config: ChartConfig;
+  title: string;
+  rows: Array<{ data: Record<string, unknown> }>;
+}
+
+const CHART_COLORS = [
+  "oklch(0.65 0.18 250)",
+  "oklch(0.70 0.16 180)",
+  "oklch(0.68 0.17 320)",
+  "oklch(0.72 0.14 80)",
+  "oklch(0.60 0.20 30)",
+  "oklch(0.75 0.12 140)",
+];
+
+export function TableChartView({ config, title, rows }: TableChartViewProps) {
+  const chartData = useMemo(() => {
+    if (config.type === "pie" || config.aggregation === "count") {
+      // Aggregate by xColumn values
+      const counts = new Map<string, number>();
+      for (const row of rows) {
+        const key = String(row.data[config.xColumn] ?? "Unknown");
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+      return Array.from(counts.entries()).map(([name, value]) => ({ name, value }));
+    }
+
+    if (config.aggregation && config.yColumn) {
+      // Group by xColumn, aggregate yColumn
+      const groups = new Map<string, number[]>();
+      for (const row of rows) {
+        const key = String(row.data[config.xColumn] ?? "Unknown");
+        const val = Number(row.data[config.yColumn]);
+        if (!isNaN(val)) {
+          if (!groups.has(key)) groups.set(key, []);
+          groups.get(key)!.push(val);
+        }
+      }
+
+      return Array.from(groups.entries()).map(([name, values]) => {
+        let value: number;
+        switch (config.aggregation) {
+          case "sum": value = values.reduce((a, b) => a + b, 0); break;
+          case "avg": value = values.reduce((a, b) => a + b, 0) / values.length; break;
+          case "min": value = Math.min(...values); break;
+          case "max": value = Math.max(...values); break;
+          default: value = values.length;
+        }
+        return { name, value: Math.round(value * 100) / 100 };
+      });
+    }
+
+    // Raw x/y mapping
+    return rows.map((row) => ({
+      name: String(row.data[config.xColumn] ?? ""),
+      value: config.yColumn ? Number(row.data[config.yColumn]) || 0 : 1,
+    }));
+  }, [config, rows]);
+
+  if (chartData.length === 0) {
+    return <p className="text-sm text-muted-foreground p-4">No data to chart.</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-medium">{title}</h3>
+      <div className="h-[300px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          {config.type === "bar" ? (
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis tick={{ fontSize: 12 }} />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="value" name={config.yColumn ?? config.aggregation ?? "value"} fill="oklch(0.65 0.18 250)" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          ) : config.type === "line" ? (
+            <LineChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis tick={{ fontSize: 12 }} />
+              <Tooltip />
+              <Legend />
+              <Line type="monotone" dataKey="value" name={config.yColumn ?? config.aggregation ?? "value"} stroke="oklch(0.65 0.18 250)" strokeWidth={2} dot={{ r: 3 }} />
+            </LineChart>
+          ) : config.type === "pie" ? (
+            <PieChart>
+              <Tooltip />
+              <Legend />
+              <Pie
+                data={chartData}
+                cx="50%"
+                cy="50%"
+                outerRadius={100}
+                dataKey="value"
+                nameKey="name"
+                label={({ name, percent }: { name?: string; percent?: number }) => `${name ?? ""} ${((percent ?? 0) * 100).toFixed(0)}%`}
+              >
+                {chartData.map((_, i) => (
+                  <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                ))}
+              </Pie>
+            </PieChart>
+          ) : (
+            <ScatterChart>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} name={config.xColumn} />
+              <YAxis dataKey="value" tick={{ fontSize: 12 }} name={config.yColumn ?? "value"} />
+              <Tooltip />
+              <Scatter data={chartData} fill="oklch(0.65 0.18 250)" />
+            </ScatterChart>
+          )}
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/src/components/tables/table-column-header.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Type,
+  Hash,
+  Calendar,
+  CheckSquare,
+  List,
+  Link,
+  Mail,
+  GitBranch,
+  Sparkles,
+  ArrowUp,
+  ArrowDown,
+  ChevronDown,
+  Trash2,
+  Pencil,
+} from "lucide-react";
+import type { ColumnDef } from "@/lib/tables/types";
+import type { ColumnDataType } from "@/lib/constants/table-status";
+import type { LucideIcon } from "lucide-react";
+
+const typeIcons: Record<ColumnDataType, LucideIcon> = {
+  text: Type,
+  number: Hash,
+  date: Calendar,
+  boolean: CheckSquare,
+  select: List,
+  url: Link,
+  email: Mail,
+  relation: GitBranch,
+  computed: Sparkles,
+};
+
+interface ColumnHeaderProps {
+  column: ColumnDef;
+  sortDirection: "asc" | "desc" | null;
+  onSort: (direction: "asc" | "desc") => void;
+  onRename: () => void;
+  onDelete: () => void;
+}
+
+export function SpreadsheetColumnHeader({
+  column,
+  sortDirection,
+  onSort,
+  onRename,
+  onDelete,
+}: ColumnHeaderProps) {
+  const Icon = typeIcons[column.dataType] ?? Type;
+
+  return (
+    <div className="flex items-center gap-1 w-full">
+      <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      <span className="truncate text-xs font-medium">{column.displayName}</span>
+      {sortDirection === "asc" && <ArrowUp className="h-3 w-3 text-muted-foreground" />}
+      {sortDirection === "desc" && <ArrowDown className="h-3 w-3 text-muted-foreground" />}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 ml-auto shrink-0 opacity-0 group-hover:opacity-100 focus:opacity-100"
+          >
+            <ChevronDown className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => onSort("asc")}>
+            <ArrowUp className="h-4 w-4 mr-2" />
+            Sort Ascending
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onSort("desc")}>
+            <ArrowDown className="h-4 w-4 mr-2" />
+            Sort Descending
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={onRename}>
+            <Pencil className="h-4 w-4 mr-2" />
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={onDelete}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            Delete Column
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}