@base44/app-plugin-commerce 0.1.0

package/src/commerce/admin/pages/orders/OrdersList.jsx

@@ -0,0 +1,227 @@
+import React, { useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Plus, Search, ShoppingCart } from "lucide-react";
+import { toast } from "sonner";
+
+import { call, base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import usePagedList from "../../hooks/usePagedList";
+import useRealtime from "../../hooks/useRealtime";
+import useDebounce from "../../hooks/useDebounce";
+import useMoney from "../../hooks/useMoney";
+import { useAdminHref } from "../../context/BasePathContext";
+import { ORDER_STATUSES } from "../../lib/constants";
+import { formatDate } from "../../lib/format";
+import { customerName } from "../../lib/order-utils";
+import PageHeader from "../../components/PageHeader";
+import DataTable from "../../components/DataTable";
+import DateRangePicker from "../../components/DateRangePicker";
+import StatusBadge from "../../components/StatusBadge";
+
+const TABS = [{ value: "", label: "All" }, ...ORDER_STATUSES];
+
+export default function OrdersList() {
+  const href = useAdminHref();
+  const navigate = useNavigate();
+  const { format } = useMoney();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const status = searchParams.get("status") || "";
+  const [query, setQuery] = useState("");
+  const [dateRange, setDateRange] = useState(null);
+  const [selected, setSelected] = useState([]);
+  const [bulkStatus, setBulkStatus] = useState("");
+  const [bulkBusy, setBulkBusy] = useState(false);
+  const [creating, setCreating] = useState(false);
+
+  const debouncedQuery = useDebounce(query, 300);
+  const searchMode = Boolean(debouncedQuery.trim() || dateRange?.from);
+
+  const counts = useAsync(async () => {
+    const data = await call("admin-orders", "status-counts", {}, { silent: true });
+    return data?.counts || data || {};
+  }, []);
+
+  const list = usePagedList(
+    async (limit, skip, sort) => {
+      if (searchMode) {
+        const data = await call("admin-orders", "search", {
+          q: debouncedQuery.trim(),
+          status: status || undefined,
+          date_min: dateRange?.from || undefined,
+          date_max: dateRange?.to || undefined,
+          limit,
+          skip,
+          sort,
+        });
+        return data?.rows || data || [];
+      }
+      return base44.entities["commerce.Order"].filter(status ? { status } : {}, sort, limit, skip);
+    },
+    { deps: [debouncedQuery, status, dateRange?.from, dateRange?.to] }
+  );
+
+  // Orders arrive without the admin doing anything, so keep the list and the
+  // status tab counts live. Quiet refetches leave the table on screen.
+  useRealtime(["commerce.Order", "commerce.OrderRefund"], () => {
+    list.refetchQuiet();
+    counts.refetchQuiet();
+  });
+
+  const setStatusTab = (value) => {
+    setSelected([]);
+    const next = new URLSearchParams(searchParams);
+    if (value) next.set("status", value);
+    else next.delete("status");
+    setSearchParams(next, { replace: true });
+  };
+
+  const applyBulk = async () => {
+    if (!bulkStatus || selected.length === 0) return;
+    setBulkBusy(true);
+    try {
+      await call("admin-orders", "bulk-status", { ids: selected, status: bulkStatus });
+      toast.success(`${selected.length} order(s) updated`);
+      setSelected([]);
+      setBulkStatus("");
+      list.refetch();
+      counts.refetch();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBulkBusy(false);
+    }
+  };
+
+  const addOrder = async () => {
+    setCreating(true);
+    try {
+      const data = await call("admin-orders", "create-draft");
+      const id = data?.id || data?.order_id || data?.order?.id;
+      if (id) navigate(href(`orders/${id}`));
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        key: "order_number",
+        label: "Order",
+        render: (o) => (
+          <span className="font-medium">
+            #{o.order_number || o.id} <span className="font-normal text-muted-foreground">{customerName(o)}</span>
+          </span>
+        ),
+      },
+      { key: "created_date", label: "Date", sortable: true, render: (o) => formatDate(o.created_date) },
+      { key: "status", label: "Status", render: (o) => <StatusBadge status={o.status} /> },
+      { key: "total", label: "Total", sortable: true, className: "text-right", render: (o) => format(o.total || 0) },
+    ],
+    [format]
+  );
+
+  const totalCount = Object.values(counts.data || {}).reduce((a, b) => a + (b || 0), 0);
+
+  return (
+    <div>
+      <PageHeader
+        title="Orders"
+        actions={
+          <Button onClick={addOrder} disabled={creating}>
+            {creating ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" /> : <Plus className="mr-1.5 h-4 w-4" />}
+            Add order
+          </Button>
+        }
+      />
+
+      {/* Status tabs */}
+      <div className="mb-4 flex flex-wrap gap-1 border-b pb-px">
+        {TABS.map((tab) => {
+          const count = tab.value === "" ? totalCount : (counts.data || {})[tab.value] || 0;
+          const active = status === tab.value;
+          return (
+            <button
+              key={tab.value || "all"}
+              onClick={() => setStatusTab(tab.value)}
+              className={`-mb-px border-b-2 px-3 py-2 text-sm transition-colors ${
+                active
+                  ? "border-primary font-medium text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {tab.label}
+              <span className="ml-1 text-xs text-muted-foreground">({count})</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Filters + bulk bar */}
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search order #, name, email…"
+            className="w-64 pl-8"
+          />
+        </div>
+        <DateRangePicker value={dateRange} onChange={setDateRange} />
+        {selected.length > 0 && (
+          <div className="ml-auto flex items-center gap-2 rounded-md border bg-muted/50 px-2 py-1">
+            <span className="text-sm text-muted-foreground">{selected.length} selected</span>
+            <Select value={bulkStatus} onValueChange={setBulkStatus}>
+              <SelectTrigger className="h-8 w-44">
+                <SelectValue placeholder="Change status to…" />
+              </SelectTrigger>
+              <SelectContent>
+                {ORDER_STATUSES.map((s) => (
+                  <SelectItem key={s.value} value={s.value}>
+                    {s.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button size="sm" onClick={applyBulk} disabled={!bulkStatus || bulkBusy}>
+              {bulkBusy && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
+              Apply
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={list.rows}
+        loading={list.loading}
+        sort={list.sort}
+        onSort={list.setSort}
+        selectable
+        selected={selected}
+        onSelectChange={setSelected}
+        onRowClick={(o) => navigate(href(`orders/${o.id}`))}
+        rowActions={(o) => [{ label: "View / edit", onClick: () => navigate(href(`orders/${o.id}`)) }]}
+        pagination={{ page: list.page, hasNext: list.hasNext, onNext: list.next, onPrev: list.prev }}
+        empty={{
+          icon: ShoppingCart,
+          title: "No orders found",
+          description: searchMode ? "Try adjusting your search or date range." : "Orders will appear here as they come in.",
+        }}
+      />
+    </div>
+  );
+}

package/src/commerce/admin/pages/orders/components/AddProductDialog.jsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+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 { Loader2 } from "lucide-react";
+
+import { call, base44 } from "../../../lib/api";
+import SearchSelect from "../../../components/SearchSelect";
+import { variationLabel } from "../../../lib/product-utils";
+
+/**
+ * Two-step product picker for the order editor:
+ * product search → (variable only) variation select → quantity.
+ *
+ * Props: { open, onOpenChange, onAdd({product, variation|null, quantity}) }
+ */
+export default function AddProductDialog({ open, onOpenChange, onAdd }) {
+  const [picked, setPicked] = useState(null); // {value,label,meta,product}
+  const [variations, setVariations] = useState(null); // null = not loaded
+  const [variationId, setVariationId] = useState("");
+  const [quantity, setQuantity] = useState(1);
+  const [loadingVariations, setLoadingVariations] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setPicked(null);
+      setVariations(null);
+      setVariationId("");
+      setQuantity(1);
+    }
+  }, [open]);
+
+  const searchProducts = async (q) => {
+    const data = await call("admin-products", "search", { q, limit: 20 }, { silent: true });
+    const rows = data?.rows || data || [];
+    return rows.map((p) => ({
+      value: p.id,
+      label: p.name,
+      meta: [p.sku && `SKU: ${p.sku}`, p.type].filter(Boolean).join(" · "),
+      product: p,
+    }));
+  };
+
+  const handlePick = async (opt) => {
+    setPicked(opt);
+    setVariations(null);
+    setVariationId("");
+    if (opt?.product?.type === "variable") {
+      setLoadingVariations(true);
+      try {
+        const rows = await base44.entities["commerce.ProductVariation"].filter({ product_id: opt.value }, "menu_order", 200);
+        setVariations(rows || []);
+      } finally {
+        setLoadingVariations(false);
+      }
+    }
+  };
+
+  const isVariable = picked?.product?.type === "variable";
+  const canAdd = picked && quantity > 0 && (!isVariable || variationId);
+
+  const submit = () => {
+    const variation = isVariable ? (variations || []).find((v) => v.id === variationId) : null;
+    onAdd({ product: picked.product, variation, quantity });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add product</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid gap-1.5">
+            <Label>Product</Label>
+            <SearchSelect
+              search={searchProducts}
+              value={picked}
+              onChange={handlePick}
+              placeholder="Search products…"
+            />
+          </div>
+
+          {isVariable && (
+            <div className="grid gap-1.5">
+              <Label>Variation</Label>
+              {loadingVariations ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" /> Loading variations…
+                </div>
+              ) : (variations || []).length === 0 ? (
+                <p className="text-sm text-muted-foreground">This product has no variations yet.</p>
+              ) : (
+                <Select value={variationId} onValueChange={setVariationId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Choose a variation…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(variations || []).map((v) => (
+                      <SelectItem key={v.id} value={v.id}>
+                        {variationLabel(v) || v.sku || v.id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          )}
+
+          <div className="grid gap-1.5">
+            <Label>Quantity</Label>
+            <Input
+              type="number"
+              min="1"
+              className="w-24"
+              value={quantity}
+              onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value, 10) || 1))}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={submit} disabled={!canAdd}>
+            Add to order
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/commerce/admin/pages/orders/components/DownloadPermissionsPanel.jsx

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Loader2, X } from "lucide-react";
+import { toast } from "sonner";
+
+import { call } from "../../../lib/api";
+import SearchSelect from "../../../components/SearchSelect";
+import { formatDate } from "../../../lib/format";
+
+/**
+ * Downloadable product access for an order: grant / revoke rows.
+ * Props: { orderId, permissions, loading, onChanged() }
+ */
+export default function DownloadPermissionsPanel({ orderId, permissions, loading, onChanged }) {
+  const [picked, setPicked] = useState(null);
+  const [busy, setBusy] = useState(false);
+
+  const searchDownloadable = async (q) => {
+    const data = await call("admin-products", "search", { q, limit: 20 }, { silent: true });
+    const rows = data?.rows || data || [];
+    return rows
+      .filter((p) => p.downloadable)
+      .map((p) => ({ value: p.id, label: p.name, meta: p.sku ? `SKU: ${p.sku}` : undefined }));
+  };
+
+  const grant = async () => {
+    if (!picked) return;
+    setBusy(true);
+    try {
+      await call("admin-orders", "grant-download", { order_id: orderId, product_id: picked.value });
+      toast.success("Download access granted");
+      setPicked(null);
+      onChanged();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const revoke = async (permissionId) => {
+    try {
+      await call("admin-orders", "revoke-download", { order_id: orderId, permission_id: permissionId });
+      toast.success("Download access revoked");
+      onChanged();
+    } catch {
+      /* toast handled by call() */
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">Downloadable product permissions</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {loading ? (
+          <div className="flex justify-center py-4">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (permissions || []).length === 0 ? (
+          <p className="text-sm text-muted-foreground">No download permissions on this order.</p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>File</TableHead>
+                <TableHead className="w-32 text-right">Remaining</TableHead>
+                <TableHead className="w-32">Expires</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {permissions.map((p) => (
+                <TableRow key={p.id}>
+                  <TableCell className="text-sm">{p.download_name || p.file_url || p.product_id}</TableCell>
+                  <TableCell className="text-right text-sm">
+                    {p.downloads_remaining === -1 ? "∞" : p.downloads_remaining}
+                    <span className="text-xs text-muted-foreground"> (used {p.download_count || 0})</span>
+                  </TableCell>
+                  <TableCell className="text-sm">{p.access_expires ? formatDate(p.access_expires) : "Never"}</TableCell>
+                  <TableCell>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => revoke(p.id)} title="Revoke">
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+
+        <div className="flex items-end gap-2 border-t pt-3">
+          <div className="flex-1">
+            <SearchSelect
+              search={searchDownloadable}
+              value={picked}
+              onChange={setPicked}
+              placeholder="Search downloadable products…"
+            />
+          </div>
+          <Button size="sm" onClick={grant} disabled={!picked || busy}>
+            {busy && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
+            Grant access
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}