@apptimate/ui 7.2.0 → 7.4.0

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

@@ -31,7 +31,7 @@ export interface ItemFormData {
   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;
+  has_stocks: boolean; is_taxable: boolean; is_returnable: boolean; is_discountable: boolean; allow_phantom_bom: boolean;
   weight: string; weight_unit: string; dimensions: string;
   attributes: { name: string; values: string[] }[];
   // Page 3: Variants
@@ -56,7 +56,7 @@ export const emptyFormData: ItemFormData = {
   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,
+  has_stocks: true, is_taxable: true, is_returnable: true, is_discountable: true, allow_phantom_bom: false,
   weight: "", weight_unit: "", dimensions: "",
   attributes: [{ name: "", values: [] }],
   variants: [],
@@ -314,8 +314,8 @@ export default function ItemFormWizard({
                         setFormData(p => ({ ...p, attributes: newAttrs }));
                       }}
                       className={`p-2.5 rounded-lg transition-colors mt-0.5 ${isEditing
-                          ? "text-gray-300 cursor-not-allowed"
-                          : "text-gray-400 hover:text-danger-alt hover:bg-danger-50"
+                        ? "text-gray-300 cursor-not-allowed"
+                        : "text-gray-400 hover:text-danger-alt hover:bg-danger-50"
                         }`}
                     >
                       <Trash size={16} />
@@ -336,6 +336,7 @@ export default function ItemFormWizard({
             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 }))}
+            disabled={formData.allow_phantom_bom}
           />
           <Checkbox
             label={<span className="flex items-center gap-1.5">Available for Sale <HintIcon text="Can be sold to customers" /></span>}
@@ -351,66 +352,88 @@ export default function ItemFormWizard({
             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}
+            disabled={formData.allow_phantom_bom || (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 }))}
+            disabled={formData.allow_phantom_bom}
           />
           <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 }))}
+            disabled={formData.allow_phantom_bom}
           />
           <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 }))}
+            disabled={formData.allow_phantom_bom}
+          />
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Allow Phantom BOM <HintIcon text="Can be used as a finished good in a Phantom BOM" /></span>}
+            checked={formData.allow_phantom_bom}
+            onChange={(e: any) => setFormData((p) => {
+              const checked = e.target.checked;
+              if (checked) {
+                return {
+                  ...p,
+                  allow_phantom_bom: true,
+                  is_available_purchase: false,
+                  has_stocks: false,
+                  is_taxable: false,
+                  is_returnable: false,
+                  is_discountable: false,
+                };
+              }
+              return { ...p, allow_phantom_bom: false };
+            })}
           />
         </div>
       </div>
 
-        <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}
-              />
-              <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}
-              />
-              <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}
-              />
-              <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 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}
+            />
+            <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}
+            />
+            <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}
+            />
+            <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>
@@ -507,7 +530,10 @@ export default function ItemFormWizard({
 
   const generateCombinations = useCallback(() => {
     const validAttributes = formData.attributes.filter(a => a.name && a.values.length > 0);
-    if (validAttributes.length === 0) return;
+    if (validAttributes.length === 0) {
+      setFormData(p => p.variants.length > 0 ? { ...p, variants: [] } : p);
+      return;
+    }
 
     let combinations: any[] = [{}];
     validAttributes.forEach((attr) => {
@@ -523,28 +549,60 @@ export default function ItemFormWizard({
       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",
-        min_sales_price: formData.min_sales_price || "0",
-        attribute_values: combo,
-      };
+    setFormData(p => {
+      const newVariants: VariantRow[] = combinations.map((combo) => {
+        const variantName = Object.values(combo).join(" - ");
+
+        const existingVariant = p.variants.find((v) => {
+          // Primary match: exact attribute_values match
+          if (v.attribute_values && Object.keys(v.attribute_values).length > 0) {
+            const comboKeys = Object.keys(combo);
+            const vKeys = Object.keys(v.attribute_values);
+            if (comboKeys.length === vKeys.length && comboKeys.every(k => v.attribute_values[k] === combo[k])) {
+              return true;
+            }
+          }
+          // Fallback: match by variant_name
+          if (v.variant_name && v.variant_name === variantName) return true;
+          return false;
+        });
+
+        if (existingVariant) {
+          return { ...existingVariant, variant_name: variantName, attribute_values: combo };
+        }
+
+        return {
+          variant_name: variantName,
+          sku: "",
+          barcode: "",
+          sale_price: p.sale_price || "0",
+          cost_price: p.cost_price || "0",
+          min_sales_price: p.min_sales_price || "0",
+          attribute_values: combo,
+        };
+      });
+
+      if (p.variants.length !== newVariants.length) {
+        return { ...p, variants: newVariants };
+      }
+
+      const hasChanges = newVariants.some((v, idx) => v !== p.variants[idx]);
+      if (hasChanges) {
+        return { ...p, variants: newVariants };
+      }
+
+      return p;
     });
+  }, [formData.attributes, setFormData]);
 
-    setFormData(p => ({ ...p, variants: newVariants }));
-  }, [formData.attributes, formData.sale_price, formData.cost_price, setFormData]);
+  const attributesStr = JSON.stringify(formData.attributes);
 
-  // Auto-generate variants on step 2 if empty
+  // Auto-generate variants on step 2
   React.useEffect(() => {
-    if (step === 2 && formData.has_variants && formData.variants.length === 0) {
+    if (step === 2 && formData.has_variants) {
       generateCombinations();
     }
-  }, [step, formData.has_variants, formData.variants.length, generateCombinations]);
+  }, [step, formData.has_variants, attributesStr, generateCombinations]);
 
   const renderPage3 = () => (
     <div className="space-y-5 animate-fade-in">