@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,952 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+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 {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Copy, ExternalLink, Loader2, Mail, Pencil, Plus, RotateCw, Ticket, Trash2, Truck, UserPlus } from "lucide-react";
+import { toast } from "sonner";
+
+import { call, base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import useDebounce from "../../hooks/useDebounce";
+import { useAdminHref } from "../../context/BasePathContext";
+import { ORDER_STATUSES } from "../../lib/constants";
+import { formatDateTime } from "../../lib/format";
+import {
+  buildOrderPatch,
+  canEditLines,
+  customerName,
+  isBlankAddress,
+  mergePricedLines,
+  pricedPatchOf,
+} from "../../lib/order-utils";
+import PageHeader from "../../components/PageHeader";
+import StatusBadge from "../../components/StatusBadge";
+import AddressForm from "../../components/AddressForm";
+import SearchSelect from "../../components/SearchSelect";
+import ConfirmDialog from "../../components/ConfirmDialog";
+import MetaDataEditor from "../../components/MetaDataEditor";
+import LineItemsTable from "./components/LineItemsTable";
+import AddProductDialog from "./components/AddProductDialog";
+import TotalsBox from "./components/TotalsBox";
+import RefundPanel from "./components/RefundPanel";
+import OrderNotesPanel from "./components/OrderNotesPanel";
+import PaymentPanel from "./components/PaymentPanel";
+import DownloadPermissionsPanel from "./components/DownloadPermissionsPanel";
+
+/** Keys of the order that this editor patches. */
+const DRAFT_KEYS = ["status", "customer_id", "billing", "shipping", "line_items", "fee_lines", "shipping_lines", "meta_data"];
+
+const draftFrom = (order) =>
+  DRAFT_KEYS.reduce((d, k) => {
+    d[k] = order?.[k] ?? (k.endsWith("_lines") || k === "line_items" || k === "meta_data" ? [] : k === "billing" || k === "shipping" ? {} : "");
+    return d;
+  }, {});
+
+const uid = () => (crypto.randomUUID ? crypto.randomUUID() : `line_${Math.random().toString(36).slice(2)}`);
+
+/** Copy a Customer's saved address onto the order's address shape. */
+const addressFromCustomer = (address, { email } = {}) => {
+  const next = { ...(address || {}) };
+  if (email !== undefined) next.email = email || next.email || "";
+  return next;
+};
+
+export default function OrderEditor() {
+  const { id } = useParams();
+  const href = useAdminHref();
+  const navigate = useNavigate();
+
+  // `/orders/new` → create a draft server-side, then swap to the real id.
+  useEffect(() => {
+    if (id) return;
+    let cancelled = false;
+    call("admin-orders", "create-draft").then((data) => {
+      const newId = data?.id || data?.order_id || data?.order?.id;
+      if (!cancelled && newId) navigate(href(`orders/${newId}`), { replace: true });
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line -- deps intentionally partial
+  }, [id]);
+
+  const order = useAsync(() => (id ? base44.entities["commerce.Order"].get(id) : Promise.resolve(null)), [id]);
+  const notes = useAsync(
+    () => (id ? base44.entities["commerce.OrderNote"].filter({ order_id: id }, "-created_date", 100) : Promise.resolve([])),
+    [id]
+  );
+  const refunds = useAsync(
+    () => (id ? base44.entities["commerce.OrderRefund"].filter({ order_id: id }, "-created_date", 100) : Promise.resolve([])),
+    [id]
+  );
+  const permissions = useAsync(
+    () => (id ? base44.entities["commerce.DownloadPermission"].filter({ order_id: id }, "-created_date", 100) : Promise.resolve([])),
+    [id]
+  );
+
+  const [draft, setDraft] = useState(null);
+  const [customerOpt, setCustomerOpt] = useState(null);
+  const [fillingAddresses, setFillingAddresses] = useState(false);
+  const [savingCustomer, setSavingCustomer] = useState(false);
+  const [editBilling, setEditBilling] = useState(false);
+  const [editShipping, setEditShipping] = useState(false);
+  const [showRefund, setShowRefund] = useState(false);
+  const [addProductOpen, setAddProductOpen] = useState(false);
+  const [feeDialog, setFeeDialog] = useState(false);
+  const [shippingDialog, setShippingDialog] = useState(false);
+  const [couponDialog, setCouponDialog] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [working, setWorking] = useState(""); // recalculate | coupon | invoice | delete
+
+  // (Re)initialize the local draft whenever the order loads.
+  useEffect(() => {
+    if (!order.data) return;
+    setDraft(draftFrom(order.data));
+    setCustomerOpt(
+      order.data.customer_id
+        ? { value: order.data.customer_id, label: customerName(order.data) }
+        : null
+    );
+    setEditBilling(false);
+    setEditShipping(false);
+  }, [order.data]);
+
+  const dirty = useMemo(() => {
+    if (!order.data || !draft) return false;
+    return JSON.stringify(draft) !== JSON.stringify(draftFrom(order.data));
+  }, [draft, order.data]);
+
+  const patchDraft = (patch) => setDraft((d) => ({ ...d, ...patch }));
+
+  // Contact details typed onto the order itself. With no customer linked this is
+  // a guest order, and these two drive the offer to keep the details as a
+  // customer record (the email is required — it's the Customer entity's key).
+  const billingEmail = String(draft?.billing?.email || "").trim();
+  const hasBillingDetails = !isBlankAddress(draft?.billing);
+
+  // ── live totals for unsaved edits ────────────────────────────────────────
+  // Adding a product (or changing a qty, fee, shipping line or address) has to
+  // show up in the totals immediately. Tax, coupon and shipping math lives in
+  // the backend totals engine, so instead of approximating it here we ask the
+  // server to price the *pending* patch read-only (`preview`) and display that.
+  const [priceView, setPriceView] = useState(null); // priced Order fields | null
+  const [previewing, setPreviewing] = useState(false);
+  const [previewError, setPreviewError] = useState("");
+
+  // Only the keys the server reprices from, so editing the status, the customer
+  // or a custom field doesn't trigger a pointless round trip. These are the same
+  // values `save` would send, so the preview matches the saved result exactly.
+  const pricedPatch = useMemo(() => {
+    if (!order.data || !draft) return null;
+    const priced = pricedPatchOf(buildOrderPatch(draft, draftFrom(order.data)));
+    return Object.keys(priced).length ? priced : null;
+  }, [draft, order.data]);
+
+  // Serialized so the debounce keys off content, not object identity.
+  const pricedKey = useMemo(() => (pricedPatch ? JSON.stringify(pricedPatch) : ""), [pricedPatch]);
+  const debouncedKey = useDebounce(pricedKey, 400);
+
+  useEffect(() => {
+    if (!id || !debouncedKey) {
+      setPriceView(null);
+      setPreviewError("");
+      return;
+    }
+    let cancelled = false;
+    setPreviewing(true);
+    call("admin-orders", "preview", { order_id: id, patch: JSON.parse(debouncedKey) }, { silent: true })
+      .then((data) => {
+        if (cancelled) return;
+        setPriceView(data?.fields || null);
+        setPreviewError("");
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setPriceView(null);
+        setPreviewError(err.message || "Could not price these changes");
+      })
+      .finally(() => !cancelled && setPreviewing(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [id, debouncedKey]);
+
+  /** True while the shown totals are older than the current edits. */
+  const previewStale = Boolean(pricedKey) && (previewing || pricedKey !== debouncedKey);
+
+  const refetchAll = () => {
+    order.refetch();
+    notes.refetch();
+    refunds.refetch();
+    permissions.refetch();
+  };
+
+  /** Write the pending draft. Returns true when something was sent. */
+  const persist = async () => {
+    const patch = buildOrderPatch(draft, draftFrom(order.data));
+    if (Object.keys(patch).length === 0) return false;
+    await call("admin-orders", "update", { order_id: id, patch });
+    return true;
+  };
+
+  const save = async () => {
+    if (!dirty) return;
+    setSaving(true);
+    try {
+      if (await persist()) toast.success("Order saved");
+      refetchAll();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /**
+   * Run a server-side order operation.
+   *
+   * `flush` first writes any unsaved draft edits: these operations reprice the
+   * *persisted* order and end in a refetch that resets the draft, so without it
+   * they would either be dead ends (disabled while dirty) or silently discard
+   * the admin's pending changes.
+   */
+  const serverOp = async (label, fn, { flush = false } = {}) => {
+    setWorking(label);
+    try {
+      if (flush && dirty) await persist();
+      await fn();
+      refetchAll();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setWorking("");
+    }
+  };
+
+  const recalculate = () =>
+    serverOp(
+      "recalculate",
+      async () => {
+        await call("admin-orders", "recalculate", { order_id: id });
+        toast.success(dirty ? "Order saved and totals recalculated" : "Totals recalculated");
+      },
+      { flush: true }
+    );
+
+  const sendInvoice = () =>
+    serverOp("invoice", async () => {
+      await call("admin-orders", "send-email", { order_id: id, type: "customer_invoice" });
+      toast.success("Order details sent to customer");
+    });
+
+  const deleteOrder = () =>
+    serverOp("delete", async () => {
+      await call("admin-orders", "delete", { order_id: id });
+      toast.success("Order deleted");
+      navigate(href("orders"));
+    });
+
+  const searchCustomers = useCallback(async (q) => {
+    const data = await call("admin-customers", "search", { q, limit: 20 }, { silent: true });
+    const rows = data?.rows || data || [];
+    return rows.map((c) => ({
+      value: c.id,
+      label: [c.first_name, c.last_name].filter(Boolean).join(" ") || c.email,
+      meta: [c.email, c.orders_count ? `${c.orders_count} order(s)` : null].filter(Boolean).join(" · "),
+      record: c,
+    }));
+  }, []);
+
+  /**
+   * Copy a customer's saved billing/shipping onto the order.
+   * `overwrite: false` (picking a customer) only fills addresses that are still
+   * empty, so it can never wipe details the admin already typed; the explicit
+   * "Use customer's addresses" button passes `overwrite: true`.
+   */
+  const applyCustomerAddresses = async (customer, { overwrite = false } = {}) => {
+    const record = customer;
+    if (!record) return { filled: [], skipped: [] };
+
+    const filled = [];
+    const skipped = [];
+    const patch = {};
+
+    const billing = addressFromCustomer(record.billing, { email: record.email });
+    if (!isBlankAddress(billing)) {
+      if (overwrite || isBlankAddress(draft.billing)) {
+        patch.billing = billing;
+        filled.push("billing");
+      } else {
+        skipped.push("billing");
+      }
+    }
+
+    const shipping = addressFromCustomer(record.shipping);
+    const shippingSource = isBlankAddress(shipping) ? { ...billing, email: undefined } : shipping;
+    if (!isBlankAddress(shippingSource)) {
+      if (overwrite || isBlankAddress(draft.shipping)) {
+        patch.shipping = shippingSource;
+        filled.push("shipping");
+      } else {
+        skipped.push("shipping");
+      }
+    }
+
+    if (Object.keys(patch).length) patchDraft(patch);
+    return { filled, skipped };
+  };
+
+  const pickCustomer = async (opt) => {
+    setCustomerOpt(opt);
+    patchDraft({ customer_id: opt?.value || "" });
+    if (!opt) return;
+
+    const record = opt.record ?? (await base44.entities["commerce.Customer"].get(opt.value).catch(() => null));
+    const { filled, skipped } = await applyCustomerAddresses(record);
+    if (filled.length) {
+      toast.success(`Filled ${filled.join(" and ")} from ${opt.label}`);
+    } else if (skipped.length) {
+      toast.info("Kept the addresses already on this order — use “Use customer's addresses” to replace them.");
+    } else {
+      toast.info(`${opt.label} has no saved address — enter the details below.`);
+      setEditBilling(true);
+    }
+  };
+
+  /** Explicit overwrite from the currently linked customer. */
+  const refillFromCustomer = async () => {
+    if (!draft.customer_id) return;
+    setFillingAddresses(true);
+    try {
+      const record =
+        customerOpt?.record ?? (await base44.entities["commerce.Customer"].get(draft.customer_id).catch(() => null));
+      if (!record) {
+        toast.error("Could not load that customer record");
+        return;
+      }
+      const { filled } = await applyCustomerAddresses(record, { overwrite: true });
+      if (filled.length) toast.success(`Replaced ${filled.join(" and ")} from the customer record`);
+      else toast.info("That customer has no saved address");
+    } finally {
+      setFillingAddresses(false);
+    }
+  };
+
+  /**
+   * Turn the details typed on this order into a customer record and link it.
+   *
+   * An order with no customer is a guest order; once the admin has filled in the
+   * billing details there's a whole contact sitting there, so offer to keep it.
+   * Reuses an existing record when that email is already a customer (the email
+   * is unique — creating would fail with `duplicate_email`), otherwise creates
+   * one. The link itself lands in the draft, so it's saved with the order.
+   */
+  const saveAsCustomer = async () => {
+    const email = billingEmail;
+    if (!email) return;
+    setSavingCustomer(true);
+    try {
+      const found = await call("admin-customers", "search", { q: email, limit: 5 }, { silent: true }).catch(() => null);
+      const rows = found?.rows || found || [];
+      const existing = rows.find((c) => String(c.email || "").toLowerCase() === email.toLowerCase());
+
+      const record =
+        existing ??
+        (await call("admin-customers", "save", {
+          customer: {
+            email,
+            first_name: draft.billing?.first_name || "",
+            last_name: draft.billing?.last_name || "",
+            billing: { ...(draft.billing || {}), email },
+            shipping: isBlankAddress(draft.shipping)
+              ? { ...(draft.billing || {}), email: undefined }
+              : { ...draft.shipping },
+          },
+        }));
+
+      if (!record?.id) return;
+      const label = [record.first_name, record.last_name].filter(Boolean).join(" ") || record.email;
+      setCustomerOpt({ value: record.id, label, meta: record.email, record });
+      patchDraft({ customer_id: record.id });
+      toast.success(
+        existing
+          ? `${label} is already a customer — linked. Save the order to keep the link.`
+          : `Customer ${label} created. Save the order to keep the link.`
+      );
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSavingCustomer(false);
+    }
+  };
+
+  const addProductLine = ({ product, variation, quantity }) => {
+    const price = variation?.price ?? variation?.regular_price ?? product.price ?? product.regular_price ?? 0;
+    const line = {
+      line_id: uid(),
+      product_id: product.id,
+      variation_id: variation?.id || "",
+      name: product.name,
+      sku: variation?.sku || product.sku || "",
+      quantity,
+      price,
+      tax_class: variation?.tax_class || product.tax_class || "standard",
+      subtotal: price * quantity,
+      subtotal_tax: 0,
+      total: price * quantity,
+      total_tax: 0,
+      taxes: [],
+      attributes: (variation?.attributes || []).map((a) => ({ name: a.name, option: a.option })),
+      meta_data: [],
+    };
+    patchDraft({ line_items: [...(draft?.line_items || []), line] });
+  };
+
+  if (!id || order.loading || !draft) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+  if (!order.data) {
+    return <p className="py-12 text-center text-sm text-muted-foreground">Order not found.</p>;
+  }
+
+  const o = order.data;
+  const editable = canEditLines(o);
+
+  // Server-priced view of the pending edits (falls back to the persisted order
+  // when there is nothing pending, or while a preview is in flight/failed).
+  const totalsView = priceView ? { ...o, ...priceView } : o;
+
+  // Draft lines carry only local price × qty math; a preview's per-line tax and
+  // discount figures are folded in so the table agrees with the totals box.
+  const viewLines = mergePricedLines(draft.line_items, priceView?.line_items);
+
+  // draft lines/addresses over server totals. Fee and shipping lines stay as the
+  // draft has them (they are edited in place); only the coupon chips come from
+  // the preview, since coupons are applied server-side and their discount
+  // changes with the items.
+  const view = {
+    ...o,
+    ...draft,
+    line_items: viewLines,
+    coupon_lines: priceView?.coupon_lines ?? o.coupon_lines,
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title={
+          <span className="flex items-center gap-3">
+            Order #{o.order_number || o.id}
+            <StatusBadge status={o.status} />
+          </span>
+        }
+        description={`Placed ${formatDateTime(o.created_date)} via ${o.created_via || "checkout"}${
+          o.payment_method_title ? ` · ${o.payment_method_title}` : ""
+        }`}
+        backHref={href("orders")}
+      />
+
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+        {/* ── Main column ─────────────────────────────────────────────── */}
+        <div className="space-y-6 xl:col-span-2">
+          {/* General */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">General</CardTitle>
+            </CardHeader>
+            {/* items-start: without it the shorter Status cell stretches to the
+                row height set by the Customer cell's helper text, and its
+                dropdown drifts below the Customer one. */}
+            <CardContent className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
+              <div className="grid gap-1.5">
+                <Label className="text-xs text-muted-foreground">Status</Label>
+                <Select value={draft.status} onValueChange={(v) => patchDraft({ status: v })}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ORDER_STATUSES.map((s) => (
+                      <SelectItem key={s.value} value={s.value}>
+                        {s.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid gap-1.5">
+                <Label className="text-xs text-muted-foreground">Customer</Label>
+                <SearchSelect
+                  search={searchCustomers}
+                  value={customerOpt}
+                  onChange={pickCustomer}
+                  placeholder="Guest — search customers…"
+                />
+
+                {draft.customer_id ? (
+                  <div className="flex flex-wrap items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs"
+                      disabled={fillingAddresses}
+                      onClick={refillFromCustomer}
+                      title="Replace the order's billing and shipping with the customer's saved addresses"
+                    >
+                      {fillingAddresses ? (
+                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                      ) : (
+                        <RotateCw className="mr-1 h-3.5 w-3.5" />
+                      )}
+                      Use customer's addresses
+                    </Button>
+                    <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" asChild>
+                      <Link to={href(`customers/${draft.customer_id}`)}>
+                        <ExternalLink className="mr-1 h-3.5 w-3.5" /> Open customer
+                      </Link>
+                    </Button>
+                  </div>
+                ) : hasBillingDetails ? (
+                  // Guest order with details already typed in — offer to keep them.
+                  <div className="flex flex-wrap items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs"
+                      disabled={savingCustomer || !billingEmail}
+                      onClick={saveAsCustomer}
+                      title={
+                        billingEmail
+                          ? "Create a customer from the billing details below and link this order to it"
+                          : "Add a billing email below to save these details as a customer"
+                      }
+                    >
+                      {savingCustomer ? (
+                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                      ) : (
+                        <UserPlus className="mr-1 h-3.5 w-3.5" />
+                      )}
+                      Save as customer
+                    </Button>
+                    <span className="text-xs text-muted-foreground">
+                      {billingEmail ? "Guest order" : "Guest order — needs a billing email"}
+                    </span>
+                  </div>
+                ) : (
+                  <p className="text-xs text-muted-foreground">
+                    Guest order. Pick a customer to fill the addresses from their record, or enter the details
+                    below — the billing email is where this order's emails go.
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Addresses */}
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {[
+              { key: "billing", title: "Billing", edit: editBilling, setEdit: setEditBilling, showEmail: true },
+              { key: "shipping", title: "Shipping", edit: editShipping, setEdit: setEditShipping, showEmail: false },
+            ].map(({ key, title, edit, setEdit, showEmail }) => (
+              <Card key={key}>
+                <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
+                  <CardTitle className="text-base">{title}</CardTitle>
+                  <div className="flex gap-1">
+                    {key === "shipping" && edit && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => patchDraft({ shipping: { ...draft.billing, email: undefined } })}
+                        title="Copy from billing"
+                      >
+                        <Copy className="mr-1 h-3.5 w-3.5" /> From billing
+                      </Button>
+                    )}
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setEdit(!edit)}>
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {edit ? (
+                    <AddressForm
+                      value={draft[key]}
+                      onChange={(v) => patchDraft({ [key]: v })}
+                      showEmail={showEmail}
+                    />
+                  ) : (
+                    <AddressDisplay address={draft[key]} />
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Items */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Items</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <LineItemsTable
+                order={view}
+                editable={editable}
+                onChange={patchDraft}
+                removingCoupon={working === "coupon" ? "*" : ""}
+                onRemoveCoupon={(code) =>
+                  serverOp(
+                    "coupon",
+                    async () => {
+                      await call("admin-orders", "remove-coupon", { order_id: id, code });
+                      toast.success(`Coupon ${code} removed`);
+                    },
+                    { flush: true }
+                  )
+                }
+              />
+              {editable && (
+                <div className="flex flex-wrap gap-2 border-t p-3">
+                  <Button variant="outline" size="sm" onClick={() => setAddProductOpen(true)}>
+                    <Plus className="mr-1 h-3.5 w-3.5" /> Add product(s)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setFeeDialog(true)}>
+                    <Plus className="mr-1 h-3.5 w-3.5" /> Add fee
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setShippingDialog(true)}>
+                    <Truck className="mr-1 h-3.5 w-3.5" /> Add shipping
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={Boolean(working)}
+                    title={dirty ? "Saves your pending changes, then applies the coupon" : undefined}
+                    onClick={() => setCouponDialog(true)}
+                  >
+                    <Ticket className="mr-1 h-3.5 w-3.5" /> Apply coupon
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="ml-auto"
+                    disabled={Boolean(working) || saving}
+                    title={
+                      dirty
+                        ? "Saves your pending changes, then re-runs tax and totals against the current settings"
+                        : "Re-run tax and totals against the current settings"
+                    }
+                    onClick={recalculate}
+                  >
+                    {working === "recalculate" ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <RotateCw className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    {dirty ? "Save & recalculate" : "Recalculate"}
+                  </Button>
+                </div>
+              )}
+              <div className="border-t p-4">
+                {pricedPatch && (
+                  <div className="mb-2 flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
+                    {previewStale ? (
+                      <>
+                        <Loader2 className="h-3 w-3 animate-spin" /> Pricing your changes…
+                      </>
+                    ) : previewError ? (
+                      <span className="text-destructive">
+                        Could not price these changes: {previewError}
+                      </span>
+                    ) : (
+                      <Badge variant="secondary" className="font-normal">
+                        Unsaved — totals below include your changes
+                      </Badge>
+                    )}
+                  </div>
+                )}
+                <TotalsBox order={totalsView} />
+                <div className="mt-3 flex justify-end">
+                  <Button variant="outline" size="sm" onClick={() => setShowRefund((v) => !v)}>
+                    {showRefund ? "Close refund" : "Refund"}
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {showRefund && (
+            <RefundPanel
+              order={o}
+              refunds={refunds.data || []}
+              onDone={() => {
+                setShowRefund(false);
+                refetchAll();
+              }}
+            />
+          )}
+
+          <DownloadPermissionsPanel
+            orderId={id}
+            permissions={permissions.data || []}
+            loading={permissions.loading}
+            onChanged={() => permissions.refetch()}
+          />
+
+          {/* Custom fields */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Custom fields</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MetaDataEditor value={draft.meta_data || []} onChange={(v) => patchDraft({ meta_data: v })} />
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* ── Sidebar ─────────────────────────────────────────────────── */}
+        <div className="space-y-6">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Order actions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <Button className="w-full" onClick={save} disabled={!dirty || saving}>
+                {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
+                Save order
+              </Button>
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={sendInvoice}
+                disabled={working === "invoice"}
+              >
+                {working === "invoice" ? (
+                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                ) : (
+                  <Mail className="mr-1.5 h-4 w-4" />
+                )}
+                Send order details to customer
+              </Button>
+              <Separator />
+              <Button
+                variant="ghost"
+                className="w-full text-destructive hover:text-destructive"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 className="mr-1.5 h-4 w-4" /> Delete order
+              </Button>
+            </CardContent>
+          </Card>
+
+          <PaymentPanel order={o} onChanged={refetchAll} />
+
+          {o.customer_note && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base">Customer provided note</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap rounded-md border border-blue-200 bg-blue-50 p-2.5 text-sm">
+                  {o.customer_note}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          <OrderNotesPanel
+            orderId={id}
+            notes={notes.data || []}
+            loading={notes.loading}
+            onChanged={() => notes.refetch()}
+          />
+        </div>
+      </div>
+
+      {/* ── Dialogs ───────────────────────────────────────────────────── */}
+      <AddProductDialog open={addProductOpen} onOpenChange={setAddProductOpen} onAdd={addProductLine} />
+
+      <NameAmountDialog
+        open={feeDialog}
+        onOpenChange={setFeeDialog}
+        title="Add fee"
+        nameLabel="Fee name"
+        onSubmit={({ name, amount }) =>
+          patchDraft({
+            fee_lines: [
+              ...(draft.fee_lines || []),
+              { line_id: uid(), name, total: amount, total_tax: 0, tax_status: "taxable", tax_class: "standard" },
+            ],
+          })
+        }
+      />
+
+      <NameAmountDialog
+        open={shippingDialog}
+        onOpenChange={setShippingDialog}
+        title="Add shipping"
+        nameLabel="Method title"
+        onSubmit={({ name, amount }) =>
+          patchDraft({
+            shipping_lines: [
+              ...(draft.shipping_lines || []),
+              { line_id: uid(), method_id: "flat_rate", instance_id: "", method_title: name, total: amount, total_tax: 0, taxes: [] },
+            ],
+          })
+        }
+      />
+
+      <CouponDialog
+        open={couponDialog}
+        onOpenChange={setCouponDialog}
+        onSubmit={(code) =>
+          serverOp(
+            "coupon",
+            async () => {
+              await call("admin-orders", "apply-coupon", { order_id: id, code });
+              toast.success(`Coupon ${code} applied`);
+            },
+            { flush: true }
+          )
+        }
+      />
+
+      <ConfirmDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title={`Delete order #${o.order_number || o.id}?`}
+        description="Only pending, cancelled or failed orders can be deleted. This cannot be undone."
+        confirmLabel="Delete order"
+        loading={working === "delete"}
+        onConfirm={deleteOrder}
+      />
+    </div>
+  );
+}
+
+/* ── Small local pieces ─────────────────────────────────────────────── */
+
+function AddressDisplay({ address = {} }) {
+  const rows = [
+    [address.first_name, address.last_name].filter(Boolean).join(" "),
+    address.company,
+    address.address_1,
+    address.address_2,
+    [address.city, address.state, address.postcode].filter(Boolean).join(", "),
+    address.country,
+    address.email,
+    address.phone,
+  ].filter(Boolean);
+  if (rows.length === 0) return <p className="text-sm text-muted-foreground">No address set.</p>;
+  return (
+    <address className="text-sm not-italic leading-6 text-muted-foreground">
+      {rows.map((r, i) => (
+        <div key={i}>{r}</div>
+      ))}
+    </address>
+  );
+}
+
+function NameAmountDialog({ open, onOpenChange, title, nameLabel, onSubmit }) {
+  const [name, setName] = useState("");
+  const [amount, setAmount] = useState(0);
+
+  useEffect(() => {
+    if (!open) {
+      setName("");
+      setAmount(0);
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="grid gap-1.5">
+            <Label>{nameLabel}</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="grid gap-1.5">
+            <Label>Amount</Label>
+            <Input type="number" step="any" value={amount} onChange={(e) => setAmount(Number(e.target.value) || 0)} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!name.trim()}
+            onClick={() => {
+              onSubmit({ name: name.trim(), amount });
+              onOpenChange(false);
+            }}
+          >
+            Add
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CouponDialog({ open, onOpenChange, onSubmit }) {
+  const [code, setCode] = useState("");
+
+  useEffect(() => {
+    if (!open) setCode("");
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Apply coupon</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-1.5">
+          <Label>Coupon code</Label>
+          <Input value={code} onChange={(e) => setCode(e.target.value)} placeholder="e.g. welcome10" />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!code.trim()}
+            onClick={() => {
+              onSubmit(code.trim().toLowerCase());
+              onOpenChange(false);
+            }}
+          >
+            Apply
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}