@apptimate/ui 3.4.0 → 3.6.0

package/src/common-components/item-wizard/ItemFormWizard.tsx

@@ -0,0 +1,705 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { Input, Select, Button, WizardModal, Checkbox, HintIcon, TagsInput } from "@apptimate/ui";
+import { CategoryPicker, BrandPicker } from "../pickers";
+import { UomPicker } from "../pickers/UomPicker";
+import { ChevronLeft, ChevronRight, Settings, Trash, Trash2, Plus } from "lucide-react";
+import SkuConfigModal, { generateSkuPreview } from "./SkuConfigModal";
+import { getInventorySetting, cn } from "@apptimate/core-lib";
+
+// ── Types ──
+export interface ItemFormData {
+  // Page 1: Basic
+  name: string; sku: string; barcode: string;
+  category_id: string; category_name: string;
+  brand_id: string; brand_name: string;
+  description: string;
+  sale_price: string; cost_price: string;
+  has_variants: boolean; tracking_type: string; valuation_method: string;
+  // Page 2: Stock & Config
+  uom_id: string; uom_name: string;
+  purchase_uom_id: string; sales_uom_id: string;
+  purchase_uom_conversion: string; sales_uom_conversion: string;
+  min_stock_level: string; max_stock_level: string;
+  reorder_point: string; reorder_qty: string; lead_time_days: string;
+  is_available_purchase: boolean; is_available_sell: boolean; is_available_ecommerce: boolean;
+  has_stocks: boolean; is_taxable: boolean; is_returnable: boolean; is_discountable: boolean;
+  weight: string; weight_unit: string; dimensions: string;
+  attributes: { name: string; values: string[] }[];
+  // Page 3: Variants
+  variants: VariantRow[];
+  can_edit_variants?: boolean;
+}
+
+export interface VariantRow {
+  id?: number; sku: string; variant_name: string; barcode: string;
+  sale_price: string; cost_price: string; attribute_values: Record<string, string>;
+}
+
+export const emptyFormData: ItemFormData = {
+  name: "", sku: "", barcode: "",
+  category_id: "", category_name: "",
+  brand_id: "", brand_name: "",
+  description: "",
+  sale_price: "0", cost_price: "0",
+  has_variants: false, tracking_type: "none", valuation_method: "fifo",
+  uom_id: "", uom_name: "", purchase_uom_id: "", sales_uom_id: "",
+  purchase_uom_conversion: "1", sales_uom_conversion: "1",
+  min_stock_level: "", max_stock_level: "",
+  reorder_point: "", reorder_qty: "", lead_time_days: "",
+  is_available_purchase: true, is_available_sell: true, is_available_ecommerce: false,
+  has_stocks: true, is_taxable: true, is_returnable: true, is_discountable: true,
+  weight: "", weight_unit: "", dimensions: "",
+  attributes: [{ name: "", values: [] }],
+  variants: [],
+  can_edit_variants: true,
+};
+
+interface Props {
+  formData: ItemFormData;
+  setFormData: React.Dispatch<React.SetStateAction<ItemFormData>>;
+  uoms: any[];
+  onSubmit: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+  isEditing: boolean;
+}
+
+
+export default function ItemFormWizard({
+  formData, setFormData, uoms, onSubmit, isOpen, onClose, isEditing,
+}: Props) {
+  const [step, setStep] = useState(0);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setStep(0);
+    }
+  }, [isOpen]);
+
+  const showStep3 = formData.has_variants || formData.is_available_purchase || formData.is_available_sell;
+  React.useEffect(() => {
+    if (!showStep3 && step === 2) {
+      setStep(1);
+    }
+  }, [showStep3, step]);
+
+  const [skuModalOpen, setSkuModalOpen] = useState(false);
+  const [activeVariantSkuIndex, setActiveVariantSkuIndex] = useState<number | null>(null);
+  const [skuConfig, setSkuConfig] = useState<any>({
+    parts: [
+      { type: "category", length: 3, custom_value: "", separator: "-" },
+      { type: "name", length: 3, custom_value: "", separator: "-" },
+    ],
+    sequence_length: 4,
+    current_sequence: 1,
+  });
+  
+  const fetchSkuConfig = useCallback(() => {
+    getInventorySetting("sku_generation_rule_v3").then((res) => {
+      if (res.is_success && res.result) {
+        setSkuConfig(res.result);
+      }
+    }).catch(() => {});
+  }, []);
+
+  // Fetch initial config
+  React.useEffect(() => {
+    fetchSkuConfig();
+  }, [fetchSkuConfig]);
+
+  // Refetch config when modal closes (in case they changed the formula or sequence)
+  React.useEffect(() => {
+    if (!skuModalOpen) fetchSkuConfig();
+  }, [skuModalOpen, fetchSkuConfig]);
+
+  const update = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, [setFormData]);
+
+  React.useEffect(() => {
+    if (formData.tracking_type === 'serial' && formData.valuation_method !== 'specific') {
+      update('valuation_method', 'specific');
+    } else if (formData.tracking_type !== 'serial' && formData.valuation_method === 'specific') {
+      update('valuation_method', 'fifo');
+    }
+  }, [formData.tracking_type, formData.valuation_method, update]);
+
+  const canNext = (): boolean => {
+    if (step === 0) return Boolean(formData.name && formData.sku && formData.category_id && formData.uom_id);
+    return true;
+  };
+
+  // No need for renderStepper, it is handled by WizardModal
+
+  // ═══════════════════════════════════════
+  // PAGE 1: Basic Information
+  // ═══════════════════════════════════════
+  const renderPage1 = () => (
+    <div className="space-y-4 animate-fade-in">
+      <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+        <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Basic Info</p>
+        <div className="space-y-4">
+          {/* Row 1: Name & Category */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input label="Item Name" isRequired placeholder="Enter item name" value={formData.name} onChange={(e) => update("name", e.target.value)} />
+            <CategoryPicker label="Category" isRequired value={formData.category_id || null} displayValue={formData.category_name || null}
+              onChange={(cat: any) => setFormData((p) => ({ ...p, category_id: cat ? String(cat.id) : "", category_name: cat?.name || "" }))} />
+          </div>
+          {/* Row 2: Brand & SKU */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <BrandPicker label="Brand" value={formData.brand_id || null} displayValue={formData.brand_name || null}
+              onChange={(brand: any) => setFormData((p) => ({ ...p, brand_id: brand ? String(brand.id) : "", brand_name: brand?.name || "" }))} />
+            <div className="flex flex-col gap-1.5 w-full">
+              <div className="flex items-center justify-between">
+                <label className="text-[11px] font-normal text-gray-500 tracking-normal apptimate-input-label">
+                  SKU <span className="text-danger-alt ml-0.5">*</span>
+                </label>
+                <button 
+                  type="button"
+                  onClick={() => setSkuModalOpen(true)}
+                  className="text-[11px] font-semibold text-gray-900 hover:text-gray-700 transition-colors"
+                >
+                  Generate
+                </button>
+              </div>
+              <Input 
+                placeholder="e.g. ITM-001" 
+                value={formData.sku} 
+                onChange={(e) => update("sku", e.target.value)} 
+              />
+            </div>
+          </div>
+
+          {/* Row 3: Description */}
+          <div className="flex flex-col gap-1.5 w-full">
+            <label className="text-[11px] font-normal text-gray-500 tracking-normal apptimate-input-label">
+              DESCRIPTION
+            </label>
+            <textarea
+              className="w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled min-h-[100px] resize-y"
+              placeholder="Optional item description..."
+              value={formData.description}
+              onChange={(e) => update("description", e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+      {/* Units of Measure & Physical Attributes */}
+      <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+        <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Units of Measure & Physical Attributes</p>
+        <div className="space-y-3">
+          <UomPicker label="Stocking UOM (Base)" isRequired value={formData.uom_id || null} displayValue={formData.uom_name || null} baseUnitsOnly
+            onChange={(uom: any) => setFormData((p) => ({ ...p, uom_id: uom ? String(uom.id) : "", uom_name: uom?.name || "" }))} />
+          
+          <div className="grid grid-cols-3 gap-3">
+            <Input label="Weight" type="number" placeholder="0" value={formData.weight} onChange={(e) => update("weight", e.target.value)} />
+            <Select label="Weight Unit" options={[{ label: "—", value: "" }, { label: "kg", value: "kg" }, { label: "g", value: "g" }, { label: "lb", value: "lb" }, { label: "oz", value: "oz" }]}
+              value={formData.weight_unit} onChange={(e) => update("weight_unit", e.target.value)} />
+            <Input label="Dimensions (LxWxH)" placeholder="e.g. 10x5x3" value={formData.dimensions} onChange={(e) => update("dimensions", e.target.value)} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  // ═══════════════════════════════════════
+  // PAGE 2: Stock & Configuration
+  // ═══════════════════════════════════════
+  const renderPage2 = () => (
+    <div className="space-y-5 animate-fade-in">
+      {/* Tracking */}
+      <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+        <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Item Type</p>
+        <div className="flex flex-wrap gap-2">
+          <button 
+            type="button"
+            disabled={isEditing && formData.can_edit_variants === false}
+            title={isEditing && formData.can_edit_variants === false ? "Cannot change item type while transactions exist" : ""}
+            onClick={() => setFormData((p) => ({ ...p, has_variants: false }))}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 ${
+              !formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+            } ${isEditing && formData.can_edit_variants === false ? "opacity-60 cursor-not-allowed" : ""}`}
+          >
+            Standard Item (No Variants)
+          </button>
+          <button 
+            type="button"
+            disabled={isEditing && formData.can_edit_variants === false}
+            title={isEditing && formData.can_edit_variants === false ? "Cannot change item type while transactions exist" : ""}
+            onClick={() => setFormData((p) => ({ 
+              ...p, 
+              has_variants: true,
+              attributes: p.attributes.length === 0 ? [{ name: "", values: [] }] : p.attributes 
+            }))}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 flex items-center gap-1.5 ${
+              formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+            } ${isEditing && formData.can_edit_variants === false ? "opacity-60 cursor-not-allowed" : ""}`}
+          >
+            Item with Variants
+            <HintIcon text="Use this if the item comes in multiple options (e.g., sizes, colors)." />
+          </button>
+        </div>
+      </div>
+
+      {/* Variant Attributes (Only if has_variants is true) */}
+      {formData.has_variants && (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <div className="flex items-center justify-between mb-3">
+            <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Variant Attributes</p>
+            <button 
+              type="button"
+              disabled={isEditing && formData.can_edit_variants === false}
+              title={isEditing && formData.can_edit_variants === false ? "Cannot add attributes while transactions exist" : ""}
+              onClick={() => setFormData(p => ({ ...p, attributes: [...p.attributes, { name: "", values: [] }] }))}
+              className={`flex items-center gap-1.5 text-[12px] font-semibold transition-colors ${
+                isEditing && formData.can_edit_variants === false ? "text-gray-400 cursor-not-allowed" : "text-primary-600 hover:text-primary-700"
+              }`}
+            >
+              <Plus size={14} /> Add Attribute
+            </button>
+          </div>
+          
+          {formData.attributes.length === 0 ? (
+             <div className="text-center py-4 text-gray-400 text-[13px]">No attributes defined. Click "Add Attribute" to add variants like Color or Size.</div>
+          ) : (
+            <div className="space-y-4">
+              {formData.attributes.map((attr, idx) => (
+                <div key={idx} className="flex flex-col sm:flex-row items-start gap-4">
+                  <div className="w-full sm:w-[250px]">
+                    <Input 
+                      placeholder="e.g. Size, Color" 
+                      value={attr.name}
+                      disabled={isEditing && formData.can_edit_variants === false}
+                      onChange={(e) => {
+                        const newAttrs = [...formData.attributes];
+                        newAttrs[idx] = { ...newAttrs[idx], name: e.target.value };
+                        setFormData(p => ({ ...p, attributes: newAttrs }));
+                      }}
+                    />
+                  </div>
+                  <div className="flex-1 flex items-start gap-2 w-full">
+                    <TagsInput 
+                      values={attr.values}
+                      disabled={isEditing && formData.can_edit_variants === false}
+                      onChange={(values) => {
+                        const newAttrs = [...formData.attributes];
+                        newAttrs[idx] = { ...newAttrs[idx], values };
+                        setFormData(p => ({ ...p, attributes: newAttrs }));
+                      }}
+                      placeholder="Type values (e.g. S, M, L) and press Enter"
+                    />
+                    <button
+                      type="button"
+                      disabled={isEditing && formData.can_edit_variants === false}
+                      title={isEditing && formData.can_edit_variants === false ? "Cannot remove attributes while transactions exist" : ""}
+                      onClick={() => {
+                        const newAttrs = formData.attributes.filter((_, i) => i !== idx);
+                        setFormData(p => ({ ...p, attributes: newAttrs }));
+                      }}
+                      className={`p-2.5 rounded-lg transition-colors mt-0.5 ${
+                        isEditing && formData.can_edit_variants === false 
+                          ? "text-gray-300 cursor-not-allowed" 
+                          : "text-gray-400 hover:text-danger-alt hover:bg-danger-50"
+                      }`}
+                    >
+                      <Trash size={16} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Availability & Settings */}
+      <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+        <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Availability & Settings</p>
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-y-3 gap-x-4">
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Available for Purchase <HintIcon text="Can be purchased from suppliers" /></span>} 
+            checked={formData.is_available_purchase} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_purchase: e.target.checked }))} 
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Available for Sale <HintIcon text="Can be sold to customers" /></span>} 
+            checked={formData.is_available_sell} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_sell: e.target.checked }))} 
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Available on E-Commerce <HintIcon text="List on online store" /></span>} 
+            checked={formData.is_available_ecommerce} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_ecommerce: e.target.checked }))} 
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Track Stock <HintIcon text="Monitor inventory levels" /></span>} 
+            checked={formData.has_stocks} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, has_stocks: e.target.checked }))} 
+            disabled={isEditing && formData.can_edit_variants === false}
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Taxable <HintIcon text="Subject to taxes" /></span>} 
+            checked={formData.is_taxable} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_taxable: e.target.checked }))} 
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Returnable <HintIcon text="Eligible for returns" /></span>} 
+            checked={formData.is_returnable} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_returnable: e.target.checked }))} 
+          />
+          <Checkbox 
+            label={<span className="flex items-center gap-1.5">Discountable <HintIcon text="Eligible for discounts" /></span>} 
+            checked={formData.is_discountable} 
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_discountable: e.target.checked }))} 
+          />
+        </div>
+      </div>
+
+      {formData.has_stocks && (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Tracking Options</p>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="tracking_type" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.tracking_type === 'none'}
+                onChange={() => setFormData(p => ({ ...p, tracking_type: 'none' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span>None</span>
+            </label>
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="tracking_type" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.tracking_type === 'batch'}
+                onChange={() => setFormData(p => ({ ...p, tracking_type: 'batch' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span className="flex items-center gap-1.5">Batches <HintIcon text="Track items by manufacturing batch or lot" /></span>
+            </label>
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="tracking_type" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.tracking_type === 'serial'}
+                onChange={() => setFormData(p => ({ ...p, tracking_type: 'serial' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span className="flex items-center gap-1.5">Serial Numbers <HintIcon text="Track each individual unit with a unique serial number" /></span>
+            </label>
+          </div>
+
+        </div>
+      )}
+
+      {formData.has_stocks && formData.tracking_type !== 'serial' && (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Valuation Method (COGS)</p>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="valuation_method" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.valuation_method === 'fifo'}
+                onChange={() => setFormData(p => ({ ...p, valuation_method: 'fifo' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span>First-In, First-Out (FIFO)</span>
+            </label>
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="valuation_method" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.valuation_method === 'lifo'}
+                onChange={() => setFormData(p => ({ ...p, valuation_method: 'lifo' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span>Last-In, First-Out (LIFO)</span>
+            </label>
+            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+              <input 
+                type="radio" 
+                name="valuation_method" 
+                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                checked={formData.valuation_method === 'mac'}
+                onChange={() => setFormData(p => ({ ...p, valuation_method: 'mac' }))}
+                disabled={isEditing && formData.can_edit_variants === false}
+              />
+              <span className="flex items-center gap-1.5">Moving Average Cost (MAC)</span>
+            </label>
+          </div>
+        </div>
+      )}
+
+      {/* Stock Levels */}
+      {formData.has_stocks && (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Stock Levels</p>
+          <div className="grid grid-cols-2 gap-3">
+            <Input label="Min Qty" type="number" placeholder="0" value={formData.min_stock_level} onChange={(e) => update("min_stock_level", e.target.value)} />
+            <Input label="Max Qty" type="number" placeholder="0" value={formData.max_stock_level} onChange={(e) => update("max_stock_level", e.target.value)} />
+          </div>
+          <div className="grid grid-cols-3 gap-3 mt-3">
+            <Input label="Reorder Level" type="number" placeholder="0" value={formData.reorder_point} onChange={(e) => update("reorder_point", e.target.value)} />
+            <Input label="Reorder Qty" type="number" placeholder="0" value={formData.reorder_qty} onChange={(e) => update("reorder_qty", e.target.value)} />
+            <Input label="Lead Time (days)" type="number" placeholder="0" value={formData.lead_time_days} onChange={(e) => update("lead_time_days", e.target.value)} />
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+
+  // ═══════════════════════════════════════
+  // PAGE 3: Variants
+  // ═══════════════════════════════════════
+
+  const addVariantRow = () => {
+    setFormData((p) => ({
+      ...p,
+      variants: [...p.variants, { sku: "", variant_name: "", barcode: "", sale_price: "", cost_price: "", attribute_values: {} }],
+    }));
+  };
+
+  const updateVariant = (idx: number, key: string, value: any) => {
+    setFormData((p) => {
+      const variants = [...p.variants];
+      variants[idx] = { ...variants[idx], [key]: value };
+      return { ...p, variants };
+    });
+  };
+
+  const removeVariant = (idx: number) => {
+    setFormData((p) => ({ ...p, variants: p.variants.filter((_, i) => i !== idx) }));
+  };
+
+  const copyToAll = (key: keyof VariantRow) => {
+    if (formData.variants.length <= 1) return;
+    const val = formData.variants[0][key];
+    setFormData(p => {
+      const newVariants = p.variants.map((v, i) => i === 0 ? v : { ...v, [key]: val });
+      return { ...p, variants: newVariants };
+    });
+  };
+
+  const generateCombinations = useCallback(() => {
+    const validAttributes = formData.attributes.filter(a => a.name && a.values.length > 0);
+    if (validAttributes.length === 0) return;
+
+    let combinations: any[] = [{}];
+    validAttributes.forEach((attr) => {
+      const newCombinations: any[] = [];
+      combinations.forEach((combo) => {
+        attr.values.forEach((value) => {
+          newCombinations.push({
+            ...combo,
+            [attr.name]: value,
+          });
+        });
+      });
+      combinations = newCombinations;
+    });
+
+    const newVariants: VariantRow[] = combinations.map((combo) => {
+      const variantName = Object.values(combo).join(" - ");
+      return {
+        variant_name: variantName,
+        sku: "",
+        barcode: "",
+        sale_price: formData.sale_price || "0",
+        cost_price: formData.cost_price || "0",
+        attribute_values: combo,
+      };
+    });
+
+    setFormData(p => ({ ...p, variants: newVariants }));
+  }, [formData.attributes, formData.sale_price, formData.cost_price, setFormData]);
+
+  // Auto-generate variants on step 2 if empty
+  React.useEffect(() => {
+    if (step === 2 && formData.has_variants && formData.variants.length === 0) {
+      generateCombinations();
+    }
+  }, [step, formData.has_variants, formData.variants.length, generateCombinations]);
+
+  const renderPage3 = () => (
+    <div className="space-y-5 animate-fade-in">
+      {!formData.has_variants ? (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Item Pricing</p>
+          <div className="grid grid-cols-2 gap-4">
+            {formData.is_available_sell && (
+              <Input label="Sale Price" type="number" placeholder="0.00" value={formData.sale_price} onChange={(e) => update("sale_price", e.target.value)} />
+            )}
+            {formData.is_available_purchase && (
+              <Input label="Cost Price" type="number" placeholder="0.00" value={formData.cost_price} onChange={(e) => update("cost_price", e.target.value)} />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
+          <div className="flex items-center justify-between mb-3">
+            <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Variants ({formData.variants.length})</p>
+            <div className="flex items-center gap-4">
+            </div>
+          </div>
+          {formData.variants.length === 0 ? (
+            <div className="text-center py-6 text-gray-400 text-[13px]">No variants added yet. Please go back to the previous step to add variant attributes.</div>
+          ) : (
+            <div className="overflow-x-auto rounded-lg border border-gray-200">
+              <table className="w-full text-left text-sm text-gray-600">
+                <thead className="bg-gray-50 text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                  <tr>
+                    <th className="px-4 py-3 font-medium">Variant Name *</th>
+                    <th className="px-4 py-3 font-medium align-top">
+                      <div className="flex flex-col items-start gap-1">
+                        <span>SKU *</span>
+                        {formData.variants.length > 0 && (
+                          <button type="button" onClick={() => { setActiveVariantSkuIndex(-1); setSkuModalOpen(true); }} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Generate All</button>
+                        )}
+                      </div>
+                    </th>
+                    <th className="px-4 py-3 font-medium align-top">Barcode</th>
+                    {formData.is_available_sell && (
+                      <th className="px-4 py-3 font-medium w-[140px] align-top">
+                        <div className="flex flex-col items-start gap-1">
+                          <span>Sale Price</span>
+                          {formData.variants.length > 1 && (
+                            <button type="button" onClick={() => copyToAll("sale_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                          )}
+                        </div>
+                      </th>
+                    )}
+                    {formData.is_available_purchase && (
+                      <th className="px-4 py-3 font-medium w-[140px] align-top">
+                        <div className="flex flex-col items-start gap-1">
+                          <span>Cost Price</span>
+                          {formData.variants.length > 1 && (
+                            <button type="button" onClick={() => copyToAll("cost_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                          )}
+                        </div>
+                      </th>
+                    )}
+                    <th className="px-4 py-3 text-center w-12 align-top"></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100 bg-white">
+                  {formData.variants.map((v, idx) => (
+                    <tr key={idx} className="hover:bg-gray-50/50 transition-colors">
+                      <td className="p-2 min-w-[200px] align-top">
+                        <Input placeholder="e.g. Gold 22K" value={v.variant_name} onChange={(e) => updateVariant(idx, "variant_name", e.target.value)} />
+                      </td>
+                      <td className="p-2 min-w-[200px] align-top">
+                        <Input placeholder="e.g. ITM-001" value={v.sku} onChange={(e) => updateVariant(idx, "sku", e.target.value)} />
+                      </td>
+                      <td className="p-2 min-w-[200px] align-top">
+                        <Input placeholder="Leave empty to auto-generate" value={v.barcode} onChange={(e) => updateVariant(idx, "barcode", e.target.value)} />
+                      </td>
+                      {formData.is_available_sell && (
+                        <td className="p-2 min-w-[120px] align-top">
+                          <Input type="number" placeholder="0.00" value={v.sale_price} onChange={(e) => updateVariant(idx, "sale_price", e.target.value)} />
+                        </td>
+                      )}
+                      {formData.is_available_purchase && (
+                        <td className="p-2 min-w-[120px] align-top">
+                          <Input type="number" placeholder="0.00" value={v.cost_price} onChange={(e) => updateVariant(idx, "cost_price", e.target.value)} />
+                        </td>
+                      )}
+                      <td className="p-2 text-center align-middle w-12">
+                        <button 
+                          type="button" 
+                          disabled={isEditing && formData.can_edit_variants === false}
+                          title={isEditing && formData.can_edit_variants === false ? "Cannot delete variants while transactions exist" : ""}
+                          onClick={() => removeVariant(idx)} 
+                          className={cn(
+                            "p-1.5 rounded-lg transition-colors mt-1",
+                            isEditing && formData.can_edit_variants === false
+                              ? "text-gray-300 cursor-not-allowed"
+                              : "text-gray-400 hover:text-danger-500 hover:bg-danger-50"
+                          )}
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Render ──
+  const wizardSteps = [
+    { key: "basic", label: "Basic Info", num: 1 },
+    { key: "stock", label: "Stock & Config", num: 2 },
+    ...(showStep3 ? [{ key: "variants", label: formData.has_variants ? "Variants" : "Pricing", num: 3 }] : []),
+  ];
+
+  return (
+    <>
+      <WizardModal
+        isOpen={isOpen}
+        onClose={onClose}
+        title={isEditing ? "Edit Item" : "Add New Item"}
+        size="xl"
+        steps={wizardSteps}
+        currentStep={step}
+        onStepChange={setStep}
+        canNext={canNext}
+        onSubmit={onSubmit}
+        cancelLabel="Cancel"
+        submitLabel={isEditing ? "Update Item" : "Create Item"}
+      >
+        {step === 0 && renderPage1()}
+        {step === 1 && renderPage2()}
+        {step === 2 && renderPage3()}
+      </WizardModal>
+      <SkuConfigModal
+        isOpen={skuModalOpen}
+        onClose={() => {
+          setSkuModalOpen(false);
+          setActiveVariantSkuIndex(null);
+        }}
+        onGenerate={(sku, newConfig) => {
+          if (newConfig) setSkuConfig(newConfig);
+          if (activeVariantSkuIndex === -1 && Array.isArray(sku)) {
+            setFormData(p => {
+              const newVariants = [...p.variants];
+              sku.forEach((s, idx) => {
+                if (newVariants[idx]) newVariants[idx].sku = s;
+              });
+              return { ...p, variants: newVariants };
+            });
+            setActiveVariantSkuIndex(null);
+          } else if (activeVariantSkuIndex !== null && activeVariantSkuIndex >= 0) {
+            updateVariant(activeVariantSkuIndex, "sku", sku);
+            setActiveVariantSkuIndex(null);
+          } else {
+            update("sku", sku);
+          }
+        }}
+        categoryName={formData.category_name}
+        categoryId={formData.category_id ? Number(formData.category_id) : undefined}
+        brandName={formData.brand_name}
+        itemName={formData.name}
+        itemNames={activeVariantSkuIndex === -1 ? formData.variants.map(() => formData.name) : undefined}
+        itemAttributes={activeVariantSkuIndex !== null && activeVariantSkuIndex >= 0 ? formData.variants[activeVariantSkuIndex].attribute_values : undefined}
+        itemsAttributes={activeVariantSkuIndex === -1 ? formData.variants.map(v => v.attribute_values) : undefined}
+        isVariant={activeVariantSkuIndex !== null}
+      />
+    </>
+  );
+}