@bit.rhplus/ui.grid-layout 0.0.3 → 0.0.5

package/useGridLayout.js

@@ -1,625 +1,1788 @@
-/* eslint-disable */
-/**
- * Hlavní hook pro správu grid layout - automatické ukládání a načítání rozvržení sloupců
- * Kombinuje AG-Grid API s Grid Layout službou pro persistence uživatelských preferencí
- */
-
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { useGridLayoutApi } from './useGridLayoutApi';
-import { debounce } from 'lodash';
-
-/**
- * Hook pro správu grid layout s automatickým ukládáním
- * @param {Object} config - Konfigurace grid layout
- * @param {string} config.userKey - Identifikátor uživatele
- * @param {string} config.applicationName - Název aplikace
- * @param {string} config.gridName - Název gridu
- * @param {string} [config.filterName] - Název filtru (volitelné)
- * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
- * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
- * @param {number} [config.autoSaveDelay=2000] - Zpoždění auto-save v ms
- * @param {Array} config.columnDefs - AG-Grid column definitions
- * @param {string} [config.accessToken] - Přístupový token
- * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
- * @param {Function} [config.onLayoutLoaded] - Callback při načtení layoutu
- * @param {Function} [config.onLayoutSaved] - Callback při uložení layoutu
- * @param {Function} [config.onError] - Callback při chybě
- * @returns {Object} Grid layout management interface
- */
-export const useGridLayout = ({
-  userKey,
-  applicationName,
-  gridName,
-  filterName,
-  enabled = true,
-  autoSave = true,
-  autoSaveDelay = 2000,
-  columnDefs = [],
-  accessToken,
-  waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
-  onLayoutLoaded,
-  onLayoutSaved,
-  onError
-}) => {
-  // Validace columnDefs - musí být array
-  if (columnDefs !== undefined && columnDefs !== null && !Array.isArray(columnDefs)) {
-    console.error('useGridLayout: columnDefs musí být array, získán:', typeof columnDefs, columnDefs);
-    throw new Error('useGridLayout: columnDefs musí být array');
-  }
-
-  // Refs pro AG-Grid API
-  const gridApiRef = useRef(null);
-  const columnApiRef = useRef(null);
-  
-  // State
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState(null);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
-  
-  // Grid Layout API hook
-  const gridLayoutApi = useGridLayoutApi({
-    userKey,
-    applicationName,
-    gridName,
-    filterName,
-    accessToken
-  });
-
-  // Query pro načtení saved layoutu
-  const { 
-    data: savedFields, 
-    isLoading: isFieldsLoading, 
-    error: fieldsError,
-    refetch: refetchFields 
-  } = gridLayoutApi.useUserFields(
-    (columnDefs || []).map((colDef, index) => ({
-      name: colDef.field || `column_${index}`,
-      displayName: colDef.headerName || colDef.field || `Column ${index + 1}`,
-      dataType: colDef.type || 'string',
-      isVisible: !colDef.hide,
-      width: colDef.width || 100,
-      order: index
-    })),
-    { enabled: enabled && !!userKey && !!gridName && Array.isArray(columnDefs) && columnDefs.length > 0 }
-  );
-
-  /**
-   * Error handler
-   */
-  const handleError = useCallback((error, context = '') => {
-    console.error(`Grid Layout Error ${context}:`, error);
-    setError(error);
-    if (onError) {
-      onError(error, context);
-    }
-  }, [onError]);
-
-  /**
-   * Uloží současný stav sloupců do API
-   */
-  const saveCurrentLayout = useCallback(async () => {
-    if (!enabled || !gridApiRef.current || !columnApiRef.current) return;
-    
-    try {
-      setIsSaving(true);
-      setError(null);
-
-      // Získáme současný column state z AG-Grid
-      const columnState = columnApiRef.current.getColumnState();
-      
-      // Transformujeme na Grid API format
-      const fields = gridLayoutApi.transformColumnStateToFields(columnState, columnDefs);
-      
-      // Uložíme do API
-      const result = await gridLayoutApi.saveGridLayout(fields);
-      
-      if (result.success) {
-        setHasUnsavedChanges(false);
-        if (onLayoutSaved) {
-          onLayoutSaved(fields, columnState);
-        }
-      }
-    } catch (error) {
-      handleError(error, 'při ukládání layoutu');
-    } finally {
-      setIsSaving(false);
-    }
-  }, [enabled, columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
-
-  /**
-   * Debounced auto-save pro předcházení častým voláním API
-   */
-  const debouncedSave = useMemo(
-    () => debounce(saveCurrentLayout, autoSaveDelay),
-    [saveCurrentLayout, autoSaveDelay]
-  );
-
-  /**
-   * Aplikuje saved layout na AG-Grid
-   */
-  const applySavedLayout = useCallback(() => {
-    if (!savedFields?.records || !columnApiRef.current || isInitialized) return;
-
-    try {
-      setIsLoading(true);
-      // Transformujeme Grid API fields na AG-Grid column state
-      const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
-      console.log("🚀 ~ useGridLayout ~ columnState:", savedFields.records, columnDefs, columnState)
-      
-      if (columnState && columnState.length > 0) {
-        // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované, 
-        // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
-        const applyFunction = () => {
-          try {
-            console.log("🎯 Applying column state with delay:", {
-              columnState,
-              columnCount: columnState.length,
-              columnIds: columnState.map(c => c.colId),
-              hasOrder: true // pořadí je v poli implicitně
-            });
-            
-            // Debug info o columnApiRef
-            console.log("🔍 columnApiRef debug:", {
-              hasColumnApiRef: !!columnApiRef.current,
-              columnApiType: typeof columnApiRef.current,
-              columnApiMethods: columnApiRef.current ? Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function') : [],
-              hasApplyColumnState: columnApiRef.current && typeof columnApiRef.current.applyColumnState === 'function'
-            });
-
-            // Ověření, že columnApi podporuje applyColumnState
-            if (!columnApiRef.current) {
-              throw new Error('columnApiRef.current is null or undefined');
-            }
-            
-            if (typeof columnApiRef.current.applyColumnState !== 'function') {
-              throw new Error(`applyColumnState is not a function. Available methods: ${Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function').join(', ')}`);
-            }
-
-            console.log("test2");
-            // Aplikujeme column state na AG-Grid 
-            let result;
-            try {
-              const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
-              
-              result = columnApiRef.current.applyColumnState({
-                state: columnState,
-                applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
-                defaultState: { 
-                  sort: null,      // Reset sorting na všech sloupcích
-                  sortIndex: null, // Reset sort index 
-                  pivot: null,     // Reset pivot
-                  rowGroup: null   // Reset row grouping
-                }
-              });
-              console.log("test2.5 - applyColumnState executed");
-            } catch (applyError) {
-              console.error("❌ Error during applyColumnState:", applyError);
-              throw applyError;
-            }
-            
-            console.log("✅ Column state applied successfully:", {
-              result,
-              appliedColumns: columnState.length
-            });
-            
-            // Ověření, že se sloupce skutečně přeuspořádaly
-            const newColumnState = columnApiRef.current.getColumnState();
-            console.log("🚀 ~ test3:", newColumnState)
-            console.log("🔍 Current column state after apply:", newColumnState.map(c => c.colId));
-            
-            if (onLayoutLoaded) {
-              onLayoutLoaded(savedFields.records, columnState);
-            }
-          } catch (delayedError) {
-            console.error("❌ Error applying column state:", delayedError);
-            handleError(delayedError, 'při delayed aplikování layoutu');
-          }
-        };
-
-        // Pro waitForSavedFields aplikujeme okamžitě (pořadí je už v columnDefs)
-        // Pro normální režim použijeme delay
-        if (waitForSavedFields) {
-          applyFunction();
-        } else {
-          setTimeout(applyFunction, 100); // 100ms delay jen pro normální režim
-        }
-      }
-    } catch (error) {
-      handleError(error, 'při aplikování layoutu');
-    } finally {
-      setIsInitialized(true);
-      setIsLoading(false);
-    }
-  }, [savedFields, gridLayoutApi, isInitialized, onLayoutLoaded, handleError, columnDefs, waitForSavedFields]);
-
-  /**
-   * Event handlers pro AG-Grid
-   */
-  const handleColumnMoved = useCallback(() => {
-    if (!enabled || !isInitialized) return;
-    setHasUnsavedChanges(true);
-    // Neukládáme při každém pohybu - čekáme na onDragStopped
-  }, [enabled, isInitialized]);
-
-  const handleDragStopped = useCallback(() => {
-    if (!enabled || !isInitialized) return;
-    setHasUnsavedChanges(true);
-    if (autoSave) {
-      console.log("🎯 Drag stopped - spouštím debounced save");
-      debouncedSave();
-    }
-  }, [enabled, isInitialized, autoSave, debouncedSave]);
-
-  const handleColumnResized = useCallback(() => {
-    if (!enabled || !isInitialized) return;
-    setHasUnsavedChanges(true);
-    if (autoSave) {
-      debouncedSave();
-    }
-  }, [enabled, isInitialized, autoSave, debouncedSave]);
-
-  const handleColumnVisible = useCallback(() => {
-    if (!enabled || !isInitialized) return;
-    setHasUnsavedChanges(true);
-    if (autoSave) {
-      debouncedSave();
-    }
-  }, [enabled, isInitialized, autoSave, debouncedSave]);
-
-  const handleColumnPinned = useCallback(() => {
-    if (!enabled || !isInitialized) return;
-    setHasUnsavedChanges(true);
-    if (autoSave) {
-      debouncedSave();
-    }
-  }, [enabled, isInitialized, autoSave, debouncedSave]);
-
-  /**
-   * AG-Grid Ready handler
-   */
-  const handleGridReady = useCallback((params) => {
-    if (!enabled) return;
-    
-    gridApiRef.current = params.api;
-    columnApiRef.current = params.columnApi;
-    
-    // Pokud už máme saved data, aplikujeme je
-    if (savedFields?.records && !isInitialized) {
-      applySavedLayout();
-    }
-  }, [enabled, savedFields, isInitialized, applySavedLayout]);
-
-  /**
-   * Effect pro aplikování layoutu když se načtou data
-   */
-  useEffect(() => {
-    if (savedFields?.records && columnApiRef.current && !isInitialized) {
-      applySavedLayout();
-    }
-  }, [savedFields, applySavedLayout, isInitialized]);
-
-  /**
-   * Effect pro error handling
-   */
-  useEffect(() => {
-    if (fieldsError) {
-      handleError(fieldsError, 'při načítání saved layoutu');
-    }
-  }, [fieldsError, handleError]);
-
-  /**
-   * Cleanup effect
-   */
-  useEffect(() => {
-    return () => {
-      debouncedSave.cancel();
-    };
-  }, [debouncedSave]);
-
-  /**
-   * Resetuje layout na default
-   */
-  const resetToDefault = useCallback(async () => {
-    if (!enabled || !columnApiRef.current) return;
-
-    try {
-      setIsLoading(true);
-      
-      // Resetujeme AG-Grid na původní column definitions
-      columnApiRef.current.resetColumnState();
-      
-      // Pokud je autoSave zapnuté, uložíme resetovaný stav
-      if (autoSave) {
-        await saveCurrentLayout();
-      } else {
-        setHasUnsavedChanges(true);
-      }
-    } catch (error) {
-      handleError(error, 'při resetování layoutu');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [enabled, autoSave, saveCurrentLayout, handleError]);
-
-  /**
-   * Manuální uložení
-   */
-  const saveLayout = useCallback(async () => {
-    await saveCurrentLayout();
-  }, [saveCurrentLayout]);
-
-  /**
-   * Manuální reload
-   */
-  const reloadLayout = useCallback(async () => {
-    try {
-      setIsInitialized(false);
-      await refetchFields();
-    } catch (error) {
-      handleError(error, 'při reload layoutu');
-    }
-  }, [refetchFields, handleError]);
-
-  /**
-   * Získá aktuální column state pro Column Editor
-   */
-  const getCurrentColumnsForEditor = useCallback(() => {
-    console.log("🔍 getCurrentColumnsForEditor called", {
-      hasColumnApiRef: !!columnApiRef.current,
-      columnDefs: columnDefs?.length || 0,
-      savedFieldsCount: savedFields?.records?.length || 0
-    });
-
-    // Zajistíme, že máme validní columnDefs
-    const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
-    
-    if (!columnApiRef.current || validColumnDefs.length === 0) {
-      console.log("❌ Using fallback - AG-Grid not ready or no columnDefs");
-      // Fallback na původní columnDefs pokud není AG-Grid připraven
-      return validColumnDefs.map((col, index) => ({
-        id: col.field,
-        field: col.field,
-        headerName: col.headerName || col.field,
-        originalHeaderName: col.headerName || col.field,
-        width: col.width || 100,
-        originalWidth: col.width || 100,
-        visible: !col.hide,
-        order: index
-      }));
-    }
-
-    // Získáme aktuální column state z AG-Grid
-    const currentColumnState = columnApiRef.current.getColumnState();
-    console.log("📊 AG-Grid column state:", currentColumnState?.map(cs => ({
-      colId: cs.colId,
-      width: cs.width,
-      hide: cs.hide
-    })));
-    
-    if (!Array.isArray(currentColumnState)) {
-      console.log("❌ Using fallback - getColumnState() not valid array");
-      // Fallback pokud getColumnState() nevrátí validní array
-      return validColumnDefs.map((col, index) => ({
-        id: col.field,
-        field: col.field,
-        headerName: col.headerName || col.field,
-        originalHeaderName: col.headerName || col.field,
-        width: col.width || 100,
-        originalWidth: col.width || 100,
-        visible: !col.hide,
-        order: index
-      }));
-    }
-    
-    const result = currentColumnState.map((columnStateItem, index) => {
-      // Najdeme odpovídající column definition podle colId
-      const colDef = validColumnDefs.find(cd => cd.field === columnStateItem.colId) || {};
-      // Pokusíme se najít saved hodnotu pro headerName
-      const savedField = savedFields?.records?.find(sf => sf.fieldName === columnStateItem.colId);
-      
-      return {
-        id: columnStateItem.colId,
-        field: columnStateItem.colId,
-        headerName: savedField?.headerName || colDef.headerName || columnStateItem.colId,
-        originalHeaderName: colDef.headerName || columnStateItem.colId,
-        width: columnStateItem.width || colDef.width || 100,
-        originalWidth: colDef.width || 100,
-        visible: !columnStateItem.hide,
-        order: index
-      };
-    });
-    
-    console.log("✅ Using AG-Grid state - result:", result.map(r => ({
-      field: r.field,
-      headerName: r.headerName,
-      width: r.width,
-      visible: r.visible
-    })));
-    
-    return result;
-  }, [columnDefs, savedFields]);
-
-  /**
-   * Otevře Column Editor modal
-   */
-  const openColumnEditor = useCallback(() => {
-    console.log("🚀 Opening Column Editor", {
-      hasColumnApiRef: !!columnApiRef.current,
-      isInitialized,
-      columnDefsCount: columnDefs?.length || 0
-    });
-    setIsColumnEditorOpen(true);
-  }, [isInitialized, columnDefs]);
-
-  /**
-   * Zavře Column Editor modal
-   */
-  const closeColumnEditor = useCallback(() => {
-    setIsColumnEditorOpen(false);
-  }, []);
-
-  /**
-   * Uloží změny z Column Editoru
-   * @param {Array} editedColumns - Editované sloupce z modalu
-   */
-  const saveColumnEditorChanges = useCallback(async (editedColumns) => {
-    console.log("🚀 ~ useGridLayout ~ editedColumns:", editedColumns)
-    if (!enabled || !columnApiRef.current) return;
-
-    try {
-      setIsLoading(true);
-
-      // Filtrujeme pouze validní sloupce (s definovaným field)
-      const validColumns = editedColumns.filter(col => col.field && col.field !== undefined);
-
-      // Převedeme editované sloupce na AG-Grid column state
-      const columnState = validColumns.map((col, index) => ({
-        colId: col.field,
-        width: col.width,
-        hide: !col.visible,
-        pinned: null,
-        sort: null,
-        sortIndex: null
-      }));
-
-      // Aplikujeme změny na AG-Grid
-      columnApiRef.current.applyColumnState({
-        state: columnState,
-        applyOrder: true,
-        defaultState: { 
-          sort: null,
-          sortIndex: null,
-          pivot: null,
-          rowGroup: null
-        }
-      });
-
-      // Připravíme UserFields pro save podle C# SaveUserFieldModel struktury
-      const userFields = validColumns.map((col, index) => ({
-        FieldName: col.field,
-        HeaderName: col.headerName || col.field, // Editovaný název nebo fallback na field
-        Order: index, // Pořadí podle pozice v editedColumns
-        Show: col.visible,
-        Width: col.width || null
-      }));
-
-      // Uložíme změny přímo pomocí API
-      if (autoSave) {
-        const result = await gridLayoutApi.saveGridLayout(userFields);
-        if (result.success) {
-          setHasUnsavedChanges(false);
-          
-          // Explicitní refetch saved fields pro okamžité načtení nových dat
-          try {
-            await refetchFields();
-            console.log("✅ Saved fields refetched after save");
-          } catch (refetchError) {
-            console.warn("⚠️ Refetch failed after save:", refetchError);
-          }
-          
-          if (onLayoutSaved) {
-            onLayoutSaved(userFields, columnState);
-          }
-        }
-      } else {
-        setHasUnsavedChanges(true);
-      }
-
-      console.log("✅ Column Editor changes applied successfully");
-    } catch (error) {
-      handleError(error, 'při aplikování změn z Column Editoru');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [enabled, autoSave, gridLayoutApi, onLayoutSaved, handleError, userKey, applicationName, gridName, filterName, refetchFields]);
-
-  // Logika pro zobrazení columnDefs
-  const shouldShowColumns = useMemo(() => {
-    if (!waitForSavedFields) return true; // Pokud není waitForSavedFields, vždy zobrazuj
-    
-    // Pokud je waitForSavedFields true, čekáme na dokončení načítání
-    return !isFieldsLoading && !isLoading;
-  }, [waitForSavedFields, isFieldsLoading, isLoading]);
-
-  // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
-  const preTransformedColumnDefs = useMemo(() => {
-    if (!waitForSavedFields || !savedFields?.records || !Array.isArray(columnDefs)) {
-      return columnDefs; // Normální columnDefs
-    }
-
-    // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
-    const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
-    
-    if (!columnState || columnState.length === 0) {
-      return columnDefs; // Pokud není co transformovat, vrátíme původní
-    }
-
-    // Vytvoříme mapu pro rychlé vyhledávání
-    const columnStateMap = new Map();
-    columnState.forEach((colState, index) => {
-      columnStateMap.set(colState.colId, { ...colState, __order: index });
-    });
-
-    // Seřadíme columnDefs podle pořadí z columnState
-    const sortedColumnDefs = [...columnDefs].sort((a, b) => {
-      const aState = columnStateMap.get(a.field);
-      const bState = columnStateMap.get(b.field);
-      
-      const aOrder = aState?.__order ?? 999;
-      const bOrder = bState?.__order ?? 999;
-      
-      return aOrder - bOrder;
-    });
-
-    console.log("🔄 Pre-transformed columnDefs:", {
-      original: columnDefs.map(cd => cd.field),
-      transformed: sortedColumnDefs.map(cd => cd.field),
-      columnStateOrder: columnState.map(cs => cs.colId)
-    });
-
-    return sortedColumnDefs;
-  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi]);
-
-  return {
-    // State
-    isLoading: isLoading || isFieldsLoading,
-    isSaving,
-    error,
-    hasUnsavedChanges,
-    isInitialized,
-    shouldShowColumns, // Nové pole pro řízení zobrazení columnDefs
-    preTransformedColumnDefs, // Pre-transformované columnDefs pro waitForSavedFields
-    
-    // AG-Grid event handlers
-    onGridReady: handleGridReady,
-    onColumnMoved: handleColumnMoved,
-    onDragStopped: handleDragStopped, // Nový handler pro konec drag operace
-    onColumnResized: handleColumnResized,
-    onColumnVisible: handleColumnVisible,
-    onColumnPinned: handleColumnPinned,
-    
-    // Manual actions
-    saveLayout,
-    resetToDefault,
-    reloadLayout,
-    
-    // Column Editor
-    isColumnEditorOpen,
-    openColumnEditor,
-    closeColumnEditor,
-    saveColumnEditorChanges,
-    getCurrentColumnsForEditor, // Nová funkce pro aktuální column state
-    
-    // Data
-    savedFields: savedFields?.records || [],
-    columnDefs, // Původní columnDefs pro Column Editor
-    
-    // Utils
-    gridLayoutApi
-  };
-};
-
-export default useGridLayout;
+/* eslint-disable */
+/**
+ * Hlavní hook pro správu grid layout - automatické ukládání a načítání rozvržení sloupců
+ * Kombinuje AG-Grid API s Grid Layout službou pro persistence uživatelských preferencí
+ */
+
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useGridLayoutApi } from './useGridLayoutApi';
+import { debounce } from 'lodash';
+// Import tooltip komponent pro eliminaci circular dependency
+// import * as Tooltip from '../grid/tooltips';
+
+/**
+ * Hook pro správu grid layout s automatickým ukládáním
+ * @param {Object} config - Konfigurace grid layout
+ * @param {string} config.userKey - Identifikátor uživatele
+ * @param {string} config.applicationName - Název aplikace
+ * @param {string} config.gridName - Název gridu
+ * @param {string} [config.filterName] - Název filtru (volitelné)
+ * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
+ * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
+ * @param {number} [config.autoSaveDelay=2000] - Zpoždění auto-save v ms
+ * @param {Array} config.columnDefs - AG-Grid column definitions
+ * @param {string} [config.accessToken] - Přístupový token
+ * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
+ * @param {Function} [config.onLayoutLoaded] - Callback při načtení layoutu
+ * @param {Function} [config.onLayoutSaved] - Callback při uložení layoutu
+ * @param {Function} [config.onError] - Callback při chybě
+ * @returns {Object} Grid layout management interface
+ */
+export const useGridLayout = ({
+  userKey,
+  applicationName,
+  gridName,
+  filterName,
+  enabled = true,
+  autoSave = true,
+  autoSaveDelay = 2000,
+  columnDefs = [],
+  accessToken,
+  waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+  onLayoutLoaded,
+  onLayoutSaved,
+  onError,
+}) => {
+
+  // Validace columnDefs - musí být array
+  if (
+    columnDefs !== undefined &&
+    columnDefs !== null &&
+    !Array.isArray(columnDefs)
+  ) {
+    console.error(
+      '[GridLayout] columnDefs is not an array:',
+      typeof columnDefs,
+      columnDefs
+    );
+    throw new Error('useGridLayout: columnDefs musí být array');
+  }
+
+  // Refs pro AG-Grid API
+  const gridApiRef = useRef(null);
+  const columnApiRef = useRef(null);
+
+  // State
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isGridReady, setIsGridReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isApplyingLayout, setIsApplyingLayout] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
+  const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
+  // Místo version counter použijeme stabilnější mechanismus pro tracking změn
+  const [lastColumnDefsHash, setLastColumnDefsHash] = useState('');
+
+  // Utility funkce pro generování hash z columnDefs
+  const generateColumnDefsHash = useCallback((colDefs) => {
+    if (!Array.isArray(colDefs)) return '';
+    
+    // Vytvoříme hash z klíčových vlastností které ovlivňují rendering
+    return colDefs.map(col => 
+      `${col.field || col.colId}:${col.width || 'auto'}:${col.hide ? 'hidden' : 'visible'}:${col.headerName || ''}`
+    ).join('|');
+  }, []);
+
+
+  // Grid Layout API hook
+  const gridLayoutApi = useGridLayoutApi({
+    userKey,
+    applicationName,
+    gridName,
+    filterName,
+    accessToken,
+  });
+
+  // Query pro načtení saved layoutu
+  const {
+    data: savedFields,
+    isLoading: isFieldsLoading,
+    error: fieldsError,
+    refetch: refetchFields,
+  } = gridLayoutApi.useUserFields(
+    (columnDefs || []).map((colDef, index) => ({
+      name: colDef.field || colDef.colId || `column_${index}`,
+      displayName:
+        colDef.headerName ||
+        colDef.field ||
+        colDef.colId ||
+        `Column ${index + 1}`,
+      dataType: colDef.type || 'string',
+      isVisible: !colDef.hide,
+      width: colDef.width || 100,
+      order: index,
+    })),
+    {
+      enabled:
+        enabled &&
+        !!userKey &&
+        !!gridName &&
+        Array.isArray(columnDefs) &&
+        columnDefs.length > 0,
+    }
+  );
+
+  // // Bezpečné aktualizování lastKnownColumnState při otevření editoru
+  // useEffect(() => {
+  //   if (isColumnEditorOpen && columnApiRef.current && typeof columnApiRef.current.getColumnState === 'function') {
+  //     try {
+  //       const currentState = columnApiRef.current.getColumnState();
+  //       if (Array.isArray(currentState) && currentState.length > 0) {
+  //         // Aktualizujeme lastKnownColumnState po otevření editoru
+  //         const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
+  //         const formattedState = currentState.map((columnStateItem, index) => {
+  //           const colDef = validColumnDefs.find(cd => cd.field === columnStateItem.colId) || {};
+  //           const savedField = savedFields?.records?.find(sf => sf.fieldName === columnStateItem.colId);
+
+  //           return {
+  //             id: columnStateItem.colId,
+  //             field: columnStateItem.colId,
+  //             headerName: savedField?.headerName || colDef.headerName || columnStateItem.colId,
+  //             originalHeaderName: colDef.headerName || columnStateItem.colId,
+  //             width: columnStateItem.width || colDef.width || 100,
+  //             originalWidth: colDef.width || 100,
+  //             visible: !columnStateItem.hide,
+  //             order: index
+  //           };
+  //         });
+
+  //         setLastKnownColumnState(formattedState);
+  //         console.log('[GridLayout] Updated lastKnownColumnState after opening editor');
+  //       }
+  //     } catch (error) {
+  //       console.error('[GridLayout] Error updating column state after opening editor:', error);
+  //     }
+  //   }
+  // }, [isColumnEditorOpen, columnDefs, savedFields, columnApiRef]);
+
+  // MutationObserver pro sledování změn v DOM a okamžitou aktualizaci headerName
+  // useEffect(() => {
+  //   if (!savedFields?.records || !isInitialized || !enabled) return;
+
+  //   // Reference na observer pro cleanup
+  //   let observer = null;
+
+  //   try {
+  //     console.log('[GridLayout] Setting up MutationObserver for header changes');
+
+  //     // Funkce pro aktualizaci headerName
+  //     const updateHeaderNames = () => {
+  //       try {
+  //         // Vytvoříme mapu fieldName -> headerName z API dat
+  //         const headerNameMap = new Map();
+  //         savedFields.records.forEach(field => {
+  //           if (field.fieldName && field.headerName) {
+  //             headerNameMap.set(field.fieldName, field.headerName);
+  //           }
+  //         });
+
+  //         // Najdeme všechny hlavičky sloupců v DOM
+  //         const headerCells = document.querySelectorAll('.ag-header-cell');
+
+  //         // Aktualizujeme texty hlaviček
+  //         headerCells.forEach(headerCell => {
+  //           try {
+  //             // Získáme ID sloupce z DOM atributů
+  //             const colId = headerCell.getAttribute('col-id');
+  //             if (colId && headerNameMap.has(colId)) {
+  //               // Najdeme element s textem hlavičky
+  //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+  //               if (headerTextEl) {
+  //                 const newHeaderName = headerNameMap.get(colId);
+  //                 const currentText = headerTextEl.textContent;
+  //                 if (currentText !== newHeaderName) {
+  //                   console.log(`[GridLayout] MutationObserver update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
+  //                   headerTextEl.textContent = newHeaderName;
+  //                 }
+  //               }
+  //             }
+  //           } catch (cellError) {
+  //             // Tiché selhání - nechceme, aby MutationObserver padal
+  //           }
+  //         });
+  //       } catch (error) {
+  //         // Tiché selhání - nechceme, aby MutationObserver padal
+  //       }
+  //     };
+
+  //     // Najdeme element hlavičky
+  //     const headerElement = document.querySelector('.ag-header');
+  //     if (headerElement) {
+  //       // Vytvoříme observer, který bude sledovat změny v hlavičce
+  //       observer = new MutationObserver((mutations) => {
+  //         // Detekovali jsme změnu v DOM hlavičky, aktualizujeme headerName
+  //         updateHeaderNames();
+  //       });
+
+  //       // Začneme sledovat změny v hlavičce
+  //       observer.observe(headerElement, {
+  //         childList: true, // sledujeme přidání/odebírání elementů
+  //         subtree: true,    // sledujeme změny i v potomcích
+  //         characterData: true, // sledujeme změny textu
+  //         attributeFilter: ['col-id', 'class'] // sledujeme změny těchto atributů
+  //       });
+
+  //       console.log('[GridLayout] MutationObserver set up successfully');
+  //     } else {
+  //       console.log('[GridLayout] Header element not found for MutationObserver');
+  //     }
+  //   } catch (error) {
+  //     console.error('[GridLayout] Error setting up MutationObserver:', error);
+  //   }
+
+  //   // Cleanup - odpojit observer při unmount
+  //   return () => {
+  //     if (observer) {
+  //       observer.disconnect();
+  //       console.log('[GridLayout] MutationObserver disconnected');
+  //     }
+  //   };
+  // }, [savedFields, isInitialized, enabled]);
+
+  /**
+   * Error handler
+   */
+  const handleError = useCallback(
+    (error, context = '') => {
+      // Removed console.error for production
+      setError(error);
+      if (onError) {
+        onError(error, context);
+      }
+    },
+    [onError]
+  );
+
+  // Stabilní reference pro debouncedSave
+  const stableColumnDefsRef = useRef(columnDefs);
+  const stableGridLayoutApiRef = useRef(gridLayoutApi);
+  const stableOnLayoutSavedRef = useRef(onLayoutSaved);
+  const stableHandleErrorRef = useRef(handleError);
+  // Reference pro ukládání stavu sloupců bez state update v render cyklu
+  const stableCurrentColumnsRef = useRef(null);
+
+  // Aktualizujeme ref hodnoty
+  useEffect(() => {
+    let updatedColumnDefs = columnDefs;
+
+    // Pro columnDefs zachováváme aktualizované šířky pokud už existují
+    if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current) && Array.isArray(columnDefs)) {
+      // Vytvoříme mapu existujících šířek
+      const existingWidthsMap = new Map();
+      stableColumnDefsRef.current.forEach(colDef => {
+        const fieldId = colDef.field || colDef.colId;
+        if (fieldId && colDef.width) {
+          existingWidthsMap.set(fieldId, colDef.width);
+        }
+      });
+
+      // Aktualizujeme columnDefs s existujícími šířkami
+      updatedColumnDefs = columnDefs.map(colDef => {
+        const fieldId = colDef.field || colDef.colId;
+        if (fieldId && existingWidthsMap.has(fieldId)) {
+          return {
+            ...colDef,
+            width: existingWidthsMap.get(fieldId)
+          };
+        }
+        return colDef;
+      });
+    }
+    
+    // Zkontrolujeme zda se columnDefs skutečně změnily pomocí hash
+    const newHash = generateColumnDefsHash(updatedColumnDefs);
+    if (newHash !== lastColumnDefsHash) {
+      stableColumnDefsRef.current = updatedColumnDefs;
+      setLastColumnDefsHash(newHash);
+    }
+    
+    stableGridLayoutApiRef.current = gridLayoutApi;
+    stableOnLayoutSavedRef.current = onLayoutSaved;
+    stableHandleErrorRef.current = handleError;
+  });
+
+  // Efekt pro bezpečnou aktualizaci lastKnownColumnState z ref
+  // useEffect(() => {
+  //   if (stableCurrentColumnsRef.current) {
+  //     setLastKnownColumnState(stableCurrentColumnsRef.current);
+  //     console.log('[GridLayout] Updated lastKnownColumnState from ref');
+  //     // Vymazat po použití
+  //     stableCurrentColumnsRef.current = null;
+  //   }
+  // }, [stableCurrentColumnsRef.current]);
+
+  /**
+   * Uloží současný stav sloupců do API
+   */
+  const saveCurrentLayout = useCallback(async () => {
+
+
+    if (!enabled || !gridApiRef.current) {
+      return;
+    }
+    try {
+      setIsSaving(true);
+      setError(null);
+
+      // Získáme současný column state z AG-Grid s fallbackem pro AG Grid v31+
+      let columnState = null;
+      if (
+        gridApiRef.current &&
+        typeof gridApiRef.current.getColumnState === 'function'
+      ) {
+        // AG Grid v31+ - getColumnState je přímo v main API
+        try {
+          columnState = gridApiRef.current.getColumnState();
+          
+          // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
+          if (columnState && Array.isArray(columnState)) {
+            columnState = columnState.map(colState => {
+              // Pokusíme se získat aktuální headerName z DOM
+              try {
+                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
+                if (headerCell) {
+                  const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                  if (headerTextEl && headerTextEl.textContent) {
+                    return {
+                      ...colState,
+                      headerName: headerTextEl.textContent
+                    };
+                  }
+                }
+              } catch (headerError) {
+                console.log(`[GridLayout] Could not get headerName from DOM for ${colState.colId}`);
+              }
+              return colState;
+            });
+          }
+
+          // Pokud getColumnState vrátí undefined, grid je v nekonzistentním stavu
+          // Zkusíme alternativní metodu přes getColumnDefs()
+          if (columnState === undefined || columnState === null) {
+            console.warn(
+              '[GridLayout] getColumnState returned undefined/null, trying getColumnDefs() alternative'
+            );
+            console.warn(
+              '[GridLayout] Full gridApiRef.current object:',
+              gridApiRef.current
+            );
+            console.warn(
+              '[GridLayout] Available methods on gridApiRef.current:',
+              gridApiRef.current
+                ? Object.getOwnPropertyNames(gridApiRef.current).filter(
+                    (name) => typeof gridApiRef.current[name] === 'function'
+                  )
+                : 'NO_GRID_API'
+            );
+
+            try {
+              // Alternativní přístup: použijeme getColumnDefs() a vytvoříme fake column state
+              const columnDefs = gridApiRef.current.getColumnDefs();
+
+              if (
+                columnDefs &&
+                Array.isArray(columnDefs) &&
+                columnDefs.length > 0
+              ) {
+                // Vytvoříme column state z column defs
+                columnState = columnDefs.map((colDef, index) => {
+                  // Zkusíme získat aktuální šířku sloupce z DOM
+                  let currentWidth = colDef.width || 100;
+                  try {
+                    const fieldId = colDef.field || colDef.colId;
+                    const headerElement = document.querySelector(
+                      `[col-id="${fieldId}"]`
+                    );
+                    if (headerElement && headerElement.offsetWidth) {
+                      currentWidth = headerElement.offsetWidth;
+                    }
+                  } catch (domError) {
+                    console.log(
+                      '[GridLayout] Could not get width from DOM for',
+                      colDef.field
+                    );
+                  }
+
+                  return {
+                    colId: colDef.field || colDef.colId,
+                    hide: colDef.hide || false,
+                    width: currentWidth,
+                    headerName: colDef.headerName, // Přidáme aktuální headerName
+                    sort: null, // Nebudeme zachovávat sort při této fallback metodě
+                    sortIndex: null,
+                  };
+                });
+
+              } else {
+                console.error(
+                  '[GridLayout] getColumnDefs() also failed or returned empty array'
+                );
+                const cachedColumnDefs = stableColumnDefsRef.current;
+                if (
+                  cachedColumnDefs &&
+                  Array.isArray(cachedColumnDefs) &&
+                  cachedColumnDefs.length > 0
+                ) {
+                  columnState = cachedColumnDefs.map((colDef, index) => {
+                    // Použijeme cached definice
+                    let currentWidth = colDef.width || 100;
+
+                    return {
+                      colId: colDef.field || colDef.colId,
+                      hide: colDef.hide || false,
+                      width: currentWidth,
+                      headerName: colDef.headerName, // Přidáme aktuální headerName
+                      sort: null,
+                      sortIndex: null,
+                    };
+                  });
+                } else {
+                  console.error(
+                    '[GridLayout] All fallback methods failed - no column data available'
+                  );
+                  return;
+                }
+              }
+            } catch (columnDefError) {
+              console.error(
+                '[GridLayout] getColumnDefs() alternative failed:',
+                columnDefError
+              );
+              return;
+            }
+          }
+        } catch (error) {
+          console.error(
+            '[GridLayout] Error calling gridApiRef.current.getColumnState():',
+            error
+          );
+          return;
+        }
+      } else if (
+        columnApiRef.current &&
+        typeof columnApiRef.current.getColumnState === 'function'
+      ) {
+        // Starší verze AG Grid - getColumnState je v columnApi
+        try {
+          columnState = columnApiRef.current.getColumnState();
+          
+          // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
+          if (columnState && Array.isArray(columnState)) {
+            columnState = columnState.map(colState => {
+              // Pokusíme se získat aktuální headerName z DOM
+              try {
+                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
+                if (headerCell) {
+                  const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                  if (headerTextEl && headerTextEl.textContent) {
+                    return {
+                      ...colState,
+                      headerName: headerTextEl.textContent
+                    };
+                  }
+                }
+              } catch (headerError) {
+                console.log(`[GridLayout] Could not get headerName from DOM for ${colState.colId}`);
+              }
+              return colState;
+            });
+          }
+          
+        } catch (error) {
+          console.error(
+            '[GridLayout] Error calling columnApiRef.current.getColumnState():',
+            error
+          );
+          return;
+        }
+      } else {
+        console.warn(
+          '[GridLayout] getColumnState method not available for saving layout'
+        );
+        console.warn('[GridLayout] Debug info:', {
+          gridApiRef: gridApiRef.current,
+          columnApiRef: columnApiRef.current,
+          gridApiRefKeys: gridApiRef.current
+            ? Object.keys(gridApiRef.current)
+            : 'undefined',
+          columnApiRefKeys: columnApiRef.current
+            ? Object.keys(columnApiRef.current)
+            : 'undefined',
+        });
+        return;
+      }
+
+      // Kontrola validity columnDefs a použití fallback pokud je potřeba
+      let columnDefsToUse = stableColumnDefsRef.current;
+      if (
+        !columnDefsToUse ||
+        !Array.isArray(columnDefsToUse) ||
+        columnDefsToUse.length === 0
+      ) {
+        console.warn(
+          '[GridLayout] stableColumnDefsRef is empty, using fallback from stableCurrentColumnsRef'
+        );
+        if (
+          stableCurrentColumnsRef.current &&
+          Array.isArray(stableCurrentColumnsRef.current)
+        ) {
+          // Převedeme cached sloupce zpět na columnDefs format
+          columnDefsToUse = stableCurrentColumnsRef.current.map((col) => ({
+            field: col.field,
+            headerName: col.headerName || col.field,
+            width: col.width || 100,
+            hide: !col.visible,
+          }));
+        } else {
+          console.error(
+            '[GridLayout] No valid columnDefs available for saving'
+          );
+          return;
+        }
+      }
+
+      // Transformujeme na Grid API format
+      const fields =
+        stableGridLayoutApiRef.current.transformColumnStateToFields(
+          columnState,
+          columnDefsToUse
+        );
+
+      // Uložíme do API
+      const result = stableGridLayoutApiRef.current
+        .saveGridLayout(fields)
+        .then((result) => {
+          if (result.success) {
+            setHasUnsavedChanges(false);
+            if (stableOnLayoutSavedRef.current) {
+              stableOnLayoutSavedRef.current(fields, columnState);
+            }
+          }
+        })
+        .catch((error) => {
+          stableHandleErrorRef.current(error, 'při ukládání layoutu');
+        });
+    } catch (error) {
+      stableHandleErrorRef.current(error, 'při ukládání layoutu');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [enabled]);
+
+  /**
+   * Debounced auto-save pro předcházení častým voláním API
+   */
+  const debouncedSave = useMemo(() => {
+    const debouncedFn = debounce((...args) => {
+      return saveCurrentLayout(...args);
+    }, autoSaveDelay);
+    return debouncedFn;
+  }, [saveCurrentLayout, autoSaveDelay]);
+
+  /**
+   * Aplikuje saved layout na AG-Grid
+   * @param {boolean} forceApply - Vynucené aplikování ignorující isInitialized stav
+   */
+  const applySavedLayout = useCallback(
+    (forceApply = false) => {
+      // Ověříme dostupnost API a inicializaci
+      if (
+        !savedFields?.records ||
+        savedFields.records.length === 0 ||
+        (!forceApply && isInitialized)
+      ) {
+        return;
+      }
+
+      // Ověříme dostupnost applyColumnState metody (AG Grid v31+ má ji v main API)
+      let applyColumnStateApi = null;
+      if (
+        gridApiRef.current &&
+        typeof gridApiRef.current.applyColumnState === 'function'
+      ) {
+        applyColumnStateApi = gridApiRef.current;
+      } else if (
+        columnApiRef.current &&
+        typeof columnApiRef.current.applyColumnState === 'function'
+      ) {
+        applyColumnStateApi = columnApiRef.current;
+      }
+
+      if (!applyColumnStateApi) {
+        console.warn('[GridLayout] applyColumnState method not available');
+        return;
+      }
+
+      try {
+        setIsLoading(true);
+        setIsApplyingLayout(true);
+        
+        // Transformujeme Grid API fields na AG-Grid column state
+        // Použijeme stableColumnDefsRef.current místo columnDefs pro zachování aktuálních šířek
+        const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+        const columnState = gridLayoutApi.transformFieldsToColumnState(
+          savedFields.records,
+          columnDefsToUse
+        );
+
+        if (columnState && columnState.length > 0) {
+          // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované,
+          // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
+          const applyFunction = () => {
+            try {
+              // Aplikujeme column state na AG-Grid
+              let result;
+              try {
+                const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
+
+                // Při prvotním načtení (isInitialized=false) používáme přímo columnState z API
+                // Při následných aplikováních zachováváme aktuální šířky z gridu
+                let adjustedColumnState = columnState;
+                
+                if (isInitialized) {
+                  // Pouze pokud už je grid inicializován, zachováváme současné šířky
+                  const currentColumnState = gridApiRef.current?.getColumnState?.() || [];
+                  const currentWidthMap = new Map();
+                  currentColumnState.forEach(colState => {
+                    if (colState.colId && colState.width) {
+                      currentWidthMap.set(colState.colId, colState.width);
+                    }
+                  });
+
+                  // Upravíme columnState tak, aby zachoval aktuální šířky pokud existují
+                  adjustedColumnState = columnState.map(colState => {
+                    const currentWidth = currentWidthMap.get(colState.colId);
+                    if (currentWidth && currentWidth !== colState.width) {
+                      return {
+                        ...colState,
+                        width: currentWidth
+                      };
+                    }
+                    return colState;
+                  });
+                }
+
+                result = applyColumnStateApi.applyColumnState({
+                  state: adjustedColumnState,
+                  applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
+                  defaultState: {
+                    sort: null, // Reset sorting na všech sloupcích
+                    sortIndex: null, // Reset sort index
+                    pivot: null, // Reset pivot
+                    rowGroup: null, // Reset row grouping
+                  },
+                });
+
+                // Explicitně aktualizujeme headerName pro každý sloupec, protože AG-Grid
+                // nepodporuje nastavení headerName přes applyColumnState
+                if (
+                  savedFields.records &&
+                  Array.isArray(savedFields.records) &&
+                  gridApiRef.current
+                ) {
+                  // Nejprve zkusíme použít refreshHeader funkci, pokud je dostupná
+                  try {
+                    if (
+                      typeof gridApiRef.current.refreshHeader === 'function'
+                    ) {
+                      gridApiRef.current.refreshHeader();
+                    }
+                  } catch (refreshError) {
+                    console.error(
+                      '[GridLayout] Error in refreshHeader:',
+                      refreshError
+                    );
+                  }
+                  // Získáme aktuální definice sloupců z gridu
+                  let currentColDefs;
+                  try {
+                    currentColDefs = gridApiRef.current.getColumnDefs
+                      ? gridApiRef.current.getColumnDefs()
+                      : null;
+                  } catch (error) {
+                    console.error(
+                      '[GridLayout] Error getting column definitions:',
+                      error
+                    );
+                    currentColDefs = null;
+                  }
+                  if (currentColDefs && Array.isArray(currentColDefs)) {
+                    // Vytvoříme mapu fieldName -> headerName z API dat
+                    const headerNameMap = new Map();
+                    savedFields.records.forEach((field) => {
+                      if (field.fieldName && field.headerName) {
+                        headerNameMap.set(field.fieldName, field.headerName);
+                      }
+                    });
+
+                    // Aktualizujeme headerName pro každý sloupec
+                    const updatedColDefs = currentColDefs.map((colDef) => {
+                      const fieldName = colDef.field;
+                      if (fieldName && headerNameMap.has(fieldName)) {
+                        const newHeaderName = headerNameMap.get(fieldName);
+                        // Vytvoříme novou kopii definice sloupce s aktualizovaným headerName
+                        return {
+                          ...colDef,
+                          headerName: newHeaderName,
+                        };
+                      }
+                      return colDef;
+                    });
+                    // Aplikujeme aktualizované definice sloupců zpět do gridu
+                    try {
+                      if (
+                        typeof gridApiRef.current.setColumnDefs === 'function'
+                      ) {
+                        gridApiRef.current.setColumnDefs(updatedColDefs);
+
+                        // Pro jistotu zkontrolujeme, zda byly změny aplikovány
+                        setTimeout(() => {
+                          try {
+                            const afterUpdateColDefs =
+                              gridApiRef.current.getColumnDefs();
+                            
+                            // DOM operace dokončeny, můžeme ukončit loading
+                            setIsApplyingLayout(false);
+                          } catch (checkError) {
+                            console.error(
+                              '[GridLayout] Error checking updated columns:',
+                              checkError
+                            );
+                            // I při chybě ukončíme loading
+                            setIsApplyingLayout(false);
+                          }
+                        }, 100);
+                      } else {
+                        // Alternativní řešení - přímá manipulace s DOM
+
+                        // Počkáme, až se grid vyrenderuje
+                        setTimeout(() => {
+                          try {
+                            // Vytvoříme mapu pro rychlou identifikaci
+                            const headerUpdates = new Map();
+                            updatedColDefs.forEach((colDef) => {
+                              if (colDef.field && colDef.headerName) {
+                                headerUpdates.set(
+                                  colDef.field,
+                                  colDef.headerName
+                                );
+                              }
+                            });
+
+                            // Najdeme všechny hlavičky sloupců pomocí DOM
+                            const headerCells =
+                              document.querySelectorAll('.ag-header-cell');
+
+                            headerCells.forEach((headerCell) => {
+                              try {
+                                // Získáme ID sloupce z DOM atributů
+                                const colId = headerCell.getAttribute('col-id');
+                                if (colId && headerUpdates.has(colId)) {
+                                  // Najdeme element s textem hlavičky
+                                  const headerTextEl = headerCell.querySelector(
+                                    '.ag-header-cell-text'
+                                  );
+                                  if (headerTextEl) {
+                                    const newHeaderName =
+                                      headerUpdates.get(colId);
+                                    const currentText =
+                                      headerTextEl.textContent;
+                                    headerTextEl.textContent = newHeaderName;
+                                  }
+                                }
+                              } catch (cellError) {
+                                console.error(
+                                  '[GridLayout] Error updating header cell:',
+                                  cellError
+                                );
+                              }
+                            });
+                            
+                            // DOM manipulace dokončena, ukončíme loading
+                            setIsApplyingLayout(false);
+                          } catch (domError) {
+                            console.error(
+                              '[GridLayout] Error in DOM manipulation:',
+                              domError
+                            );
+                            // I při chybě ukončíme loading
+                            setIsApplyingLayout(false);
+                          }
+                        }, 200);
+                      }
+                    } catch (setError) {
+                      console.error(
+                        '[GridLayout] Error applying column definitions:',
+                        setError
+                      );
+                    }
+                  }
+                }
+              } catch (applyError) {
+                throw applyError;
+              }
+
+              if (onLayoutLoaded) {
+                onLayoutLoaded(savedFields.records, columnState);
+              }
+            } catch (delayedError) {
+              // Removed console.error for production
+              handleError(delayedError, 'při delayed aplikování layoutu');
+            } finally {
+              // Bezpečnostní ukončení loading pokud se nedokončilo jinde
+              setTimeout(() => {
+                setIsApplyingLayout(false);
+              }, 300);
+            }
+          };
+
+          // Pro waitForSavedFields aplikujeme okamžitě (pořadí je už v columnDefs)
+          // Pro normální režim použijeme delay
+          if (waitForSavedFields) {
+            applyFunction();
+          } else {
+            setTimeout(applyFunction, 100); // 100ms delay jen pro normální režim
+          }
+        }
+      } catch (error) {
+        handleError(error, 'při aplikování layoutu');
+      } finally {
+        setIsInitialized(true);
+        setIsGridReady(true); // Obnovíme také isGridReady pro event handlery
+        setIsLoading(false);
+        // setIsApplyingLayout(false) se nastaví až po dokončení všech DOM operací
+      }
+    },
+    [
+      savedFields,
+      gridLayoutApi,
+      isInitialized,
+      onLayoutLoaded,
+      handleError,
+      columnDefs,
+      waitForSavedFields,
+    ]
+  );
+
+  /**
+   * Odložené akce pro případ rychlé interakce před dokončením inicializace
+   */
+  const [pendingActions, setPendingActions] = useState([]);
+
+  // Effect pro zpracování pending actions po dokončení inicializace
+  useEffect(() => {
+    if (isInitialized && pendingActions.length > 0) {
+      // Zpracujeme pending akce s krátkým delay
+      setTimeout(() => {
+        pendingActions.forEach((action) => {
+          switch (action.type) {
+            case 'dragStopped':
+              if (autoSave && debouncedSave) {
+                debouncedSave();
+              }
+              break;
+          }
+        });
+        setPendingActions([]);
+      }, 100);
+    }
+  }, [isInitialized, pendingActions, autoSave, debouncedSave]);
+
+  /**
+   * Event handlers pro AG-Grid
+   */
+  const handleColumnMoved = useCallback(() => {
+    if (!enabled || !isGridReady) {
+      return;
+    }
+
+    setHasUnsavedChanges(true);
+    // Neukládáme při každém pohybu - čekáme na onDragStopped
+  }, [enabled, isGridReady]);
+
+  const handleDragStopped = useCallback(() => {
+    if (!enabled || !isGridReady) {
+      return;
+    }
+
+    setHasUnsavedChanges(true);
+
+    // Aktualizujeme šířky sloupců v columnDefs před uložením
+    try {
+      if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
+        const currentColumnState = gridApiRef.current.getColumnState();
+        
+        if (currentColumnState && Array.isArray(currentColumnState)) {
+          // Aktualizujeme šířky v původních columnDefs
+          const widthUpdatesMap = new Map();
+          currentColumnState.forEach(colState => {
+            if (colState.colId && colState.width) {
+              widthUpdatesMap.set(colState.colId, colState.width);
+            }
+          });
+          
+          // Aktualizujeme stableColumnDefsRef s novými šířkami
+          if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
+            const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
+              const fieldId = colDef.field || colDef.colId;
+              if (fieldId && widthUpdatesMap.has(fieldId)) {
+                return {
+                  ...colDef,
+                  width: widthUpdatesMap.get(fieldId)
+                };
+              }
+              return colDef;
+            });
+            stableColumnDefsRef.current = updatedColumnDefs;
+            // Hash se aktualizuje automaticky v hlavním useEffect
+          }
+        }
+      }
+    } catch (error) {
+      console.error('[GridLayout] Error updating columnDefs widths in handleDragStopped:', error);
+    }
+
+
+    // Pokud ještě není inicializované, přidáme akci do pending
+    if (!isInitialized && autoSave) {
+      setPendingActions((prev) => [
+        ...prev,
+        { type: 'dragStopped', timestamp: Date.now() },
+      ]);
+      return;
+    }
+
+    // Normální proces pokud je vše inicializované
+    if (autoSave && debouncedSave) {
+      debouncedSave();
+    } else {
+    }
+  }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnResized = useCallback(() => {
+    if (!enabled || !isGridReady) return;
+    setHasUnsavedChanges(true);
+
+    // Aktualizujeme šířky sloupců v columnDefs při resize
+    try {
+      if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
+        const currentColumnState = gridApiRef.current.getColumnState();
+        
+        if (currentColumnState && Array.isArray(currentColumnState)) {
+          // Aktualizujeme šířky v původních columnDefs
+          const widthUpdatesMap = new Map();
+          currentColumnState.forEach(colState => {
+            if (colState.colId && colState.width) {
+              widthUpdatesMap.set(colState.colId, colState.width);
+            }
+          });
+          
+          // Aktualizujeme stableColumnDefsRef s novými šířkami
+          if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
+            const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
+              const fieldId = colDef.field || colDef.colId;
+              if (fieldId && widthUpdatesMap.has(fieldId)) {
+                return {
+                  ...colDef,
+                  width: widthUpdatesMap.get(fieldId)
+                };
+              }
+              return colDef;
+            });
+            stableColumnDefsRef.current = updatedColumnDefs;
+            // Hash se aktualizuje automaticky v hlavním useEffect
+          }
+        }
+      }
+    } catch (error) {
+      console.error('[GridLayout] Error updating columnDefs widths in handleColumnResized:', error);
+    }
+
+    if (autoSave && isInitialized && debouncedSave) {
+      debouncedSave();
+    }
+  }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnVisible = useCallback(() => {
+    if (!enabled || !isGridReady) return;
+    setHasUnsavedChanges(true);
+    if (autoSave && isInitialized && debouncedSave) {
+      debouncedSave();
+    }
+  }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnPinned = useCallback(() => {
+    if (!enabled || !isGridReady) return;
+    setHasUnsavedChanges(true);
+    if (autoSave && isInitialized && debouncedSave) {
+      debouncedSave();
+    }
+  }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
+
+  /**
+   * AG-Grid Ready handler
+   */
+  const handleGridReady = useCallback(
+    (params) => {
+      if (!enabled) {
+        return;
+      }
+
+      gridApiRef.current = params.api;
+      // AG Grid v31+ - columnApi je deprecated, všechny metody jsou v hlavním api
+      // Pokud columnApi neexistuje, použijeme main api jako fallback
+      columnApiRef.current = params.columnApi || params.api;
+      // Okamžitě označíme grid jako připravený pro event handlery
+      setIsGridReady(true);
+
+      // POZOR: Nenastavujeme isInitialized zde, protože by to zabránilo aplikování layoutu!
+      // isInitialized se nastaví až po aplikování layoutu v applySavedLayout
+    },
+    [enabled, savedFields, isInitialized, applySavedLayout]
+  );
+
+  /**
+   * Effect pro aplikování layoutu při prvotním načtení savedFields
+   */
+  useEffect(() => {
+    // Aplikujeme layout pokud:
+    // 1. Máme savedFields z API
+    // 2. Grid je ready (má API reference)  
+    // 3. Ještě jsme neinicializovali layout
+    if (savedFields?.records && savedFields.records.length > 0 && gridApiRef.current && !isInitialized) {
+      applySavedLayout();
+    }
+  }, [savedFields?.records, isInitialized, applySavedLayout]);
+
+  /**
+   * Původní zakomentovaný effect pro aplikování layoutu když se načtou data
+   */
+  // useEffect(() => {
+  //   if (savedFields?.records && columnApiRef.current && !isInitialized) {
+  //     console.log('[GridLayout] Layout will be applied from effect');
+  //     applySavedLayout();
+  //   } else if (savedFields?.records && columnApiRef.current && isInitialized) {
+  //     // Pokud je již inicializován, ale přišla nová data, aktualizujeme jen DOM (ne celý layout)
+  //     console.log('[GridLayout] Already initialized, but received new data - updating headers directly');
+
+  //     // Počkáme moment, než se nová data zpracují, a pak aktualizujeme headerName
+  //     setTimeout(() => {
+  //       try {
+  //         // Vytvoříme mapu fieldName -> headerName z API dat
+  //         const headerNameMap = new Map();
+  //         savedFields.records.forEach(field => {
+  //           if (field.fieldName && field.headerName) {
+  //             headerNameMap.set(field.fieldName, field.headerName);
+  //             console.log(`[GridLayout] Update after reload: '${field.fieldName}' -> '${field.headerName}'`);
+  //           }
+  //         });
+
+  //         // Najdeme všechny hlavičky sloupců v DOM
+  //         const headerCells = document.querySelectorAll('.ag-header-cell');
+  //         console.log('[GridLayout] Found header cells after reload:', headerCells.length);
+
+  //         // Aktualizujeme texty hlaviček
+  //         headerCells.forEach(headerCell => {
+  //           try {
+  //             // Získáme ID sloupce z DOM atributů
+  //             const colId = headerCell.getAttribute('col-id');
+  //             if (colId && headerNameMap.has(colId)) {
+  //               // Najdeme element s textem hlavičky
+  //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+  //               if (headerTextEl) {
+  //                 const newHeaderName = headerNameMap.get(colId);
+  //                 const currentText = headerTextEl.textContent;
+  //                 console.log(`[GridLayout] DOM update after reload: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
+  //                 headerTextEl.textContent = newHeaderName;
+  //               }
+  //             }
+  //           } catch (cellError) {
+  //             console.error('[GridLayout] Error updating header cell after reload:', cellError);
+  //           }
+  //         });
+
+  //         // Zkusíme vynutit překreslení hlavičky
+  //         if (typeof gridApiRef.current.refreshHeader === 'function') {
+  //           console.log('[GridLayout] Forcing header refresh after reload');
+  //           gridApiRef.current.refreshHeader();
+  //         }
+  //       } catch (error) {
+  //         console.error('[GridLayout] Error updating headers after reload:', error);
+  //       }
+  //     }, 200);
+  //   }
+  // }, [savedFields, applySavedLayout, isInitialized, columnApiRef]);
+
+  /**
+   * Alternativní metoda pro aktualizaci headerName po inicializaci gridu
+   */
+  // useEffect(() => {
+  //   // Pokud již proběhla inicializace a máme uložená data z API
+  //   if (isInitialized && savedFields?.records && gridApiRef.current) {
+  //     console.log('[GridLayout] Attempting alternative header update after initialization');
+
+  //     // Zkusíme použít metodu columnDefHeaderNameChanged, pokud je dostupná
+  //     try {
+  //       if (typeof gridApiRef.current.columnDefHeaderNameChanged === 'function') {
+  //         console.log('[GridLayout] Trying columnDefHeaderNameChanged method');
+
+  //         // Vytvoříme mapu fieldName -> headerName z API dat
+  //         const headerNameMap = new Map();
+  //         savedFields.records.forEach(field => {
+  //           if (field.fieldName && field.headerName) {
+  //             headerNameMap.set(field.fieldName, field.headerName);
+  //           }
+  //         });
+
+  //         // Získáme aktuální definice sloupců
+  //         const currentColumnDefs = gridApiRef.current.getColumnDefs();
+  //         if (currentColumnDefs && Array.isArray(currentColumnDefs)) {
+  //           currentColumnDefs.forEach(colDef => {
+  //             if (colDef.field && headerNameMap.has(colDef.field)) {
+  //               const newHeaderName = headerNameMap.get(colDef.field);
+  //               if (colDef.headerName !== newHeaderName) {
+  //                 console.log(`[GridLayout] Using columnDefHeaderNameChanged for '${colDef.field}': '${colDef.headerName}' -> '${newHeaderName}'`);
+  //                 colDef.headerName = newHeaderName;
+  //                 gridApiRef.current.columnDefHeaderNameChanged(colDef);
+  //               }
+  //             }
+  //           });
+  //         }
+  //       }
+  //     } catch (error) {
+  //       console.error('[GridLayout] Error using columnDefHeaderNameChanged:', error);
+  //     }
+
+  //     // Počkáme chvíli, aby se grid stihl plně vyrenderovat
+  //     setTimeout(() => {
+  //       try {
+  //         // Získáme aktuální definice sloupců z gridu
+  //         const currentColDefs = gridApiRef.current.getColumnDefs ? gridApiRef.current.getColumnDefs() : null;
+
+  //         if (currentColDefs && Array.isArray(currentColDefs)) {
+  //           // Vytvoříme mapu fieldName -> headerName z API dat
+  //           const headerNameMap = new Map();
+  //           savedFields.records.forEach(field => {
+  //             if (field.fieldName && field.headerName) {
+  //               headerNameMap.set(field.fieldName, field.headerName);
+  //             }
+  //           });
+
+  //           // Zkontrolujeme, zda je třeba aktualizovat nějaké headery
+  //           let needsUpdate = false;
+  //           const updatedColDefs = currentColDefs.map(colDef => {
+  //             const fieldName = colDef.field;
+  //             if (fieldName && headerNameMap.has(fieldName)) {
+  //               const newHeaderName = headerNameMap.get(fieldName);
+  //               if (colDef.headerName !== newHeaderName) {
+  //                 needsUpdate = true;
+  //                 console.log(`[GridLayout] Alternative update: Column '${fieldName}' header from '${colDef.headerName}' to '${newHeaderName}'`);
+  //                 return {
+  //                   ...colDef,
+  //                   headerName: newHeaderName
+  //                 };
+  //               }
+  //             }
+  //             return colDef;
+  //           });
+
+  //           if (needsUpdate && typeof gridApiRef.current.setColumnDefs === 'function') {
+  //             console.log('[GridLayout] Applying alternative column header update');
+  //             gridApiRef.current.setColumnDefs(updatedColDefs);
+
+  //             // Zkusíme vynutit překreslení hlavičky
+  //             setTimeout(() => {
+  //               if (typeof gridApiRef.current.refreshHeader === 'function') {
+  //                 console.log('[GridLayout] Forcing header refresh');
+  //                 gridApiRef.current.refreshHeader();
+  //               }
+  //             }, 50);
+  //           }
+  //         }
+  //       } catch (error) {
+  //         console.error('[GridLayout] Error in alternative header update:', error);
+  //       }
+  //     }, 300);
+  //   }
+  // }, [isInitialized, savedFields, gridApiRef]);
+
+  /**
+   * Effect pro error handling
+   */
+  useEffect(() => {
+    if (fieldsError) {
+      handleError(fieldsError, 'při načítání saved layoutu');
+    }
+  }, [fieldsError, handleError]);
+
+  /**
+   * Cleanup effect
+   */
+  useEffect(() => {
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [debouncedSave]);
+
+  /**
+   * Resetuje layout na default
+   */
+  const resetToDefault = useCallback(async () => {
+    if (!enabled) return;
+
+    // Ověříme dostupnost resetColumnState metody (AG Grid v31+ má ji v main API)
+    let resetColumnStateApi = null;
+    if (
+      gridApiRef.current &&
+      typeof gridApiRef.current.resetColumnState === 'function'
+    ) {
+      resetColumnStateApi = gridApiRef.current;
+    } else if (
+      columnApiRef.current &&
+      typeof columnApiRef.current.resetColumnState === 'function'
+    ) {
+      resetColumnStateApi = columnApiRef.current;
+    } else {
+      console.warn('[GridLayout] resetColumnState method not available');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      // Resetujeme AG-Grid na původní column definitions
+      resetColumnStateApi.resetColumnState();
+
+      // Pokud je autoSave zapnuté, uložíme resetovaný stav
+      if (autoSave) {
+        await saveCurrentLayout();
+      } else {
+        setHasUnsavedChanges(true);
+      }
+    } catch (error) {
+      handleError(error, 'při resetování layoutu');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, autoSave, saveCurrentLayout, handleError]);
+
+  /**
+   * Manuální uložení
+   */
+  const saveLayout = useCallback(async () => {
+    await saveCurrentLayout();
+  }, [saveCurrentLayout]);
+
+  /**
+   * Manuální reload
+   */
+  const reloadLayout = useCallback(async () => {
+    try {
+      // Save a reference to the current grid API before resetting states
+      const savedGridApiRef = gridApiRef.current;
+      const savedColumnApiRef = columnApiRef.current;
+
+      setIsInitialized(false);
+      setIsGridReady(false);
+      await refetchFields();
+
+      // Restore saved references if they were lost during the reload process
+      if (!gridApiRef.current && savedGridApiRef) {
+        gridApiRef.current = savedGridApiRef;
+      }
+
+      if (!columnApiRef.current && savedColumnApiRef) {
+        columnApiRef.current = savedColumnApiRef;
+      }
+
+      // Po refetch dat obnovíme oba stavy (layout je už v DB)
+      setIsInitialized(true);
+      setIsGridReady(true);
+    } catch (error) {
+      handleError(error, 'při reload layoutu');
+    }
+  }, [refetchFields, handleError]);
+
+  /**
+   * Získá aktuální column state pro Column Editor
+   */
+  const getCurrentColumnsForEditor = useCallback(() => {
+    // Zajistíme, že máme validní columnDefs
+    const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
+
+    try {
+      let currentColumnState = null;
+
+      // Pokusíme se získat column state s různými fallbacky pro AG Grid v31+
+      if (
+        gridApiRef.current &&
+        typeof gridApiRef.current.getColumnState === 'function'
+      ) {
+        // AG Grid v31+ - getColumnState je přímo v main API
+        currentColumnState = gridApiRef.current.getColumnState();
+      } else if (
+        columnApiRef.current &&
+        typeof columnApiRef.current.getColumnState === 'function'
+      ) {
+        // Starší verze AG Grid - getColumnState je v columnApi
+        currentColumnState = columnApiRef.current.getColumnState();
+      } else {
+        throw new Error(
+          'getColumnState method is not available on gridApiRef or columnApiRef'
+        );
+      }
+
+      if (
+        !Array.isArray(currentColumnState) ||
+        currentColumnState.length === 0
+      ) {
+        // Fallback pokud getColumnState() nevrátí validní array
+        if (lastKnownColumnState) {
+          return lastKnownColumnState;
+        }
+
+        const defaultColumns = validColumnDefs.map((col, index) => ({
+          id: col.field,
+          field: col.field,
+          headerName: col.headerName || col.field,
+          originalHeaderName: col.headerName || col.field,
+          width: col.width || 100,
+          originalWidth: col.width || 100,
+          visible: !col.hide,
+          order: index,
+          originalOrder: index, // Původní pořadí z columnDefs
+        }));
+
+        // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+        return defaultColumns;
+      }
+
+      const result = currentColumnState.map((columnStateItem, index) => {
+        // Najdeme odpovídající column definition podle colId (zohledníme field i colId)
+        const colDef =
+          validColumnDefs.find(
+            (cd) =>
+              cd.field === columnStateItem.colId ||
+              cd.colId === columnStateItem.colId
+          ) || {};
+        // Pokusíme se najít saved hodnotu pro headerName
+        const savedField = savedFields?.records?.find(
+          (sf) => sf.fieldName === columnStateItem.colId
+        );
+
+        // Najdeme původní index z columnDefs
+        const originalIndex = validColumnDefs.findIndex(
+          (cd) => (cd.field || cd.colId) === columnStateItem.colId
+        );
+
+        return {
+          id: columnStateItem.colId,
+          field: columnStateItem.colId,
+          headerName:
+            savedField?.headerName ||
+            colDef.headerName ||
+            columnStateItem.colId,
+          // Původní headerName z columnDefs (ne z uložených uživatelských preferencí)
+          originalHeaderName: colDef.headerName || columnStateItem.colId,
+          width: columnStateItem.width || colDef.width || 100,
+          originalWidth: colDef.width || 100,
+          visible: !columnStateItem.hide,
+          order: index,
+          originalOrder: originalIndex !== -1 ? originalIndex : index, // Původní pořadí z columnDefs
+        };
+      });
+
+      // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+      // Tato aktualizace proběhne v useEffect
+      return result;
+    } catch (error) {
+      console.error('[GridLayout] Error in getCurrentColumnsForEditor:', error);
+
+      // Použijeme lastKnownColumnState, pokud existuje
+      if (lastKnownColumnState) {
+        return lastKnownColumnState;
+      }
+
+      // Poslední fallback na columnDefs
+      const defaultColumns = validColumnDefs.map((col, index) => ({
+        id: col.field || col.colId,
+        field: col.field || col.colId,
+        headerName: col.headerName || col.field || col.colId,
+        // Vždy používáme původní definici jako referenci pro porovnání
+        originalHeaderName: col.headerName || col.field || col.colId,
+        width: col.width || 100,
+        originalWidth: col.width || 100,
+        visible: !col.hide,
+        order: index,
+        originalOrder: index, // Původní pořadí z columnDefs
+      }));
+
+      // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+      return defaultColumns;
+    }
+  }, [columnDefs, savedFields, lastKnownColumnState]);
+
+  /**
+   * Otevře Column Editor modal
+   */
+  const openColumnEditor = useCallback(() => {
+    // Před otevřením editoru si pouze zaznamenáme, že chceme aktualizovat stav sloupců
+    // Samotná aktualizace proběhne v useEffect, ne během renderu
+    setIsColumnEditorOpen(true);
+  }, []);
+
+  /**
+   * Zavře Column Editor modal
+   */
+  const closeColumnEditor = useCallback(() => {
+    setIsColumnEditorOpen(false);
+  }, []);
+
+  /**
+   * Uloží změny z Column Editoru
+   * @param {Array} editedColumns - Editované sloupce z modalu
+   */
+  const saveColumnEditorChanges = async (editedColumns) => {
+    if (!enabled) return;
+
+    try {
+      setIsLoading(true);
+      setIsSaving(true);
+
+      // Filtrujeme pouze validní sloupce (s definovaným field)
+      const validColumns = editedColumns.filter(
+        (col) => col.field && col.field !== undefined
+      );
+
+      // Připravíme UserFields pro API podle C# SaveUserFieldModel struktury
+      const completeUserFields = validColumns.map((col, index) => ({
+        Id: 0, // Nové pole má ID = 0, existující budou mít správné ID z API
+        UserKey: userKey,
+        ApplicationName: applicationName,
+        GridName: gridName,
+        FilterName: filterName || null,
+        FieldName: col.field,
+        HeaderName: col.headerName || col.field,
+        Order: index, // Pořadí podle pozice v editedColumns
+        Show: col.visible,
+        Width: col.width != null ? col.width : null, // Zachováváme i nulovou šířku
+        System: false,
+      }));
+
+      // Uložení do API
+      gridLayoutApi
+        .saveGridLayout(completeUserFields)
+        .then((result) => {
+          if (result.success) {
+            setHasUnsavedChanges(false);
+
+            // Znovunačtení layoutu z API a aplikování na grid
+            reloadLayout().then(async () => {
+              // Po reloadLayout() počkáme na aktualizaci savedFields a aplikujeme layout
+              try {
+                // Znovu načteme fieldy pro zajištění synchronizace
+                const freshFields = await refetchFields();
+                
+                setTimeout(() => {
+                  if (gridApiRef.current && freshFields?.data?.records) {
+                    
+                    // Aplikujeme layout s novými daty
+                    const columnState = gridLayoutApi.transformFieldsToColumnState(
+                      freshFields.data.records,
+                      columnDefs
+                    );
+                    
+                    if (columnState && columnState.length > 0) {
+                      // Najdeme správné API pro applyColumnState
+                      let applyColumnStateApi = null;
+                      if (gridApiRef.current?.applyColumnState) {
+                        applyColumnStateApi = gridApiRef.current;
+                      } else if (columnApiRef.current?.applyColumnState) {
+                        applyColumnStateApi = columnApiRef.current;
+                      }
+                      
+                      if (applyColumnStateApi) {
+                        applyColumnStateApi.applyColumnState({
+                          state: columnState,
+                          applyOrder: true,
+                          defaultState: {
+                            sort: null,
+                            sortIndex: null,
+                            pivot: null,
+                            rowGroup: null,
+                          },
+                        });
+                        
+                        // Aktualizujeme headerName pro každý sloupec
+                        const headerNameMap = new Map();
+                        freshFields.data.records.forEach((field) => {
+                          if (field.fieldName && field.headerName) {
+                            headerNameMap.set(field.fieldName, field.headerName);
+                          }
+                        });
+                        
+                        // Aplikujeme nové headerName hodnoty přes DOM
+                        setTimeout(() => {
+                          try {
+                            const headerCells = document.querySelectorAll('.ag-header-cell');
+                            headerCells.forEach((headerCell) => {
+                              const colId = headerCell.getAttribute('col-id');
+                              if (colId && headerNameMap.has(colId)) {
+                                const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                                if (headerTextEl) {
+                                  headerTextEl.textContent = headerNameMap.get(colId);
+                                }
+                              }
+                            });
+                            
+                            // Vynutíme refresh hlavičky
+                            if (gridApiRef.current?.refreshHeader) {
+                              gridApiRef.current.refreshHeader();
+                            }
+                          } catch (headerError) {
+                            console.error('[GridLayout] Error updating headers:', headerError);
+                          }
+                        }, 50);
+                      }
+                    }
+                  }
+                }, 150);
+              } catch (refreshError) {
+                console.error('[GridLayout] Error in post-save refresh:', refreshError);
+                // Fallback na standardní applySavedLayout
+                setTimeout(() => {
+                  if (gridApiRef.current) {
+                    applySavedLayout(true);
+                  }
+                }, 200);
+              }
+            });
+
+            if (onLayoutSaved) {
+              onLayoutSaved(completeUserFields);
+            }
+          }
+        })
+        .catch((error) => {
+          handleError(error, 'při ukládání změn z Column Editoru');
+        });
+    } catch (error) {
+      handleError(error, 'při ukládání změn z Column Editoru');
+    } finally {
+      setIsLoading(false);
+      setIsSaving(false);
+    }
+  };
+  //, [enabled, gridLayoutApi, onLayoutSaved, handleError, userKey, applicationName, gridName, filterName, reloadLayout]);
+
+  // Logika pro zobrazení columnDefs
+  const shouldShowColumns = useMemo(() => {
+    if (!waitForSavedFields) return true; // Pokud není waitForSavedFields, vždy zobrazuj
+
+    // Pokud je waitForSavedFields true, čekáme na dokončení načítání
+    return !isFieldsLoading && !isLoading;
+  }, [waitForSavedFields, isFieldsLoading, isLoading]);
+
+  // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
+  // DŮLEŽITÉ: Toto useMemo nyní obsahuje i AgGridColumns transformaci pro eliminaci circular dependency
+  const preTransformedColumnDefs = useMemo(() => {
+    // Použijeme aktualizované columnDefs ze stableColumnDefsRef pokud existují
+    const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+    
+    let baseColumnDefs = columnDefsToUse;
+
+    // Pro waitForSavedFields aplikujeme grid layout transformace
+    if (
+      waitForSavedFields &&
+      savedFields?.records &&
+      Array.isArray(columnDefsToUse)
+    ) {
+      // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
+      const columnState = gridLayoutApi.transformFieldsToColumnState(
+        savedFields.records,
+        columnDefsToUse
+      );
+
+      if (columnState && columnState.length > 0) {
+        // Vytvoříme mapu pro rychlé vyhledávání
+        const columnStateMap = new Map();
+        columnState.forEach((colState, index) => {
+          columnStateMap.set(colState.colId, { ...colState, __order: index });
+        });
+
+        // Vytvoříme mapu fieldName -> headerName z API dat
+        const headerNameMap = new Map();
+        savedFields.records.forEach((field) => {
+          if (field.fieldName && field.headerName) {
+            headerNameMap.set(field.fieldName, field.headerName);
+          }
+        });
+
+        // Seřadíme columnDefs podle pořadí z columnState a upravíme headerName podle savedFields
+        baseColumnDefs = [...columnDefsToUse]
+          .sort((a, b) => {
+            const fieldA = a.field || a.colId;
+            const fieldB = b.field || b.colId;
+            const aState = columnStateMap.get(fieldA);
+            const bState = columnStateMap.get(fieldB);
+
+            const aOrder = aState?.__order ?? 999;
+            const bOrder = bState?.__order ?? 999;
+
+            return aOrder - bOrder;
+          })
+          .map((colDef) => {
+            const fieldId = colDef.field || colDef.colId;
+            const columnStateItem = columnStateMap.get(fieldId);
+            
+            // Aplikujeme pouze headerName a hide z API (width se aplikuje až v applySavedLayout)
+            if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
+              return {
+                ...colDef,
+                // Aplikujeme headerName z savedFields
+                ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
+                // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
+                ...(columnStateItem && { hide: columnStateItem.hide }),
+                // Width se neaplikuje zde - aplikuje se až v applySavedLayout pro eliminaci konfliktu s resize
+              };
+            }
+            return colDef;
+          });
+      }
+    }
+
+    // Nyní VŽDY aplikujeme AgGridColumns transformaci PŘÍMO zde místo v props
+    // Tím eliminujeme circular dependency pro všechny případy použití
+    if (!Array.isArray(baseColumnDefs)) {
+      // Pokud baseColumnDefs není array, mohlo by to být ColumnBuilder
+      if (baseColumnDefs && typeof baseColumnDefs.build === 'function') {
+        baseColumnDefs = baseColumnDefs.build();
+      } else {
+        return [];
+      }
+    }
+
+    return baseColumnDefs;
+
+    // // Replikujeme AgGridColumns logiku pro všechny column definitions:
+    // const processedColumns = baseColumnDefs?.map((column) => {
+    //   // Zkopírujeme column aby se předešlo mutacím
+    //   const processedColumn = { ...column };
+
+    //   // Aplikujeme tooltip logiku pokud je potřeba
+    //   if (processedColumn.contentTooltip) {
+    //     // Statické mapování tooltipů pro lepší performance a eliminaci circular dependency
+    //     switch (processedColumn.contentTooltip) {
+    //       case 'User':
+    //         processedColumn.tooltipComponent = Tooltip.User;
+    //         break;
+    //       default:
+    //         console.warn(`[GridLayout] Unknown tooltip component: ${processedColumn.contentTooltip}`);
+    //     }
+    //   }
+
+    //   return processedColumn;
+    // }) || [];
+
+    // return processedColumns;
+  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, lastColumnDefsHash]);
+
+  /**
+   * Handler pro změnu zobrazených dat - aktualizace headerName
+   */
+  const handleRowDataChanged = useCallback(
+    (params) => {
+      // if (!enabled || !savedFields?.records || !isInitialized) return;
+      // console.log('[GridLayout] Row data changed - ensuring header names stay updated');
+      // // Počkáme chvíli, až se vše vyrenderuje, a pak aktualizujeme headerName
+      // setTimeout(() => {
+      //   try {
+      //     // Vytvoříme mapu fieldName -> headerName z API dat
+      //     const headerNameMap = new Map();
+      //     savedFields.records.forEach(field => {
+      //       if (field.fieldName && field.headerName) {
+      //         headerNameMap.set(field.fieldName, field.headerName);
+      //       }
+      //     });
+      //     // Najdeme všechny hlavičky sloupců v DOM
+      //     const headerCells = document.querySelectorAll('.ag-header-cell');
+      //     console.log('[GridLayout] Found header cells after data change:', headerCells.length);
+      //     // Aktualizujeme texty hlaviček
+      //     headerCells.forEach(headerCell => {
+      //       try {
+      //         // Získáme ID sloupce z DOM atributů
+      //         const colId = headerCell.getAttribute('col-id');
+      //         if (colId && headerNameMap.has(colId)) {
+      //           // Najdeme element s textem hlavičky
+      //           const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+      //           if (headerTextEl) {
+      //             const newHeaderName = headerNameMap.get(colId);
+      //             const currentText = headerTextEl.textContent;
+      //             if (currentText !== newHeaderName) {
+      //               console.log(`[GridLayout] Data change update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
+      //               headerTextEl.textContent = newHeaderName;
+      //             }
+      //           }
+      //         }
+      //       } catch (cellError) {
+      //         console.error('[GridLayout] Error updating header cell after data change:', cellError);
+      //       }
+      //     });
+      //     // Zkusíme vynutit překreslení hlavičky
+      //     if (typeof gridApiRef.current.refreshHeader === 'function') {
+      //       console.log('[GridLayout] Forcing header refresh after data change');
+      //       gridApiRef.current.refreshHeader();
+      //     }
+      //   } catch (error) {
+      //     console.error('[GridLayout] Error updating headers after data change:', error);
+      //   }
+      // }, 100);
+    },
+    [enabled, savedFields, isInitialized]
+  );
+
+  return {
+    // State
+    isLoading: isLoading || isFieldsLoading,
+    isSaving,
+    isApplyingLayout, // Nový specifický state pro aplikování layoutu
+    error,
+    hasUnsavedChanges,
+    isInitialized,
+    isGridReady, // Nový stav pro rychlejší aktivaci event handlerů
+    shouldShowColumns, // Nové pole pro řízení zobrazení columnDefs
+    preTransformedColumnDefs, // Pre-transformované columnDefs pro waitForSavedFields
+
+    // AG-Grid event handlers
+    onGridReady: handleGridReady,
+    onColumnMoved: handleColumnMoved,
+    onDragStopped: handleDragStopped, // Nový handler pro konec drag operace
+    onColumnResized: handleColumnResized,
+    onColumnVisible: handleColumnVisible,
+    onColumnPinned: handleColumnPinned,
+    onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
+
+    // Manual actions
+    saveLayout,
+    resetToDefault,
+    reloadLayout,
+
+    // Column Editor
+    isColumnEditorOpen,
+    openColumnEditor,
+    closeColumnEditor,
+    saveColumnEditorChanges,
+    getCurrentColumnsForEditor, // Nová funkce pro aktuální column state
+
+    // Data
+    savedFields: savedFields?.records || [],
+    columnDefs, // Původní columnDefs pro Column Editor
+
+    // Utils
+    gridLayoutApi,
+  };
+};
+
+export default useGridLayout;