From 7cd9ab5e0c89ed99e0c8232b211264181c626ecc Mon Sep 17 00:00:00 2001
From: Mahir-Mohamed <mahirmohammed01@gmail.com>
Date: Tue, 11 Aug 2026 18:19:41 +0530
Subject: [PATCH 1/3] fix: improve product form validation and navigation
 guards

---
 src/components/customs/CategoryTreeSelect.tsx |  31 ++-
 src/components/customs/Select.tsx             |   3 +-
 .../components/DynamicAttributeRenderer.tsx   |  11 +-
 .../components/DynamicAttributesSection.tsx   |   3 +
 .../components/ProductAttributeGroup.tsx      |   3 +
 src/features/product/pages/NewProduct.tsx     | 245 +++++++++++++++---
 6 files changed, 250 insertions(+), 46 deletions(-)

diff --git a/src/components/customs/CategoryTreeSelect.tsx b/src/components/customs/CategoryTreeSelect.tsx
index 8fe1016..bd16b4d 100644
--- a/src/components/customs/CategoryTreeSelect.tsx
+++ b/src/components/customs/CategoryTreeSelect.tsx
@@ -19,6 +19,7 @@ interface CategoryNode {
 interface CategoryTreeSelectProps {
   value?: string;
   onChange: (categoryId: string) => void;
+  onBlur?: () => void;
   placeholder?: string;
   error?: string;
   disabled?: boolean;
@@ -60,6 +61,7 @@ function buildCategoryTree(categories: any[]): CategoryNode[] {
 export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
   value,
   onChange,
+  onBlur,
   placeholder = 'Select Category...',
   error,
   disabled = false,
@@ -68,7 +70,7 @@ export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState('');
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
-  
+
   // Quick Create Drawer state
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [newCatName, setNewCatName] = useState('');
@@ -86,12 +88,17 @@ export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
   useEffect(() => {
     const handleOutsideClick = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
+        setIsOpen((prev) => {
+          if (prev) {
+            onBlur?.();
+          }
+          return false;
+        });
       }
     };
     document.addEventListener('mousedown', handleOutsideClick);
     return () => document.removeEventListener('mousedown', handleOutsideClick);
-  }, []);
+  }, [onBlur]);
 
   const categoryTree = useMemo(() => buildCategoryTree(categories), [categories]);
 
@@ -138,7 +145,7 @@ export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
 
       const createdId = created?.id || created?.data?.id;
       notify.success(`Category "${newCatName}" created successfully!`);
-      
+
       await fetchCategories();
       if (createdId) {
         onChange(createdId);
@@ -178,11 +185,10 @@ export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
       <div key={node.id} className="select-none">
         <div
           onClick={() => handleSelect(node.id)}
-          className={`flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium cursor-pointer transition-colors ${
-            isSelected
-              ? 'bg-primary/10 text-primary font-bold'
-              : 'text-gray-700 hover:bg-gray-100'
-          }`}
+          className={`flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium cursor-pointer transition-colors ${isSelected
+            ? 'bg-primary/10 text-primary font-bold'
+            : 'text-gray-700 hover:bg-gray-100'
+            }`}
           style={{ paddingLeft: `${node.depth * 16 + 12}px` }}
         >
           <div className="flex items-center gap-2 min-w-0">
@@ -233,11 +239,10 @@ export const CategoryTreeSelect: React.FC<CategoryTreeSelectProps> = ({
       {/* Trigger Button */}
       <div
         onClick={() => !disabled && setIsOpen(!isOpen)}
-        className={`w-full border rounded-lg px-3 py-2.5 text-sm flex items-center justify-between bg-white cursor-pointer transition-all ${
-          disabled ? 'bg-gray-50 opacity-60 cursor-not-allowed border-gray-200' :
+        className={`w-full border rounded-lg px-3 py-2.5 text-sm flex items-center justify-between bg-white cursor-pointer transition-all ${disabled ? 'bg-gray-50 opacity-60 cursor-not-allowed border-gray-200' :
           isOpen ? 'border-primary ring-2 ring-primary/20' :
-          error ? 'border-red-300' : 'border-gray-200 hover:border-gray-300'
-        }`}
+            error ? 'border-red-300' : 'border-gray-200 hover:border-gray-300'
+          }`}
       >
         <div className="flex items-center gap-2 truncate">
           <Folder className={`w-4 h-4 ${selectedCategory ? 'text-primary' : 'text-gray-400'}`} />
diff --git a/src/components/customs/Select.tsx b/src/components/customs/Select.tsx
index 358848d..8c6883e 100644
--- a/src/components/customs/Select.tsx
+++ b/src/components/customs/Select.tsx
@@ -77,10 +77,11 @@ export function Select({
         dropdownRef.current?.contains(e.target as Node)
       ) return;
       setIsOpen(false);
+      onBlur?.({ target: { name } } as any);
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen]);
+  }, [isOpen, name, onBlur]);
 
   const handleToggle = () => {
     if (disabled) return;
diff --git a/src/features/product/components/DynamicAttributeRenderer.tsx b/src/features/product/components/DynamicAttributeRenderer.tsx
index 7557beb..c2fb84b 100644
--- a/src/features/product/components/DynamicAttributeRenderer.tsx
+++ b/src/features/product/components/DynamicAttributeRenderer.tsx
@@ -23,6 +23,7 @@ interface DynamicAttributeRendererProps {
   attribute: Attribute;
   value: any;
   onChange: (value: any) => void;
+  onBlur?: () => void;
   error?: string;
   touched?: boolean;
   readOnly?: boolean;
@@ -32,6 +33,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
   attribute,
   value,
   onChange,
+  onBlur,
   error,
   touched,
   readOnly,
@@ -47,6 +49,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
           <textarea
             value={value || ''}
             onChange={(e) => onChange(e.target.value)}
+            onBlur={onBlur}
             placeholder={`Enter ${attribute.name}`}
             rows={3}
             className={`${inputClass} resize-none`}
@@ -64,6 +67,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
               const val = e.target.value;
               onChange(val === '' ? undefined : Number(val));
             }}
+            onBlur={onBlur}
             placeholder={`Enter ${attribute.name}`}
             className={inputClass}
             disabled={readOnly}
@@ -75,6 +79,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
             type="date"
             value={value || ''}
             onChange={(e) => onChange(e.target.value)}
+            onBlur={onBlur}
             className={inputClass}
             disabled={readOnly}
           />
@@ -87,6 +92,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
               const val = e.target.value;
               onChange(val === 'true' ? true : val === 'false' ? false : undefined);
             }}
+            onBlur={onBlur}
             disabled={readOnly}
           >
             <option value="">Select option</option>
@@ -101,6 +107,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
           <Select
             value={value || ''}
             onChange={(e) => onChange(e.target.value)}
+            onBlur={onBlur}
             disabled={readOnly}
           >
             <option value="">Select option</option>
@@ -119,9 +126,10 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
             updated = selectedValues.filter((v) => v !== optCode);
           }
           onChange(updated.join(','));
