column visibility fixed in this

frontend/src/templates/TablePageTemplate.tsx

@@ -240,71 +240,22 @@ export default function TablePageTemplate({
   const { setMetrics } = useHeaderMetrics();
   const toast = useToast();
   const { pageSize, setPageSize } = usePageSizeStore();
-  const { setPageColumns, getPageColumns, _hasHydrated } = useColumnVisibilityStore();
+  const { getVisibleColumns, setVisibleColumns: saveVisibleColumns } = useColumnVisibilityStore();
 
-  // Column visibility state management with Zustand store
-  // Start with defaults, then update once hydration completes
+  // Column visibility - load from localStorage on mount, save on change
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
-    // Always start with defaults on initial render (before hydration)
-    return new Set(
-      columns
-        .filter(col => col.defaultVisible !== false)
-        .map(col => col.key)
-    );
+    const saved = getVisibleColumns(location.pathname);
+    if (saved.length > 0) {
+      return new Set(saved);
+    }
+    // Default: all columns with defaultVisible !== false
+    return new Set(columns.filter(col => col.defaultVisible !== false).map(col => col.key));
   });
 
-  // Track if we've already loaded saved columns for this page to prevent loops
-  const hasLoadedSavedColumns = useRef(false);
-
-  // Load saved columns from store after hydration completes (one-time per page)
+  // Save to localStorage whenever columns change
   useEffect(() => {
-    console.log('🔄 LOAD EFFECT:', { hasHydrated: _hasHydrated, hasLoaded: hasLoadedSavedColumns.current, pathname: location.pathname });
-    if (!_hasHydrated || hasLoadedSavedColumns.current) return;
-    
-    // Mark as loaded FIRST to prevent save effect from firing during this update
-    hasLoadedSavedColumns.current = true;
-    console.log('✅ Marked hasLoaded = true');
-    
-    const savedColumnKeys = getPageColumns(location.pathname);
-    console.log('📥 LOADING saved columns:', savedColumnKeys);
-    
-    if (savedColumnKeys && savedColumnKeys.length > 0) {
-      const savedSet = new Set(savedColumnKeys);
-      // Validate that all saved columns still exist in current columns config
-      const validColumns = columns.filter(col => savedSet.has(col.key));
-      
-      if (validColumns.length > 0) {
-        // Add any new columns with defaultVisible !== false
-        const newColumns = columns
-          .filter(col => !savedSet.has(col.key) && col.defaultVisible !== false)
-          .map(col => col.key);
-        const mergedColumns = [...Array.from(validColumns.map(col => col.key)), ...newColumns];
-        console.log('✅ Setting visible columns to:', mergedColumns);
-        setVisibleColumns(new Set(mergedColumns));
-        return;
-      }
-    }
-    
-    console.log('⚠️ No valid saved columns, keeping defaults');
-  }, [_hasHydrated, location.pathname]);
-  // NOTE: NOT including 'getPageColumns' or 'columns' - would cause unnecessary re-runs
-
-  // Reset loaded flag when pathname changes (navigating to different page)
-  useEffect(() => {
-    hasLoadedSavedColumns.current = false;
-  }, [location.pathname]);
-
-  // Save to store whenever visibleColumns changes (only after hydration to avoid saving defaults)
-  useEffect(() => {
-    console.log('💾 SAVE EFFECT:', { 
-      hasHydrated: _hasHydrated, 
-      hasLoaded: hasLoadedSavedColumns.current, 
-      willSave: _hasHydrated && hasLoadedSavedColumns.current,
-      columns: Array.from(visibleColumns)
-    });
-    if (!_hasHydrated || !hasLoadedSavedColumns.current) return; // Don't save until hydration completes AND saved columns have been loaded
-    setPageColumns(location.pathname, Array.from(visibleColumns));
-  }, [_hasHydrated, visibleColumns, location.pathname, setPageColumns]);
+    saveVisibleColumns(location.pathname, Array.from(visibleColumns));
+  }, [visibleColumns, location.pathname, saveVisibleColumns]);
 
   // Filter columns based on visibility
   const visibleColumnsList = useMemo(() => {