Fix: Implement dynamic column detection to handle Excel structure changes (insertion of PM Classification). This fixes the Missing data error in Pricing Units and other views.

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import * as XLSX from 'xlsx';
-import { AppState, ExcelRow, COLUMNS } from './types';
+import { AppState, ExcelRow, resolveColumnIndices, COLUMNS } from './types';
+import { ColumnsProvider } from './contexts/ColumnsContext';
 import { Sidebar } from './components/Sidebar';
 import { TopBar } from './components/TopBar';
 import { ProductDescriptions } from './components/ProductDescriptions';
@@ -121,18 +122,19 @@ export default function App() {
           console.log('Fetching synced data from Supabase...');
           const syncedData = await getAllSyncedRows(session?.access_token);
           
+          const resolvedCols = resolveColumnIndices(headers);
           const editableColumns = new Set([
-            COLUMNS.CLASSIFICATION,
-            COLUMNS.LONG_DE, COLUMNS.LONG_EN, 
-            COLUMNS.SHORT_DE, COLUMNS.SHORT_EN,
-            COLUMNS.DETAILS_DE, COLUMNS.DETAILS_EN,
-            COLUMNS.INNER_L, COLUMNS.INNER_W, COLUMNS.INNER_H,
-            COLUMNS.OUTER_L, COLUMNS.OUTER_W, COLUMNS.OUTER_H,
-            COLUMNS.UNITS_OUTER, COLUMNS.MOQ,
-            COLUMNS.VERIFIED_DIMS,
-            COLUMNS.VALIDATED_CHECK,
-            COLUMNS.VALIDATED_NOTE,
-            COLUMNS.PRODUCT_TYPE
+            resolvedCols.CLASSIFICATION,
+            resolvedCols.LONG_DE, resolvedCols.LONG_EN, 
+            resolvedCols.SHORT_DE, resolvedCols.SHORT_EN,
+            resolvedCols.DETAILS_DE, resolvedCols.DETAILS_EN,
+            resolvedCols.INNER_L, resolvedCols.INNER_W, resolvedCols.INNER_H,
+            resolvedCols.OUTER_L, resolvedCols.OUTER_W, resolvedCols.OUTER_H,
+            resolvedCols.UNITS_OUTER, resolvedCols.MOQ,
+            resolvedCols.VERIFIED_DIMS,
+            resolvedCols.VALIDATED_CHECK,
+            resolvedCols.VALIDATED_NOTE,
+            resolvedCols.PRODUCT_TYPE
           ]);
           
           headers.forEach((h: any, i: number) => {
@@ -142,7 +144,7 @@ export default function App() {
             }
           });
 
-          const articleNoIdx = COLUMNS.ARTICLE_NO;
+          const articleNoIdx = resolvedCols.ARTICLE_NO;
           const processedRows = rows.map(row => {
             const articleNo = String(row[articleNoIdx]);
             const synced = syncedData[articleNo];
@@ -530,7 +532,8 @@ export default function App() {
   }
 
   return (
-    <div className="h-screen bg-[#040d1a] text-slate-200 flex flex-col font-sans overflow-hidden">
+    <ColumnsProvider headers={appState.headers}>
+      <div className="h-screen bg-[#040d1a] text-slate-200 flex flex-col font-sans overflow-hidden">
       <TopBar
         stats={stats}
         activeModule={activeModule}
@@ -695,5 +698,6 @@ export default function App() {
         />
       )}
     </div>
+    </ColumnsProvider>
   );
 }