+          onBlur?.(); // trigger validation immediately
         };
         return (
-          <div className="space-y-2 border border-border rounded-lg p-3 bg-background/30">
+          <div className="space-y-2 border border-border rounded-lg p-3 bg-background/30" onBlur={onBlur}>
             {attribute.optionsList?.map((opt) => {
               const isChecked = selectedValues.includes(opt.code);
               return (
@@ -149,6 +157,7 @@ export const DynamicAttributeRenderer: React.FC<DynamicAttributeRendererProps> =
             type="text"
             value={value || ''}
             onChange={(e) => onChange(e.target.value)}
+            onBlur={onBlur}
             placeholder={`Enter ${attribute.name}`}
             className={inputClass}
             disabled={readOnly}
diff --git a/src/features/product/components/DynamicAttributesSection.tsx b/src/features/product/components/DynamicAttributesSection.tsx
index 0257808..8fcc96e 100644
--- a/src/features/product/components/DynamicAttributesSection.tsx
+++ b/src/features/product/components/DynamicAttributesSection.tsx
@@ -32,6 +32,7 @@ interface DynamicAttributesSectionProps {
   errors?: Record<string, any>;
   touched?: Record<string, any>;
   onAttributeChange: (code: string, value: any) => void;
+  onAttributeBlur?: (code: string) => void;
   onAddAttributeClick?: (group: any) => void;
   readOnly?: boolean;
 }
@@ -43,6 +44,7 @@ export const DynamicAttributesSection: React.FC<DynamicAttributesSectionProps> =
   errors = {},
   touched = {},
   onAttributeChange,
+  onAttributeBlur,
   onAddAttributeClick,
   readOnly,
 }) => {
@@ -91,6 +93,7 @@ export const DynamicAttributesSection: React.FC<DynamicAttributesSectionProps> =
           errors={errors}
           touched={touched}
           onAttributeChange={onAttributeChange}
+          onAttributeBlur={onAttributeBlur}
           onAddAttributeClick={onAddAttributeClick}
           readOnly={readOnly}
         />
diff --git a/src/features/product/components/ProductAttributeGroup.tsx b/src/features/product/components/ProductAttributeGroup.tsx
index 8b4ca95..f71155e 100644
--- a/src/features/product/components/ProductAttributeGroup.tsx
+++ b/src/features/product/components/ProductAttributeGroup.tsx
@@ -33,6 +33,7 @@ interface ProductAttributeGroupProps {
   errors?: Record<string, any>;
   touched?: Record<string, any>;
   onAttributeChange: (code: string, value: any) => void;
+  onAttributeBlur?: (code: string) => void;
   onAddAttributeClick?: (group: AttributeGroup) => void;
   readOnly?: boolean;
 }
@@ -43,6 +44,7 @@ export const ProductAttributeGroup: React.FC<ProductAttributeGroupProps> = ({
   errors = {},
   touched = {},
   onAttributeChange,
+  onAttributeBlur,
   onAddAttributeClick,
   readOnly,
 }) => {
@@ -106,6 +108,7 @@ export const ProductAttributeGroup: React.FC<ProductAttributeGroupProps> = ({
               attribute={attr}
               value={values[attr.code]}
               onChange={(val) => onAttributeChange(attr.code, val)}
+              onBlur={() => onAttributeBlur?.(attr.code)}
               error={errors[attr.code]}
               touched={touched[attr.code]}
               readOnly={readOnly}
diff --git a/src/features/product/pages/NewProduct.tsx b/src/features/product/pages/NewProduct.tsx
index 074e171..43384e8 100644
--- a/src/features/product/pages/NewProduct.tsx
+++ b/src/features/product/pages/NewProduct.tsx
@@ -28,6 +28,13 @@ import { Select } from '../../../components/customs/Select';
 import { Loader } from '../../../components/customs/Loader';
 import { CategoryTreeSelect } from '../../../components/customs/CategoryTreeSelect';
 
+export function isEmptyAttributeValue(val: any): boolean {
+  if (val === undefined || val === null || val === '') return true;
+  if (typeof val === 'string' && val.trim() === '') return true;
+  if (Array.isArray(val) && val.length === 0) return true;
+  return false;
+}
+
 export default function NewProduct() {
   const { id } = useParams<{ id?: string }>();
   const navigate = useNavigate();
@@ -198,6 +205,7 @@ export default function NewProduct() {
       setSelectedAttributeSetObj(null);
       setCustomAddedAttributes([]);
       formik.setFieldValue('attributes', {});
+      formik.setTouched({ ...formik.touched, attributes: {} });
       return;
     }
     setLoadingProduct(true);
@@ -206,8 +214,10 @@ export default function NewProduct() {
       setSelectedAttributeSetObj(setDetails);
       setCustomAddedAttributes([]);
       formik.setFieldValue('attributes', {});
-    } catch (err) {
-      notify.error('Failed to load attribute set details');
+      formik.setTouched({ ...formik.touched, attributes: {} });
+    } catch (err: any) {
+      console.error('Failed to load attribute set details:', err);
+      notify.error(`Failed to load attribute set details: ${err?.message || err}`);
     } finally {
       setLoadingProduct(false);
     }
@@ -398,7 +408,7 @@ export default function NewProduct() {
 
   // 3. Generate Validation Schema dynamically
   const dynamicValidationSchema = useMemo(() => {
-    return Yup.object().shape({
+    const shape: any = {
       name: Yup.string().required('Product name is required'),
       category: Yup.string().required('Category is required'),
       brand: Yup.string().required('Brand is required'),
@@ -406,8 +416,96 @@ export default function NewProduct() {
       status: Yup.string().oneOf(['active', 'pending', 'draft', 'disabled']),
       price: Yup.string(),
       stock: Yup.number().integer().min(0, 'Stock cannot be negative'),
-    });
-  }, []);
+    };
+
+    const attributeShape: any = {};
+    if (Array.isArray(filteredAttributesList)) {
+      filteredAttributesList.forEach((attr: any) => {
+        if (!attr || !attr.code) return;
+        let validator: any = Yup.string();
+
+        const type = (attr.type || '').toLowerCase();
+
+        switch (type) {
+          case 'number':
+          case 'decimal':
+            validator = Yup.number().typeError(`${attr.name || attr.code} must be a number`);
+
+            // Numeric limits
+            const minVal = attr.min ?? attr.min_value ?? attr.minValue;
+            const maxVal = attr.max ?? attr.max_value ?? attr.maxValue;
+
+            if (minVal !== undefined && minVal !== null && minVal !== '') {
+              validator = validator.min(Number(minVal), `${attr.name || attr.code} cannot be less than ${minVal}`);
+            }
+            if (maxVal !== undefined && maxVal !== null && maxVal !== '') {
+              validator = validator.max(Number(maxVal), `${attr.name || attr.code} cannot be greater than ${maxVal}`);
+            }
+            break;
+
+          case 'date':
+            validator = Yup.date().typeError(`${attr.name || attr.code} must be a valid date`);
+            break;
+
+          case 'boolean':
+            validator = Yup.boolean().typeError(`${attr.name || attr.code} must be a boolean`);
+            break;
+
+          case 'multiselect':
+            validator = Yup.string();
+            break;
+
+          case 'text':
+          case 'textarea':
+          case 'select':
+          case 'enumeration':
+          case 'swatch':
+          default:
+            validator = Yup.string();
+
+            // String lengths
+            const minLen = attr.minLength ?? attr.min_length;
+            const maxLen = attr.maxLength ?? attr.max_length;
+
+            if (minLen !== undefined && minLen !== null && minLen !== '' && Number(minLen) > 0) {
+              validator = validator.min(Number(minLen), `${attr.name || attr.code} must be at least ${minLen} characters`);
+            }
+            if (maxLen !== undefined && maxLen !== null && maxLen !== '' && Number(maxLen) > 0) {
+              validator = validator.max(Number(maxLen), `${attr.name || attr.code} cannot exceed ${maxLen} characters`);
+            }
+
+            // Regex pattern
+            const pattern = attr.regexPattern ?? attr.regex_pattern ?? attr.pattern;
+            if (pattern) {
+              try {
+                const regex = new RegExp(pattern);
+                validator = validator.matches(regex, `${attr.name || attr.code} is invalid`);
+              } catch (e) {
+                // ignore
+              }
+            }
+            break;
+        }
+
+        // Required flag from dynamic metadata
+        if (attr.is_required || attr.isRequired) {
+          validator = validator.required(`${attr.name || attr.code} is required`)
+            .test('is-empty', `${attr.name || attr.code} is required`, (val: any) => {
+              if (val === undefined || val === null || val === '') return false;
+              if (typeof val === 'string' && val.trim() === '') return false;
+              if (Array.isArray(val) && val.length === 0) return false;
+              return true;
+            });
+        }
+
+        attributeShape[attr.code] = validator;
+      });
+    }
+
+    shape.attributes = Yup.object().shape(attributeShape);
+
+    return Yup.object().shape(shape);
+  }, [filteredAttributesList]);
 
   const formik = useFormik({
     initialValues: {
@@ -486,6 +584,18 @@ export default function NewProduct() {
     }
   });
 
+  const areRequiredAttributesComplete = useMemo(() => {
+    if (!Array.isArray(filteredAttributesList)) return true;
+    return !filteredAttributesList.some((attr: any) => {
+      const isReq = attr.is_required === true || attr.isRequired === true;
+      if (isReq) {
+        const val = formik.values.attributes?.[attr.code];
+        return isEmptyAttributeValue(val);
+      }
+      return false;
+    });
+  }, [filteredAttributesList, formik.values.attributes]);
+
   const currentTabs = useMemo(() => {
     const isVariant = formik.values.type === 'variant';
     const tabsList = [
@@ -507,7 +617,30 @@ export default function NewProduct() {
     }
   }, [activeTab, currentTabs]);
 
-  const isNextDisabled = !formik.values.name || !formik.values.brand || !formik.values.unit || !formik.values.category || !formik.isValid;
+  const isNextDisabled = useMemo(() => {
+    // 1. Core General fields check (always required to proceed)
+    const isGeneralInvalid = !formik.values.name || !formik.values.brand || !formik.values.unit || !formik.values.category;
+    if (isGeneralInvalid) return true;
+
+    // 2. If on 'general' step, we only care about general fields
+    if (activeTab === 'general') {
+      const generalKeys = ['name', 'brand', 'unit', 'category', 'status', 'price', 'stock'];
+      return Object.keys(formik.errors).some(k => generalKeys.includes(k));
+    }
+
+    // 3. If on 'attributes' step, we must also block if any dynamic attributes are invalid or empty
+    if (activeTab === 'attributes') {
+      if (formik.errors.attributes && Object.keys(formik.errors.attributes).length > 0) {
+        return true;
+      }
+      if (!areRequiredAttributesComplete) {
+        return true;
+      }
+    }
+
+    // 4. Fallback: check global Formik validation status
+    return !formik.isValid;
+  }, [activeTab, formik.values, formik.errors, formik.isValid, filteredAttributesList, areRequiredAttributesComplete]);
 
   const handleSubmitWithValidation = async (targetStatus?: string) => {
     const statusToUse = targetStatus || formik.values.status || 'draft';
@@ -515,22 +648,7 @@ export default function NewProduct() {
 
     const errors: Record<string, any> = await formik.validateForm();
 
-    if (statusToUse !== 'draft') {
-      if (!formik.values.category) {
-        errors.category = 'Category is required for review or publishing';
-      }
-      if (Array.isArray(filteredAttributesList) && filteredAttributesList.length > 0) {
-        filteredAttributesList.forEach((attr: any) => {
-          if (attr.is_required || attr.isRequired) {
-            const val = formik.values.attributes?.[attr.code];
-            if (val === undefined || val === null || val === '') {
-              if (!errors.attributes) errors.attributes = {};
-              (errors.attributes as Record<string, string>)[attr.code] = `${attr.name || attr.code} is required`;
-            }
-          }
-        });
-      }
-    }
+    // Handled by dynamic validation schema automatically
 
     if (Object.keys(errors).length > 0) {
       formik.setErrors(errors);
@@ -1440,7 +1558,10 @@ export default function NewProduct() {
                                   <Select
                                     name="brand"
                                     value={formik.values.brand}
-                                    onChange={formik.handleChange}
+                                    onChange={(e) => {
+                                      formik.handleChange(e);
+                                      formik.setFieldTouched('brand', true, false);
+                                    }}
                                     onBlur={formik.handleBlur}
                                     disabled={isReadOnlyView}
                                   >
@@ -1471,7 +1592,10 @@ export default function NewProduct() {
                                   <Select
                                     name="unit"
                                     value={formik.values.unit}
-                                    onChange={formik.handleChange}
+                                    onChange={(e) => {
+                                      formik.handleChange(e);
+                                      formik.setFieldTouched('unit', true, false);
+                                    }}
                                     onBlur={formik.handleBlur}
                                     disabled={isReadOnlyView}
                                   >
@@ -1507,6 +1631,7 @@ export default function NewProduct() {
                                       formik.setFieldValue('category', catId, true);
                                       formik.setFieldTouched('category', true, false);
                                     }}
+                                    onBlur={() => formik.setFieldTouched('category', true, true)}
                                     placeholder="Select Category..."
                                     error={formik.touched.category && typeof formik.errors.category === 'string' ? formik.errors.category : undefined}
                                     disabled={isReadOnlyView}
@@ -1767,7 +1892,11 @@ export default function NewProduct() {
                             values={formik.values.attributes || {}}
                             errors={formik.errors.attributes as any}
                             touched={formik.touched.attributes as any}
-                            onAttributeChange={(code, val) => formik.setFieldValue(`attributes.${code}`, val)}
+                            onAttributeChange={(code, val) => {
+                              formik.setFieldValue(`attributes.${code}`, val, true);
+                              formik.setFieldTouched(`attributes.${code}`, true, false);
+                            }}
+                            onAttributeBlur={(code) => formik.setFieldTouched(`attributes.${code}`, true)}
                             onAddAttributeClick={(group) => handleOpenCreateAttributeModal(group.id || group._id)}
                             readOnly={isReadOnlyView}
                           />
@@ -1962,21 +2091,75 @@ export default function NewProduct() {
                       <button
                         type="button"
                         disabled={isNextDisabled}
-                        onClick={() => {
-                          formik.validateForm().then((errors) => {
+                        onClick={async () => {
+                          const errors: any = await formik.validateForm();
+
+                          if (activeTab === 'general') {
                             const requiredFields = ['name', 'brand', 'unit', 'category'];
                             const hasRequiredErrors = Object.keys(errors).some(k => requiredFields.includes(k));
                             if (!hasRequiredErrors) {
                               setActiveTab(currentTabs[currentTabs.findIndex(t => t.id === activeTab) + 1].id);
                             } else {
-                              formik.setTouched(
-                                Object.keys(errors).reduce((acc: any, key: string) => {
+                              const touchedObj: any = { ...formik.touched };
+                              requiredFields.forEach(k => {
+                                if (errors[k]) touchedObj[k] = true;
+                              });
+                              formik.setTouched(touchedObj);
+                            }
+                          } else if (activeTab === 'attributes') {
+                            const requiredFields = ['name', 'brand', 'unit', 'category'];
+                            const hasRequiredErrors = Object.keys(errors).some(k => requiredFields.includes(k));
+                            const hasAttributeErrors = errors.attributes && Object.keys(errors.attributes).length > 0;
+
+                            let isAttributesComplete = true;
+                            if (Array.isArray(filteredAttributesList)) {
+                              isAttributesComplete = !filteredAttributesList.some((attr: any) => {
+                                const isReq = attr.is_required === true || attr.isRequired === true;
+                                if (isReq) {
+                                  const val = formik.values.attributes?.[attr.code];
+                                  return isEmptyAttributeValue(val);
+                                }
+                                return false;
+                              });
+                            }
+
+                            if (!hasRequiredErrors && !hasAttributeErrors && isAttributesComplete) {
+                              setActiveTab(currentTabs[currentTabs.findIndex(t => t.id === activeTab) + 1].id);
+                            } else {
+                              const touchedObj: any = {
+                                ...formik.touched,
+                                ...Object.keys(errors).reduce((acc: any, key: string) => {
                                   acc[key] = true;
                                   return acc;
                                 }, {})
-                              );
+                              };
+                              if (errors.attributes) {
+                                touchedObj.attributes = {
+                                  ...formik.touched.attributes,
+                                  ...Object.keys(errors.attributes).reduce((acc: any, key: string) => {
+                                    acc[key] = true;
+                                    return acc;
+                                  }, {})
+                                };
+                              }
+                              if (Array.isArray(filteredAttributesList)) {
+                                const attributesTouch = touchedObj.attributes || {};
+                                filteredAttributesList.forEach((attr: any) => {
+                                  const isReq = attr.is_required === true || attr.isRequired === true;
+                                  if (isReq) {
+                                    const val = formik.values.attributes?.[attr.code];
+                                    if (isEmptyAttributeValue(val)) {
+                                      attributesTouch[attr.code] = true;
+                                    }
+                                  }
+                                });
+                                touchedObj.attributes = attributesTouch;
+                              }
+                              formik.setTouched(touchedObj);
                             }
-                          });
+                          } else {
+                            setActiveTab(currentTabs[currentTabs.findIndex(t => t.id === activeTab) + 1].id);
+                          }
                         }}
                         className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                       >

From abb135b5e0e6987e21dc54687d3bae182337e59e Mon Sep 17 00:00:00 2001
From: Mahir-Mohamed <mahirmohammed01@gmail.com>
Date: Thu, 13 Aug 2026 14:55:18 +0530
Subject: [PATCH 2/3] feat(products): implement Asset Family filtering and
 automatic role mapping in Assets step

---
 .../asset-types/types/asset-types.types.ts    |   2 +
 .../product/components/ProductAssetsTab.tsx   | 423 +++++++++++++-----
 src/features/product/pages/NewProduct.tsx     | 210 ++++-----
 3 files changed, 409 insertions(+), 226 deletions(-)

diff --git a/src/features/asset-types/types/asset-types.types.ts b/src/features/asset-types/types/asset-types.types.ts
index ffc40bf..5431725 100644
--- a/src/features/asset-types/types/asset-types.types.ts
+++ b/src/features/asset-types/types/asset-types.types.ts
@@ -3,6 +3,8 @@ export interface AssetTypeValidation {
   maxFileSize: number;
   minUploadCount: number;
   maxUploadCount: number;
+  allowed_extensions?: string[];
+  max_file_size?: number;
 }
 
 export interface AssetType {
diff --git a/src/features/product/components/ProductAssetsTab.tsx b/src/features/product/components/ProductAssetsTab.tsx
index 7930d6c..e314db9 100644
--- a/src/features/product/components/ProductAssetsTab.tsx
+++ b/src/features/product/components/ProductAssetsTab.tsx
@@ -1,24 +1,29 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { assetsService, type AssetMapping } from '../../assets/services/assets.service';
 import type { Asset } from '../../assets/types/assets.types';
+import { useAssetType } from '../../asset-types/hook/useAssetType';
+import { assetFamiliesService } from '../../asset-families/services/asset-families.service';
 import {
   Upload, Image as ImageIcon, Video, FileText, Trash2,
-  Check, Loader2, Search, Info, Shield, ArrowUp, ArrowDown, Plus
+  Check, Loader2, Search, Info, Shield, ArrowUp, ArrowDown, Plus, Box
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { Loader } from '../../../components/customs/Loader';
 import { getAssetUrl, isImageFile } from '../../../lib/utils';
+import { Select } from '../../../components/customs/Select';
 
 interface ProductAssetsTabProps {
   productId?: string;
   family: any;
   readOnly?: boolean;
+  refreshProductData?: () => void;
 }
 
 export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
   productId,
   family,
-  readOnly
+  readOnly,
+  refreshProductData
 }) => {
   const [assignedAssets, setAssignedAssets] = useState<AssetMapping[]>([]);
   const [loading, setLoading] = useState(false);
@@ -34,6 +39,85 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
   const [dragOver, setDragOver] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Asset type and family states
+  const { items: allAssetTypes, fetchItems: fetchAssetTypes } = useAssetType();
+  const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<string>('');
+  const [allAssetFamilies, setAllAssetFamilies] = useState<any[]>([]);
+  const [selectedAssetFamilyId, setSelectedAssetFamilyId] = useState<string>('');
+
+  // Fetch asset types and families
+  useEffect(() => {
+    fetchAssetTypes();
+    const fetchFamilies = async () => {
+      try {
+        const data = await assetFamiliesService.getAll();
+        setAllAssetFamilies(data);
+      } catch (err) {
+        console.error("Failed to load asset families:", err);
+      }
+    };
+    fetchFamilies();
+  }, [fetchAssetTypes]);
+
+  // Filter asset types based on selected asset family
+  const filteredAssetTypes = useMemo(() => {
+    if (!selectedAssetFamilyId) {
+      return allAssetTypes;
+    }
+    const matchedFamily = allAssetFamilies.find(af => af.id === selectedAssetFamilyId);
+    if (!matchedFamily) {
+      return [];
+    }
+    const allowedTypeIds =
+      Array.isArray(matchedFamily.assetTypeIds) && matchedFamily.assetTypeIds.length > 0
+        ? matchedFamily.assetTypeIds
+        : (matchedFamily.assetTypes || [])
+            .map((at: any) => at.id || at.assetTypeId)
+            .filter(Boolean);
+
+    return allAssetTypes.filter(at => allowedTypeIds.includes(at.id));
+  }, [allAssetTypes, allAssetFamilies, selectedAssetFamilyId]);
+
+  // Reset selected asset type if it is no longer allowed by the newly selected family
+  useEffect(() => {
+    if (selectedAssetTypeId && selectedAssetFamilyId) {
+      const isStillAllowed = filteredAssetTypes.some(at => at.id === selectedAssetTypeId);
+      if (!isStillAllowed) {
+        setSelectedAssetTypeId('');
+      }
+    }
+  }, [selectedAssetFamilyId, filteredAssetTypes, selectedAssetTypeId]);
+
+  // Resolve selected asset type details
+  const selectedAssetType = useMemo(() => {
+    return allAssetTypes.find(at => at.id === selectedAssetTypeId);
+  }, [allAssetTypes, selectedAssetTypeId]);
+
+  // Resolve required asset type ids from family requirements
+  const requiredAssetTypeIds = useMemo(() => {
+    const ids: string[] = [];
+    const familyReqs = family?.assetRequirements || [];
+    familyReqs.forEach((req: any) => {
+      const matchedFamily = allAssetFamilies.find(af => af.id === req.id);
+      if (matchedFamily) {
+        const allowedTypeIds =
+          Array.isArray(matchedFamily.assetTypeIds) && matchedFamily.assetTypeIds.length > 0
+            ? matchedFamily.assetTypeIds
+            : (matchedFamily.assetTypes || [])
+                .map((at: any) => at.id || at.assetTypeId)
+                .filter(Boolean);
+        ids.push(...allowedTypeIds);
+      }
+    });
+    return [...new Set(ids)];
+  }, [family, allAssetFamilies]);
+
+  const isAssetTypeRequiredByFamily = (code: string) => {
+    const matchingType = allAssetTypes.find(at => at.code === code);
+    if (!matchingType) return false;
+    return requiredAssetTypeIds.includes(matchingType.id);
+  };
+
   // Load product assets
   const loadProductAssets = async () => {
     if (!productId) return;
@@ -85,80 +169,94 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
     );
   }
 
-  // Handle new file upload
-  const handleFileUpload = async (file: File) => {
-    // 1. Validate size (Max 10MB)
-    const MAX_SIZE = 10 * 1024 * 1024;
-    if (file.size > MAX_SIZE) {
-      toast.error('File size exceeds the 10MB limit.');
+  // Handle multiple files upload sequentially
+  const handleMultipleFilesUpload = async (files: FileList | File[]) => {
+    if (!selectedAssetType) {
+      toast.error('Please select an Asset Type first.');
       return;
     }
-
-    // 2. Validate type
-    const allowedExtensions = [
-      'jpg', 'jpeg', 'png', 'webp', 'gif', 'svg', 'avif', 'bmp',
-      'mp4', 'webm', 'mov', 'pdf', 'csv', 'xlsx', 'xls', 'doc', 'docx'
-    ];
-    const fileExtension = file.name.split('.').pop()?.toLowerCase();
-    
-    const isAllowedType = 
-      file.type.startsWith('image/') || 
-      file.type.startsWith('video/') ||
-      [
-        'application/pdf', 'text/csv', 
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        'application/vnd.ms-excel', 'application/msword',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      ].includes(file.type) ||
-      allowedExtensions.includes(fileExtension || '');
-
-    if (!isAllowedType) {
-      toast.error('Unsupported file format. Please upload images, videos, PDFs, CSVs, or Word/Excel documents.');
-      return;
-    }
-
     setUploading(true);
-    try {
-      // 1. Upload to PIM media server
-      const uploadedData = await assetsService.upload(file);
+    let successCount = 0;
+    let failCount = 0;
 
-      // 2. Create the asset registry record
-      const newAsset = await assetsService.create({
-        name: file.name.replace(/\.[^/.]+$/, ""),
-        file_url: uploadedData.file_url,
-        file_size: uploadedData.file_size,
-        mime_type: uploadedData.mime_type,
-        status: 'active'
-      });
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
 
-      // Determine default role based on mime-type
-      let role = 'gallery_image';
-      if (uploadedData.mime_type.startsWith('video/')) {
-        role = 'video';
-      } else if (uploadedData.mime_type === 'application/pdf') {
-        role = 'document';
+      // 1. Validate format/extension
+      const allowedFileTypes =
+        selectedAssetType.validation?.allowedFileTypes ??
+        selectedAssetType.validation?.allowed_extensions ??
+        [];
+      const allowedExts = allowedFileTypes.map((e: string) => e.toLowerCase().replace('.', ''));
+      const fileExtension = file.name.split('.').pop()?.toLowerCase() || '';
+
+      if (allowedExts.length > 0 && !allowedExts.includes(fileExtension)) {
+        toast.error(`File "${file.name}" rejected: Unsupported format.`);
+        failCount++;
+        continue;
       }
 
-      // 3. Map this asset to current product
-      await assetsService.assignProductAsset(productId, {
-        asset_id: newAsset.id,
-        role,
-        is_primary: assignedAssets.length === 0, // Set primary if it's the first asset
-        display_order: assignedAssets.length
-      });
+      // 2. Validate size
+      const maxFileSize =
+        selectedAssetType.validation?.maxFileSize ??
+        selectedAssetType.validation?.max_file_size;
+      if (maxFileSize && file.size > maxFileSize) {
+        const sizeMb = Math.round(maxFileSize / (1024 * 1024));
+        toast.error(`File "${file.name}" rejected: Exceeds the ${sizeMb}MB limit.`);
+        failCount++;
+        continue;
+      }
 
-      toast.success('Asset uploaded and assigned successfully');
-      loadProductAssets();
-    } catch (err: any) {
-      toast.error(err?.message || 'Failed to upload asset');
-    } finally {
-      setUploading(false);
+      try {
+        // Upload to PIM media server
+        const uploadedData = await assetsService.upload(file);
+
+        // Create the asset registry record
+        const newAsset = await assetsService.create({
+          name: file.name.replace(/\.[^/.]+$/, ""),
+          file_url: uploadedData.file_url,
+          file_size: uploadedData.file_size,
+          mime_type: uploadedData.mime_type,
+          asset_type_id: selectedAssetType.id,
+          status: 'active'
+        });
+
+        // Determine role based on selected Asset Type code
+        let role = selectedAssetType?.code || 'gallery_image';
+        if (!selectedAssetType) {
+          if (uploadedData.mime_type.startsWith('video/')) {
+            role = 'video';
+          } else if (uploadedData.mime_type === 'application/pdf') {
+            role = 'document';
+          }
+        }
+
+        // Map this asset to current product
+        await assetsService.assignProductAsset(productId, {
+          asset_id: newAsset.id,
+          role,
+          is_primary: assignedAssets.length === 0 && successCount === 0,
+          display_order: assignedAssets.length + successCount
+        });
+
+        successCount++;
+      } catch (err: any) {
+        toast.error(`Failed to upload "${file.name}": ${err?.message || 'Unknown error'}`);
+        failCount++;
+      }
     }
+
+    if (successCount > 0) {
+      toast.success(`Successfully uploaded and assigned ${successCount} assets.`);
+      loadProductAssets();
+      refreshProductData?.();
+    }
+    setUploading(false);
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      handleFileUpload(e.target.files[0]);
+    if (e.target.files && e.target.files.length > 0) {
+      handleMultipleFilesUpload(e.target.files);
     }
   };
 
@@ -175,8 +273,12 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setDragOver(false);
-    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      handleFileUpload(e.dataTransfer.files[0]);
+    if (!selectedAssetType) {
+      toast.error('Please select an Asset Type first.');
+      return;
+    }
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleMultipleFilesUpload(e.dataTransfer.files);
     }
   };
 
@@ -190,11 +292,20 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
     }
 
     try {
+      // Determine role from the actual library Asset's Asset Type
       let role = 'gallery_image';
-      if (asset.mime_type?.startsWith('video/')) {
-        role = 'video';
-      } else if (asset.mime_type === 'application/pdf') {
-        role = 'document';
+      if (asset.asset_type_id) {
+        const matchingType = allAssetTypes.find(at => at.id === asset.asset_type_id);
+        if (matchingType && matchingType.code) {
+          role = matchingType.code;
+        }
+      }
+      if (!role || role === 'gallery_image') {
+        if (asset.mime_type?.startsWith('video/')) {
+          role = 'video';
+        } else if (asset.mime_type === 'application/pdf') {
+          role = 'document';
+        }
       }
 
       await assetsService.assignProductAsset(productId, {
@@ -206,6 +317,7 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
 
       toast.success('Asset assigned from library');
       loadProductAssets();
+      refreshProductData?.();
     } catch (err: any) {
       toast.error(err?.message || 'Failed to assign asset');
     }
@@ -218,21 +330,13 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
       await assetsService.unassignProductAsset(productId, assetId);
       toast.success('Asset unassigned');
       loadProductAssets();
+      refreshProductData?.();
     } catch (err: any) {
       toast.error(err?.message || 'Failed to unassign asset');
     }
   };
 
-  // Update asset role mapping
-  const handleRoleChange = async (assetId: string, role: string) => {
-    try {
-      await assetsService.updateProductAsset(productId, assetId, { role });
-      setAssignedAssets(prev => prev.map(a => a.asset_id === assetId ? { ...a, role } : a));
-      toast.success('Asset role updated');
-    } catch (err: any) {
-      toast.error(err?.message || 'Failed to update asset role');
-    }
-  };
+
 
   // Set selected asset as the primary display image
   const handleSetPrimary = async (assetId: string) => {
@@ -240,6 +344,7 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
       await assetsService.updateProductAsset(productId, assetId, { is_primary: true });
       toast.success('Primary image updated');
       loadProductAssets();
+      refreshProductData?.();
     } catch (err: any) {
       toast.error(err?.message || 'Failed to set primary image');
     }
@@ -268,6 +373,8 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
     }
   };
 
+
+
   const filteredLibrary = libraryAssets.filter(asset =>
     asset.name.toLowerCase().includes(pickerSearch.toLowerCase())
   );
@@ -302,6 +409,89 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
         </div>
       )}
 
+      {/* Asset Family & Asset Type Selectors */}
+      {!readOnly && (
+        <div className="bg-surface border border-border rounded-xl p-5 shadow-2xs space-y-4">
+          <div className="flex gap-4 flex-wrap">
+            {/* Asset Family Selector */}
+            <div className="flex-1 min-w-[240px]">
+              <label className="text-xs font-bold text-foreground block mb-2">Asset Family</label>
+              <div className="relative">
+                <Select
+                  id="asset-family-select"
+                  value={selectedAssetFamilyId}
+                  onChange={(e) => setSelectedAssetFamilyId(e.target.value)}
+                  placeholder="Select Asset Family..."
+                  className="w-full text-xs font-semibold"
+                >
+                  {allAssetFamilies.filter(af => af && af.status === 'active').map((af) => (
+                    <option key={af.id} value={af.id}>
+                      {af.name}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            {/* Asset Type Selector */}
+            <div className="flex-1 min-w-[240px]">
+              <label className="text-xs font-bold text-foreground block mb-2">Asset Type Classification</label>
+              <div className="relative">
+                <Select
+                  id="asset-type-select"
+                  value={selectedAssetTypeId}
+                  onChange={(e) => setSelectedAssetTypeId(e.target.value)}
+                  placeholder={selectedAssetFamilyId && filteredAssetTypes.length === 0 ? "No asset types available for this family" : "Select Asset Type classification..."}
+                  className="w-full text-xs font-semibold"
+                  disabled={!!(selectedAssetFamilyId && filteredAssetTypes.length === 0)}
+                >
+                  {filteredAssetTypes.filter(at => at && at.status === 'active').map((at) => {
+                    const isRequired = isAssetTypeRequiredByFamily(at.code);
+                    return (
+                      <option key={at.id} value={at.id}>
+                        {at.name} ({at.category || 'Other'}) {isRequired ? '★ Required' : ''}
+                      </option>
+                    );
+                  })}
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          {selectedAssetType && (() => {
+            const allowedFileTypes =
+              selectedAssetType.validation?.allowedFileTypes ??
+              selectedAssetType.validation?.allowed_extensions ??
+              [];
+            const maxFileSize =
+              selectedAssetType.validation?.maxFileSize ??
+              selectedAssetType.validation?.max_file_size;
+
+            return (
+              <div className="bg-background border border-border rounded-lg p-3.5 flex items-start gap-3">
+                <Info className="w-4 h-4 text-primary shrink-0 mt-0.5" />
+                <div className="text-xs space-y-1">
+                  <div>
+                    <span className="font-bold text-foreground">Allowed formats: </span>
+                    <span className="font-mono text-primary-dark font-semibold">
+                      {allowedFileTypes.length > 0 ? allowedFileTypes.map((t: string) => t.toUpperCase()).join(', ') : 'Any'}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="font-bold text-foreground">Max File Size: </span>
+                    <span className="font-semibold text-muted-foreground">
+                      {maxFileSize 
+                        ? `${Math.round(maxFileSize / (1024 * 1024))} MB`
+                        : '10 MB'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            );
+          })()}
+        </div>
+      )}
+
       {/* Upload Zone & Picker Trigger */}
       {!readOnly && (
         <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
@@ -309,7 +499,13 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
-            onClick={() => fileInputRef.current?.click()}
+            onClick={() => {
+              if (!selectedAssetType) {
+                toast.error('Please select an Asset Type first.');
+                return;
+              }
+              fileInputRef.current?.click();
+            }}
             className={`md:col-span-2 border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all flex flex-col items-center justify-center ${dragOver ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/20 hover:bg-background/50 bg-surface'
               }`}
           >
@@ -318,19 +514,36 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
               ref={fileInputRef}
               className="hidden"
               onChange={handleFileChange}
-              accept="image/*,video/*,application/pdf"
+              multiple
+              accept={(() => {
+                const allowedFileTypes =
+                  selectedAssetType?.validation?.allowedFileTypes ??
+                  selectedAssetType?.validation?.allowed_extensions ??
+                  [];
+                return allowedFileTypes.length > 0
+                  ? allowedFileTypes.map((t: string) => '.' + t.replace('.', '')).join(',')
+                  : '*';
+              })()}
             />
             {uploading ? (
               <div className="space-y-2">
                 <Loader2 className="w-8 h-8 text-primary animate-spin mx-auto" />
-                <p className="font-semibold text-xs text-foreground">Uploading new media file...</p>
+                <p className="font-semibold text-xs text-foreground">Uploading files...</p>
+              </div>
+            ) : !selectedAssetType ? (
+              <div className="space-y-2 text-muted-foreground">
+                <Info className="w-8 h-8 mx-auto animate-pulse" />
+                <div>
+                  <h4 className="font-semibold text-xs text-foreground">Select Asset Type to Upload</h4>
+                  <p className="text-[10px] mt-1">Classification is required before mapping files to product registry</p>
+                </div>
               </div>
             ) : (
               <div className="space-y-3">
                 <Upload className="w-8 h-8 text-muted-foreground mx-auto" />
                 <div>
                   <h4 className="text-foreground font-semibold text-xs">Drag & Drop Files Here</h4>
-                  <p className="text-[11px] text-muted-foreground mt-1">or click to browse media files</p>
+                  <p className="text-[11px] text-muted-foreground mt-1">or click to browse {selectedAssetType.name} files</p>
                 </div>
               </div>
             )}
@@ -346,8 +559,15 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
             <div className="space-y-2">
               <button
                 type="button"
-                onClick={() => fileInputRef.current?.click()}
-                className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-xs font-semibold shadow-2xs cursor-pointer"
+                onClick={() => {
+                  if (!selectedAssetType) {
+                    toast.error('Please select an Asset Type first.');
+                    return;
+                  }
+                  fileInputRef.current?.click();
+                }}
+                className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-xs font-semibold shadow-2xs cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={!selectedAssetType}
               >
                 <Plus className="w-3.5 h-3.5" />
                 + Add Asset
@@ -378,7 +598,6 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
                 {!readOnly && <th className="px-4 py-3 w-16 text-center">Order</th>}
                 <th className="px-4 py-3 w-20">Preview</th>
                 <th className="px-4 py-3">Asset Details</th>
-                <th className="px-4 py-3 w-40">Role Classification</th>
                 <th className="px-4 py-3 w-32 text-center">Primary</th>
                 {!readOnly && <th className="px-4 py-3 w-20 text-right">Actions</th>}
               </tr>
@@ -391,6 +610,7 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
                 const isImage = isImageFile(asset.mime_type, asset.file_url);
                 const isVideo = asset.mime_type?.startsWith('video/');
                 const isPdf = asset.mime_type === 'application/pdf';
+                const is3DModel = asset.mime_type?.startsWith('model/') || ['glb', 'gltf', 'usdz'].includes(asset.extension || '');
 
                 return (
                   <tr key={mapping.id} className="hover:bg-background/50 transition-colors">
@@ -427,6 +647,8 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
                           <Video className="w-5 h-5 text-primary" />
                         ) : isPdf ? (
                           <FileText className="w-5 h-5 text-emerald-500" />
+                        ) : is3DModel ? (
+                          <Box className="w-5 h-5 text-purple-500" />
                         ) : (
                           <FileText className="w-5 h-5 text-blue-500" />
                         )}
@@ -441,30 +663,7 @@ export const ProductAssetsTab: React.FC<ProductAssetsTabProps> = ({
                       </div>
                     </td>
 
-                    {/* Role dropdown selection or read-only label */}
-                    <td className="px-4 py-3">
-                      {readOnly ? (
-                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-surface-muted border border-border text-muted-foreground">
-                          {mapping.role === 'primary_image' ? 'Primary Image' :
-                           mapping.role === 'gallery_image' ? 'Gallery Image' :
-                           mapping.role === 'thumbnail' ? 'Thumbnail' :
-                           mapping.role === 'video' ? 'Video' :
-                           mapping.role === 'document' ? 'Documentation PDF' : mapping.role}
-                        </span>
-                      ) : (
-                        <select
-                          value={mapping.role}
-                          onChange={(e) => handleRoleChange(asset.id, e.target.value)}
-                          className="text-xs border border-border focus:ring-primary rounded-lg px-2.5 py-1 focus:outline-none bg-surface font-medium text-foreground"
-                        >
-                          <option value="primary_image">Primary Image</option>
-                          <option value="gallery_image">Gallery Image</option>
-                          <option value="thumbnail">Thumbnail</option>
-                          <option value="video">Video</option>
-                          <option value="document">Documentation PDF</option>
-                        </select>
-                      )}
-                    </td>
+
 
                     {/* Primary Badge toggle button */}
                     <td className="px-4 py-3 text-center">
diff --git a/src/features/product/pages/NewProduct.tsx b/src/features/product/pages/NewProduct.tsx
index 43384e8..7bc9592 100644
--- a/src/features/product/pages/NewProduct.tsx
+++ b/src/features/product/pages/NewProduct.tsx
@@ -11,7 +11,6 @@ import { useProductFamilyConfiguration } from '../hook/useProductFamilyConfigura
 import { VariantsTab } from '../components/variants/VariantsTab';
 import { DynamicAttributesSection } from '../components/DynamicAttributesSection';
 import { ProductAssetsTab } from '../components/ProductAssetsTab';
-import { StageTimeline } from '../../workflow/components/StageTimeline';
 import { notify } from '../../../services/toast';
 import { useAttributeSet } from '../../attribute-sets/hook/useAttributeSet';
 import { useAttribute } from '../../attributes/hook/useAttribute';
@@ -183,7 +182,7 @@ export default function NewProduct() {
     attributeSet,
     groups: attributeGroups,
     attributes: attributesList,
-    workflow: inheritedWorkflow,
+    workflow: _inheritedWorkflow,
     loadConfiguration,
   } = useProductFamilyConfiguration(selectedFamily || undefined);
 
@@ -223,9 +222,6 @@ export default function NewProduct() {
     }
   };
 
-  const workflowStages = useMemo(() => {
-    return inheritedWorkflow?.stages || [];
-  }, [inheritedWorkflow]);
 
   // Resolve list of brands based on allowed list
   const activeAllowedBrandsList = useMemo(() => {
@@ -254,29 +250,32 @@ export default function NewProduct() {
   const EXCLUDED_ATTRIBUTE_CODES = ['brand', 'brand_id', 'product_name', 'name', 'short_description', 'description', 'long_description', 'category', 'category_id', 'unit', 'unit_id', 'code', 'sku'];
 
   const activeAttributeGroups = useMemo(() => {
+    if (selectedAttributeSetObj) {
+      return selectedAttributeSetObj.groups || [];
+    }
     if (selectedFamily) {
       return attributeGroups || [];
     }
-    return selectedAttributeSetObj?.groups || [];
+    return [];
   }, [selectedFamily, attributeGroups, selectedAttributeSetObj]);
 
   const activeAttributesList = useMemo(() => {
     const list: any[] = [];
-    if (selectedFamily) {
-      list.push(...(attributesList || []));
-    } else if (selectedAttributeSetObj?.groups) {
+    if (selectedAttributeSetObj?.groups) {
       selectedAttributeSetObj.groups.forEach((g: any) => {
         if (g.attributes) {
           list.push(...g.attributes);
         }
       });
+    } else if (selectedFamily) {
+      list.push(...(attributesList || []));
     }
 
     // Append custom added attributes to activeAttributesList
     customAddedAttributes.forEach((attr) => {
       if (!list.some((a) =>
-        (a.id && a.id === attr.id) ||
-        (a._id && a._id === attr.id) ||
+        (a.id && String(a.id) === String(attr.id)) ||
+        (a._id && String(a._id) === String(attr.id)) ||
         (a.code || '').toLowerCase() === (attr.code || '').toLowerCase()
       )) {
         list.push(attr);
@@ -300,8 +299,8 @@ export default function NewProduct() {
       };
 
       let groupObj = groupsCopy.find((g: any) =>
-        (g.id && g.id === targetGroupInfo.id) ||
-        (g._id && g._id === targetGroupInfo.id) ||
+        (g.id && String(g.id) === String(targetGroupInfo.id)) ||
+        (g._id && String(g._id) === String(targetGroupInfo.id)) ||
         (g.code && g.code === targetGroupInfo.code)
       );
       if (!groupObj) {
@@ -315,8 +314,8 @@ export default function NewProduct() {
       }
 
       const isAlreadyInGroup = groupObj.attributes.some((a: any) =>
-        (a.id && a.id === attr.id) ||
-        (a._id && a._id === attr.id) ||
+        (a.id && String(a.id) === String(attr.id)) ||
+        (a._id && String(a._id) === String(attr.id)) ||
         (a.code || '').toLowerCase() === (attr.code || '').toLowerCase()
       );
       if (!isAlreadyInGroup) {
@@ -598,16 +597,17 @@ export default function NewProduct() {
 
   const currentTabs = useMemo(() => {
     const isVariant = formik.values.type === 'variant';
+    const assetsCount = product?.productAssets?.length ?? 0;
     const tabsList = [
       { id: 'general', label: 'General', icon: Box },
       { id: 'attributes', label: 'Attributes', icon: LayoutGrid },
       ...(isVariant ? [{ id: 'variants', label: 'Variants', icon: Tags }] : []),
-      { id: 'assets', label: 'Assets', icon: ImageIcon },
+      { id: 'assets', label: `Assets (${assetsCount})`, icon: ImageIcon },
       { id: 'channels', label: 'Channels', icon: Globe },
       { id: 'review', label: 'Review', icon: Eye },
     ];
     return tabsList.map((t, idx) => ({ ...t, step: idx + 1 }));
-  }, [formik.values.type]);
+  }, [formik.values.type, product?.productAssets]);
 
   // Redirect if current activeTab is not in available tabs list (e.g. Variants removed)
   useEffect(() => {
@@ -638,9 +638,18 @@ export default function NewProduct() {
       }
     }
 
+    // 3.5. If on 'assets' step, block if there are missing required assets in completeness entries
+    if (activeTab === 'assets') {
+      const defaultEntry = (product?.completenessEntries || []).find((c: any) => c.channel === 'default');
+      const missingAssets = defaultEntry?.missing_assets || [];
+      if (missingAssets.length > 0) {
+        return true;
+      }
+    }
+
     // 4. Fallback: check global Formik validation status
     return !formik.isValid;
-  }, [activeTab, formik.values, formik.errors, formik.isValid, filteredAttributesList, areRequiredAttributesComplete]);
+  }, [activeTab, formik.values, formik.errors, formik.isValid, filteredAttributesList, areRequiredAttributesComplete, product?.completenessEntries]);
 
   const handleSubmitWithValidation = async (targetStatus?: string) => {
     const statusToUse = targetStatus || formik.values.status || 'draft';
@@ -711,11 +720,16 @@ export default function NewProduct() {
       if (familyId) {
         setSelectedFamily(familyId);
         blueprint = await loadConfiguration(familyId);
-      } else if (productData.metadata?.attributeSetId) {
+      }
+      if (productData.metadata?.attributeSetId) {
         const setId = productData.metadata.attributeSetId;
         setSelectedAttributeSetId(setId);
-        const setDetails = await attributeSetsService.getById(setId);
-        setSelectedAttributeSetObj(setDetails);
+        try {
+          const setDetails = await attributeSetsService.getById(setId);
+          setSelectedAttributeSetObj(setDetails);
+        } catch (err) {
+          console.error("Failed to load attribute set details during hydration:", err);
+        }
       }
 
       // 3. Extract Saved Attribute Values
@@ -792,6 +806,20 @@ export default function NewProduct() {
     }
   }, [loadConfiguration]);
 
+  const refreshProductData = useCallback(async () => {
+    const targetId = id || productId;
+    if (!targetId) return;
+    try {
+      const rawData: any = await productService.getById(targetId);
+      const productData = rawData?.data?.id ? rawData.data : (rawData?.id ? rawData : rawData?.data || rawData);
+      if (productData && productData.id) {
+        setProduct(productData);
+      }
+    } catch (err) {
+      console.error("Failed to refresh product completeness data:", err);
+    }
+  }, [id, productId]);
+
   // Calculate dynamic completeness score
   const productCompleteness = useMemo(() => {
     let score = 0;
@@ -829,7 +857,7 @@ export default function NewProduct() {
 
   useEffect(() => {
     if (showAttributeModal && modalAvailableGroups && modalAvailableGroups.length > 0) {
-      const isAlreadyValid = modalAvailableGroups.some((g: any) => g.id === inlineAttributeGroupId);
+      const isAlreadyValid = modalAvailableGroups.some((g: any) => String(g.id || g._id) === String(inlineAttributeGroupId));
       if (!isAlreadyValid) {
         setInlineAttributeGroupId(modalAvailableGroups[0].id);
       }
@@ -1093,8 +1121,12 @@ export default function NewProduct() {
                 <h2 className="text-base font-bold text-foreground leading-tight">{formik.values.name || 'Untitled Product'}</h2>
                 <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5 font-mono">
                   <span>Code: <strong className="text-foreground">{formik.values.code}</strong></span>
-                  <span>•</span>
-                  <span>SKU: <strong className="text-primary-dark">{formik.values.sku}</strong></span>
+                  {formik.values.sku && formik.values.status?.toLowerCase() !== 'draft' && (
+                    <>
+                      <span>•</span>
+                      <span>SKU: <strong className="text-primary-dark">{formik.values.sku}</strong></span>
+                    </>
+                  )}
                   <span>•</span>
                   <span>Family: <strong className="text-foreground">{family?.name || 'Furniture'}</strong></span>
                 </div>
@@ -1244,72 +1276,7 @@ export default function NewProduct() {
                 {/* Main Content Area */}
                 <div className="flex-1 min-w-0 flex flex-col">
 
-                  {isEdit && inheritedWorkflow && (
-                    <div className="mb-4 bg-surface border border-border rounded-xl p-5 shadow-sm mr-1">
-                      <div className="flex items-center justify-between mb-4 pb-3 border-b border-border">
-                        <div>
-                          <span className="text-[9px] font-bold text-muted-foreground block uppercase font-mono">Lifecycle Workflow</span>
-                          <h4 className="font-semibold text-foreground text-sm">{inheritedWorkflow.name} ({inheritedWorkflow.category})</h4>
-                        </div>
-                        <div className="flex items-center gap-4 text-right">
-                          <div className="text-xs">
-                            <span className="text-muted-foreground">Current Stage: </span>
-                            <span className="font-bold text-primary-dark uppercase">
-                              {workflowStages.find((s: any) => s.code === formik.values.metadata?.currentStage)?.name || formik.values.metadata?.currentStage || 'Draft'}
-                            </span>
-                          </div>
 
-                          {(() => {
-                            const currentStageCode = formik.values.metadata?.currentStage || 'draft';
-                            const sorted = [...workflowStages].sort((a, b) => Number(a.order || 0) - Number(b.order || 0));
-                            const currentIdx = sorted.findIndex((s: any) => s.code === currentStageCode);
-                            if (currentIdx !== -1 && currentIdx < sorted.length - 1) {
-                              const nextStage = sorted[currentIdx + 1];
-                              return (
-                                <button
-                                  type="button"
-                                  onClick={async () => {
-                                    try {
-                                      const updatedMetadata = {
-                                        ...formik.values.metadata,
-                                        currentStage: nextStage.code
-                                      };
-                                      const targetId = id || productId;
-                                      if (targetId) {
-                                        await productService.update(targetId, {
-                                          ...formik.values,
-                                          metadata: updatedMetadata
-                                        } as any);
-                                        formik.setFieldValue('metadata', updatedMetadata);
-                                        notify.success(`Product advanced to stage: ${nextStage.name}`);
-                                      }
-                                    } catch (err: any) {
-                                      notify.error(err);
-                                    }
-                                  }}
-                                  className="px-3 py-1.5 bg-primary hover:bg-primary-hover text-white text-[11px] font-bold rounded-lg transition-all shadow-xs"
-                                >
-                                  Promote to {nextStage.name}
-                                </button>
-                              );
-                            }
-                            return (
-                              <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-150">
-                                Final Stage Completed
-                              </span>
-                            );
-                          })()}
-                        </div>
-                      </div>
-                      <div className="py-2 overflow-x-auto">
-                        <StageTimeline
-                          stages={workflowStages}
-                          currentStageCode={formik.values.metadata?.currentStage || 'draft'}
-                          variant="horizontal"
-                        />
-                      </div>
-                    </div>
-                  )}
 
                   <div className="overflow-y-auto pr-1 flex-1">
                     {activeTab === 'general' && (
@@ -1722,11 +1689,12 @@ export default function NewProduct() {
                               <div ref={attributeSetDropdownRef} className="relative">
                                 <div
                                   onClick={() => {
-                                    if (!isReadOnlyView && !selectedFamily) {
+                                    const hasFamilyAttributeSet = family && family.attributeSet;
+                                    if (!isReadOnlyView && !hasFamilyAttributeSet) {
                                       setIsAttributeSetDropdownOpen(!isAttributeSetDropdownOpen);
                                     }
                                   }}
-                                  className={`w-full border border-border rounded-lg px-3 py-2.5 text-sm flex items-center justify-between bg-surface ${isReadOnlyView || selectedFamily ? 'cursor-not-allowed opacity-75' : 'cursor-pointer hover:border-primary/30'
+                                  className={`w-full border border-border rounded-lg px-3 py-2.5 text-sm flex items-center justify-between bg-surface ${isReadOnlyView || (family && family.attributeSet) ? 'cursor-not-allowed opacity-75' : 'cursor-pointer hover:border-primary/30'
                                     }`}
                                 >
                                   <span className={selectedAttributeSetObj?.name ? 'text-foreground font-medium' : 'text-muted-foreground'}>
@@ -1735,7 +1703,7 @@ export default function NewProduct() {
                                       : 'Select Attribute Set...'}
                                   </span>
                                   <div className="flex items-center gap-1.5">
-                                    {selectedAttributeSetId && !isReadOnlyView && !selectedFamily && (
+                                    {selectedAttributeSetId && !isReadOnlyView && !(family && family.attributeSet) && (
                                       <button
                                         type="button"
                                         onClick={(e) => {
@@ -1788,9 +1756,7 @@ export default function NewProduct() {
                                 )}
                               </div>
 
-                              {selectedFamily && (
-                                <p className="text-[10px] text-primary mt-1 font-medium absolute">Inherited from Product Family: {selectedFamilyObj?.name || family?.name}</p>
-                              )}
+
                             </div>
 
                             {/* Search attributes... input */}
@@ -1933,6 +1899,7 @@ export default function NewProduct() {
                           productId={id || productId}
                           family={family}
                           readOnly={isReadOnlyView}
+                          refreshProductData={refreshProductData}
                         />
                       )
                     )}
@@ -2648,6 +2615,7 @@ export default function NewProduct() {
                   }
                   onClick={async () => {
                     setInlineAttributeSubmitting(true);
+                    let createdAttr: any;
                     try {
                       // 1. Create Attribute
                       const opts = (inlineAttributeType === 'select' || inlineAttributeType === 'multiselect')
@@ -2662,13 +2630,31 @@ export default function NewProduct() {
                         status: 'active'
                       };
 
-                      const createdAttr = await createAttribute(attrPayload as any);
+                      createdAttr = await createAttribute(attrPayload as any);
+                    } catch (err) {
+                      // API failed, keep modal open
+                      setInlineAttributeSubmitting(false);
+                      return;
+                    }
+
+                    // Success! Clear inputs and close modal immediately
+                    setInlineAttributeName('');
+                    setInlineAttributeType('text');
+                    setInlineAttributeRequired(false);
+                    setInlineAttributeOptions('');
+                    setShowAttributeModal(false);
+                    setInlineAttributeSubmitting(false);
+
+                    // Post-creation steps: group link, state sync, and config refreshes (wrapped separately to avoid blocking modal close)
+                    try {
                       const newId = createdAttr?.id || (createdAttr as any)?.data?.id;
+                      const rawAttr = createdAttr?.data || createdAttr;
 
                       if (newId && inlineAttributeGroupId) {
                         // 2. Associate with Attribute Group
                         const groupDetails = await attributeGroupsService.getById(inlineAttributeGroupId);
-                        const existingAttributeIds = (groupDetails?.attributes || []).map((a: any) => {
+                        const groupData = (groupDetails as any)?.data || groupDetails;
+                        const existingAttributeIds = (groupData?.attributes || []).map((a: any) => {
                           if (typeof a === 'string') return a;
                           return a?.id || a?._id;
                         }).filter(Boolean);
@@ -2677,15 +2663,19 @@ export default function NewProduct() {
                           attributes: [...existingAttributeIds, newId]
                         } as any);
 
-                        const matchingGroupObj = modalAvailableGroups?.find((g: any) => g.id === inlineAttributeGroupId);
-                        const groupName = groupDetails?.name || matchingGroupObj?.name || 'Group';
-                        const groupCode = groupDetails?.code || matchingGroupObj?.code || 'group';
+                        const matchingGroupObj = modalAvailableGroups?.find((g: any) => String(g.id || g._id) === String(inlineAttributeGroupId));
+                        const groupName = groupData?.name || matchingGroupObj?.name || 'Group';
+                        const groupCode = groupData?.code || matchingGroupObj?.code || 'group';
+
+                        const opts = (inlineAttributeType === 'select' || inlineAttributeType === 'multiselect')
+                          ? inlineAttributeOptions.split(',').map((o: string) => o.trim()).filter(Boolean)
+                          : undefined;
 
                         // Push the newly created attribute to customAddedAttributes so it renders immediately in the correct group
                         const attrForCustomList = {
-                          ...createdAttr,
+                          ...rawAttr,
                           id: newId,
-                          code: createdAttr?.code || inlineAttributeName.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_'),
+                          code: rawAttr?.code || inlineAttributeName.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_'),
                           is_required: inlineAttributeRequired,
                           isRequired: inlineAttributeRequired,
                           optionsList: opts ? opts.map((opt: string, index: number) => ({
@@ -2709,19 +2699,11 @@ export default function NewProduct() {
                         await loadConfiguration(selectedFamily);
                       } else if (selectedAttributeSetId) {
                         const setDetails = await attributeSetsService.getById(selectedAttributeSetId);
-                        setSelectedAttributeSetObj(setDetails);
+                        const setData = (setDetails as any)?.data || setDetails;
+                        setSelectedAttributeSetObj(setData);
                       }
-
-                      // Reset quick create state
-                      setInlineAttributeName('');
-                      setInlineAttributeType('text');
-                      setInlineAttributeRequired(false);
-                      setInlineAttributeOptions('');
-                      setShowAttributeModal(false);
-                    } catch (err) {
-                      // error toast is shown by hooks
-                    } finally {
-                      setInlineAttributeSubmitting(false);
+                    } catch (assocErr) {
+                      console.error("Failed to associate attribute with group or reload configuration:", assocErr);
                     }
                   }}
                   className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 flex items-center gap-2"

From e3d275d4dcb8d03a498f9f3d62358502f1fd3319 Mon Sep 17 00:00:00 2001
From: Mahir-Mohamed <mahirmohammed01@gmail.com>
Date: Fri, 14 Aug 2026 19:17:51 +0530
Subject: [PATCH 3/3] feat(products): improve product configuration review step

---
 src/features/product/pages/NewProduct.tsx | 456 ++++++++++++++++++----
 1 file changed, 389 insertions(+), 67 deletions(-)

diff --git a/src/features/product/pages/NewProduct.tsx b/src/features/product/pages/NewProduct.tsx
index 7bc9592..7025449 100644
--- a/src/features/product/pages/NewProduct.tsx
+++ b/src/features/product/pages/NewProduct.tsx
@@ -11,6 +11,7 @@ import { useProductFamilyConfiguration } from '../hook/useProductFamilyConfigura
 import { VariantsTab } from '../components/variants/VariantsTab';
 import { DynamicAttributesSection } from '../components/DynamicAttributesSection';
 import { ProductAssetsTab } from '../components/ProductAssetsTab';
+import { useChannel } from '../../channels/hook/useChannel';
 import { notify } from '../../../services/toast';
 import { useAttributeSet } from '../../attribute-sets/hook/useAttributeSet';
 import { useAttribute } from '../../attributes/hook/useAttribute';
@@ -49,6 +50,7 @@ export default function NewProduct() {
   const { categories, fetchCategories, createCategory } = useCategory();
   const { brands, fetchBrands, createBrand } = useBrand();
   const { units, fetchUnits, createUnit } = useUnit();
+  const { items: allChannels, fetchItems: fetchAllChannels } = useChannel();
 
   // Manual Attribute Set states
   const [selectedAttributeSetId, setSelectedAttributeSetId] = useState<string | null>(null);
@@ -77,7 +79,8 @@ export default function NewProduct() {
     fetchAttributeSets();
     fetchAttributeGroups();
     fetchRegistryAttributes();
-  }, [fetchFamilies, fetchCategories, fetchBrands, fetchUnits, fetchAttributeSets, fetchAttributeGroups, fetchRegistryAttributes]);
+    fetchAllChannels();
+  }, [fetchFamilies, fetchCategories, fetchBrands, fetchUnits, fetchAttributeSets, fetchAttributeGroups, fetchRegistryAttributes, fetchAllChannels]);
 
   const realFamiliesList = useMemo(() => {
     return families.map((f: any) => ({
@@ -531,7 +534,8 @@ export default function NewProduct() {
       metadata: {
         workflowCode: '',
         workflowName: '',
-        currentStage: 'draft'
+        currentStage: 'draft',
+        channels: [] as string[]
       } as any,
       attributes: {} as Record<string, any>
     },
@@ -551,6 +555,7 @@ export default function NewProduct() {
 
         const submissionValues = {
           ...values,
+          family_id: selectedFamily || undefined,
           category_id: values.category || null,
           brand_id: values.brand || null,
           unit_id: values.unit || null,
@@ -651,6 +656,21 @@ export default function NewProduct() {
     return !formik.isValid;
   }, [activeTab, formik.values, formik.errors, formik.isValid, filteredAttributesList, areRequiredAttributesComplete, product?.completenessEntries]);
 
+  const handleChannelToggle = useCallback((channelCode: string) => {
+    const inheritedCodes = (family?.channels || []).map((ch: any) => ch.channel_code);
+    if (inheritedCodes.includes(channelCode)) {
+      return; // Locked/Inherited - cannot be removed
+    }
+    const current = formik.values.metadata?.channels || [];
+    let next: string[];
+    if (current.includes(channelCode)) {
+      next = current.filter((c: string) => c !== channelCode);
+    } else {
+      next = [...current, channelCode];
+    }
+    formik.setFieldValue('metadata.channels', next);
+  }, [family, formik.values.metadata?.channels, formik.setFieldValue]);
+
   const handleSubmitWithValidation = async (targetStatus?: string) => {
     const statusToUse = targetStatus || formik.values.status || 'draft';
     await formik.setFieldValue('status', statusToUse);
@@ -787,11 +807,17 @@ export default function NewProduct() {
         type: productData.type || productData.metadata?.type || 'simple',
         description: productData.description || productData.metadata?.description || '',
         categories: Array.isArray(productData.categories) ? productData.categories : (categoryId ? [categoryId] : []),
-        metadata: productData.metadata || {
-          workflowCode: '',
-          workflowName: '',
-          currentStage: 'draft'
-        },
+        metadata: productData.metadata
+          ? {
+            channels: [],
+            ...productData.metadata,
+          }
+          : {
+            workflowCode: '',
+            workflowName: '',
+            currentStage: 'draft',
+            channels: [],
+          },
         attributes: mergedAttributes
       });
 
@@ -1906,51 +1932,104 @@ export default function NewProduct() {
 
                     {activeTab === 'channels' && (
                       <div className="space-y-6">
-                        <div className="bg-surface border border-border rounded-xl p-6">
+                        <div className="bg-surface border border-border rounded-xl p-6 shadow-2xs">
                           <div className="flex items-center justify-between mb-6">
                             <div>
-                              <h3 className="font-semibold text-foreground mb-1">Channel Publishing</h3>
-                              <p className="text-sm text-muted-foreground">Enable channels to publish this product</p>
+                              <h3 className="font-bold text-foreground text-sm">Channel Publishing</h3>
+                              <p className="text-xs text-muted-foreground mt-0.5">Configure which distribution channels this product is published to.</p>
                             </div>
-                            <span className="px-2 py-0.5 text-xs font-medium text-primary-dark bg-primary/5 border border-primary/20 rounded-md">Inherited from Family</span>
+                            <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-surface-muted border border-border text-muted-foreground">
+                              Inherited & Optional
+                            </span>
                           </div>
 
-                          <div className="space-y-4">
-                            {(family?.channels || []).map((ch: any, i: number) => (
-                              <div key={i} className="border border-border rounded-xl p-4 bg-surface">
-                                <div className="flex items-center justify-between mb-3">
-                                  <label className="flex items-center gap-3 cursor-pointer">
-                                    <input type="checkbox" defaultChecked className="w-4 h-4 text-primary rounded border-border focus:ring-primary" />
-                                    <div>
-                                      <div className="font-semibold text-sm text-foreground">{ch.channel_code}</div>
-                                      <div className="text-xs text-muted-foreground">Inherited mapping</div>
+                          {allChannels && allChannels.length > 0 ? (
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                              {allChannels.map((ch: any) => {
+                                const isInherited = (family?.channels || []).some(
+                                  (fCh: any) => fCh.channel_code === ch.code
+                                );
+                                const isSelected = isInherited || (formik.values.metadata?.channels || []).includes(ch.code);
+
+                                return (
+                                  <div
+                                    key={ch.id}
+                                    onClick={() => !isReadOnlyView && !isInherited && handleChannelToggle(ch.code)}
+                                    className={`border rounded-xl p-4 transition-all flex items-start gap-4 bg-surface ${isSelected
+                                      ? 'border-primary bg-primary/5'
+                                      : 'border-border hover:border-primary/20'
+                                      } ${isInherited || isReadOnlyView ? '' : 'cursor-pointer'}`}
+                                  >
+                                    <div className="flex items-center h-5 mt-0.5">
+                                      <input
+                                        type="checkbox"
+                                        checked={isSelected}
+                                        disabled={isInherited || isReadOnlyView}
+                                        onChange={() => { }} // Handled by outer card click
+                                        onClick={(e) => e.stopPropagation()} // Prevent double triggers
+                                        className={`w-4 h-4 text-primary rounded border-border focus:ring-primary ${isInherited ? 'cursor-not-allowed opacity-75' : ''
+                                          }`}
+                                      />
                                     </div>
-                                  </label>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
+                                    <div className="flex-1 space-y-1">
+                                      <div className="flex items-center gap-2">
+                                        <span className="font-semibold text-xs text-foreground uppercase tracking-wide">
+                                          {ch.name} ({ch.code})
+                                        </span>
+                                        {isInherited && (
+                                          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold bg-primary-light/20 text-primary-dark border border-primary/20 uppercase">
+                                            Required
+                                          </span>
+                                        )}
+                                        {!isInherited && (
+                                          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold bg-surface-muted text-muted-foreground border border-border uppercase">
+                                            Optional
+                                          </span>
+                                        )}
+                                      </div>
+                                      {ch.description && (
+                                        <p className="text-xs text-muted-foreground leading-normal">
+                                          {ch.description}
+                                        </p>
+                                      )}
+                                      <div className="text-[10px] text-muted-foreground font-mono">
+                                        Status: <span className="font-semibold text-foreground uppercase">{ch.status || 'active'}</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          ) : (
+                            <div className="text-center text-xs text-muted-foreground py-10 font-medium bg-background border border-dashed border-border rounded-xl">
+                              No active distribution channels configured in the system.
+                            </div>
+                          )}
                         </div>
                       </div>
                     )}
 
                     {activeTab === 'review' && (
-                      <div className="space-y-6">
+                      <div className="space-y-5">
+
+                        {/* ── Product Summary ── */}
                         <div className="bg-surface border border-border rounded-xl p-6">
-                          <h3 className="font-semibold text-foreground mb-4">Product Summary</h3>
-                          <div className="grid grid-cols-2 gap-y-6 gap-x-12">
+                          <h3 className="font-semibold text-foreground mb-4 text-sm">Product Summary</h3>
+                          <div className="grid grid-cols-2 gap-y-5 gap-x-12">
                             <div>
                               <div className="text-xs text-muted-foreground mb-1">Product Name</div>
                               <div className="font-medium text-sm text-foreground">{formik.values.name || 'Not set'}</div>
                             </div>
                             <div>
                               <div className="text-xs text-muted-foreground mb-1">Product Code</div>
-                              <div className="font-medium text-sm text-foreground font-mono">{formik.values.code}</div>
-                            </div>
-                            <div>
-                              <div className="text-xs text-muted-foreground mb-1">Master SKU</div>
-                              <div className="font-medium text-sm text-primary-dark font-mono font-bold">{formik.values.sku}</div>
+                              <div className="font-medium text-sm text-foreground font-mono">{formik.values.code || '—'}</div>
                             </div>
+                            {formik.values.sku && (
+                              <div>
+                                <div className="text-xs text-muted-foreground mb-1">Master SKU</div>
+                                <div className="font-bold text-sm text-primary-dark font-mono">{formik.values.sku}</div>
+                              </div>
+                            )}
                             <div>
                               <div className="text-xs text-muted-foreground mb-1">Product Family</div>
                               <div className="font-medium text-sm text-foreground">{family?.name || 'Not set'}</div>
@@ -1978,9 +2057,9 @@ export default function NewProduct() {
                           </div>
                         </div>
 
-                        {/* Audit Information Card */}
-                        <div className="bg-surface border border-border rounded-xl p-6">
-                          <h3 className="font-semibold text-foreground mb-4">Audit Information</h3>
+                        {/* ── Audit Information ── */}
+                        <div className="bg-surface border border-border rounded-xl p-5">
+                          <h3 className="font-semibold text-foreground mb-3 text-sm">Audit Information</h3>
                           <div className="grid grid-cols-4 gap-4 text-xs">
                             <div>
                               <span className="text-muted-foreground block">Created By</span>
@@ -2001,44 +2080,287 @@ export default function NewProduct() {
                           </div>
                         </div>
 
-                        <div className="grid grid-cols-2 gap-6">
-                          <div className="bg-surface border border-border rounded-xl p-6">
-                            <div className="flex justify-between items-start mb-2">
-                              <h3 className="font-semibold text-sm text-foreground">Attributes Defined</h3>
-                              <LayoutGrid className="w-4 h-4 text-primary" />
+                        {/* ── Attributes ── */}
+                        {(() => {
+                          const configuredAttrs = filteredAttributesList.filter((attr: any) => {
+                            const val = formik.values.attributes?.[attr.code];
+                            return !isEmptyAttributeValue(val);
+                          });
+                          const totalAttrs = filteredAttributesList.length;
+                          const ATTR_PREVIEW = 8;
+                          return (
+                            <div className="bg-surface border border-border rounded-xl p-6">
+                              <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                  <LayoutGrid className="w-4 h-4 text-primary" />
+                                  <h3 className="font-semibold text-sm text-foreground">Attributes</h3>
+                                  <span className="text-xs text-muted-foreground font-medium">{configuredAttrs.length} of {totalAttrs} configured</span>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => setActiveTab('attributes')}
+                                  className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                                >
+                                  <Pencil className="w-3 h-3" /> Edit
+                                </button>
+                              </div>
+                              {configuredAttrs.length > 0 ? (
+                                <div className="divide-y divide-border">
+                                  {configuredAttrs.slice(0, ATTR_PREVIEW).map((attr: any) => {
+                                    const val = formik.values.attributes?.[attr.code];
+                                    const displayVal = Array.isArray(val) ? val.join(', ') : String(val);
+                                    return (
+                                      <div key={attr.code} className="flex items-center justify-between py-2.5 text-sm">
+                                        <span className="text-muted-foreground text-xs font-medium w-2/5 truncate">{attr.name || attr.code}</span>
+                                        <span className="font-medium text-foreground text-xs text-right w-3/5 truncate">{displayVal}</span>
+                                      </div>
+                                    );
+                                  })}
+                                  {configuredAttrs.length > ATTR_PREVIEW && (
+                                    <div className="pt-2.5 text-xs text-muted-foreground">
+                                      +{configuredAttrs.length - ATTR_PREVIEW} more attributes configured
+                                    </div>
+                                  )}
+                                </div>
+                              ) : (
+                                <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg bg-background">
+                                  No attribute values configured yet
+                                </div>
+                              )}
                             </div>
-                            <div className="text-2xl font-bold text-foreground mb-4">
-                              {Object.keys(formik.values.attributes).filter(k => formik.values.attributes[k] !== undefined && formik.values.attributes[k] !== '').length} / {attributesList?.length || 0}
-                            </div>
-                          </div>
+                          );
+                        })()}
 
-                          <div className="bg-surface border border-border rounded-xl p-6">
-                            <div className="flex justify-between items-start mb-2">
-                              <h3 className="font-semibold text-sm text-foreground">Variants</h3>
-                              <Tags className="w-4 h-4 text-primary" />
+                        {/* ── Variants ── */}
+                        {(() => {
+                          const variants = product?.variants || [];
+                          const VARIANT_PREVIEW = 5;
+                          return (
+                            <div className="bg-surface border border-border rounded-xl p-6">
+                              <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                  <Tags className="w-4 h-4 text-primary" />
+                                  <h3 className="font-semibold text-sm text-foreground">Variants</h3>
+                                  <span className="text-xs text-muted-foreground font-medium">
+                                    {variants.length > 0 ? `${variants.length} configured` : 'None configured'}
+                                  </span>
+                                </div>
+                                {formik.values.type === 'variant' && (
+                                  <button
+                                    type="button"
+                                    onClick={() => setActiveTab('variants')}
+                                    className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                                  >
+                                    <Pencil className="w-3 h-3" /> Edit
+                                  </button>
+                                )}
+                              </div>
+                              {variants.length > 0 ? (
+                                <div className="divide-y divide-border">
+                                  {variants.slice(0, VARIANT_PREVIEW).map((v: any, idx: number) => {
+                                    const axes = (v.values || [])
+                                      .map((vv: any) => `${vv.axis?.name || vv.attribute_code || 'Axis'}: ${vv.value}`)
+                                      .join(' · ');
+                                    const sku = v.metadata?.sku || v.sku || null;
+                                    return (
+                                      <div key={v.id || idx} className="flex items-center justify-between py-2.5">
+                                        <span className="text-xs text-foreground font-medium">{axes || `Variant ${idx + 1}`}</span>
+                                        {sku && <span className="font-mono text-[10px] text-muted-foreground bg-surface-muted border border-border rounded px-1.5 py-0.5">{sku}</span>}
+                                      </div>
+                                    );
+                                  })}
+                                  {variants.length > VARIANT_PREVIEW && (
+                                    <div className="pt-2.5 text-xs text-muted-foreground">+{variants.length - VARIANT_PREVIEW} more variants</div>
+                                  )}
+                                </div>
+                              ) : (
+                                <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg bg-background">
+                                  {formik.values.type === 'variant' ? 'No variants configured yet' : 'Product is Simple — no variants applicable'}
+                                </div>
+                              )}
                             </div>
-                            <div className="text-2xl font-bold text-foreground">{product?.variants?.length || 0}</div>
-                            <div className="text-xs text-muted-foreground">SKUs generated</div>
-                          </div>
+                          );
+                        })()}
 
-                          <div className="bg-surface border border-border rounded-xl p-6">
-                            <div className="flex justify-between items-start mb-2">
-                              <h3 className="font-semibold text-sm text-foreground">Assets</h3>
-                              <ImageIcon className="w-4 h-4 text-primary" />
+                        {/* ── Assets ── */}
+                        {(() => {
+                          const assets = product?.productAssets || [];
+                          const ASSET_PREVIEW = 6;
+                          return (
+                            <div className="bg-surface border border-border rounded-xl p-6">
+                              <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                  <ImageIcon className="w-4 h-4 text-primary" />
+                                  <h3 className="font-semibold text-sm text-foreground">Assets</h3>
+                                  <span className="text-xs text-muted-foreground font-medium">
+                                    {assets.length > 0 ? `${assets.length} uploaded` : 'None uploaded'}
+                                  </span>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => setActiveTab('assets')}
+                                  className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                                >
+                                  <Pencil className="w-3 h-3" /> Edit
+                                </button>
+                              </div>
+                              {assets.length > 0 ? (
+                                <div className="grid grid-cols-1 gap-2">
+                                  {assets.slice(0, ASSET_PREVIEW).map((pa: any, idx: number) => {
+                                    const asset = pa.asset || pa;
+                                    const thumb = asset.thumbnail_url || asset.url || null;
+                                    const name = asset.name || asset.original_name || `Asset ${idx + 1}`;
+                                    const typeName = asset.assetType?.name || pa.asset_type || null;
+                                    const role = pa.role || null;
+                                    const isPrimary = pa.is_primary;
+                                    return (
+                                      <div key={pa.id || idx} className="flex items-center gap-3 p-2.5 border border-border rounded-lg bg-background">
+                                        {thumb ? (
+                                          <img src={thumb} alt={name} className="w-10 h-10 object-cover rounded border border-border flex-shrink-0" />
+                                        ) : (
+                                          <div className="w-10 h-10 bg-surface-muted border border-border rounded flex items-center justify-center flex-shrink-0">
+                                            <ImageIcon className="w-4 h-4 text-muted-foreground" />
+                                          </div>
+                                        )}
+                                        <div className="flex-1 min-w-0">
+                                          <div className="flex items-center gap-2">
+                                            <span className="text-xs font-medium text-foreground truncate">{name}</span>
+                                            {isPrimary && (
+                                              <span className="text-[9px] font-bold bg-primary/10 text-primary border border-primary/20 rounded px-1 py-0.5 uppercase">Primary</span>
+                                            )}
+                                          </div>
+                                          <div className="flex items-center gap-2 mt-0.5">
+                                            {typeName && <span className="text-[10px] text-muted-foreground">{typeName}</span>}
+                                            {role && <span className="text-[10px] text-muted-foreground">· {role}</span>}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    );
+                                  })}
+                                  {assets.length > ASSET_PREVIEW && (
+                                    <div className="text-xs text-muted-foreground text-center pt-1">+{assets.length - ASSET_PREVIEW} more assets</div>
+                                  )}
+                                </div>
+                              ) : (
+                                <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg bg-background">
+                                  No assets uploaded yet
+                                </div>
+                              )}
                             </div>
-                            <div className="text-2xl font-bold text-foreground">{product?.productAssets?.length || 0}</div>
-                            <div className="text-xs text-muted-foreground">Files uploaded</div>
-                          </div>
+                          );
+                        })()}
 
-                          <div className="bg-surface border border-border rounded-xl p-6">
-                            <div className="flex justify-between items-start mb-2">
-                              <h3 className="font-semibold text-sm text-foreground">Category</h3>
-                              <FolderTree className="w-4 h-4 text-primary" />
+                        {/* ── Category ── */}
+                        {(() => {
+                          const catName = product?.category?.name || categories.find((c: any) => c.id === formik.values.category)?.name;
+                          const catCode = product?.category?.code || categories.find((c: any) => c.id === formik.values.category)?.code;
+                          return (
+                            <div className="bg-surface border border-border rounded-xl p-6">
+                              <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                  <FolderTree className="w-4 h-4 text-primary" />
+                                  <h3 className="font-semibold text-sm text-foreground">Category</h3>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => setActiveTab('general')}
+                                  className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                                >
+                                  <Pencil className="w-3 h-3" /> Edit
+                                </button>
+                              </div>
+                              {catName ? (
+                                <div className="flex items-center gap-3 p-3 border border-border rounded-lg bg-background">
+                                  <FolderTree className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                                  <div>
+                                    <div className="text-sm font-medium text-foreground">{catName}</div>
+                                    {catCode && <div className="text-[10px] text-muted-foreground font-mono mt-0.5">{catCode}</div>}
+                                  </div>
+                                  <span className="ml-auto text-[9px] font-bold bg-surface-muted text-muted-foreground border border-border rounded px-1.5 py-0.5 uppercase">Primary</span>
+                                </div>
+                              ) : (
+                                <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg bg-background">
+                                  No category selected
+                                </div>
+                              )}
                             </div>
-                            <div className="text-2xl font-bold text-foreground">{formik.values.category ? 1 : 0}</div>
-                            <div className="text-xs text-muted-foreground">Assigned Primary Category</div>
-                          </div>
-                        </div>
+                          );
+                        })()}
+
+                        {/* ── Channels ── */}
+                        {(() => {
+                          const inheritedCodes = (family?.channels || []).map((fc: any) => fc.channel_code);
+                          const optionalCodes = (formik.values.metadata?.channels || []).filter(
+                            (c: string) => !inheritedCodes.includes(c)
+                          );
+                          const allSelectedCodes = Array.from(new Set([...inheritedCodes, ...optionalCodes]));
+                          const totalChannels = allChannels?.length || 0;
+
+                          const resolveChannel = (code: string) =>
+                            allChannels?.find((c: any) => c.code === code);
+
+                          return (
+                            <div className="bg-surface border border-border rounded-xl p-6">
+                              <div className="flex items-center justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                  <Globe className="w-4 h-4 text-primary" />
+                                  <h3 className="font-semibold text-sm text-foreground">Channels</h3>
+                                  <span className="text-xs text-muted-foreground font-medium">
+                                    {allSelectedCodes.length} of {totalChannels} enabled
+                                  </span>
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => setActiveTab('channels')}
+                                  className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                                >
+                                  <Pencil className="w-3 h-3" /> Edit
+                                </button>
+                              </div>
+                              {allSelectedCodes.length > 0 ? (
+                                <div className="space-y-3">
+                                  {inheritedCodes.length > 0 && (
+                                    <div>
+                                      <div className="text-[10px] font-bold uppercase text-muted-foreground tracking-wider mb-2">Required (Inherited from Family)</div>
+                                      <div className="flex flex-wrap gap-2">
+                                        {inheritedCodes.map((code: string) => {
+                                          const ch = resolveChannel(code);
+                                          return (
+                                            <span key={code} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-primary/10 text-primary border border-primary/25">
+                                              <Check className="w-3 h-3" />
+                                              {ch?.name || code}
+                                            </span>
+                                          );
+                                        })}
+                                      </div>
+                                    </div>
+                                  )}
+                                  {optionalCodes.length > 0 && (
+                                    <div>
+                                      <div className="text-[10px] font-bold uppercase text-muted-foreground tracking-wider mb-2">Optional (Selected)</div>
+                                      <div className="flex flex-wrap gap-2">
+                                        {optionalCodes.map((code: string) => {
+                                          const ch = resolveChannel(code);
+                                          return (
+                                            <span key={code} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-surface-muted text-foreground border border-border">
+                                              <Check className="w-3 h-3 text-primary" />
+                                              {ch?.name || code}
+                                            </span>
+                                          );
+                                        })}
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                              ) : (
+                                <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg bg-background">
+                                  No channels enabled
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })()}
+
                       </div>
                     )}
                   </div>