@base44/app-plugin-commerce 0.1.0

package/src/commerce/admin/bot/pipe-tables.js

@@ -0,0 +1,116 @@
+/**
+ * Minimal GitHub-flavored pipe-table support for the bot's markdown renderer.
+ *
+ * The StoreAdmin agent is told to format lists and reports as GFM tables
+ * (`| col | col |` over a `|---|` separator), which CommonMark does not
+ * understand — plain react-markdown renders them as literal pipes. Rather than
+ * add `remark-gfm` (and make every install run an npm install for one feature),
+ * tables are pulled out of the source here and rendered directly; everything
+ * else still goes through react-markdown untouched.
+ *
+ * Covers what agents actually emit: optional leading/trailing pipes, alignment
+ * markers, `\|` escapes, and ragged rows (padded/truncated to the header, as GFM
+ * specifies). Not covered: tables nested inside a list or blockquote, and the
+ * other GFM extensions (strikethrough, task lists, bare-URL autolinks).
+ */
+
+/** `|---|:--:|---:|` — the row that turns the line above it into a table header. */
+export function isDelimiterRow(line) {
+  const trimmed = String(line ?? "").trim();
+  if (!trimmed.includes("-")) return false;
+  return /^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?$/.test(trimmed);
+}
+
+/**
+ * Split one row into cells on unescaped pipes, dropping the optional outer
+ * pipes and unescaping `\|` into a literal pipe.
+ */
+export function splitCells(row) {
+  const line = String(row ?? "").trim();
+  const cells = [];
+  let cell = "";
+  for (let i = 0; i < line.length; i += 1) {
+    const ch = line[i];
+    if (ch === "\\" && line[i + 1] === "|") {
+      cell += "|";
+      i += 1;
+    } else if (ch === "|") {
+      cells.push(cell);
+      cell = "";
+    } else {
+      cell += ch;
+    }
+  }
+  cells.push(cell);
+  // A row written with outer pipes yields an empty cell at each end.
+  if (line.startsWith("|")) cells.shift();
+  if (line.endsWith("|") && !line.endsWith("\\|") && cells.length) cells.pop();
+  return cells.map((c) => c.trim());
+}
+
+/** Per-column alignment from the delimiter row: "left" | "center" | "right" | null. */
+export function parseAlignments(delimiterRow) {
+  return splitCells(delimiterRow).map((cell) => {
+    const left = cell.startsWith(":");
+    const right = cell.endsWith(":");
+    if (left && right) return "center";
+    if (right) return "right";
+    if (left) return "left";
+    return null;
+  });
+}
+
+/** Force a body row to the header's column count (GFM pads/truncates). */
+const fitRow = (cells, width) =>
+  Array.from({ length: width }, (_, i) => cells[i] ?? "");
+
+/**
+ * Split markdown into an ordered list of segments:
+ *   { type: "markdown", value }
+ *   { type: "table", head: string[], align: (string|null)[], rows: string[][] }
+ *
+ * Non-table text keeps its original shape, so react-markdown still sees whole
+ * blocks rather than fragments.
+ */
+export function splitPipeTables(source) {
+  const lines = String(source ?? "").split("\n");
+  const segments = [];
+  let buffer = [];
+
+  const flush = () => {
+    if (!buffer.length) return;
+    const value = buffer.join("\n");
+    if (value.trim()) segments.push({ type: "markdown", value });
+    buffer = [];
+  };
+
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i];
+    const next = lines[i + 1];
+    const head = line.includes("|") ? splitCells(line) : null;
+
+    // A table starts only where a row containing pipes is followed by a
+    // delimiter row with the same number of columns. That pairing is what
+    // separates a table from a paragraph that happens to contain a pipe — and
+    // from a setext heading, where `Orders | Today` over `---` gives one
+    // delimiter column against two header cells.
+    if (head && next !== undefined && isDelimiterRow(next) && parseAlignments(next).length === head.length) {
+      flush();
+      const align = parseAlignments(next);
+      const rows = [];
+      let j = i + 2;
+      for (; j < lines.length; j += 1) {
+        const row = lines[j];
+        if (!row.trim() || !row.includes("|")) break; // blank line or prose ends the table
+        rows.push(fitRow(splitCells(row), head.length));
+      }
+      segments.push({ type: "table", head, align, rows });
+      i = j - 1;
+      continue;
+    }
+    buffer.push(line);
+  }
+
+  flush();
+  return segments;
+}

