Implement granular synchronization for Outer Box, Units, and MOQ separately

src/components/DimensionsView.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { ExcelRow, COLUMNS } from '../types';
-import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw } from 'lucide-react';
+import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers } from 'lucide-react';
 import { cn } from '../lib/utils';
 
 interface DimensionsViewProps {
@@ -26,7 +26,7 @@ interface DimensionGroup {
 export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureState }: DimensionsViewProps) {
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [showOnlyInconsistent, setShowOnlyInconsistent] = useState(true);
-  const [syncing, setSyncing] = useState<string | null>(null);
+  const [syncing, setSyncing] = useState<{ key: string, field: string } | null>(null);
 
   const groups = useMemo(() => {
     const groupMap = new Map<string, { row: ExcelRow; index: number }[]>();
@@ -45,7 +45,8 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
 
     const result: DimensionGroup[] = [];
     groupMap.forEach((rows, key) => {
-      if (key === '0x0x0' || key === 'xx' || key === '0x0x0') return; // Skip empty/placeholder groups
+      // Skip empty/placeholder groups (0x0x0 or empty fields)
+      if (key === '0x0x0' || key === 'xx' || key === 'x x') return; 
 
       const first = rows[0].row;
       const firstOuter = `${first[COLUMNS.OUTER_L]}x${first[COLUMNS.OUTER_W]}x${first[COLUMNS.OUTER_H]}`;
@@ -96,13 +97,15 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
     setExpandedGroups(next);
   };
 
-  const handleSyncFromRow = async (group: DimensionGroup, sourceRow: ExcelRow) => {
+  const handleSyncField = async (group: DimensionGroup, sourceRow: ExcelRow, fieldType: 'outer' | 'units' | 'moq') => {
-    if (!window.confirm(`Apply measures of product ${sourceRow[COLUMNS.ARTICLE_NO]} to all ${group.rows.length} products in this group?`)) {
+    const fieldLabel = fieldType === 'outer' ? 'Outer Box Dimensions' : fieldType === 'units' ? 'Units per Outer' : 'MOQ';
+    if (!window.confirm(`Sync ALL products in this group to match "${fieldLabel}" from product ${sourceRow[COLUMNS.ARTICLE_NO]}?`)) {
       return;
     }
 
-    onCaptureState(`Synced ${group.rows.length} products to match ${sourceRow[COLUMNS.ARTICLE_NO]}`);
+    onCaptureState(`Bulk synced ${fieldLabel} in group ${group.innerDims}`);
-    setSyncing(group.key);
+    setSyncing({ key: group.key, field: fieldType });
+    
     try {
       const outerL = sourceRow[COLUMNS.OUTER_L];
       const outerW = sourceRow[COLUMNS.OUTER_W];
@@ -111,16 +114,49 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
       const moq = sourceRow[COLUMNS.MOQ];
 
       for (const { row, index } of group.rows) {
-        // Skip updating the source row itself (though it doesn't hurt)
         if (row === sourceRow) continue;
+        const updatedRow = [...row];
         
+        if (fieldType === 'outer') {
+          updatedRow[COLUMNS.OUTER_L] = outerL;
+          updatedRow[COLUMNS.OUTER_W] = outerW;
+          updatedRow[COLUMNS.OUTER_H] = outerH;
+        } else if (fieldType === 'units') {
+          updatedRow[COLUMNS.UNITS_OUTER] = unitsOuter;
+        } else if (fieldType === 'moq') {
+          updatedRow[COLUMNS.MOQ] = moq;
+        }
+        
+        await onSaveRow(index, updatedRow);
+      }
+    } finally {
+      setSyncing(null);
+    }
+  };
+
+  const handleFullSync = async (group: DimensionGroup, sourceRow: ExcelRow) => {
+    if (!window.confirm(`Sync ALL Packaging & MOQ data in this group to match product ${sourceRow[COLUMNS.ARTICLE_NO]}?`)) {
+      return;
+    }
+
+    onCaptureState(`Full sync of packaging data in group ${group.innerDims}`);
+    setSyncing({ key: group.key, field: 'all' });
+    
+    try {
+      const outerL = sourceRow[COLUMNS.OUTER_L];
+      const outerW = sourceRow[COLUMNS.OUTER_W];
+      const outerH = sourceRow[COLUMNS.OUTER_H];
+      const unitsOuter = sourceRow[COLUMNS.UNITS_OUTER];
+      const moq = sourceRow[COLUMNS.MOQ];
+
+      for (const { row, index } of group.rows) {
+        if (row === sourceRow) continue;
         const updatedRow = [...row];
         updatedRow[COLUMNS.OUTER_L] = outerL;
         updatedRow[COLUMNS.OUTER_W] = outerW;
         updatedRow[COLUMNS.OUTER_H] = outerH;
         updatedRow[COLUMNS.UNITS_OUTER] = unitsOuter;
         updatedRow[COLUMNS.MOQ] = moq;
-        
         await onSaveRow(index, updatedRow);
       }
     } finally {
@@ -212,7 +248,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                 
                 {group.isInconsistent && !expandedGroups.has(group.key) && (
                   <div className="text-[10px] font-bold text-blue-400 bg-blue-400/5 px-2 py-1 rounded border border-blue-400/20">
-                    OPEN TO SYNC
+                    OPEN TO SYNC FIELDS
                   </div>
                 )}
               </div>
@@ -239,40 +275,64 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                           <div className="text-[10px] text-slate-500 truncate max-w-[200px]">{row[COLUMNS.ARTICLE_NAME]}</div>
                         </td>
                         <td className="px-4 py-3 text-slate-400 font-mono">
-                          {row[COLUMNS.INNER_L]} × {row[COLUMNS.INNER_W]} × {row[COLUMNS.INNER_H]}
+                          {row[COLUMNS.INNER_L] || '-'} × {row[COLUMNS.INNER_W] || '-'} × {row[COLUMNS.INNER_H] || '-'}
                         </td>
                         <td className={cn(
-                          "px-4 py-3 font-mono",
+                          "px-4 py-3 font-mono relative",
                           group.discrepancies.outer ? "text-amber-300" : "text-slate-400"
                         )}>
-                          {row[COLUMNS.OUTER_L]} × {row[COLUMNS.OUTER_W]} × {row[COLUMNS.OUTER_H]}
+                          <span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span>
+                          <button 
+                            onClick={() => handleSyncField(group, row, 'outer')}
+                            disabled={syncing?.key === group.key}
+                            title="Apply these Outer Dims to all in group"
+                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                             {syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                          </button>
                         </td>
                         <td className={cn(
-                          "px-4 py-3",
+                          "px-4 py-3 relative",
                           group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400"
                         )}>
-                          {row[COLUMNS.UNITS_OUTER]}
+                          <span>{row[COLUMNS.UNITS_OUTER] || '-'}</span>
+                          <button 
+                            onClick={() => handleSyncField(group, row, 'units')}
+                            disabled={syncing?.key === group.key}
+                            title="Apply this Units/Outer to all in group"
+                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                             {syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                          </button>
                         </td>
                         <td className={cn(
-                          "px-4 py-3",
+                          "px-4 py-3 relative",
                           group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400"
                         )}>
-                          {row[COLUMNS.MOQ]}
+                          <span>{row[COLUMNS.MOQ] || '-'}</span>
+                          <button 
+                            onClick={() => handleSyncField(group, row, 'moq')}
+                            disabled={syncing?.key === group.key}
+                            title="Apply this MOQ to all in group"
+                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                             {syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                          </button>
                         </td>
                         <td className="px-4 py-3 text-right">
                           <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                             <button 
-                              onClick={() => handleSyncFromRow(group, row)}
+                              onClick={() => handleFullSync(group, row)}
-                              title="Set as master for this group"
+                              title="FULL SYNC: Apply ALL packaging measures labels to all in group"
-                              disabled={syncing === group.key}
+                              disabled={syncing?.key === group.key}
-                              className="p-1.5 hover:bg-emerald-600/20 text-slate-500 hover:text-emerald-400 rounded transition-all"
+                              className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all"
                             >
-                              {syncing === group.key ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
+                              {syncing?.key === group.key && syncing?.field === 'all' ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
                             </button>
                             <button 
                               onClick={() => onEdit(index)}
                               title="Edit product"
-                              className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all"
+                              className="p-1.5 hover:bg-slate-600/20 text-slate-500 hover:text-slate-300 rounded transition-all"
                             >
                               <Edit2 className="w-4 h-4" />
                             </button>