feat: persistent validation visibility in DimensionsView and selection fixes

src/components/DimensionsView.tsx

@@ -46,7 +46,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
   const [clusterSelections, setClusterSelections] = useState<Record<number, Set<number>>>({});
   const [clusterSyncTargets, setClusterSyncTargets] = useState<Record<number, string>>({});
   const [pendingNearDupSync, setPendingNearDupSync] = useState<{
-    clusterIndex: number;
+    clusterKey: string;
     targetGroupKey: string;
     selectedIndices: number[];
   } | null>(null);
@@ -120,7 +120,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
 
   const filteredGroups = useMemo(() => {
     let result = groups;
-    if (showOnlyInconsistent) result = result.filter(g => g.isInconsistent);
+    if (showOnlyInconsistent) {
+      result = result.filter(g => 
+        g.isInconsistent || 
+        g.rows.some(({ row }) => rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending')
+      );
+    }
 
     if (search || lineFilter.length > 0 || classFilter.length > 0) {
       const s = search.toLowerCase();
@@ -137,7 +142,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
     }
 
     return result;
-  }, [groups, showOnlyInconsistent, search, lineFilter, classFilter]);
+  }, [groups, showOnlyInconsistent, search, lineFilter, classFilter, rowStatuses]);
 
   const uniqueLines = useMemo(() => 
     Array.from(new Set(data.map(r => String(r[COLUMNS.LINE] || '')))).sort()
@@ -217,9 +222,10 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
 
   const executeNearDupSync = async () => {
     if (!pendingNearDupSync) return;
-    const { clusterIndex, targetGroupKey, selectedIndices } = pendingNearDupSync;
+    const { clusterKey, targetGroupKey, selectedIndices } = pendingNearDupSync;
 
-    const cluster = nearDuplicateClusters[clusterIndex];
+    const cluster = nearDuplicateClusters.find(c => c.groups[0].key === clusterKey);
+    if (!cluster) return;
     const targetGroup = cluster.groups.find(g => g.key === targetGroupKey);
     if (!targetGroup) return;
 
@@ -242,7 +248,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
 
     setClusterSelections(prev => {
       const next = { ...prev };
-      delete next[clusterIndex];
+      delete next[pendingNearDupSync.clusterKey];
       return next;
     });
   };
@@ -395,11 +401,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
           </div>
           {nearDuplicateClusters.map((cluster, ci) => {
             const allClusterRows = cluster.groups.flatMap(g => g.rows);
-            const selection = clusterSelections[ci] ?? new Set<number>();
+            const clusterKey = cluster.groups[0].key;
-            const targetKey = clusterSyncTargets[ci] ?? cluster.groups[0].key;
+            const selection = clusterSelections[clusterKey] ?? new Set<number>();
+            const targetKey = clusterSyncTargets[clusterKey] ?? cluster.groups[0].key;
 
             return (
-              <div key={ci} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden">
+              <div key={clusterKey} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden">
                 <button
                   onClick={() => {
                     const next = new Set(expandedNearDuplicates);
@@ -423,12 +430,11 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
 
                 {expandedNearDuplicates.has(ci) && (
                   <div className="border-t border-violet-500/20">
-                    {/* Sync toolbar */}
                     <div className="flex items-center gap-3 px-4 py-2.5 bg-violet-500/5 border-b border-violet-500/10 flex-wrap">
                       <span className="text-xs text-slate-400">Sync selected to:</span>
                       <select
                         value={targetKey}
-                        onChange={e => setClusterSyncTargets(prev => ({ ...prev, [ci]: e.target.value }))}
+                        onChange={e => setClusterSyncTargets(prev => ({ ...prev, [clusterKey]: e.target.value }))}
                         className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-violet-500"
                       >
                         {cluster.groups.map(g => {
@@ -442,21 +448,21 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                       </select>
                       <button
                         disabled={selection.size === 0}
-                        onClick={() => setPendingNearDupSync({ clusterIndex: ci, targetGroupKey: targetKey, selectedIndices: Array.from(selection) })}
+                        onClick={() => setPendingNearDupSync({ clusterKey, targetGroupKey: targetKey, selectedIndices: Array.from(selection) })}
                         className="flex items-center gap-1.5 px-3 py-1 bg-violet-600/20 text-violet-400 hover:bg-violet-600 hover:text-white rounded text-xs font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                       >
                         <Layers className="w-3 h-3" />
                         Sync {selection.size} selected
                       </button>
                       <button
-                        onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set(allClusterRows.map(r => r.index)) }))}
+                        onClick={() => setClusterSelections(prev => ({ ...prev, [clusterKey]: new Set(allClusterRows.map(r => r.index)) }))}
                         className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                       >
                         Select all
                       </button>
                       {selection.size > 0 && (
                         <button
-                          onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set() }))}
+                          onClick={() => setClusterSelections(prev => ({ ...prev, [clusterKey]: new Set() }))}
                           className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                         >
                           Clear
@@ -464,7 +470,6 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                       )}
                     </div>
 
-                    {/* Flat product list */}
                     <div className="divide-y divide-violet-500/10">
                       {allClusterRows.map(({ row, index }) => {
                         const isSelected = selection.has(index);
@@ -476,17 +481,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                               isSelected && "bg-violet-500/10"
                             )}
                             onClick={() => setClusterSelections(prev => {
-                              const current = new Set(prev[ci] ?? []);
+                              const current = new Set(prev[clusterKey] ?? []);
                               if (current.has(index)) current.delete(index); else current.add(index);
-                              return { ...prev, [ci]: current };
+                              return { ...prev, [clusterKey]: current };
                             })}
                           >
                             <input
                               type="checkbox"
                               checked={isSelected}
-                              onChange={() => {}}
+                              readOnly
-                              onClick={e => e.stopPropagation()}
+                              className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0 pointer-events-none"
-                              className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0"
                             />
                             <div className="flex-1 min-w-0">
                               <div className="flex items-center gap-2">
@@ -510,9 +514,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
       )}
 
       <div className="space-y-3">
-        {filteredGroups.map(group => (
+        {filteredGroups.map(group => {
+          const hasPending = group.rows.some(({ row }) => rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending');
+          return (
             <div key={group.key} className={cn(
               "border rounded-lg overflow-hidden transition-all",
+              hasPending ? "border-yellow-500/50 bg-yellow-500/5 ring-1 ring-yellow-500/20" :
               group.isInconsistent ? "border-amber-500/30 bg-amber-500/5" : "border-slate-700 bg-slate-800/30"
             )}>
             <div className="flex items-center justify-between bg-slate-800/20 pr-4">
@@ -526,17 +533,22 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                     <span className="font-mono text-sm text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded">
                       Inner: {group.innerDims} cm
                     </span>
+                    {hasPending && (
+                      <span className="flex items-center gap-1 text-xs font-medium text-yellow-500 bg-yellow-500/10 px-2 py-0.5 rounded ring-1 ring-yellow-500/20">
+                        Pending Validation
+                      </span>
+                    )}
                     {group.isInconsistent ? (
                       <span className="flex items-center gap-1 text-xs font-medium text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded ring-1 ring-amber-500/20">
                         <AlertTriangle className="w-3 h-3" />
                         Inconsistent
                       </span>
-                    ) : (
+                    ) : !hasPending ? (
                       <span className="flex items-center gap-1 text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded ring-1 ring-emerald-500/20">
                         <CheckCircle2 className="w-3 h-3" />
                         Consistent
                       </span>
-                    )}
+                    ) : null}
                   </div>
                   <div className="text-xs text-slate-500 mt-1">
                     {group.rows.length} product{group.rows.length !== 1 ? 's' : ''} in this dimension group
@@ -677,7 +689,8 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
               </div>
             )}
           </div>
-        ))}
+        );
+      })}
 
         {filteredGroups.length === 0 && (
           <div className="flex flex-col items-center justify-center py-20 bg-slate-800/20 border border-dashed border-slate-700 rounded-xl">

src/lib/supabase.ts

@@ -21,6 +21,9 @@ export async function saveRowToSupabase(articleNo: string, rowData: ExcelRow) {
     });
 
     if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        console.error('Initial PATCH failed:', response.status, errorData);
+
         // If PATCH didn't find the record, try UPSERT
         const upsertResponse = await fetch(`${SUPABASE_URL}/rest/v1/products_sync`, {
           method: 'POST',
@@ -37,7 +40,13 @@ export async function saveRowToSupabase(articleNo: string, rowData: ExcelRow) {
             updated_at: new Date().toISOString()
           })
         });
-        return upsertResponse.ok;
+
+        if (!upsertResponse.ok) {
+          const upsertError = await upsertResponse.json().catch(() => ({}));
+          console.error('UPSERT failed:', upsertResponse.status, upsertError);
+          return false;
+        }
+        return true;
     }
     return true;
   } catch (error) {