package/src/commerce/admin/components/AddressForm.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import CountrySelect from "./CountrySelect";
+import { statesFor } from "../lib/geo-data";
+
+/**
+ * Billing/shipping address editor (Order billing shape).
+ * Props: { value, onChange, showEmail?, showPhone?, disabled? }
+ */
+export default function AddressForm({
+  value = {},
+  onChange,
+  showEmail = false,
+  showPhone = true,
+  disabled = false,
+}) {
+  const set = (key) => (v) => onChange({ ...value, [key]: v });
+  const setInput = (key) => (e) => set(key)(e.target.value);
+  const states = statesFor(value.country);
+
+  const field = (label, node) => (
+    <div className="grid gap-1.5">
+      <Label className="text-xs text-muted-foreground">{label}</Label>
+      {node}
+    </div>
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      {field("First name", <Input value={value.first_name || ""} onChange={setInput("first_name")} disabled={disabled} />)}
+      {field("Last name", <Input value={value.last_name || ""} onChange={setInput("last_name")} disabled={disabled} />)}
+      <div className="sm:col-span-2">
+        {field("Company", <Input value={value.company || ""} onChange={setInput("company")} disabled={disabled} />)}
+      </div>
+      <div className="sm:col-span-2">
+        {field("Address line 1", <Input value={value.address_1 || ""} onChange={setInput("address_1")} disabled={disabled} />)}
+      </div>
+      <div className="sm:col-span-2">
+        {field("Address line 2", <Input value={value.address_2 || ""} onChange={setInput("address_2")} disabled={disabled} />)}
+      </div>
+      {field("City", <Input value={value.city || ""} onChange={setInput("city")} disabled={disabled} />)}
+      {field("Postcode / ZIP", <Input value={value.postcode || ""} onChange={setInput("postcode")} disabled={disabled} />)}
+      {field(
+        "Country",
+        <CountrySelect value={value.country || ""} onChange={(code) => onChange({ ...value, country: code, state: "" })} disabled={disabled} />
+      )}
+      {field(
+        "State / Province",
+        states ? (
+          <Select value={value.state || ""} onValueChange={set("state")} disabled={disabled}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select state…" />
+            </SelectTrigger>
+            <SelectContent>
+              {states.map((s) => (
+                <SelectItem key={s.code} value={s.code}>
+                  {s.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Input value={value.state || ""} onChange={setInput("state")} disabled={disabled} />
+        )
+      )}
+      {showEmail && field("Email", <Input type="email" value={value.email || ""} onChange={setInput("email")} disabled={disabled} />)}
+      {showPhone && field("Phone", <Input value={value.phone || ""} onChange={setInput("phone")} disabled={disabled} />)}
+    </div>
+  );
+}

package/src/commerce/admin/components/ConfirmDialog.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Loader2 } from "lucide-react";
+
+/**
+ * Confirmation dialog for destructive actions.
+ * Props: { open, onOpenChange, title?, description?, confirmLabel?, destructive?, onConfirm, loading? }
+ */
+export default function ConfirmDialog({
+  open,
+  onOpenChange,
+  title = "Are you sure?",
+  description = "This action cannot be undone.",
+  confirmLabel = "Confirm",
+  destructive = true,
+  onConfirm,
+  loading = false,
+}) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={loading}
+            className={destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : ""}
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+          >
+            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/commerce/admin/components/CountrySelect.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { COUNTRIES } from "../lib/geo-data";
+
+/**
+ * Searchable country picker.
+ * Props: { value (ISO code), onChange(code), placeholder?, allowEmpty?, disabled? }
+ */
+export default function CountrySelect({
+  value,
+  onChange,
+  placeholder = "Select country…",
+  allowEmpty = false,
+  disabled = false,
+  className = "",
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = COUNTRIES.find((c) => c.code === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          disabled={disabled}
+          className={`w-full justify-between font-normal ${className}`}
+        >
+          <span className="truncate">{selected?.name || placeholder}</span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-64 p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search countries…" />
+          <CommandList>
+            <CommandEmpty>No country found.</CommandEmpty>
+            <CommandGroup>
+              {allowEmpty && (
+                <CommandItem
+                  value="__any__"
+                  onSelect={() => {
+                    onChange("");
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={`mr-2 h-4 w-4 ${!value ? "opacity-100" : "opacity-0"}`} />
+                  Any country
+                </CommandItem>
+              )}
+              {COUNTRIES.map((c) => (
+                <CommandItem
+                  key={c.code}
+                  value={`${c.name} ${c.code}`}
+                  onSelect={() => {
+                    onChange(c.code);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={`mr-2 h-4 w-4 ${value === c.code ? "opacity-100" : "opacity-0"}`} />
+                  {c.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/commerce/admin/components/DataTable.jsx

@@ -0,0 +1,192 @@
+import React from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import EmptyState from "./EmptyState";
+
+/**
+ * Generic list table.
+ *
+ * Props:
+ * - columns: [{ key, label, sortable?, render?(row), className? }]
+ * - rows: array of records
+ * - rowKey: field used as key (default "id")
+ * - sort / onSort: SDK sort string, e.g. "-created_date"; clicking a sortable
+ *   column toggles `key` ↔ `-key`
+ * - selectable + selected (array of ids) + onSelectChange(ids)
+ * - rowActions(row) → [{ label, onClick, icon?, destructive? }]
+ * - onRowClick(row)
+ * - pagination: { page, hasNext, onNext, onPrev }
+ * - loading, empty: { icon, title, description, action }
+ */
+export default function DataTable({
+  columns,
+  rows = [],
+  rowKey = "id",
+  sort,
+  onSort,
+  selectable = false,
+  selected = [],
+  onSelectChange,
+  rowActions,
+  onRowClick,
+  pagination,
+  loading = false,
+  empty,
+}) {
+  const allSelected = rows.length > 0 && rows.every((r) => selected.includes(r[rowKey]));
+
+  const toggleAll = () => {
+    if (!onSelectChange) return;
+    onSelectChange(allSelected ? [] : rows.map((r) => r[rowKey]));
+  };
+
+  const toggleOne = (id) => {
+    if (!onSelectChange) return;
+    onSelectChange(
+      selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id]
+    );
+  };
+
+  const sortIcon = (key) => {
+    if (sort === key) return <ArrowUp className="ml-1 inline h-3.5 w-3.5" />;
+    if (sort === `-${key}`) return <ArrowDown className="ml-1 inline h-3.5 w-3.5" />;
+    return <ArrowUpDown className="ml-1 inline h-3.5 w-3.5 opacity-40" />;
+  };
+
+  const handleSort = (col) => {
+    if (!col.sortable || !onSort) return;
+    onSort(sort === `-${col.key}` ? col.key : `-${col.key}`);
+  };
+
+  const colCount = columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+
+  return (
+    <div className="rounded-lg border bg-background">
+      <div className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {selectable && (
+                <TableHead className="w-10">
+                  <Checkbox checked={allSelected} onCheckedChange={toggleAll} />
+                </TableHead>
+              )}
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={`${col.className || ""} ${col.sortable ? "cursor-pointer select-none" : ""}`}
+                  onClick={() => handleSort(col)}
+                >
+                  {col.label}
+                  {col.sortable && sortIcon(col.key)}
+                </TableHead>
+              ))}
+              {rowActions && <TableHead className="w-12" />}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              Array.from({ length: 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  <TableCell colSpan={colCount}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={colCount} className="py-12">
+                  <EmptyState {...(empty || { title: "Nothing here yet" })} />
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow
+                  key={row[rowKey]}
+                  className={onRowClick ? "cursor-pointer" : ""}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                >
+                  {selectable && (
+                    <TableCell className="w-10" onClick={(e) => e.stopPropagation()}>
+                      <Checkbox
+                        checked={selected.includes(row[rowKey])}
+                        onCheckedChange={() => toggleOne(row[rowKey])}
+                      />
+                    </TableCell>
+                  )}
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className={col.className}>
+                      {col.render ? col.render(row) : row[col.key] ?? "—"}
+                    </TableCell>
+                  ))}
+                  {rowActions && (
+                    <TableCell className="w-12" onClick={(e) => e.stopPropagation()}>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" className="h-8 w-8">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          {rowActions(row).map((action, i) => (
+                            <DropdownMenuItem
+                              key={i}
+                              onClick={action.onClick}
+                              className={action.destructive ? "text-destructive focus:text-destructive" : ""}
+                            >
+                              {action.icon && <action.icon className="mr-2 h-4 w-4" />}
+                              {action.label}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {pagination && (
+        <div className="flex items-center justify-end gap-2 border-t px-3 py-2 text-sm text-muted-foreground">
+          <span>Page {pagination.page}</span>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-7 w-7"
+            disabled={pagination.page <= 1 || loading}
+            onClick={pagination.onPrev}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-7 w-7"
+            disabled={!pagination.hasNext || loading}
+            onClick={pagination.onNext}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/commerce/admin/components/DateRangePicker.jsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarIcon, X } from "lucide-react";
+
+const toISO = (d) => (d ? d.toISOString().slice(0, 10) : null);
+
+function presetRanges() {
+  const today = new Date();
+  const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const t = startOfDay(today);
+  const daysAgo = (n) => new Date(t.getFullYear(), t.getMonth(), t.getDate() - n);
+  return [
+    { label: "Today", from: t, to: t },
+    { label: "Last 7 days", from: daysAgo(6), to: t },
+    { label: "This month", from: new Date(t.getFullYear(), t.getMonth(), 1), to: t },
+    {
+      label: "Last month",
+      from: new Date(t.getFullYear(), t.getMonth() - 1, 1),
+      to: new Date(t.getFullYear(), t.getMonth(), 0),
+    },
+    { label: "This year", from: new Date(t.getFullYear(), 0, 1), to: t },
+  ];
+}
+
+/**
+ * Date range picker with common date presets.
+ * Props: { value: {from, to} (ISO yyyy-mm-dd) | null, onChange({from,to}|null), align? }
+ */
+export default function DateRangePicker({ value, onChange, align = "start" }) {
+  const [open, setOpen] = useState(false);
+  const presets = presetRanges();
+
+  const label = value?.from
+    ? `${value.from}${value.to && value.to !== value.from ? ` → ${value.to}` : ""}`
+    : "All time";
+
+  const applyPreset = (p) => {
+    onChange({ from: toISO(p.from), to: toISO(p.to) });
+    setOpen(false);
+  };
+
+  const applyCalendar = (range) => {
+    if (!range?.from) return;
+    onChange({ from: toISO(range.from), to: toISO(range.to || range.from) });
+  };
+
+  return (
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="justify-start font-normal">
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {label}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="flex w-auto p-0" align={align}>
+          <div className="flex flex-col gap-0.5 border-r p-2">
+            {presets.map((p) => (
+              <Button
+                key={p.label}
+                variant="ghost"
+                size="sm"
+                className="justify-start"
+                onClick={() => applyPreset(p)}
+              >
+                {p.label}
+              </Button>
+            ))}
+          </div>
+          <Calendar
+            mode="range"
+            numberOfMonths={2}
+            selected={
+              value?.from
+                ? { from: new Date(value.from), to: value.to ? new Date(value.to) : undefined }
+                : undefined
+            }
+            onSelect={applyCalendar}
+          />
+        </PopoverContent>
+      </Popover>
+      {value?.from && (
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onChange(null)}>
+          <X className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/commerce/admin/components/EmptyState.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Inbox } from "lucide-react";
+
+/**
+ * Empty-list placeholder.
+ * Props: { icon?: LucideIcon, title?, description?, action?: node }
+ */
+export default function EmptyState({ icon: Icon = Inbox, title = "Nothing here yet", description, action }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
+      <Icon className="h-8 w-8 text-muted-foreground/40" />
+      <div className="text-sm font-medium">{title}</div>
+      {description && <p className="max-w-sm text-xs text-muted-foreground">{description}</p>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}