@base44/app-plugin-commerce 0.1.13 → 0.1.15

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

@@ -5,7 +5,6 @@ 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,
@@ -18,19 +17,19 @@ import { toast } from "sonner";
 
 import MoneyInput from "../../../../components/MoneyInput";
 import MediaUploader from "../../../../components/MediaUploader";
+import ConfirmDialog from "../../../../components/ConfirmDialog";
 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 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.
+ * What bulk "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`
@@ -72,14 +71,16 @@ const NEW_VARIATION = {
 };
 
 /** Price, sale price and the sale window — identical for the product and a variant. */
-function PriceFields({ values, set }) {
+function PriceFields({ values, set, hideRegular = false }) {
   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>
+      {!hideRegular && (
+        <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 })} />
@@ -123,33 +124,6 @@ function PriceFields({ values, set }) {
   );
 }
 
-/** 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>
@@ -239,252 +213,265 @@ function DownloadsFields({ values, set }) {
 }
 
 /**
- * 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.
+ * Single-product mode: the product's own price, stock and shipping as plain,
+ * always-visible fields. No accordion — setting a price is zero clicks.
  */
-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(" · ");
-
+function SingleProductFields({ product, up, units }) {
   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>
+    <div className="grid max-w-2xl gap-4 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 })}
+      <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) })}
             />
-          </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) })}
               />
-              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>
             <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 })}>
