feat: implement persistence system with visual highlighting and auto-reset on export

src/App.tsx

@@ -6,7 +6,7 @@ import { TopBar } from './components/TopBar';
 import { ProductDescriptions } from './components/ProductDescriptions';
 import { MatrixView } from './components/MatrixView';
 import { EditPanel } from './components/EditPanel';
-import { getAllSyncedRows, saveRowToSupabase } from './lib/supabase';
+import { getAllSyncedRows, saveRowToSupabase, resetAllPendingRows } from './lib/supabase';
 import { getStoredSession, signOut, type AuthSession } from './lib/auth';
 import { LoginPage } from './components/LoginPage';
 import { DimensionsView } from './components/DimensionsView';
@@ -38,6 +38,7 @@ export default function App() {
   const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
   const [isLoadingDefault, setIsLoadingDefault] = useState(true);
   const [defaultLoadError, setDefaultLoadError] = useState<string | null>(null);
+  const [rowStatuses, setRowStatuses] = useState<Record<string, string>>({});
 
   useEffect(() => {
     const loadDefaultData = async () => {
@@ -78,7 +79,13 @@ export default function App() {
 
           const processedRows = rawRows.map(row => {
             const articleNo = String(row[articleNoIdx]);
-            const finalRow = syncedData[articleNo] || row;
+            const synced = syncedData[articleNo];
+            const finalRow = synced ? synced.data : row;
+            
+            // Sync status_check
+            if (synced && synced.status === 'pending') {
+              setRowStatuses(prev => ({ ...prev, [articleNo]: 'pending' }));
+            }
             
             // Format numeric/price fields to 2 decimal places
             return finalRow.map((val, idx) => {
@@ -219,6 +226,15 @@ export default function App() {
     const dateStr = new Date().toISOString().split('T')[0];
     XLSX.writeFile(wb, `CRAZE_Products_Updated_${dateStr}.xlsx`);
     
+    // 3. Post-export: Reset pending statuses in Supabase
+    console.log('Resetting pending statuses in Supabase...');
+    resetAllPendingRows().then(success => {
+      if (success) {
+        console.log('Successfully reset all pending statuses');
+        setRowStatuses({}); // Clear local statuses
+      }
+    });
+
     setAppState(prev => ({ ...prev, hasUnsavedChanges: false }));
   };
 
@@ -238,6 +254,10 @@ export default function App() {
     // 2. Persist to Supabase
     const articleNo = String(updatedRow[COLUMNS.ARTICLE_NO]);
     console.log(`Saving article ${articleNo} to Supabase...`);
+    
+    // Update local status to pending
+    setRowStatuses(prev => ({ ...prev, [articleNo]: 'pending' }));
+    
     const success = await saveRowToSupabase(articleNo, updatedRow);
     
     if (success) {
@@ -349,10 +369,11 @@ export default function App() {
                 <ProductDescriptions 
                   data={appState.data} 
                   onEdit={(index) => setEditingRowIndex(index)} 
+                  rowStatuses={rowStatuses}
                 />
               )}
               {activeModule === 'matrix' && (
-                <MatrixView data={appState.data} headers={appState.headers} />
+                <MatrixView data={appState.data} headers={appState.headers} rowStatuses={rowStatuses} />
               )}
 
               {activeModule === 'dimensions' && (
@@ -362,6 +383,7 @@ export default function App() {
                   onEdit={(index) => setEditingRowIndex(index)}
                   onSaveRow={handleSaveRow}
                   onCaptureState={captureState}
+                  rowStatuses={rowStatuses}
                 />
               )}
 
@@ -372,12 +394,14 @@ export default function App() {
                   onSaveRow={handleSaveRow}
                   onCaptureState={captureState}
                   onEdit={(index) => setEditingRowIndex(index)}
+                  rowStatuses={rowStatuses}
                 />
               )}
               {activeModule === 'article_details' && (
                 <ArticleDetails
                   data={appState.data}
                   onEdit={(index) => setEditingRowIndex(index)}
+                  rowStatuses={rowStatuses}
                 />
               )}
             </>