@base44/app-plugin-commerce 0.1.3 → 0.1.4

package/src/commerce/admin/pages/products/components/tabs/PriceInventoryTab.jsx

@@ -0,0 +1,728 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ChevronDown, ChevronRight, Copy, Trash2, TriangleAlert } from "lucide-react";
+import { toast } from "sonner";
+
+import MoneyInput from "../../../../components/MoneyInput";
+import MediaUploader from "../../../../components/MediaUploader";
+import useMoney from "../../../../hooks/useMoney";
+import { useSettings } from "../../../../context/SettingsContext";
+import AttributesSection from "../AttributesSection";
+import { comboKey, generateVariationCombos, variationLabel } from "../../../../lib/product-utils";
+import { BACKORDER_OPTIONS, STOCK_STATUSES, TAX_STATUSES } from "../../../../lib/constants";
+
+const NONE = "__none__";
+const ANY = "__any__";
+const num = (v) => (v === "" ? null : Number(v));
+const toDateInput = (iso) => (iso ? String(iso).slice(0, 10) : "");
+const fromDateInput = (v) => (v ? new Date(`${v}T00:00:00Z`).toISOString() : null);
+
+/**
+ * What "copy from" moves between variants, by group.
+ *
+ * `sku` is deliberately absent: it must be unique across products *and*
+ * variations, so copying it would fail the save with `duplicate_sku`. `image`
+ * and the attribute combination are what makes a variant itself, so they stay.
+ */
+const COPY_GROUPS = [
+  { key: "price", label: "Price", fields: ["regular_price", "sale_price", "date_on_sale_from", "date_on_sale_to"] },
+  { key: "inventory", label: "Inventory", fields: ["manage_stock", "stock_quantity", "backorders", "stock_status"] },
+  {
+    key: "shipping",
+    label: "Shipping",
+    fields: ["weight", "dimensions", "shipping_class_id", "virtual", "downloadable"],
+  },
+];
+
+const NEW_VARIATION = {
+  status: "publish",
+  sku: "",
+  regular_price: null,
+  sale_price: null,
+  date_on_sale_from: null,
+  date_on_sale_to: null,
+  virtual: false,
+  downloadable: false,
+  downloads: [],
+  download_limit: -1,
+  download_expiry: -1,
+  tax_status: "parent",
+  tax_class: "",
+  manage_stock: "parent",
+  stock_quantity: null,
+  stock_status: "instock",
+  backorders: "no",
+  weight: null,
+  dimensions: { length: null, width: null, height: null },
+  shipping_class_id: "",
+  image: null,
+  menu_order: 0,
+  description: "",
+  meta_data: [],
+};
+
+/** Price, sale price and the sale window — identical for the product and a variant. */
+function PriceFields({ values, set }) {
+  const scheduled = Boolean(values.date_on_sale_from || values.date_on_sale_to);
+  return (
+    <>
+      <div className="space-y-1.5">
+        <Label className="text-xs">Regular price</Label>
+        <MoneyInput value={values.regular_price} onChange={(v) => set({ regular_price: v })} />
+      </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs">Sale price</Label>
+        <MoneyInput value={values.sale_price} onChange={(v) => set({ sale_price: v })} />
+      </div>
+      <div className="sm:col-span-2">
+        <label className="flex items-center gap-2 text-sm">
+          <Switch
+            checked={scheduled}
+            onCheckedChange={(v) =>
+              set(
+                v
+                  ? { date_on_sale_from: new Date().toISOString() }
+                  : { date_on_sale_from: null, date_on_sale_to: null }
+              )
+            }
+          />
+          Schedule sale
+        </label>
+      </div>
+      {scheduled && (
+        <>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Sale start</Label>
+            <Input
+              type="date"
+              value={toDateInput(values.date_on_sale_from)}
+              onChange={(e) => set({ date_on_sale_from: fromDateInput(e.target.value) })}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Sale end</Label>
+            <Input
+              type="date"
+              value={toDateInput(values.date_on_sale_to)}
+              onChange={(e) => set({ date_on_sale_to: fromDateInput(e.target.value) })}
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+/** Collapsible shell shared by the default row and every variant row. */
+function Row({ title, summary, right, onRemove, children }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Card className="overflow-hidden">
+      <div className="flex items-center justify-between gap-2 px-3 py-2">
+        <button
+          type="button"
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+          onClick={() => setOpen((o) => !o)}
+        >
+          {open ? <ChevronDown className="h-4 w-4 shrink-0" /> : <ChevronRight className="h-4 w-4 shrink-0" />}
+          <span className="truncate font-medium">{title}</span>
+          <span className="truncate text-xs text-muted-foreground">{summary}</span>
+        </button>
+        {right}
+        {onRemove && (
+          <Button type="button" variant="ghost" size="icon" onClick={onRemove}>
+            <Trash2 className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        )}
+      </div>
+      {open && <div className="border-t p-3">{children}</div>}
+    </Card>
+  );
+}
+
+const Section = ({ label, children, className = "" }) => (
+  <div className={`space-y-2 sm:col-span-2 ${className}`}>
+    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">{label}</p>
+    <div className="grid gap-3 sm:grid-cols-2">{children}</div>
+  </div>
+);
+
+/**
+ * Weight, dimensions and shipping class live per purchasable thing, not per
+ * product — a large mug weighs more than a small one.
+ */
+function ShippingFields({ values, set, units, classes, inheritLabel }) {
+  const dims = values.dimensions || {};
+  return (
+    <>
+      <div className="space-y-1.5">
+        <Label className="text-xs">Weight ({units.weightUnit})</Label>
+        <Input
+          type="number"
+          step="any"
+          value={values.weight ?? ""}
+          onChange={(e) => set({ weight: num(e.target.value) })}
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs">Dimensions L×W×H ({units.dimensionUnit})</Label>
+        <div className="grid grid-cols-3 gap-1">
+          {["length", "width", "height"].map((k) => (
+            <Input
+              key={k}
+              type="number"
+              step="any"
+              placeholder={k[0].toUpperCase()}
+              value={dims[k] ?? ""}
+              onChange={(e) => set({ dimensions: { ...dims, [k]: num(e.target.value) } })}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        <Label className="text-xs">Shipping class</Label>
+        <Select
+          value={values.shipping_class_id || NONE}
+          onValueChange={(v) => set({ shipping_class_id: v === NONE ? "" : v })}
+        >
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value={NONE}>{inheritLabel}</SelectItem>
+            {classes.map((c) => (
+              <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </>
+  );
+}
+
+/** Downloadable-file rows, shared by the product and a variant. */
+function DownloadsFields({ values, set }) {
+  const downloads = values.downloads || [];
+  return (
+    <div className="space-y-2 sm:col-span-2">
+      {downloads.map((d, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <Input
+            className="w-48"
+            placeholder="Name"
+            value={d.name || ""}
+            onChange={(e) =>
+              set({ downloads: downloads.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)) })
+            }
+          />
+          <Input
+            className="flex-1"
+            placeholder="File URL"
+            value={d.file_url || ""}
+            onChange={(e) =>
+              set({ downloads: downloads.map((x, j) => (j === i ? { ...x, file_url: e.target.value } : x)) })
+            }
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => set({ downloads: downloads.filter((_, j) => j !== i) })}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => set({ downloads: [...downloads, { name: "", file_url: "" }] })}
+      >
+        Add file
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * The product itself — what a product with no attributes is sold as, and the
+ * values its variants inherit when it gains attributes. The fields are the
+ * product's own, so `manage_stock` is the boolean the entity uses here, not a
+ * variant's tri-state.
+ */
+function DefaultRow({ product, up, money, units, refs }) {
+  const summary = [
+    product.price != null || product.regular_price != null
+      ? money.format(product.price ?? product.regular_price)
+      : "no price",
+    product.manage_stock ? `${product.stock_quantity ?? 0} in stock` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <Row title="Base price" summary={summary}>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Section label="Price">
+          <PriceFields values={product} set={up} />
+        </Section>
+
+        <Section label="Inventory">
+          <div className="space-y-1.5">
+            <Label className="text-xs">SKU</Label>
+            <Input
+              placeholder="Unique stock keeping unit"
+              value={product.sku || ""}
+              onChange={(e) => up({ sku: e.target.value })}
+            />
+          </div>
+          <div />
+          <div className="sm:col-span-2">
+            <label className="flex items-center gap-2 text-sm">
+              <Switch
+                checked={product.manage_stock}
+                onCheckedChange={(v) => up({ manage_stock: Boolean(v) })}
+              />
+              Track stock quantity
+            </label>
+          </div>
+          {product.manage_stock ? (
+            <>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Stock quantity</Label>
+                <Input
+                  type="number"
+                  value={product.stock_quantity ?? ""}
+                  onChange={(e) => up({ stock_quantity: num(e.target.value) })}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Backorders</Label>
+                <Select value={product.backorders || "no"} onValueChange={(v) => up({ backorders: v })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {BACKORDER_OPTIONS.map((o) => (
+                      <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Low stock threshold</Label>
+                <Input
+                  type="number"
+                  placeholder="Store default"
+                  value={product.low_stock_amount ?? ""}
+                  onChange={(e) => up({ low_stock_amount: num(e.target.value) })}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="space-y-1.5">
+              <Label className="text-xs">Stock status</Label>
+              <Select value={product.stock_status || "instock"} onValueChange={(v) => up({ stock_status: v })}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {STOCK_STATUSES.map((s) => (
+                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </Section>
+
+        {!product.virtual && (
+          <Section label="Shipping">
+            <ShippingFields
+              values={product}
+              set={up}
+              units={units}
+              classes={refs.shippingClasses || []}
+              inheritLabel="No shipping class"
+            />
+          </Section>
+        )}
+      </div>
+    </Row>
+  );
+}
+
+/** One variant. Removing it is done by removing the attribute value it came from. */
+function VariantRow({ variation, onChange, refs, money, units, virtual }) {
+  const set = (patch) => onChange({ ...variation, ...patch });
+  const summary = [
+    variation.price != null || variation.regular_price != null
+      ? money.format(variation.price ?? variation.regular_price)
+      : "no price",
+    variation.manage_stock === "yes" ? `${variation.stock_quantity ?? 0} in stock` : null,
+    variation.sku ? `SKU ${variation.sku}` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <Row
+      title={variationLabel(variation)}
+      summary={summary}
+      right={
+        <label className="flex items-center gap-1.5 text-sm">
+          <Checkbox
+            checked={variation.status !== "private" && variation.status !== "draft"}
+            onCheckedChange={(v) => set({ status: v ? "publish" : "private" })}
+          />
+          Enabled
+        </label>
+      }
+    >
+      <div className="grid gap-4 sm:grid-cols-[140px_1fr]">
+        <MediaUploader value={variation.image || null} onChange={(image) => set({ image })} label="Image" />
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Section label="Price">
+            <PriceFields values={variation} set={set} />
+          </Section>
+
+          <Section label="Inventory">
+            <div className="space-y-1.5">
+              <Label className="text-xs">SKU</Label>
+              <Input value={variation.sku || ""} onChange={(e) => set({ sku: e.target.value })} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Stock management</Label>
+              <Select value={variation.manage_stock || "parent"} onValueChange={(v) => set({ manage_stock: v })}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="parent">Same as product</SelectItem>
+                  <SelectItem value="yes">Track quantity</SelectItem>
+                  <SelectItem value="no">Don't track</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {variation.manage_stock === "yes" && (
+              <>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Stock quantity</Label>
+                  <Input
+                    type="number"
+                    value={variation.stock_quantity ?? ""}
+                    onChange={(e) => set({ stock_quantity: num(e.target.value) })}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Backorders</Label>
+                  <Select value={variation.backorders || "no"} onValueChange={(v) => set({ backorders: v })}>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {BACKORDER_OPTIONS.map((o) => (
+                        <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </>
+            )}
+          </Section>
+
+          {!virtual && (
+            <Section label="Shipping">
+              <ShippingFields
+                values={variation}
+                set={set}
+                units={units}
+                classes={refs.shippingClasses || []}
+                inheritLabel="Same as product"
+              />
+            </Section>
+          )}
+
+          <Section label="Type">
+            <div className="flex items-end gap-4 text-sm">
+              <label className="flex items-center gap-1.5">
+                <Checkbox checked={variation.virtual} onCheckedChange={(v) => set({ virtual: Boolean(v) })} />
+                Virtual
+              </label>
+              <label className="flex items-center gap-1.5">
+                <Checkbox
+                  checked={variation.downloadable}
+                  onCheckedChange={(v) => set({ downloadable: Boolean(v) })}
+                />
+                Downloadable
+              </label>
+            </div>
+          </Section>
+
+          {variation.downloadable && (
+            <Section label="Files">
+              <DownloadsFields values={variation} set={set} />
+            </Section>
+          )}
+        </div>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * Price & Inventory — one surface for what a customer actually buys.
+ *
+ * Tax applies to the whole product, so it sits at the top. Then the attributes,
+ * because they are what the variant list below is made of. Then one row per thing
+ * that can be bought: a product with no attributes has a single **Base price**
+ * row, which is the product itself; one with attributes has a row per variant.
+ * Both edit the same fields, which is why the price, inventory, shipping and
+ * downloads blocks are shared components rather than two parallel forms.
+ *
+ * The parent's own price is *not* edited when variants exist — `admin-products`
+ * derives it from the cheapest variant on save.
+ */
+export default function PriceInventoryTab({ product, up, refs, variations, setVariations }) {
+  const money = useMoney();
+  const settings = useSettings();
+  const weightUnit = settings?.get("products", "weight_unit", "kg");
+  const dimensionUnit = settings?.get("products", "dimension_unit", "cm");
+  const [copyFrom, setCopyFrom] = useState("0");
+  const [copyGroups, setCopyGroups] = useState(["price"]);
+  const taxClasses = refs.taxClasses || [];
+  const units = { weightUnit, dimensionUnit };
+
+  const hasAttributes = (product.attributes || []).length > 0;
+  const axes = useMemo(
+    () => (product.attributes || []).filter((a) => (a.options || []).length > 0),
+    [product.attributes]
+  );
+
+  /**
+   * Variants follow the attributes — no generate step, no per-row delete.
+   *
+   * Whenever the attribute options change, every missing combination is added and
+   * every combination that is no longer possible is dropped. New rows inherit the
+   * first existing variant, or the product's own values when there is none yet, so
+   * adding a size to a €19.99 mug gives priced variants rather than blank ones.
+   *
+   * Keyed on a signature and skipped on the first render: a product loaded with
+   * variants that don't match its attributes must not be silently rewritten before
+   * the merchant has touched anything.
+   */
+  const attrSignature = JSON.stringify(
+    (product.attributes || []).map((a) => [a.attribute_id || a.name, a.options || []])
+  );
+  const lastSignature = useRef(attrSignature);
+  useEffect(() => {
+    if (lastSignature.current === attrSignature) return;
+    lastSignature.current = attrSignature;
+
+    const combos = generateVariationCombos(product.attributes);
+    const wanted = new Map(combos.map((c) => [comboKey(c), c]));
+    const kept = variations.filter((v) => wanted.has(comboKey(v)));
+    const keptKeys = new Set(kept.map(comboKey));
+
+    const source = variations[0];
+    const template = source
+      ? Object.fromEntries(
+          COPY_GROUPS.flatMap((g) => g.fields).map((f) => [
+            f,
+            f === "dimensions" ? { ...(source.dimensions || {}) } : source[f],
+          ])
+        )
+      : {
+          regular_price: product.regular_price,
+          sale_price: product.sale_price,
+          date_on_sale_from: product.date_on_sale_from,
+          date_on_sale_to: product.date_on_sale_to,
+          manage_stock: product.manage_stock ? "yes" : "parent",
+          stock_quantity: product.stock_quantity,
+          backorders: product.backorders,
+          weight: product.weight,
+          dimensions: { ...(product.dimensions || {}) },
+          shipping_class_id: product.shipping_class_id,
+        };
+
+    const added = [...wanted.entries()]
+      .filter(([key]) => !keptKeys.has(key))
+      .map(([, combo], i) => ({ ...NEW_VARIATION, ...template, ...combo, menu_order: kept.length + i }));
+
+    if (added.length || kept.length !== variations.length) setVariations([...kept, ...added]);
+    // eslint-disable-next-line -- reconcile only when the attribute options change
+  }, [attrSignature]);
+
+  /** Push one variant's values onto every other, so a 12-variant grid is one action. */
+  const applyCopy = () => {
+    const source = variations[Number(copyFrom)];
+    if (!source || !copyGroups.length) return;
+    const fields = COPY_GROUPS.filter((g) => copyGroups.includes(g.key)).flatMap((g) => g.fields);
+    setVariations(
+      variations.map((v, i) => {
+        if (i === Number(copyFrom)) return v;
+        const patch = {};
+        for (const f of fields) {
+          // dimensions is an object — copy it, don't share the reference
+          patch[f] = f === "dimensions" ? { ...(source.dimensions || {}) } : source[f];
+        }
+        return { ...v, ...patch };
+      })
+    );
+    const what = COPY_GROUPS.filter((g) => copyGroups.includes(g.key)).map((g) => g.label.toLowerCase());
+    toast.success(`Copied ${what.join(" and ")} to ${variations.length - 1} variant(s).`);
+  };
+
+  const setDefault = (attr, option) => {
+    const key = (d) => d.attribute_id || d.name;
+    const rest = (product.default_attributes || []).filter((d) => key(d) !== key(attr));
+    up({
+      default_attributes:
+        option === ANY ? rest : [...rest, { attribute_id: attr.attribute_id || "", name: attr.name, option }],
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Product-wide, so it sits above everything the customer picks between. */}
+      <div className="grid max-w-md gap-3 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label>Tax status</Label>
+          <Select value={product.tax_status} onValueChange={(v) => up({ tax_status: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {TAX_STATUSES.map((t) => (
+                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label>Tax class</Label>
+          <Select value={product.tax_class || "standard"} onValueChange={(v) => up({ tax_class: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {(taxClasses.length ? taxClasses : [{ slug: "standard", name: "Standard" }]).map((c) => (
+                <SelectItem key={c.slug} value={c.slug}>{c.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <label className="flex items-center gap-2 text-sm sm:col-span-2">
+          <Checkbox
+            checked={product.sold_individually}
+            onCheckedChange={(v) => up({ sold_individually: Boolean(v) })}
+          />
+          Limit purchases to 1 item per order
+        </label>
+      </div>
+
+      <div className="border-t pt-4">
+        <AttributesSection product={product} up={up} refs={refs} />
+      </div>
+
+      <div className="space-y-2 border-t pt-4">
+        {!hasAttributes && <DefaultRow product={product} up={up} money={money} units={units} refs={refs} />}
+
+        {hasAttributes && (
+          <>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <span className="text-sm font-semibold">
+                {variations.length} variant{variations.length === 1 ? "" : "s"}
+              </span>
+              {axes.length > 0 && (
+                <div className="flex flex-wrap gap-3">
+                  {axes.map((attr) => {
+                    const key = attr.attribute_id || attr.name;
+                    const current = (product.default_attributes || []).find(
+                      (d) => (d.attribute_id || d.name) === key
+                    );
+                    return (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Label className="text-xs text-muted-foreground">Default {attr.name}</Label>
+                        <Select value={current?.option || ANY} onValueChange={(v) => setDefault(attr, v)}>
+                          <SelectTrigger className="h-8 w-36"><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value={ANY}>None</SelectItem>
+                            {(attr.options || []).map((o) => (
+                              <SelectItem key={o} value={o}>{o}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {variations.length > 1 && (
+              <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/30 p-2 text-sm">
+                <Copy className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <span className="text-muted-foreground">Copy from</span>
+                <Select value={copyFrom} onValueChange={setCopyFrom}>
+                  <SelectTrigger className="h-8 w-48"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {variations.map((v, i) => (
+                      <SelectItem key={v.id || `new-${i}`} value={String(i)}>
+                        {variationLabel(v)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {COPY_GROUPS.map((g) => (
+                  <label key={g.key} className="flex items-center gap-1.5">
+                    <Checkbox
+                      checked={copyGroups.includes(g.key)}
+                      onCheckedChange={(v) =>
+                        setCopyGroups((prev) => (v ? [...prev, g.key] : prev.filter((k) => k !== g.key)))
+                      }
+                    />
+                    {g.label}
+                  </label>
+                ))}
+                <Button type="button" variant="outline" size="sm" disabled={!copyGroups.length} onClick={applyCopy}>
+                  Apply to the other {variations.length - 1}
+                </Button>
+              </div>
+            )}
+
+            {variations.length === 0 && (
+              <Alert>
+                <TriangleAlert className="h-4 w-4" />
+                <AlertTitle>No variants yet — customers can't buy this product</AlertTitle>
+                <AlertDescription>
+                  Give an attribute above the values this product comes in and its variants appear
+                  here automatically.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {variations.map((v, i) => (
+              <VariantRow
+                key={v.id || comboKey(v) || `new-${i}`}
+                variation={v}
+                refs={refs}
+                money={money}
+                units={units}
+                virtual={product.virtual}
+                onChange={(nv) => setVariations(variations.map((x, j) => (j === i ? nv : x)))}
+              />
+            ))}
+
+            <p className="text-xs text-muted-foreground">
+              Variants follow the attributes above — adding a value adds its variants (copied from the
+              first), removing one takes them away. The product's own price is the cheapest variant,
+              derived on save.
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}