+              <Label className="text-xs">Backorders</Label>
+              <Select value={product.backorders || "no"} onValueChange={(v) => up({ backorders: v })}>
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
-                  {STOCK_STATUSES.map((s) => (
-                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+                  {BACKORDER_OPTIONS.map((o) => (
+                    <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-          )}
-        </Section>
-
-        {!product.virtual && (
-          <Section label="Shipping">
-            <ShippingFields values={product} set={up} units={units} />
-          </Section>
+            <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>
         )}
-      </div>
-    </Row>
+      </Section>
+
+      {!product.virtual && (
+        <Section label="Shipping">
+          <ShippingFields values={product} set={up} units={units} />
+        </Section>
+      )}
+    </div>
   );
 }
 
-/** 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(" · ");
-
+/** Rarely-needed per-variant fields, shown when a table row is expanded. */
+function VariantDetails({ variation, set, units, virtual }) {
   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>
+    <div className="grid gap-4 sm:grid-cols-[140px_1fr]">
+      <MediaUploader value={variation.image || null} onChange={(image) => set({ image })} label="Image" />
 
-          <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="grid gap-3 sm:grid-cols-2">
+        <Section label="Sale">
+          <PriceFields values={variation} set={set} hideRegular />
+        </Section>
+
+        <Section label="Inventory">
+          <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 management</Label>
-              <Select value={variation.manage_stock || "parent"} onValueChange={(v) => set({ manage_stock: v })}>
+              <Label className="text-xs">Backorders</Label>
+              <Select value={variation.backorders || "no"} onValueChange={(v) => set({ backorders: 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>
+                  {BACKORDER_OPTIONS.map((o) => (
+                    <SelectItem key={o.value} value={o.value}>{o.label}</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} />
           </Section>
+        )}
 
-          {!virtual && (
-            <Section label="Shipping">
-              <ShippingFields values={variation} set={set} units={units} />
-            </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>
 
-          <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>
+        {variation.downloadable && (
+          <Section label="Files">
+            <DownloadsFields values={variation} set={set} />
           </Section>
+        )}
+      </div>
+    </div>
+  );
+}
 
-          {variation.downloadable && (
-            <Section label="Files">
-              <DownloadsFields values={variation} set={set} />
-            </Section>
-          )}
+/** Product-wide, set-once fields — collapsed by default so pricing leads. */
+function TaxRules({ product, up, taxGroups }) {
+  const [open, setOpen] = useState(false);
+  const taxLabel = TAX_STATUSES.find((t) => t.value === product.tax_status)?.label || product.tax_status;
+  return (
+    <div className="border-t pt-3">
+      <button
+        type="button"
+        className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground"
+        onClick={() => setOpen((o) => !o)}
+      >
+        {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        Tax &amp; purchase rules
+        {!open && (
+          <span className="font-normal text-xs">
+            · {taxLabel} · {product.tax_group || "Products"}
+            {product.sold_individually ? " · max 1 per order" : ""}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div className="mt-3 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 group</Label>
+            <Select value={product.tax_group || "Products"} onValueChange={(v) => up({ tax_group: v })}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {taxGroups.map((g) => (
+                  <SelectItem key={g} value={g}>{g}</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>
-    </Row>
+      )}
+    </div>
   );
 }
 
 /**
  * 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 merchant picks the mental model explicitly: a single product (one price,
+ * one stock count, plain fields) or a product with variants (options define
+ * the axes, every variant is a row in an inline-editable table). Variants
+ * still follow the options — adding a value inserts pre-filled rows, removing
+ * one takes them away after a confirmation upstream in AttributesSection.
  *
  * The parent's own price is *not* edited when variants exist — `admin-products`
- * derives it from the cheapest variant on save.
+ * derives it from the cheapest variant on save; the "from …" label shows it live.
  */
 export default function PriceInventoryTab({ product, up, refs, variations, setVariations }) {
   const money = useMoney();
   const settings = useSettings();
   const weightUnit = settings?.get("general", "weight_unit", "kg");
   const dimensionUnit = settings?.get("general", "dimension_unit", "cm");
-  const [copyFrom, setCopyFrom] = useState("0");
-  const [copyGroups, setCopyGroups] = useState(["price"]);
-  // Tax groups are named per Shipping & Tax Location; a product picks by name.
   const taxGroups = refs.taxGroups?.length ? refs.taxGroups : ["Products"];
   const units = { weightUnit, dimensionUnit };
 
   const hasAttributes = (product.attributes || []).length > 0;
-  const axes = useMemo(
-    () => (product.attributes || []).filter((a) => (a.options || []).length > 0),
-    [product.attributes]
-  );
+  const [mode, setMode] = useState(hasAttributes ? "variants" : "single");
+  const [confirmSingle, setConfirmSingle] = useState(false);
+  useEffect(() => {
+    if (hasAttributes) setMode("variants");
+  }, [hasAttributes]);
+
+  // Table state: selection for bulk edits, one expandable row.
+  const [selected, setSelected] = useState([]);
+  const [expanded, setExpanded] = useState(null);
+  const [bulkPrice, setBulkPrice] = useState(null);
+  const [bulkStock, setBulkStock] = useState("");
+  const [copyFrom, setCopyFrom] = useState("0");
+  useEffect(() => {
+    setSelected((s) => s.filter((i) => i < variations.length));
+    setExpanded((e) => (e != null && e >= variations.length ? null : e));
+  }, [variations.length]);
 
   /**
-   * Variants follow the attributes — no generate step, no per-row delete.
+   * Variants follow the options — no generate step, no per-row delete.
    *
-   * Whenever the attribute options change, every missing combination is added and
+   * Whenever the option values 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
+   * variants that don't match its options must not be silently rewritten before
    * the merchant has touched anything.
    */
   const attrSignature = JSON.stringify(
@@ -525,174 +512,310 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
       .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
+    // eslint-disable-next-line -- reconcile only when the option values change
   }, [attrSignature]);
 
-  /** Push one variant's values onto every other, so a 12-variant grid is one action. */
+  const enabled = (v) => v.status !== "private" && v.status !== "draft";
+
+  // Live derived price — what admin-products computes on save.
+  const fromPrice = useMemo(() => {
+    const prices = variations
+      .filter(enabled)
+      .map((v) => v.sale_price ?? v.regular_price)
+      .filter((n) => n != null);
+    return prices.length ? Math.min(...prices) : null;
+  }, [variations]);
+
+  /** Default = the variant preselected on the product page; exactly one, via radio. */
+  const isDefault = (v) => {
+    const defs = product.default_attributes || [];
+    const combo = v.attributes || [];
+    if (!combo.length || defs.length !== combo.length) return false;
+    return combo.every((a) =>
+      defs.some(
+        (d) => (d.attribute_id || d.name) === (a.attribute_id || a.name) && d.option === a.option
+      )
+    );
+  };
+  const makeDefault = (v) =>
+    up({
+      default_attributes: (v.attributes || []).map((a) => ({
+        attribute_id: a.attribute_id || "",
+        name: a.name,
+        option: a.option,
+      })),
+    });
+
+  const setVariation = (index, nv) =>
+    setVariations(variations.map((x, j) => (j === index ? nv : x)));
+
+  const toggleSelect = (index, on) =>
+    setSelected((s) => (on ? [...s, index] : s.filter((i) => i !== index)));
+  const allSelected = variations.length > 0 && selected.length === variations.length;
+
+  const applyBulkPrice = () => {
+    setVariations(variations.map((v, i) => (selected.includes(i) ? { ...v, regular_price: bulkPrice } : v)));
+    toast.success(`Price set on ${selected.length} variant(s).`);
+  };
+  const applyBulkStock = () => {
+    const qty = Number(bulkStock);
+    setVariations(
+      variations.map((v, i) =>
+        selected.includes(i) ? { ...v, manage_stock: "yes", stock_quantity: qty } : v
+      )
+    );
+    toast.success(`Stock set on ${selected.length} variant(s).`);
+  };
+  /** Push one variant's price, inventory and shipping onto the selected rows. */
   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);
+    const src = variations[Number(copyFrom)];
+    if (!src) return;
+    const fields = COPY_GROUPS.flatMap((g) => g.fields);
     setVariations(
       variations.map((v, i) => {
-        if (i === Number(copyFrom)) return v;
+        if (!selected.includes(i) || 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];
-        }
+        for (const f of fields) patch[f] = f === "dimensions" ? { ...(src.dimensions || {}) } : src[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).`);
+    toast.success(`Copied to ${selected.filter((i) => i !== Number(copyFrom)).length} 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 }],
-    });
+  const switchToSingle = () => {
+    if (hasAttributes && variations.length > 0) setConfirmSingle(true);
+    else if (hasAttributes) {
+      up({ attributes: [], default_attributes: [] });
+      setMode("single");
+    } else setMode("single");
   };
 
+  const modeBtn = (active) =>
+    `rounded-md px-4 py-1.5 text-sm transition-colors ${
+      active ? "bg-background font-semibold shadow-sm" : "text-muted-foreground hover:text-foreground"
+    }`;
+
   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 group</Label>
-          <Select value={product.tax_group || "Products"} onValueChange={(v) => up({ tax_group: v })}>
-            <SelectTrigger><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {taxGroups.map((g) => (
-                <SelectItem key={g} value={g}>{g}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+      {/* The one question a merchant actually understands, asked explicitly. */}
+      <div>
+        <div className="inline-flex rounded-lg border bg-muted/60 p-0.5">
+          <button type="button" className={modeBtn(mode === "single")} onClick={switchToSingle}>
+            Single product
+          </button>
+          <button type="button" className={modeBtn(mode === "variants")} onClick={() => setMode("variants")}>
+            Has variants
+          </button>
         </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>
+        <p className="mt-1.5 text-xs text-muted-foreground">
+          {mode === "single"
+            ? "One price, one stock count. Switch if it comes in sizes, packs or colors."
+            : "Each combination of option values becomes a variant with its own price, stock and SKU."}
+        </p>
       </div>
 
-      <div className="border-t pt-4">
-        <AttributesSection product={product} up={up} refs={refs} />
-      </div>
+      {mode === "single" ? (
+        <SingleProductFields product={product} up={up} units={units} />
+      ) : (
+        <>
+          <AttributesSection product={product} up={up} refs={refs} variations={variations} />
+
+          {hasAttributes && (
+            <div className="space-y-2 border-t pt-4">
+              <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>
+                <span className="text-xs text-muted-foreground">
+                  Store price:{" "}
+                  <span className="font-semibold text-foreground">
+                    {fromPrice != null ? `from ${money.format(fromPrice)}` : "—"}
+                  </span>{" "}
+                  (lowest enabled variant)
+                </span>
+              </div>
 
-      <div className="space-y-2 border-t pt-4">
-        {!hasAttributes && <DefaultRow product={product} up={up} money={money} units={units} refs={refs} />}
+              {selected.length > 0 && (
+                <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 p-2 text-sm">
+                  <span className="font-medium">{selected.length} selected</span>
+                  <MoneyInput className="w-32" value={bulkPrice} onChange={setBulkPrice} />
+                  <Button type="button" variant="outline" size="sm" disabled={bulkPrice == null} onClick={applyBulkPrice}>
+                    Set price
+                  </Button>
+                  <Input
+                    type="number"
+                    className="h-9 w-24"
+                    placeholder="Qty"
+                    value={bulkStock}
+                    onChange={(e) => setBulkStock(e.target.value)}
+                  />
+                  <Button type="button" variant="outline" size="sm" disabled={bulkStock === ""} onClick={applyBulkStock}>
+                    Set stock
+                  </Button>
+                  <div className="flex items-center gap-1.5">
+                    <Copy className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <Select value={copyFrom} onValueChange={setCopyFrom}>
+                      <SelectTrigger className="h-9 w-44"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        {variations.map((v, i) => (
+                          <SelectItem key={v.id || `new-${i}`} value={String(i)}>
+                            {variationLabel(v)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <Button type="button" variant="outline" size="sm" onClick={applyCopy}>
+                      Copy to selected
+                    </Button>
+                  </div>
+                  <Button type="button" variant="ghost" size="sm" className="ml-auto" onClick={() => setSelected([])}>
+                    Clear
+                  </Button>
+                </div>
+              )}
 
-        {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>
-                    );
-                  })}
+              {variations.length === 0 ? (
+                <Alert>
+                  <TriangleAlert className="h-4 w-4" />
+                  <AlertTitle>No variants yet — customers can't buy this product</AlertTitle>
+                  <AlertDescription>
+                    Pick the values this product comes in for the option above and its variants
+                    appear here automatically.
+                  </AlertDescription>
+                </Alert>
+              ) : (
+                <div className="overflow-x-auto rounded-md border">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
+                        <th className="w-9 p-2">
+                          <Checkbox
+                            checked={allSelected}
+                            onCheckedChange={(v) => setSelected(v ? variations.map((_, i) => i) : [])}
+                            aria-label="Select all variants"
+                          />
+                        </th>
+                        <th className="p-2 font-semibold">Variant</th>
+                        <th className="w-36 p-2 font-semibold">Price</th>
+                        <th className="w-24 p-2 font-semibold">Stock</th>
+                        <th className="w-48 p-2 font-semibold">SKU</th>
+                        <th className="w-16 p-2 text-center font-semibold">Default</th>
+                        <th className="w-20 p-2 text-center font-semibold">Enabled</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {variations.map((v, i) => (
+                        <React.Fragment key={v.id || comboKey(v) || `new-${i}`}>
+                          <tr className="border-b last:border-b-0">
+                            <td className="p-2">
+                              <Checkbox
+                                checked={selected.includes(i)}
+                                onCheckedChange={(on) => toggleSelect(i, Boolean(on))}
+                                aria-label={`Select ${variationLabel(v)}`}
+                              />
+                            </td>
+                            <td className="p-2">
+                              <button
+                                type="button"
+                                className="flex items-center gap-1.5 text-left font-medium"
+                                onClick={() => setExpanded(expanded === i ? null : i)}
+                                title="More fields (image, sale, shipping)"
+                              >
+                                {expanded === i ? (
+                                  <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                ) : (
+                                  <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                )}
+                                {variationLabel(v)}
+                              </button>
+                            </td>
+                            <td className="p-2">
+                              <MoneyInput
+                                value={v.regular_price}
+                                onChange={(val) => setVariation(i, { ...v, regular_price: val })}
+                              />
+                            </td>
+                            <td className="p-2">
+                              <Input
+                                type="number"
+                                placeholder="—"
+                                title={v.manage_stock === "yes" ? "Tracked quantity" : "Not tracked — type a quantity to track"}
+                                value={v.manage_stock === "yes" ? v.stock_quantity ?? "" : ""}
+                                onChange={(e) =>
+                                  setVariation(
+                                    i,
+                                    e.target.value === ""
+                                      ? { ...v, manage_stock: "parent", stock_quantity: null }
+                                      : { ...v, manage_stock: "yes", stock_quantity: Number(e.target.value) }
+                                  )
+                                }
+                              />
+                            </td>
+                            <td className="p-2">
+                              <Input
+                                value={v.sku || ""}
+                                onChange={(e) => setVariation(i, { ...v, sku: e.target.value })}
+                              />
+                            </td>
+                            <td className="p-2 text-center">
+                              <input
+                                type="radio"
+                                name="default-variant"
+                                className="h-4 w-4 accent-foreground"
+                                checked={isDefault(v)}
+                                onChange={() => makeDefault(v)}
+                                aria-label={`Make ${variationLabel(v)} the default`}
+                              />
+                            </td>
+                            <td className="p-2 text-center">
+                              <Checkbox
+                                checked={enabled(v)}
+                                onCheckedChange={(on) =>
+                                  setVariation(i, { ...v, status: on ? "publish" : "private" })
+                                }
+                                aria-label={`Enable ${variationLabel(v)}`}
+                              />
+                            </td>
+                          </tr>
+                          {expanded === i && (
+                            <tr className="border-b bg-muted/20 last:border-b-0">
+                              <td />
+                              <td colSpan={6} className="p-3">
+                                <VariantDetails
+                                  variation={v}
+                                  set={(patch) => setVariation(i, { ...v, ...patch })}
+                                  units={units}
+                                  virtual={product.virtual}
+                                />
+                              </td>
+                            </tr>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </tbody>
+                  </table>
                 </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>
+      <TaxRules product={product} up={up} taxGroups={taxGroups} />
+
+      <ConfirmDialog
+        open={confirmSingle}
+        onOpenChange={setConfirmSingle}
+        title="Switch to a single product?"
+        description={`This removes ${variations.length} variant(s) and their stock and prices. The product keeps one price and one stock count.`}
+        confirmLabel="Remove variants"
+        onConfirm={() => {
+          up({ attributes: [], default_attributes: [] });
+          setVariations([]);
+          setMode("single");
+          setConfirmSingle(false);
+        }}
+      />
     </div>
   );
 }