@visns-studio/visns-components 5.10.1 → 5.10.3

package/src/components/crm/DataGrid.jsx

@@ -30,7 +30,6 @@ import React, {
 import { useNavigate } from 'react-router-dom';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
-import numeral from 'numeral';
 import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
@@ -40,10 +39,6 @@ import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
-import imageCompression from 'browser-image-compression';
-import Vapor from 'laravel-vapor';
-import Lightbox from 'yet-another-react-lightbox';
-import { Tooltip } from 'react-tooltip';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
@@ -54,10 +49,8 @@ import {
     BookOpen,
     Check,
     CircleCheck,
-    CircleX,
     Clock,
     CloudDownload,
-    CloudUpload,
     Copy,
     Edit,
     Envelope,
@@ -68,108 +61,57 @@ import {
     LinkOut,
     LockOn,
     Network,
-    Plus,
     Ribbon,
-    Search,
     ShippingBoxV1,
-    Sort,
     SoundOn,
     TriangleAlert,
 } from 'akar-icons';
 import styles from './styles/DataGrid.module.scss';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'yet-another-react-lightbox/styles.css';
 
 import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
+import CellWithTooltip from './cells/CellWithTooltip';
+import DataGridSearch from './controls/DataGridSearch';
+import AutoRefreshControls from './controls/AutoRefreshControls';
+import AudioPlayer from './controls/AudioPlayer';
+import GalleryModal from './modals/GalleryModal';
+import {
+    renderBooleanColumn,
+    renderCurrencyColumn,
+    renderDateColumn,
+    renderDateTimeColumn,
+    renderArrayCountColumn,
+    renderColourColumn,
+    renderDropdownColumn,
+    renderImageColumn,
+    renderFileColumn,
+    renderIconsColumn,
+    renderJsonColumn,
+    renderNumberColumn,
+    renderOptionColumn,
+    renderPlaceholderColumn,
+    renderAgeColumn,
+    renderCodingColumn,
+    renderRelationColumn,
+    renderRelationArrayColumn,
+    renderRichTextColumn,
+    renderStageColumn,
+    renderTimeColumn,
+    renderTimerColumn,
+    renderUrlColumn,
+    renderInputTextColumn,
+    renderAddressColumn,
+    renderCreatedByColumn,
+    renderDateRangeColumn,
+    renderStageCounterColumn,
+} from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
-// CSS styles to ensure consistent group header heights with compact design and click indicators
-// Also includes improved multi-line content handling for data rows
-const groupHeaderStyles = `
-    .datagrid-fixed-group-headers .group-header-fixed-height {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-        box-sizing: border-box !important;
-        line-height: 1.1 !important;
-        flex-shrink: 0 !important;
-        overflow: hidden !important;
-        transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
-        cursor: pointer !important;
-        position: relative !important;
-    }
-
-    /* Hover effect for entire group header */
-    .datagrid-fixed-group-headers .group-header-fixed-height:hover {
-        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
-        transform: translateY(-1px) !important;
-    }
-
-    /* Click indicator overlay */
-    .datagrid-fixed-group-headers .group-header-fixed-height::after {
-        content: '' !important;
-        position: absolute !important;
-        top: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        bottom: 0 !important;
-        background: rgba(59, 130, 246, 0.05) !important;
-        opacity: 0 !important;
-        transition: opacity 0.2s ease !important;
-        pointer-events: none !important;
-    }
-
-    .datagrid-fixed-group-headers .group-header-fixed-height:hover::after {
-        opacity: 1 !important;
-    }
-
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-    }
-
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-        padding: 0 !important;
-        overflow: hidden !important;
-    }
-
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell > div {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-        overflow: hidden !important;
-    }
-
-    /* Ensure group headers maintain consistent styling during expand/collapse */
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row--collapsed .group-header-fixed-height,
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row--expanded .group-header-fixed-height {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
-    }
-
-    /* Force consistent height for all group headers regardless of content */
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row[data-group-by] {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-    }
-
-    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row[data-group-by] .InovuaReactDataGrid__group-cell {
-        height: 34px !important;
-        min-height: 34px !important;
-        max-height: 34px !important;
-    }
-    
+// Enhanced multi-line content support for data cells
+const dataGridStyles = `
     /* Enhanced multi-line content support for data cells */
     .InovuaReactDataGrid__cell {
         word-wrap: break-word;
@@ -202,7 +144,7 @@ if (typeof document !== 'undefined') {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.textContent = groupHeaderStyles;
+        style.textContent = dataGridStyles;
         document.head.appendChild(style);
     }
 }
@@ -268,123 +210,6 @@ const loadData = async (
     }
 };
 
-// Utility function to check if text content is truncated
-const isTextTruncated = (element) => {
-    if (!element) return false;
-    return (
-        element.scrollWidth > element.clientWidth ||
-        element.scrollHeight > element.clientHeight
-    );
-};
-
-// Utility function to format cell value for tooltip display
-const formatCellValueForTooltip = (value, columnType) => {
-    if (value === null || value === undefined || value === '') {
-        return '';
-    }
-
-    switch (columnType) {
-        case 'date':
-        case 'datetime':
-            if (
-                moment(value).isValid() &&
-                moment(value).format('YYYY-MM-DD') !== '1970-01-01'
-            ) {
-                return moment(value).format('DD-MM-YYYY HH:mm');
-            }
-            return String(value);
-        case 'currency':
-            return numeral(value).format('$0,0.00');
-        case 'number':
-            return numeral(value).format('0,0');
-        case 'boolean':
-            return value ? 'Yes' : 'No';
-        case 'richtext':
-            // Strip HTML tags for tooltip
-            const tempDiv = document.createElement('div');
-            tempDiv.innerHTML = value;
-            return tempDiv.textContent || tempDiv.innerText || '';
-        default:
-            return String(value);
-    }
-};
-
-// Component to wrap cell content with tooltip functionality
-const CellWithTooltip = ({
-    children,
-    value,
-    columnType = 'text',
-    className = '',
-}) => {
-    const cellRef = useRef(null);
-    const [showTooltip, setShowTooltip] = useState(false);
-    const [tooltipId] = useState(
-        () => `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`
-    );
-
-    useEffect(() => {
-        const checkTruncation = () => {
-            if (cellRef.current) {
-                const isTruncated = isTextTruncated(cellRef.current);
-                setShowTooltip(isTruncated);
-            }
-        };
-
-        // Check truncation on mount and when content changes
-        checkTruncation();
-
-        // Also check on window resize
-        const handleResize = () => checkTruncation();
-        window.addEventListener('resize', handleResize);
-
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [children, value]);
-
-    const tooltipContent = formatCellValueForTooltip(value, columnType);
-
-    // Only show tooltip if content is truncated and we have meaningful content
-    const shouldShowTooltip =
-        showTooltip && tooltipContent && tooltipContent.trim() !== '';
-
-    return (
-        <div
-            ref={cellRef}
-            className={className}
-            style={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                width: '100%',
-            }}
-            {...(shouldShowTooltip && {
-                'data-tooltip-id': tooltipId,
-                'data-tooltip-html': tooltipContent,
-            })}
-        >
-            {children}
-            {shouldShowTooltip && (
-                <Tooltip
-                    id={tooltipId}
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
-                        color: 'white',
-                        borderRadius: '6px',
-                        padding: '8px 12px',
-                        fontSize: '13px',
-                        maxWidth: '500px',
-                        wordWrap: 'break-word',
-                        zIndex: 1000,
-                    }}
-                    place="top"
-                    offset={5}
-                />
-            )}
-        </div>
-    );
-};
-
 const DataGrid = forwardRef(
     (
         {
@@ -413,21 +238,16 @@ const DataGrid = forwardRef(
         const navigate = useNavigate();
 
         /** Audio */
-        const audioRef = useRef(null);
         const [audioSource, setAudioSource] = useState('');
 
-        useEffect(() => {
-            if (audioSource) {
-                audioRef.current.play();
-            }
-        }, [audioSource]);
-
         /** Gallery Modal States */
         const [modalGalleryShow, setModalGalleryShow] = useState(false);
         const [galleryData, setGalleryData] = useState([]);
-        const [uploadProgress, setUploadProgress] = useState(0);
         const [currentItem, setCurrentItem] = useState(null);
-        const [isUploading, setIsUploading] = useState(false);
+
+        /** Touch Tooltip States */
+        const [activeTooltip, setActiveTooltip] = useState(null);
+        const [touchTimer, setTouchTimer] = useState(null);
 
         /** Lightbox States */
         const [lightboxOpen, setLightboxOpen] = useState(false);
@@ -442,149 +262,6 @@ const DataGrid = forwardRef(
             setModalGalleryShow(false);
         };
 
-        const handleFileUpload = async (files) => {
-            if (!currentItem || !currentItem.settings.upload) return;
-
-            setIsUploading(true);
-            const uploadPromises = [];
-
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-
-                try {
-                    // Optimize image if needed
-                    let optimizedFile = file;
-                    if (file.type.startsWith('image/')) {
-                        const options = {
-                            maxSizeMB: 1,
-                            maxWidthOrHeight: 1920,
-                            useWebWorker: true,
-                        };
-                        try {
-                            optimizedFile = await imageCompression(
-                                file,
-                                options
-                            );
-                        } catch (err) {
-                            console.error('Image compression failed:', err);
-                            // Continue with original file if compression fails
-                        }
-                    }
-
-                    // Upload to Vapor
-                    const uploadPromise = new Promise((resolve, reject) => {
-                        Vapor.store(optimizedFile, {
-                            progress: (progress) => {
-                                setUploadProgress(progress * 100);
-                            },
-                        })
-                            .then((response) => {
-                                // Construct the URL with the key parameter
-                                const uploadSettings =
-                                    currentItem.settings.upload;
-                                const itemData = currentItem.data;
-                                const keyValue = itemData[uploadSettings.key];
-                                const url = keyValue
-                                    ? `${uploadSettings.url}/${keyValue}`
-                                    : uploadSettings.url;
-
-                                // Make the PUT request
-                                CustomFetch(
-                                    url,
-                                    uploadSettings.method || 'POST',
-                                    {
-                                        uuid: response.uuid,
-                                        key: response.key,
-                                        bucket: response.bucket,
-                                        filename: file.name,
-                                        filesize: optimizedFile.size,
-                                        extension: response.extension,
-                                        file_relationship: uploadSettings.id,
-                                    },
-                                    (result) => {
-                                        if (result.error === '') {
-                                            resolve();
-                                        } else {
-                                            toast.error(String(result.error));
-                                            reject(result.error);
-                                        }
-                                    }
-                                );
-                            })
-                            .catch(reject);
-                    });
-
-                    uploadPromises.push(uploadPromise);
-                } catch (error) {
-                    console.error('Error uploading file:', error);
-                    toast.error(
-                        `Error uploading ${file.name}: ${
-                            error.message || 'Unknown error'
-                        }`
-                    );
-                }
-            }
-
-            try {
-                await Promise.all(uploadPromises);
-                toast.success('Files uploaded successfully');
-
-                // Refresh the gallery data
-                if (currentItem && currentItem.settings && currentItem.data) {
-                    const s = currentItem.settings;
-                    const d = currentItem.data;
-
-                    // Function to access nested property using a series of keys
-                    const getNestedValue = (data, keys) =>
-                        keys.reduce(
-                            (currentValue, key) =>
-                                currentValue && currentValue[key] !== undefined
-                                    ? currentValue[key]
-                                    : undefined,
-                            data
-                        );
-
-                    // Fetch updated data
-                    try {
-                        const res = await CustomFetch(
-                            `${form.url}/${d[form.primaryKey]}`,
-                            'GET',
-                            {}
-                        );
-
-                        if (res.data) {
-                            // Extract the updated nested value
-                            const updatedNestedValue = getNestedValue(
-                                res.data,
-                                s.relation
-                            );
-
-                            // Update gallery data
-                            if (
-                                updatedNestedValue &&
-                                Array.isArray(updatedNestedValue)
-                            ) {
-                                const updatedGalleryArray =
-                                    updatedNestedValue.map((item) => ({
-                                        src: item[s.key],
-                                        caption: item.file_name,
-                                    }));
-
-                                setGalleryData(updatedGalleryArray);
-                            }
-                        }
-                    } catch (error) {
-                        console.error('Error refreshing gallery data:', error);
-                    }
-                }
-            } catch (error) {
-                console.error('Error in upload process:', error);
-            } finally {
-                setIsUploading(false);
-                setUploadProgress(0);
-            }
-        };
-
         /** Modal States */
         const [formData, setFormData] = useState({});
         const [formType, setFormType] = useState('');
@@ -689,6 +366,7 @@ const DataGrid = forwardRef(
                 return () => clearTimeout(timer);
             }
         }, [collapsedGroups, ajaxSetting?.groupBy]);
+
         const dataSource = useCallback(
             (params) => {
                 const sqlResult = loadData(params, dSearch, ajaxSetting);
@@ -1160,8 +838,7 @@ const DataGrid = forwardRef(
             setFilterValue(filters);
         }, []);
 
-        const handleChangeSearch = (e) => {
-            const { value } = e.target;
+        const handleChangeSearch = (value) => {
             setSearch(value);
         };
 
@@ -1540,6 +1217,188 @@ const DataGrid = forwardRef(
             gridRef.current.paginationProps.reload();
         };
 
+        const handleGroupAction = async (groupValue, iconConfig) => {
+            // Get all rows for this group
+            const groupRows = getGroupRows(groupValue);
+            
+            // Show confirmation dialog to prevent accidental clicks
+            const confirmMessage = `Are you sure you want to perform "${iconConfig.label}" action on group "${groupValue}" (${groupRows.length} rows)?`;
+
+            confirmDialog({
+                title: 'Confirm Group Action',
+                message: confirmMessage,
+                buttons: [
+                    {
+                        label: 'Yes',
+                        onClick: () => {
+                            executeGroupAction(groupValue, iconConfig);
+                        }
+                    },
+                    {
+                        label: 'No',
+                        onClick: () => {
+                            // User cancelled
+                        }
+                    }
+                ]
+            });
+        };
+
+        const getGroupRows = (groupValue) => {
+            if (!dataRef.current || !ajaxSetting?.groupBy) {
+                return [];
+            }
+            
+            const groupField = ajaxSetting.groupBy[0];
+            return dataRef.current.filter((row) => row[groupField] === groupValue);
+        };
+
+        const shouldShowGroupAction = (iconConfig, groupValue) => {
+            // If no show conditions, always show the icon
+            if (!iconConfig.show || !Array.isArray(iconConfig.show)) {
+                return true;
+            }
+
+            // Get all rows for this group
+            const groupRows = getGroupRows(groupValue);
+            
+            // Check if all show conditions are met
+            return iconConfig.show.every(condition => {
+                const { id, value } = condition;
+                
+                // Check if any row in the group matches the condition
+                return groupRows.some(row => {
+                    const rowValue = row[id];
+                    
+                    // Handle null value condition
+                    if (value === null) {
+                        return rowValue === null || rowValue === undefined || rowValue === '';
+                    }
+                    
+                    // Handle other value conditions
+                    return rowValue === value;
+                });
+            });
+        };
+
+        const executeGroupAction = async (groupValue, iconConfig) => {
+            // Check if fetch configuration is available
+            if (iconConfig.fetch && iconConfig.fetch.url) {
+                try {
+                    const payload = {
+                        ...iconConfig.fetch.data,
+                        groupLabel: groupValue
+                    };
+
+                    const result = await CustomFetch(
+                        iconConfig.fetch.url,
+                        iconConfig.fetch.method || 'POST',
+                        payload
+                    );
+
+                    if (result.error) {
+                        throw new Error(result.error);
+                    }
+
+                    toast.success(
+                        `${iconConfig.label} - Group: ${groupValue} completed successfully`
+                    );
+
+                    // Reload grid data if needed
+                    if (gridRef.current && gridRef.current.paginationProps) {
+                        gridRef.current.paginationProps.reload();
+                    }
+                } catch (error) {
+                    console.error('Group action fetch error:', error);
+                    toast.error(
+                        `${iconConfig.label} - Group: ${groupValue} failed: ${error.message}`
+                    );
+                }
+            } else {
+                // Fallback to existing switch logic if no fetch config
+                toast.info(`${iconConfig.label} - Group: ${groupValue}`);
+
+                switch (iconConfig.id) {
+                    case 'clock':
+                        console.log(
+                            `Starting timer action for group: ${groupValue}`
+                        );
+                        break;
+                    case 'alarm':
+                        console.log(
+                            `Setting alarm action for group: ${groupValue}`
+                        );
+                        break;
+                    case 'check':
+                        console.log(
+                            `Mark complete action for group: ${groupValue}`
+                        );
+                        break;
+                    case 'edit':
+                        console.log(
+                            `Bulk edit action for group: ${groupValue}`
+                        );
+                        break;
+                    case 'envelope':
+                        console.log(
+                            `Send notification action for group: ${groupValue}`
+                        );
+                        break;
+                    default:
+                        console.log(
+                            `Custom action ${iconConfig.id} for group: ${groupValue}`
+                        );
+                        break;
+                }
+            }
+        };
+
+        // Touch handlers for tooltips
+        const handleTouchStart = (e, buttonId, label) => {
+            // Clear any existing timer
+            if (touchTimer) {
+                clearTimeout(touchTimer);
+            }
+
+            // Capture the button element and rect immediately
+            const buttonElement = e.currentTarget;
+            const rect = buttonElement.getBoundingClientRect();
+            const x = rect.left + rect.width / 2; // Center of button
+            const y = rect.top; // Top of button
+
+            // Set a timer for long press (500ms)
+            const timer = setTimeout(() => {
+                setActiveTooltip({ id: buttonId, label, x, y });
+
+                // Auto-close tooltip after 2 seconds
+                setTimeout(() => {
+                    setActiveTooltip(null);
+                }, 2000);
+            }, 500);
+
+            setTouchTimer(timer);
+        };
+
+        const handleTouchEnd = () => {
+            // Clear the timer if touch ends before long press
+            if (touchTimer) {
+                clearTimeout(touchTimer);
+                setTouchTimer(null);
+            }
+        };
+
+        const handleTouchMove = () => {
+            // Cancel tooltip if user moves finger (not a long press)
+            if (touchTimer) {
+                clearTimeout(touchTimer);
+                setTouchTimer(null);
+            }
+        };
+
+        const closeTooltip = () => {
+            setActiveTooltip(null);
+        };
+
         const handleSort = (value) => {
             if (setConfig) {
                 setConfig((prevState) => {
@@ -1767,212 +1626,6 @@ const DataGrid = forwardRef(
             [selected, setRowsSelected, onRowClick]
         );
 
-        const exportTrigger = async () => {
-            try {
-                toast.success('Starting export please wait...');
-
-                let payload;
-
-                if (form.export.useData) {
-                    payload = { data: dataRef.current };
-                } else {
-                    payload = {
-                        filter: filterValue,
-                        paramId: paramValue || '',
-                    };
-                }
-
-                const res = await Download(form.export.url, 'POST', payload);
-
-                if (res.data.error) {
-                    toast.error(res.data.error);
-                } else {
-                    // Assuming the response contains a Blob or similar data
-                    if (res.data && res.data instanceof Blob) {
-                        const fileName = `${form.export.filename}`;
-                        saveAs(res.data, fileName);
-                    } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
-                    }
-                }
-            } catch (error) {
-                console.info(error);
-            }
-        };
-
-        const sortTrigger = () => {
-            let baseUrl = form.url.replace('/ajax', '');
-            let sortUrl = paramValue
-                ? `${baseUrl}/${paramValue}/sort`
-                : `${baseUrl}/sort`;
-
-            if (form.sort?.url) {
-                sortUrl = form.sort.url;
-            }
-
-            const newState = {
-                form,
-                page: {
-                    data: pageData,
-                    setting: pageSetting,
-                },
-                paramValue,
-            };
-
-            navigate(sortUrl, { state: newState });
-        };
-
-        const renderCreateButton = () => {
-            if (form.createDisable && form.createDisable === true) {
-                return null;
-            }
-
-            const isSearchEnabled = !(form.searchDisable === true);
-            const buttonClassName = isSearchEnabled
-                ? styles.actionButtons
-                : styles.actionButtonsStandalone;
-
-            return (
-                <div className={buttonClassName}>
-                    {form.export && form.export.url && (
-                        <button className={styles.btn} onClick={exportTrigger}>
-                            <LinkOut
-                                strokeWidth={2}
-                                size={16}
-                                style={{ marginRight: '10px' }}
-                            />{' '}
-                            Export
-                        </button>
-                    )}
-                    {form.sort && form.sort.title && (
-                        <button className={styles.btn} onClick={sortTrigger}>
-                            <Sort
-                                strokeWidth={2}
-                                size={16}
-                                style={{ marginRight: '10px' }}
-                            />{' '}
-                            Sort Order
-                        </button>
-                    )}
-
-                    {(form.create &&
-                        form.create.title &&
-                        form.create.title !== '') ||
-                    (form.url && form.create?.title !== '') ? (
-                        <button
-                            className={styles.btn}
-                            onClick={(e) => {
-                                e.preventDefault();
-
-                                if (form.create) {
-                                    if (form.create.url) {
-                                        // Check if URL is external
-                                        if (
-                                            form.create.url.startsWith(
-                                                'http://'
-                                            ) ||
-                                            form.create.url.startsWith(
-                                                'https://'
-                                            )
-                                        ) {
-                                            window.open(
-                                                form.create.url,
-                                                '_blank'
-                                            );
-                                        } else {
-                                            navigate(form.create.url);
-                                        }
-                                    } else {
-                                        modalOpen('create', 0);
-                                    }
-                                } else {
-                                    if (form.url) {
-                                        window.open(
-                                            form.url,
-                                            '',
-                                            'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                        );
-                                    }
-                                }
-                            }}
-                        >
-                            <Plus
-                                strokeWidth={2}
-                                size={16}
-                                style={{ marginRight: '10px' }}
-                            />
-                            Add New
-                        </button>
-                    ) : form.url && form.modal === false ? (
-                        <button
-                            className={styles.btn}
-                            onClick={(e) => {
-                                e.preventDefault();
-
-                                window.open(
-                                    form.url,
-                                    '',
-                                    'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                );
-                            }}
-                        >
-                            <Plus
-                                strokeWidth={2}
-                                size={16}
-                                style={{ marginRight: '10px' }}
-                            />
-                            Add New
-                        </button>
-                    ) : null}
-                </div>
-            );
-        };
-
-        const renderSearch = () => {
-            const isSearchEnabled = !(form.searchDisable === true);
-            const isCreateDisabled = form.createDisable === true;
-
-            // Don't render anything if both search and create are disabled
-            if (!isSearchEnabled && isCreateDisabled) {
-                return null;
-            }
-
-            // If search is disabled but create button is enabled, render only the button with its own container
-            if (!isSearchEnabled && !isCreateDisabled) {
-                return (
-                    <div className={styles.actionButtonsContainer}>
-                        {renderCreateButton()}
-                    </div>
-                );
-            }
-
-            // If search is enabled, render the full search container with both search and buttons
-            return (
-                <div className={styles.searchContainer}>
-                    <div className={styles.searchInputWrapper}>
-                        <div
-                            className={styles['icon-search']}
-                            style={{ left: 25, color: '#000' }}
-                        >
-                            <Search strokeWidth={2} size={14} />
-                        </div>
-                        <input
-                            type="text"
-                            placeholder="Search"
-                            value={search}
-                            onChange={handleChangeSearch}
-                            style={{ borderRadius: 0, paddingLeft: 55 }}
-                            className={styles.searchInput}
-                        />
-                    </div>
-                    <div className={styles.actionButtonsWrapper}>
-                        {!isCreateDisabled && renderCreateButton()}
-                    </div>
-                </div>
-            );
-        };
-
         // Helper function to determine if auto refresh should be relocated
         const shouldRelocateAutoRefresh = () => {
             const isSearchDisabled = form.searchDisable === true;
@@ -1980,36 +1633,9 @@ const DataGrid = forwardRef(
             const hasAutoRefresh =
                 ajaxSetting && ajaxSetting.autoRefresh !== undefined;
 
-            // Relocate only if auto refresh is the sole control (no search, no create button)
-            return hasAutoRefresh && isSearchDisabled && isCreateDisabled;
-        };
-
-        const renderAutoRefreshControls = (isRelocated = false) => {
-            // Only show auto-refresh if the setting is present in ajaxSetting
-            if (!ajaxSetting || ajaxSetting.autoRefresh === undefined) {
-                return null;
-            }
-
-            const containerClass = isRelocated
-                ? styles.autoRefreshContainerRelocated
-                : styles.autoRefreshContainer;
-
-            return (
-                <div className={containerClass}>
-                    <label className={styles.autoRefreshLabel}>
-                        <input
-                            type="checkbox"
-                            checked={autoRefreshEnabled}
-                            onChange={() =>
-                                setAutoRefreshEnabled(!autoRefreshEnabled)
-                            }
-                            className={styles.autoRefreshCheckbox}
-                        />
-                        Auto Refresh{' '}
-                        {refreshInterval && `(${refreshInterval}s)`}
-                    </label>
-                </div>
-            );
+            // Hide auto refresh when it would be the sole control (instead of relocating it)
+            // This prevents it from appearing under the datagrid
+            return false;
         };
 
         const renderRowContextMenu = useCallback(
@@ -2714,8 +2340,6 @@ const DataGrid = forwardRef(
                         let date;
                         let filterEditor = null;
                         let filterEditorProps = null;
-                        let fileUrl = null;
-                        let icons = [];
                         let relationName;
                         let selectedDataSource = null;
                         let stage;
@@ -2840,1572 +2464,176 @@ const DataGrid = forwardRef(
 
                         switch (column.type) {
                             case 'address':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.type}.${column.id}`,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    render: ({ data }) => {
-                                        const addressFields = [
-                                            'address1',
-                                            'address2',
-                                            'suburb',
-                                            'postcode',
-                                        ];
-
-                                        const addressValue = addressFields
-                                            .filter((field) => data[field])
-                                            .map((field) => data[field])
-                                            .join(' ');
-
-                                        const stateValue =
-                                            data.state?.name ||
-                                            data.state ||
-                                            '';
-
-                                        const value = `${addressValue} ${stateValue}`;
-
-                                        return (
-                                            <CellWithTooltip
-                                                value={value}
-                                                columnType="address"
-                                            >
-                                                <span>{value}</span>
-                                            </CellWithTooltip>
-                                        );
-                                    },
-                                };
+                                return renderAddressColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
                             case 'age':
-                                return {
-                                    ...commonProps,
-                                    type: 'number',
-                                    filterEditor: filterEditor,
-                                    name: `${column.type}.${column.id}`,
-                                    render: ({ data }) => {
-                                        value = column.id.reduce((acc, id) => {
-                                            if (acc === '') {
-                                                return data[id];
-                                            } else {
-                                                return acc ? acc[id] : '';
-                                            }
-                                        }, '');
-
-                                        if (value !== '' && value !== null) {
-                                            date = moment(value);
-
-                                            return (
-                                                <span>
-                                                    {moment().diff(
-                                                        date,
-                                                        column.duration
-                                                            ? column.duration
-                                                            : 'years'
-                                                    )}
-                                                </span>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderAgeColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                });
                             case 'arrayCount':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.type}.${column.id}`,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            return data[column.id].length;
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderArrayCountColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'boolean':
-                                return {
-                                    ...commonProps,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    name: `${column.type}.${column.id}`,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        const value = data[column.id]
-                                            ? 'Yes'
-                                            : 'No';
-                                        return (
-                                            <CellWithTooltip
-                                                value={data[column.id]}
-                                                columnType="boolean"
-                                            >
-                                                <span>{value}</span>
-                                            </CellWithTooltip>
-                                        );
-                                    },
-                                };
+                                return renderBooleanColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
                             case 'coding':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.type}.${column.id}`,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (data) {
-                                            return handleCoding(column, data);
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderCodingColumn({
+                                    column,
+                                    commonProps,
+                                    handleCoding,
+                                });
                             case 'colour':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.type}.${column.id}`,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            return (
-                                                <div
-                                                    style={{
-                                                        width: '25px',
-                                                        height: '25px',
-                                                        borderRadius: '10px',
-                                                        overflow: 'hidden',
-                                                    }}
-                                                >
-                                                    <div
-                                                        style={{
-                                                            background:
-                                                                data[
-                                                                    column.id
-                                                                ] +
-                                                                ' none repeat scroll 0% 0%',
-                                                            height: '100%',
-                                                            width: '100%',
-                                                            cursor: 'pointer',
-                                                            position:
-                                                                'relative',
-                                                            outline:
-                                                                'currentcolor none medium',
-                                                        }}
-                                                    ></div>
-                                                </div>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderColourColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'created_by':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.type}.${column.id}`,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (
-                                            data.audits[0] &&
-                                            data.audits[0].user &&
-                                            data.audits[0].user.name
-                                        ) {
-                                            value = data.audits[0].user.name;
-
-                                            return <span>{value}</span>;
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderCreatedByColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'currency':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (data) {
-                                            data = numeral(
-                                                data[column.id]
-                                            ).format('$0,0.00');
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="currency"
-                                                >
-                                                    <span>{data}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderCurrencyColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'date':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    defaultWidth: 120, // Set default width for date columns
-                                    minWidth: 120, // Set minimum width for date columns
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id] &&
-                                            moment(data[column.id]).isValid() &&
-                                            moment(data[column.id]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            const value = moment(
-                                                data[column.id]
-                                            ).format(
-                                                column.format || 'DD-MM-YYYY'
-                                            );
-                                            columnStyle = {};
-
-                                            if (
-                                                column.active &&
-                                                column.active.id &&
-                                                column.active.value ===
-                                                    'expired'
-                                            ) {
-                                                if (
-                                                    data[column.active.id] &&
-                                                    moment(
-                                                        data[column.active.id]
-                                                    ).isBefore(moment())
-                                                ) {
-                                                    columnStyle = {
-                                                        color: column.active
-                                                            .colour,
-                                                    };
-                                                }
-                                            }
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="date"
-                                                >
-                                                    <span style={columnStyle}>
-                                                        {value}
-                                                    </span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderDateColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
                             case 'daterange':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.id[0]}.${column.id[1]}.`,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    defaultWidth: 200, // Set default width for daterange columns
-                                    minWidth: 200, // Set minimum width for daterange columns
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id[0]] &&
-                                            moment(
-                                                data[column.id[0]]
-                                            ).isValid() &&
-                                            moment(data[column.id[0]]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            value = moment(
-                                                data[column.id[0]]
-                                            ).format(
-                                                column.format || 'DD-MM-YYYY'
-                                            );
-                                        }
-
-                                        if (
-                                            data &&
-                                            data[column.id[1]] &&
-                                            moment(
-                                                data[column.id[1]]
-                                            ).isValid() &&
-                                            moment(data[column.id[1]]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            value += ` - ${moment(
-                                                data[column.id[1]]
-                                            ).format(
-                                                column.format || 'DD-MM-YYYY'
-                                            )}`;
-                                        }
-
-                                        return <span>{value}</span>;
-                                    },
-                                };
+                                return renderDateRangeColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
                             case 'datetime':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    defaultWidth: 160, // Set default width for datetime columns
-                                    minWidth: 160, // Set minimum width for datetime columns
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id] &&
-                                            moment(data[column.id]).isValid() &&
-                                            moment(data[column.id]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            data = moment(
-                                                data[column.id]
-                                            ).format(
-                                                column.format
-                                                    ? column.format
-                                                    : 'DD-MM-YYYY hh:mm A'
-                                            );
-
-                                            return <span>{data}</span>;
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderDateTimeColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
                             case 'dropdown':
-                                columnId = Array.isArray(column.id)
-                                    ? column.id.join('-')
-                                    : column.id;
-
-                                return {
-                                    ...commonProps,
-                                    name: columnId,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    render: ({ data }) => {
-                                        return (
-                                            <select
-                                                name={column.id}
-                                                value={
-                                                    data[column.id]?.id || ''
-                                                }
-                                                style={{ padding: '7px' }}
-                                                onChange={(e) => {
-                                                    e.preventDefault();
-
-                                                    if (
-                                                        (column.update?.key,
-                                                        column.update?.url,
-                                                        column.update?.method)
-                                                    ) {
-                                                        handleDropdownUpdate(
-                                                            column.update.key,
-                                                            `${column.update.url}/${data.id}`,
-                                                            column.update
-                                                                .method,
-                                                            e.target.value
-                                                        );
-                                                    }
-                                                }}
-                                            >
-                                                <option value="">
-                                                    Select{' '}
-                                                    {/^[aeioAEIO]/.test(
-                                                        column.label
-                                                    )
-                                                        ? 'an'
-                                                        : 'a'}{' '}
-                                                    {column.label}
-                                                </option>
-                                                {dropdownData[column.id] &&
-                                                dropdownData[column.id].length >
-                                                    0
-                                                    ? dropdownData[
-                                                          column.id
-                                                      ].map((option, index) => (
-                                                          <option
-                                                              value={option.id}
-                                                              key={index}
-                                                          >
-                                                              {option.label}
-                                                          </option>
-                                                      ))
-                                                    : null}
-                                            </select>
-                                        );
-                                    },
-                                };
+                                return renderDropdownColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                    dropdownData,
+                                    handleDropdownUpdate,
+                                });
                             case 'file':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            // Check if the data is an array of files
-                                            if (
-                                                Array.isArray(data[column.id])
-                                            ) {
-                                                // Return a span for each file in the array with added margin
-                                                return data[column.id].map(
-                                                    (file, index) => (
-                                                        <span
-                                                            key={index} // Use index as a key; consider using unique ids if available
-                                                            onClick={(e) => {
-                                                                e.stopPropagation();
-                                                                e.preventDefault();
-                                                                handleDownload(
-                                                                    file
-                                                                );
-                                                            }}
-                                                            style={{
-                                                                marginRight:
-                                                                    '10px',
-                                                                display:
-                                                                    'inline-block',
-                                                            }} // Added margin right and display style
-                                                        >
-                                                            <CloudDownload
-                                                                data-tooltip-id={`system-tooltip`}
-                                                                data-tooltip-content={`Download File ${file.file_name}`}
-                                                                strokeWidth={2}
-                                                                size={14}
-                                                                className={
-                                                                    styles.tdaction
-                                                                }
-                                                            />
-                                                        </span>
-                                                    )
-                                                );
-                                            } else {
-                                                // Return a single span for a single file with added margin
-                                                return (
-                                                    <span
-                                                        onClick={(e) => {
-                                                            e.stopPropagation();
-                                                            e.preventDefault();
-                                                            handleDownload(
-                                                                data[column.id]
-                                                            );
-                                                        }}
-                                                        style={{
-                                                            marginRight: '10px',
-                                                            display:
-                                                                'inline-block',
-                                                        }} // Added margin right and display style for consistency
-                                                    >
-                                                        <CloudDownload
-                                                            data-tooltip-id="system-tooltip"
-                                                            data-tooltip-content={`Download File ${
-                                                                data[column.id]
-                                                                    .file_name
-                                                            }`}
-                                                            strokeWidth={2}
-                                                            size={14}
-                                                            className={
-                                                                styles.tdaction
-                                                            }
-                                                        />
-                                                    </span>
-                                                );
-                                            }
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderFileColumn({
+                                    column,
+                                    commonProps,
+                                    handleDownload,
+                                    styles,
+                                });
                             case 'icons':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        icons = [];
-
-                                        if (
-                                            column.icons &&
-                                            column.icons.length > 0
-                                        ) {
-                                            column.icons.forEach((icon) => {
-                                                icons.push(
-                                                    <img
-                                                        src={icon.url}
-                                                        alt={icon.name}
-                                                        data-tooltip-id="system-tooltip"
-                                                        data-tooltip-content={
-                                                            icon.name
-                                                        }
-                                                    />
-                                                );
-                                            });
-                                        }
-
-                                        if (data) {
-                                            return <span>{icons}</span>;
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderIconsColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'image':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            fileUrl =
-                                                data[column.id][0]?.file_url ||
-                                                data[column.id]?.file_url;
-
-                                            if (fileUrl) {
-                                                return (
-                                                    <span>
-                                                        {parse(
-                                                            `<img width="150" src="${fileUrl}" />`
-                                                        )}
-                                                    </span>
-                                                );
-                                            }
-                                        }
-
-                                        return null;
-                                    },
-                                };
+                                return renderImageColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'json':
-                                return {
-                                    ...commonProps,
-                                    name: `${column.id}.${column.jsonData}`,
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id] &&
-                                            data[column.id][column.jsonData]
-                                        ) {
-                                            data =
-                                                data[column.id][
-                                                    column.jsonData
-                                                ];
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data}
-                                                    columnType="json"
-                                                >
-                                                    <span>{data}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderJsonColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'number':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    type: 'number',
-                                };
+                                return renderNumberColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'option':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    render: ({ data }) => {
-                                        let newData;
-
-                                        if (
-                                            data &&
-                                            column.options &&
-                                            column.options[data[column.id]]
-                                        ) {
-                                            if (
-                                                column.key &&
-                                                data[column.key] > 0 &&
-                                                column.options[
-                                                    data[column.id]
-                                                ].includes('#')
-                                            ) {
-                                                newData = column.options[
-                                                    data[column.id]
-                                                ].replace(
-                                                    /#/g,
-                                                    data[column.key]
-                                                );
-                                            } else {
-                                                newData =
-                                                    column.options[
-                                                        data[column.id]
-                                                    ];
-                                            }
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={newData}
-                                                    columnType="option"
-                                                >
-                                                    <span>{newData}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
-                            case 'placeholder':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (data) {
-                                            return (
-                                                <CellWithTooltip
-                                                    value={column.placeholder}
-                                                    columnType="placeholder"
-                                                >
-                                                    <span>
-                                                        {column.placeholder}
-                                                    </span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
-                            case 'relation':
-                                return {
-                                    ...commonProps,
-                                    name: relationName,
-                                    sortable: false,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    render: ({ data }) => {
-                                        value = column.id.reduce((acc, id) => {
-                                            if (acc === '') {
-                                                if (data[id]) {
-                                                    return data[id];
-                                                } else {
-                                                    return '';
-                                                }
-                                            } else {
-                                                if (acc && acc[id]) {
-                                                    return acc[id];
-                                                } else {
-                                                    return '';
-                                                }
-                                            }
-                                        }, '');
-
-                                        if (value) {
-                                            if (Array.isArray(value)) {
-                                                if (value[0]) {
-                                                    value = value[0];
-                                                }
-                                            }
-
-                                            if (
-                                                Array.isArray(column.nameFrom)
-                                            ) {
-                                                value = column.nameFrom
-                                                    .map(
-                                                        (nf) =>
-                                                            value?.[nf] ?? ''
-                                                    )
-                                                    .join(' ');
-                                            } else {
-                                                if (
-                                                    value &&
-                                                    value.hasOwnProperty(
-                                                        column.nameFrom
-                                                    )
-                                                ) {
-                                                    value =
-                                                        value[column.nameFrom];
-                                                }
-                                            }
-
-                                            if (
-                                                column.placeholder &&
-                                                column.placeholder !== ''
-                                            ) {
-                                                return (
-                                                    <span>
-                                                        {column.placeholder}
-                                                    </span>
-                                                );
-                                            } else {
-                                                if (
-                                                    column.hasOwnProperty(
-                                                        'format'
-                                                    )
-                                                ) {
-                                                    if (column.format) {
-                                                        value =
-                                                            moment(
-                                                                value
-                                                            ).format(
-                                                                'DD-MM-YYYY'
-                                                            );
-                                                    }
-                                                }
-
-                                                if (
-                                                    typeof value === 'string' ||
-                                                    typeof value === 'number'
-                                                ) {
-                                                    return (
-                                                        <CellWithTooltip
-                                                            value={value}
-                                                            columnType="relation"
-                                                        >
-                                                            <span>{value}</span>
-                                                        </CellWithTooltip>
-                                                    );
-                                                } else {
-                                                    return null;
-                                                }
-                                            }
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderOptionColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                });
+                            case 'placeholder':
+                                return renderPlaceholderColumn({
+                                    column,
+                                    commonProps,
+                                });
+                            case 'relation':
+                                return renderRelationColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                    relationName,
+                                });
                             case 'relationArray':
-                                return {
-                                    ...commonProps,
-                                    name: relationName,
-                                    sortable: false,
-                                    filterEditor: filterEditor,
-                                    filterEditorProps: filterEditorProps,
-                                    render: ({ data }) => {
-                                        const relationValue = column.id.reduce(
-                                            (acc, id) =>
-                                                acc === ''
-                                                    ? data[id]
-                                                    : acc && acc[id]
-                                                    ? acc[id]
-                                                    : '',
-                                            ''
-                                        );
-
-                                        if (
-                                            relationValue &&
-                                            Array.isArray(relationValue) &&
-                                            relationValue.length > 0
-                                        ) {
-                                            const nameProperties =
-                                                Array.isArray(column.nameFrom)
-                                                    ? column.nameFrom
-                                                    : [column.nameFrom];
-
-                                            const values = relationValue
-                                                .map((rv) => {
-                                                    if (
-                                                        column.childId &&
-                                                        Array.isArray(
-                                                            column.childId
-                                                        )
-                                                    ) {
-                                                        childValue = rv;
-
-                                                        column.childId.forEach(
-                                                            (a) => {
-                                                                if (
-                                                                    childValue[
-                                                                        a
-                                                                    ]
-                                                                ) {
-                                                                    childValue =
-                                                                        childValue[
-                                                                            a
-                                                                        ];
-                                                                }
-                                                            }
-                                                        );
-
-                                                        if (childValue) {
-                                                            const propertyValues =
-                                                                nameProperties
-                                                                    .map(
-                                                                        (
-                                                                            prop
-                                                                        ) =>
-                                                                            childValue[
-                                                                                prop
-                                                                            ]
-                                                                    )
-                                                                    .filter(
-                                                                        (
-                                                                            value
-                                                                        ) =>
-                                                                            value !==
-                                                                                undefined &&
-                                                                            value !==
-                                                                                null
-                                                                    );
-                                                            return propertyValues.join(
-                                                                ' '
-                                                            );
-                                                        }
-                                                    } else {
-                                                        const propertyValues =
-                                                            nameProperties
-                                                                .map(
-                                                                    (prop) =>
-                                                                        rv[prop]
-                                                                )
-                                                                .filter(
-                                                                    (value) =>
-                                                                        value !==
-                                                                            undefined &&
-                                                                        value !==
-                                                                            null
-                                                                );
-                                                        return propertyValues.join(
-                                                            ' '
-                                                        );
-                                                    }
-                                                })
-                                                .filter(
-                                                    (value) => value !== ''
-                                                );
-
-                                            // if (values.length > 0) {
-                                            let result = '';
-
-                                            if (
-                                                column.relation?.id &&
-                                                column.relation?.key
-                                            ) {
-                                                const relationValue =
-                                                    column.relation.key.reduce(
-                                                        (acc, id) =>
-                                                            acc === ''
-                                                                ? data[id]
-                                                                : acc && acc[id]
-                                                                ? acc[id]
-                                                                : '',
-                                                        ''
-                                                    );
-
-                                                result = `${
-                                                    relationValue[
-                                                        column.relation.id
-                                                    ]
-                                                }<br />`;
-                                            }
-
-                                            if (
-                                                column.where &&
-                                                column.where.id &&
-                                                column.where.value
-                                            ) {
-                                                if (
-                                                    data[column.where.id] ===
-                                                    column.where.value
-                                                ) {
-                                                    result +=
-                                                        values.join('<br />');
-                                                }
-                                            } else {
-                                                result += values.join('<br />');
-                                            }
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={result}
-                                                    columnType="relationArray"
-                                                >
-                                                    <span>{parse(result)}</span>
-                                                </CellWithTooltip>
-                                            );
-                                            // }
-                                        } else {
-                                            let result = '';
-
-                                            if (
-                                                column.relation?.id &&
-                                                column.relation?.key
-                                            ) {
-                                                const relationValue =
-                                                    column.relation.key.reduce(
-                                                        (acc, id) =>
-                                                            acc === ''
-                                                                ? data[id]
-                                                                : acc && acc[id]
-                                                                ? acc[id]
-                                                                : '',
-                                                        ''
-                                                    );
-
-                                                result =
-                                                    relationValue &&
-                                                    relationValue[
-                                                        column.relation.id
-                                                    ]
-                                                        ? relationValue[
-                                                              column.relation.id
-                                                          ]
-                                                        : '';
-                                            }
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={result}
-                                                    columnType="relationArray"
-                                                >
-                                                    <span>{parse(result)}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        }
-
-                                        return null;
-                                    },
-                                };
+                                return renderRelationArrayColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                    relationName,
+                                });
                             case 'richtext':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="richtext"
-                                                >
-                                                    <span>
-                                                        {parse(data[column.id])}
-                                                    </span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderRichTextColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'stage':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        stage = '';
-
-                                        column.keyIds.forEach((a, b) => {
-                                            if (data[a] === 1) {
-                                                stage = column.valueIds[b];
-                                            }
-                                        });
-
-                                        return (
-                                            <CellWithTooltip
-                                                value={stage}
-                                                columnType="stage"
-                                            >
-                                                <span>{stage}</span>
-                                            </CellWithTooltip>
-                                        );
-                                    },
-                                };
+                                return renderStageColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'time':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id] &&
-                                            moment(data[column.id]).isValid() &&
-                                            moment(data[column.id]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            data = moment(
-                                                data[column.id]
-                                            ).format(
-                                                column.format
-                                                    ? column.format
-                                                    : 'hh:mm A'
-                                            );
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="time"
-                                                >
-                                                    <span>{data}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderTimeColumn({
+                                    column,
+                                    commonProps,
+                                });
                             case 'timer':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            data[column.id] &&
-                                            moment(data[column.id]).isValid() &&
-                                            moment(data[column.id]).format(
-                                                'YYYY-MM-DD'
-                                            ) !== '1970-01-01'
-                                        ) {
-                                            data = moment(
-                                                data[column.id]
-                                            ).format(
-                                                column.format
-                                                    ? column.format
-                                                    : 'DD-MM-YYYY hh:mm A'
-                                            );
-
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="timer"
-                                                >
-                                                    <span>{data}</span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            let shouldRenderButton = false;
-
-                                            if (
-                                                !column.hasOwnProperty(
-                                                    'require'
-                                                ) ||
-                                                column.require.length === 0
-                                            ) {
-                                                shouldRenderButton = true;
-                                            } else {
-                                                for (const req of column.require) {
-                                                    if (
-                                                        req.hasOwnProperty('id')
-                                                    ) {
-                                                        const hasValue =
-                                                            req.hasOwnProperty(
-                                                                'value'
-                                                            );
-                                                        if (
-                                                            (hasValue &&
-                                                                data[req.id] ===
-                                                                    req.value) ||
-                                                            (!hasValue &&
-                                                                data[req.id])
-                                                        ) {
-                                                            shouldRenderButton = true;
-                                                        } else {
-                                                            shouldRenderButton = false;
-                                                            break;
-                                                        }
-                                                    }
-                                                }
-                                            }
-
-                                            if (shouldRenderButton) {
-                                                return (
-                                                    <button
-                                                        className={
-                                                            styles.clockButton
-                                                        }
-                                                        onClick={(e) => {
-                                                            e.stopPropagation();
-                                                            e.preventDefault();
-
-                                                            // Check if every required field in column.validate exists and is truthy in data
-                                                            if (
-                                                                column.validate &&
-                                                                column.validate
-                                                                    .length > 0
-                                                            ) {
-                                                                const missingFields =
-                                                                    column.validate.filter(
-                                                                        (v) =>
-                                                                            !data[
-                                                                                v
-                                                                            ]
-                                                                    );
-
-                                                                if (
-                                                                    missingFields.length ===
-                                                                    0
-                                                                ) {
-                                                                    handleTimer(
-                                                                        data[
-                                                                            form
-                                                                                .primaryKey
-                                                                        ],
-                                                                        column.id,
-                                                                        data
-                                                                    );
-                                                                } else {
-                                                                    // Format field names to be more readable
-                                                                    const formattedFields =
-                                                                        missingFields.map(
-                                                                            (
-                                                                                field
-                                                                            ) => {
-                                                                                // Try to find the column with this field ID to get its label
-                                                                                const fieldColumn =
-                                                                                    columns.find(
-                                                                                        (
-                                                                                            col
-                                                                                        ) =>
-                                                                                            col.id ===
-                                                                                            field
-                                                                                    );
-                                                                                // Use the label if found, otherwise use the field ID
-                                                                                return (
-                                                                                    fieldColumn?.label ||
-                                                                                    field
-                                                                                );
-                                                                            }
-                                                                        );
-
-                                                                    const fieldList =
-                                                                        formattedFields.join(
-                                                                            ', '
-                                                                        );
-                                                                    toast.error(
-                                                                        `Please complete the following required field${
-                                                                            missingFields.length >
-                                                                            1
-                                                                                ? 's'
-                                                                                : ''
-                                                                        } before starting the timer: ${fieldList}`
-                                                                    );
-                                                                }
-                                                            } else {
-                                                                handleTimer(
-                                                                    data[
-                                                                        form
-                                                                            .primaryKey
-                                                                    ],
-                                                                    column.id,
-                                                                    data
-                                                                );
-                                                            }
-                                                        }}
-                                                    >
-                                                        <Alarm
-                                                            data-tooltip-id="system-tooltip"
-                                                            data-tooltip-content={`${column.label} Timer`}
-                                                            strokeWidth={2}
-                                                            size={14}
-                                                            style={{
-                                                                color: 'white',
-                                                            }}
-                                                        />
-                                                    </button>
-                                                );
-                                            }
-
-                                            // Return a placeholder div to maintain consistent row height
-                                            return (
-                                                <div
-                                                    style={{
-                                                        width: '28px',
-                                                        height: '28px',
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent:
-                                                            'center',
-                                                        margin: '0 auto',
-                                                    }}
-                                                >
-                                                    {/* Empty placeholder to maintain layout */}
-                                                </div>
-                                            );
-                                        }
-                                    },
-                                };
+                                return renderTimerColumn({
+                                    column,
+                                    commonProps,
+                                    handleTimer,
+                                    form,
+                                    columns,
+                                    styles,
+                                });
                             case 'stageCounter':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    sortable: false,
-                                    render: ({ data }) => {
-                                        if (
-                                            data &&
-                                            column.stageConfig &&
-                                            column.stageConfig.key
-                                        ) {
-                                            // Check if the data has the specified key and it's an array
-                                            const stageData =
-                                                data[column.stageConfig.key];
-
-                                            if (
-                                                stageData &&
-                                                Array.isArray(stageData)
-                                            ) {
-                                                const stageCount =
-                                                    stageData.length;
-
-                                                // Create a clickable element if link is provided
-                                                const handleClick = (e) => {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-
-                                                    if (
-                                                        column.link &&
-                                                        column.link.url &&
-                                                        column.link.key
-                                                    ) {
-                                                        navigate(
-                                                            `${
-                                                                column.link.url
-                                                            }${
-                                                                data[
-                                                                    column.link
-                                                                        .key
-                                                                ]
-                                                            }`
-                                                        );
-                                                    }
-                                                };
-
-                                                // Create an array of squares based on the stage data
-                                                const squares = [];
-                                                for (
-                                                    let i = 0;
-                                                    i < stageCount;
-                                                    i++
-                                                ) {
-                                                    // Get the stage item
-                                                    const stageItem =
-                                                        stageData[i];
-
-                                                    // Get the label value from the stage item using stageLabelKey if provided
-                                                    let labelValue = '';
-                                                    if (
-                                                        column.stageConfig
-                                                            .stageLabelKey &&
-                                                        stageItem &&
-                                                        stageItem[
-                                                            column.stageConfig
-                                                                .stageLabelKey
-                                                        ] !== undefined
-                                                    ) {
-                                                        // Get the value from the stage item
-                                                        const rawValue =
-                                                            stageItem[
-                                                                column
-                                                                    .stageConfig
-                                                                    .stageLabelKey
-                                                            ];
-
-                                                        // If it's an object with a name property, use that
-                                                        if (
-                                                            rawValue &&
-                                                            typeof rawValue ===
-                                                                'object' &&
-                                                            rawValue.name
-                                                        ) {
-                                                            labelValue =
-                                                                rawValue.name.charAt(
-                                                                    0
-                                                                );
-                                                        }
-                                                        // If it's a string, use the first character
-                                                        else if (
-                                                            typeof rawValue ===
-                                                                'string' &&
-                                                            rawValue.length > 0
-                                                        ) {
-                                                            labelValue =
-                                                                rawValue.charAt(
-                                                                    0
-                                                                );
-                                                        }
-                                                        // Otherwise use the raw value if it can be converted to string
-                                                        else if (
-                                                            rawValue !== null &&
-                                                            rawValue !==
-                                                                undefined
-                                                        ) {
-                                                            labelValue =
-                                                                String(
-                                                                    rawValue
-                                                                ).charAt(0);
-                                                        }
-                                                    }
-                                                    // If no stageLabelKey is provided or no value is found, leave it blank
-
-                                                    // Create tooltip content from the full value if available
-                                                    let tooltipContent = `Stage ${
-                                                        i + 1
-                                                    }`;
-                                                    if (
-                                                        column.stageConfig
-                                                            .stageLabelKey &&
-                                                        stageItem &&
-                                                        stageItem[
-                                                            column.stageConfig
-                                                                .stageLabelKey
-                                                        ]
-                                                    ) {
-                                                        const rawValue =
-                                                            stageItem[
-                                                                column
-                                                                    .stageConfig
-                                                                    .stageLabelKey
-                                                            ];
-                                                        if (
-                                                            rawValue &&
-                                                            typeof rawValue ===
-                                                                'object' &&
-                                                            rawValue.name
-                                                        ) {
-                                                            tooltipContent = `${
-                                                                rawValue.name
-                                                            } (Stage ${i + 1})`;
-                                                        } else if (
-                                                            rawValue !== null &&
-                                                            rawValue !==
-                                                                undefined
-                                                        ) {
-                                                            tooltipContent = `Stage ${
-                                                                i + 1
-                                                            })`;
-                                                        }
-                                                    }
-
-                                                    // Determine the background color based on stageColour configuration
-                                                    let backgroundColor =
-                                                        'var(--primary-color, #4a90e2)';
-
-                                                    if (
-                                                        column.stageConfig
-                                                            .stageColour &&
-                                                        column.stageConfig
-                                                            .stageColour.key &&
-                                                        column.stageConfig
-                                                            .stageColour
-                                                            .options &&
-                                                        stageItem
-                                                    ) {
-                                                        const colourKey =
-                                                            column.stageConfig
-                                                                .stageColour
-                                                                .key;
-                                                        const colourOptions =
-                                                            column.stageConfig
-                                                                .stageColour
-                                                                .options;
-
-                                                        // Get the value for the color key
-                                                        if (
-                                                            stageItem[
-                                                                colourKey
-                                                            ] !== undefined
-                                                        ) {
-                                                            const keyValue =
-                                                                stageItem[
-                                                                    colourKey
-                                                                ];
-
-                                                            // Find matching option
-                                                            const matchingOption =
-                                                                colourOptions.find(
-                                                                    (
-                                                                        option
-                                                                    ) => {
-                                                                        // Handle both direct value and object with id
-                                                                        if (
-                                                                            typeof keyValue ===
-                                                                                'object' &&
-                                                                            keyValue !==
-                                                                                null
-                                                                        ) {
-                                                                            // Use loose equality (==) to handle type coercion between string and number
-                                                                            return (
-                                                                                keyValue.id ==
-                                                                                option.id
-                                                                            );
-                                                                        }
-                                                                        // Use loose equality (==) to handle type coercion between string and number
-                                                                        return (
-                                                                            keyValue ==
-                                                                            option.id
-                                                                        );
-                                                                    }
-                                                                );
-
-                                                            // Use the color from the matching option if found
-                                                            if (
-                                                                matchingOption &&
-                                                                matchingOption.colour
-                                                            ) {
-                                                                backgroundColor =
-                                                                    matchingOption.colour;
-                                                            }
-                                                        }
-                                                    }
-
-                                                    squares.push(
-                                                        <div
-                                                            key={i}
-                                                            style={{
-                                                                width: '20px',
-                                                                height: '20px',
-                                                                backgroundColor:
-                                                                    backgroundColor,
-                                                                borderRadius:
-                                                                    '3px',
-                                                                margin: '0 2px',
-                                                                display: 'flex',
-                                                                justifyContent:
-                                                                    'center',
-                                                                alignItems:
-                                                                    'center',
-                                                                color: 'white',
-                                                                fontSize:
-                                                                    '11px',
-                                                                fontWeight:
-                                                                    'bold',
-                                                            }}
-                                                            data-tooltip-id="system-tooltip"
-                                                            data-tooltip-content={
-                                                                tooltipContent
-                                                            }
-                                                        >
-                                                            {labelValue}
-                                                        </div>
-                                                    );
-                                                }
-
-                                                return (
-                                                    <div
-                                                        onClick={handleClick}
-                                                        style={{
-                                                            display: 'flex',
-                                                            flexWrap: 'wrap',
-                                                            justifyContent:
-                                                                'center',
-                                                            alignItems:
-                                                                'center',
-                                                            cursor: column.link
-                                                                ? 'pointer'
-                                                                : 'default',
-                                                            gap: '4px',
-                                                            padding: '2px 0',
-                                                            maxWidth: '100%',
-                                                        }}
-                                                    >
-                                                        {squares}
-                                                    </div>
-                                                );
-                                            }
-                                        }
-                                        return null;
-                                    },
-                                };
+                                return renderStageCounterColumn({
+                                    column,
+                                    commonProps,
+                                    navigate,
+                                });
                             case 'url':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        if (data && data[column.id]) {
-                                            return (
-                                                <CellWithTooltip
-                                                    value={data[column.id]}
-                                                    columnType="url"
-                                                >
-                                                    <span>
-                                                        <a
-                                                            href={
-                                                                data[column.id]
-                                                            }
-                                                            target="_blank"
-                                                        >
-                                                            Link
-                                                        </a>
-                                                    </span>
-                                                </CellWithTooltip>
-                                            );
-                                        } else {
-                                            return null;
-                                        }
-                                    },
-                                };
+                                return renderUrlColumn({ column, commonProps });
                             case 'input_text':
-                                return {
-                                    ...commonProps,
-                                    name: column.id,
-                                    render: ({ data }) => {
-                                        const inputKey = `${data.id}-${column.id}`;
-
-                                        // Use the ref value first, then fall back to data value
-                                        const currentValue =
-                                            localInputValuesRef.current[
-                                                inputKey
-                                            ] !== undefined
-                                                ? localInputValuesRef.current[
-                                                      inputKey
-                                                  ]
-                                                : data[column.id] || '';
-
-                                        return (
-                                            <input
-                                                type="text"
-                                                name={column.id}
-                                                value={currentValue}
-                                                style={{
-                                                    padding: '7px',
-                                                    width: '100%',
-                                                }}
-                                                onChange={(e) => {
-                                                    const newValue =
-                                                        e.target.value;
-
-                                                    // Update both state and ref
-                                                    localInputValuesRef.current =
-                                                        {
-                                                            ...localInputValuesRef.current,
-                                                            [inputKey]:
-                                                                newValue,
-                                                        };
-
-                                                    setLocalInputValues(
-                                                        (prev) => ({
-                                                            ...prev,
-                                                            [inputKey]:
-                                                                newValue,
-                                                        })
-                                                    );
-
-                                                    if (
-                                                        column.update?.key &&
-                                                        column.update?.url &&
-                                                        column.update?.method
-                                                    ) {
-                                                        handleInputUpdate(
-                                                            column.update.key,
-                                                            `${column.update.url}/${data.id}`,
-                                                            column.update
-                                                                .method,
-                                                            newValue,
-                                                            inputKey
-                                                        );
-                                                    }
-                                                }}
-                                                onBlur={() => {
-                                                    if (
-                                                        column.update?.key &&
-                                                        column.update?.url &&
-                                                        column.update?.method
-                                                    ) {
-                                                        handleInputUpdate.flush();
-                                                    }
-                                                }}
-                                            />
-                                        );
-                                    },
-                                };
+                                return renderInputTextColumn({
+                                    column,
+                                    commonProps,
+                                    localInputValuesRef,
+                                    setLocalInputValues,
+                                    handleInputUpdate,
+                                });
                             default:
                                 columnId = Array.isArray(column.id)
                                     ? column.id.join('-')
@@ -4767,16 +2995,36 @@ const DataGrid = forwardRef(
             <>
                 {/* Top container with search, action buttons, and auto-refresh */}
                 {/* Only show top container if there are controls to display */}
-                {(renderSearch() ||
+                {(!form.searchDisable ||
+                    !form.createDisable ||
                     (!shouldRelocateAutoRefresh() &&
-                        renderAutoRefreshControls())) && (
+                        ajaxSetting &&
+                        ajaxSetting.autoRefresh !== undefined)) && (
                     <div className={styles.dataGridTopContainer}>
                         <div className={styles.dataGridTopLeftContainer}>
-                            {renderSearch()}
+                            <DataGridSearch
+                                form={form}
+                                search={search}
+                                onSearchChange={handleChangeSearch}
+                                onModalOpen={modalOpen}
+                                dataRef={dataRef}
+                                filterValue={filterValue}
+                                paramValue={paramValue}
+                                pageData={pageData}
+                                pageSetting={pageSetting}
+                            />
                         </div>
                         <div className={styles.dataGridTopRightContainer}>
-                            {!shouldRelocateAutoRefresh() &&
-                                renderAutoRefreshControls()}
+                            {!shouldRelocateAutoRefresh() && (
+                                <AutoRefreshControls
+                                    ajaxSetting={ajaxSetting}
+                                    autoRefreshEnabled={autoRefreshEnabled}
+                                    setAutoRefreshEnabled={
+                                        setAutoRefreshEnabled
+                                    }
+                                    refreshInterval={refreshInterval}
+                                />
+                            )}
                         </div>
                     </div>
                 )}
@@ -4907,64 +3155,19 @@ const DataGrid = forwardRef(
 
                                           return (
                                               <div
-                                                  className="group-header-clean group-header-fixed-height"
+                                                  className={`group-header-clean group-header-fixed-height ${styles.groupHeaderContainer}`}
                                                   onClick={
                                                       handleGroupHeaderClick
                                                   }
-                                                  style={{
-                                                      display: 'flex',
-                                                      alignItems: 'center',
-                                                      justifyContent:
-                                                          'space-between',
-                                                      width: '100%',
-                                                      height: '34px', // Compact height
-                                                      padding: '6px 12px', // Reduced padding for compact design
-                                                      background:
-                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
-                                                      borderLeft:
-                                                          '4px solid var(--primary-color, #3b82f6)',
-                                                      position: 'relative',
-                                                      overflow: 'hidden',
-                                                      boxShadow:
-                                                          '0 1px 3px rgba(0,0,0,0.1)',
-                                                      borderRadius:
-                                                          '0 4px 4px 0',
-                                                      cursor: 'pointer',
-                                                      boxSizing: 'border-box',
-                                                      lineHeight: '1.1', // Compact line height
-                                                      flexShrink: 0,
-                                                      transition:
-                                                          'background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease',
-                                                  }}
-                                                  onMouseEnter={(e) => {
-                                                      e.currentTarget.style.background =
-                                                          'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)';
-                                                      e.currentTarget.style.boxShadow =
-                                                          '0 2px 8px rgba(0,0,0,0.15)';
-                                                      e.currentTarget.style.transform =
-                                                          'translateY(-1px)';
-                                                  }}
-                                                  onMouseLeave={(e) => {
-                                                      e.currentTarget.style.background =
-                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
-                                                      e.currentTarget.style.boxShadow =
-                                                          '0 1px 3px rgba(0,0,0,0.1)';
-                                                      e.currentTarget.style.transform =
-                                                          'translateY(0)';
-                                                  }}
                                               >
                                                   {/* Left side - Group info and expand/collapse */}
                                                   <div
-                                                      style={{
-                                                          display: 'flex',
-                                                          alignItems: 'center',
-                                                          flex: 1,
-                                                          zIndex: 2,
-                                                          position: 'relative',
-                                                      }}
+                                                      className={
+                                                          styles.groupActionContainer
+                                                      }
                                                   >
                                                       <button
-                                                          className="group-expand-btn"
+                                                          className={`group-expand-btn ${styles.groupExpandBtn}`}
                                                           onClick={(e) => {
                                                               e.stopPropagation();
                                                               if (
@@ -4972,110 +3175,160 @@ const DataGrid = forwardRef(
                                                                   'function'
                                                               ) {
                                                                   toggleGroup();
-                                                              } else {
-                                                                  console.warn(
-                                                                      'toggleGroup is not a function:',
-                                                                      toggleGroup
-                                                                  );
                                                               }
                                                           }}
-                                                          style={{
-                                                              background:
-                                                                  'var(--primary-color, #3b82f6)',
-                                                              border: 'none',
-                                                              borderRadius:
-                                                                  '3px',
-                                                              color: 'white',
-                                                              width: '20px', // More compact
-                                                              height: '20px', // More compact
-                                                              display: 'flex',
-                                                              alignItems:
-                                                                  'center',
-                                                              justifyContent:
-                                                                  'center',
-                                                              marginRight:
-                                                                  '8px', // Reduced margin
-                                                              cursor: 'pointer',
-                                                              fontSize: '11px', // Smaller font
-                                                              fontWeight:
-                                                                  'bold',
-                                                              boxShadow:
-                                                                  '0 1px 2px rgba(0,0,0,0.1)',
-                                                              transition:
-                                                                  'all 0.15s ease',
-                                                          }}
-                                                          onMouseEnter={(e) => {
-                                                              e.target.style.transform =
-                                                                  'scale(1.05)';
-                                                              e.target.style.background =
-                                                                  'var(--secondary-color, #2563eb)';
-                                                          }}
-                                                          onMouseLeave={(e) => {
-                                                              e.target.style.transform =
-                                                                  'scale(1)';
-                                                              e.target.style.background =
-                                                                  'var(--primary-color, #3b82f6)';
+                                                          onTouchStart={(e) => {
+                                                              e.stopPropagation();
+                                                              handleTouchStart(
+                                                                  e,
+                                                                  'group-expand',
+                                                                  collapsed
+                                                                      ? 'Expand group'
+                                                                      : 'Collapse group'
+                                                              );
                                                           }}
+                                                          onTouchEnd={
+                                                              handleTouchEnd
+                                                          }
+                                                          onTouchMove={
+                                                              handleTouchMove
+                                                          }
+                                                          data-tooltip-id="system-tooltip"
+                                                          data-tooltip-content={
+                                                              collapsed
+                                                                  ? 'Expand group'
+                                                                  : 'Collapse group'
+                                                          }
                                                       >
                                                           {collapsed
                                                               ? '+'
                                                               : '−'}
                                                       </button>
+                                                      {/* Dynamic group action buttons */}
+                                                      {ajaxSetting?.groupBySetting?.icons?.map(
+                                                          (
+                                                              iconConfig,
+                                                              index
+                                                          ) => {
+                                                              // Get the icon component based on the id
+                                                              const getIconComponent =
+                                                                  (iconId) => {
+                                                                      switch (
+                                                                          iconId
+                                                                      ) {
+                                                                          case 'clock':
+                                                                              return Clock;
+                                                                          case 'alarm':
+                                                                              return Alarm;
+                                                                          case 'check':
+                                                                              return Check;
+                                                                          case 'edit':
+                                                                              return Edit;
+                                                                          case 'envelope':
+                                                                              return Envelope;
+                                                                          case 'file':
+                                                                              return File;
+                                                                          case 'image':
+                                                                              return Image;
+                                                                          case 'copy':
+                                                                              return Copy;
+                                                                          case 'cloudUpload':
+                                                                              return CloudDownload;
+                                                                          case 'cloudDownload':
+                                                                              return CloudDownload;
+                                                                          default:
+                                                                              return Clock; // Default fallback
+                                                                      }
+                                                                  };
+
+                                                              // Check if this icon should be shown based on show conditions
+                                                              if (!shouldShowGroupAction(iconConfig, groupValue)) {
+                                                                  return null;
+                                                              }
+
+                                                              const IconComponent =
+                                                                  getIconComponent(
+                                                                      iconConfig.id
+                                                                  );
+
+                                                              // Generate different color classes for multiple buttons
+                                                              const colorClasses =
+                                                                  [
+                                                                      'success',
+                                                                      'warning',
+                                                                      'info',
+                                                                      'purple',
+                                                                      'pink',
+                                                                  ];
+                                                              const colorClass =
+                                                                  colorClasses[
+                                                                      index %
+                                                                          colorClasses.length
+                                                                  ];
+
+                                                              return (
+                                                                  <button
+                                                                      key={`group-action-${index}`}
+                                                                      className={`group-action-btn group-${iconConfig.id}-btn ${styles.groupActionBtn} ${styles[colorClass]}`}
+                                                                      onClick={(
+                                                                          e
+                                                                      ) => {
+                                                                          e.stopPropagation();
+                                                                          handleGroupAction(
+                                                                              groupValue,
+                                                                              iconConfig
+                                                                          );
+                                                                      }}
+                                                                      onTouchStart={(
+                                                                          e
+                                                                      ) => {
+                                                                          e.stopPropagation();
+                                                                          handleTouchStart(
+                                                                              e,
+                                                                              `group-${iconConfig.id}-${index}`,
+                                                                              iconConfig.label
+                                                                          );
+                                                                      }}
+                                                                      onTouchEnd={
+                                                                          handleTouchEnd
+                                                                      }
+                                                                      onTouchMove={
+                                                                          handleTouchMove
+                                                                      }
+                                                                      data-tooltip-id="system-tooltip"
+                                                                      data-tooltip-content={
+                                                                          iconConfig.label
+                                                                      }
+                                                                  >
+                                                                      <IconComponent
+                                                                          strokeWidth={
+                                                                              2
+                                                                          }
+                                                                          size={
+                                                                              14
+                                                                          }
+                                                                      />
+                                                                  </button>
+                                                              );
+                                                          }
+                                                      ) || null}
                                                       <div
-                                                          style={{
-                                                              display: 'flex',
-                                                              alignItems:
-                                                                  'center', // Changed to center for compact layout
-                                                              gap: '8px', // Add gap between elements
-                                                          }}
+                                                          className={
+                                                              styles.groupInfo
+                                                          }
                                                       >
                                                           <strong
-                                                              style={{
-                                                                  fontSize:
-                                                                      '0.85rem', // Slightly smaller for compact design
-                                                                  color: 'var(--secondary-color, #1f2937)',
-                                                                  fontWeight:
-                                                                      '600',
-                                                                  textTransform:
-                                                                      'uppercase',
-                                                                  letterSpacing:
-                                                                      '0.025em',
-                                                              }}
+                                                              className={
+                                                                  styles.groupValue
+                                                              }
                                                           >
                                                               {groupValue}
                                                           </strong>
-                                                          {groupCount > 0 && (
-                                                              <span
-                                                                  style={{
-                                                                      color: '#6b7280',
-                                                                      fontSize:
-                                                                          '0.75rem', // Smaller for compact design
-                                                                      fontWeight:
-                                                                          '500',
-                                                                  }}
-                                                              >
-                                                                  ({groupCount}{' '}
-                                                                  {groupCount ===
-                                                                  1
-                                                                      ? 'item'
-                                                                      : 'items'}
-                                                                  )
-                                                              </span>
-                                                          )}
                                                           {/* Click indicator */}
                                                           <span
-                                                              style={{
-                                                                  color: '#9ca3af',
-                                                                  fontSize:
-                                                                      '0.7rem',
-                                                                  fontStyle:
-                                                                      'italic',
-                                                                  opacity: 0.8,
-                                                                  marginLeft:
-                                                                      'auto',
-                                                                  userSelect:
-                                                                      'none',
-                                                              }}
+                                                              className={
+                                                                  styles.groupClickIndicator
+                                                              }
                                                           >
                                                               Click to
                                                               select/unselect
@@ -5084,93 +3337,11 @@ const DataGrid = forwardRef(
                                                       </div>
                                                   </div>
 
-                                                  {/* Right side - Group selection */}
-                                                  {hasCheckboxColumn && (
-                                                      <div
-                                                          style={{
-                                                              display: 'flex',
-                                                              alignItems:
-                                                                  'center',
-                                                              gap: '4px', // Reduced gap for compact design
-                                                              fontSize:
-                                                                  '0.75rem', // Smaller font for compact design
-                                                              background:
-                                                                  'rgba(255, 255, 255, 0.9)',
-                                                              padding:
-                                                                  '3px 8px', // Reduced padding for compact design
-                                                              borderRadius:
-                                                                  '12px', // Smaller border radius
-                                                              border: '1px solid rgba(59, 130, 246, 0.3)',
-                                                              zIndex: 2,
-                                                              position:
-                                                                  'relative',
-                                                              boxShadow:
-                                                                  '0 1px 2px rgba(0,0,0,0.05)',
-                                                          }}
-                                                      >
-                                                          <input
-                                                              type="checkbox"
-                                                              onChange={(e) => {
-                                                                  e.stopPropagation();
-                                                                  handleGroupSelectionChange(
-                                                                      groupValue,
-                                                                      e.target
-                                                                          .checked
-                                                                  );
-                                                              }}
-                                                              checked={isGroupSelected(
-                                                                  groupValue
-                                                              )}
-                                                              style={{
-                                                                  width: '14px', // Smaller checkbox for compact design
-                                                                  height: '14px',
-                                                                  cursor: 'pointer',
-                                                                  accentColor:
-                                                                      'var(--primary-color, #3b82f6)',
-                                                              }}
-                                                          />
-                                                          <span
-                                                              style={{
-                                                                  cursor: 'pointer',
-                                                                  userSelect:
-                                                                      'none',
-                                                                  color: 'var(--secondary-color, #1f2937)',
-                                                                  fontWeight:
-                                                                      '500',
-                                                                  fontSize:
-                                                                      '0.7rem', // Smaller font for compact design
-                                                              }}
-                                                              onClick={(e) => {
-                                                                  e.stopPropagation();
-                                                                  const checkbox =
-                                                                      e.target
-                                                                          .previousElementSibling;
-                                                                  checkbox.checked =
-                                                                      !checkbox.checked;
-                                                                  handleGroupSelectionChange(
-                                                                      groupValue,
-                                                                      checkbox.checked
-                                                                  );
-                                                              }}
-                                                          >
-                                                              Select All
-                                                          </span>
-                                                      </div>
-                                                  )}
-
                                                   {/* Background pattern */}
                                                   <div
-                                                      style={{
-                                                          position: 'absolute',
-                                                          top: 0,
-                                                          left: 0,
-                                                          right: 0,
-                                                          bottom: 0,
-                                                          background:
-                                                              'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(59, 130, 246, 0.03) 2px, rgba(59, 130, 246, 0.03) 4px)',
-                                                          zIndex: 1,
-                                                          pointerEvents: 'none',
-                                                      }}
+                                                      className={
+                                                          styles.groupHeaderPattern
+                                                      }
                                                   />
                                               </div>
                                           );
@@ -5319,13 +3490,19 @@ const DataGrid = forwardRef(
                 </div>
 
                 {/* Relocated auto refresh control when it's the only control */}
-                {/* {shouldRelocateAutoRefresh() && (
+                {shouldRelocateAutoRefresh() && (
                     <div className={styles.dataGridBottomContainer}>
-                        {renderAutoRefreshControls(true)}
+                        <AutoRefreshControls
+                            ajaxSetting={ajaxSetting}
+                            autoRefreshEnabled={autoRefreshEnabled}
+                            setAutoRefreshEnabled={setAutoRefreshEnabled}
+                            refreshInterval={refreshInterval}
+                            isRelocated={true}
+                        />
                     </div>
-                )} */}
+                )}
 
-                {audioSource && <audio src={audioSource} ref={audioRef} />}
+                <AudioPlayer audioSource={audioSource} />
                 <Popup
                     open={modalShow}
                     onClose={modalClose}
@@ -5373,231 +3550,38 @@ const DataGrid = forwardRef(
                         </div>
                     </div>
                 </Popup>
-                <Popup
-                    open={modalGalleryShow}
-                    onClose={modalGalleryClose}
-                    closeOnDocumentClick={false}
-                    contentStyle={{
-                        width: windowWidth < 768 ? '95vw' : '80vw',
-                        minWidth: windowWidth < 768 ? '95vw' : '600px',
-                        maxWidth: '1200px',
-                    }}
-                    overlayStyle={{ background: 'rgba(0, 0, 0, 0.7)' }}
-                >
+                <GalleryModal
+                    modalGalleryShow={modalGalleryShow}
+                    modalGalleryClose={modalGalleryClose}
+                    galleryData={galleryData}
+                    setGalleryData={setGalleryData}
+                    currentItem={currentItem}
+                    form={form}
+                    lightboxOpen={lightboxOpen}
+                    setLightboxOpen={setLightboxOpen}
+                    lightboxIndex={lightboxIndex}
+                    setLightboxIndex={setLightboxIndex}
+                />
+
+                {/* Touch Tooltip Overlay */}
+                {activeTooltip && (
                     <div
-                        className={`${styles.modalwrap} ${styles['top--modal']}`}
+                        className={styles.touchTooltip}
+                        style={{
+                            position: 'fixed',
+                            left: `${activeTooltip.x}px`,
+                            top: `${activeTooltip.y - 50}px`,
+                            transform: 'translateX(-50%)', // Center horizontally on button
+                            zIndex: 9999,
+                            pointerEvents: 'none',
+                        }}
+                        onClick={closeTooltip}
                     >
-                        <div className={styles.modal}>
-                            <div className={styles.modal__header}>
-                                <h1>Gallery</h1>
-                                <button
-                                    className={styles.modal__close}
-                                    onClick={modalGalleryClose}
-                                >
-                                    <CircleX strokeWidth={1} size={24} />
-                                </button>
-                            </div>
-                            <div
-                                className={`${styles.modal__content} ${styles['modal__content--gallery']}`}
-                            >
-                                {currentItem?.settings?.upload && (
-                                    <div className={styles.uploadSection}>
-                                        <h3>
-                                            <Image
-                                                strokeWidth={1.5}
-                                                size={18}
-                                            />
-                                            Upload New Images
-                                        </h3>
-                                        <div
-                                            className={styles.dropzoneContainer}
-                                        >
-                                            {isUploading && (
-                                                <div
-                                                    className={
-                                                        styles.progressBar
-                                                    }
-                                                >
-                                                    <div
-                                                        className={
-                                                            styles.progressBarInner
-                                                        }
-                                                        style={{
-                                                            width: `${uploadProgress}%`,
-                                                        }}
-                                                    ></div>
-                                                </div>
-                                            )}
-                                            <div
-                                                className={styles.dropzone}
-                                                onClick={() =>
-                                                    document
-                                                        .getElementById(
-                                                            'gallery-file-upload'
-                                                        )
-                                                        .click()
-                                                }
-                                                onDragOver={(e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                }}
-                                                onDragEnter={(e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                }}
-                                                onDragLeave={(e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                }}
-                                                onDrop={(e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    const files =
-                                                        e.dataTransfer.files;
-                                                    if (files.length > 0) {
-                                                        handleFileUpload(files);
-                                                    }
-                                                }}
-                                            >
-                                                <CloudUpload
-                                                    strokeWidth={1.5}
-                                                    size={24}
-                                                />
-                                                <p>
-                                                    Drag and drop files here or
-                                                    click to select files
-                                                </p>
-                                                <input
-                                                    id="gallery-file-upload"
-                                                    type="file"
-                                                    multiple
-                                                    style={{ display: 'none' }}
-                                                    onChange={(e) => {
-                                                        if (
-                                                            e.target.files
-                                                                .length > 0
-                                                        ) {
-                                                            handleFileUpload(
-                                                                e.target.files
-                                                            );
-                                                            e.target.value =
-                                                                null; // Reset input
-                                                        }
-                                                    }}
-                                                    accept="image/*"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-                                <div className={styles.formcontainer}>
-                                    {galleryData.length > 0 ? (
-                                        <div
-                                            className={styles.galleryContainer}
-                                        >
-                                            <div
-                                                className={
-                                                    styles.galleryInstructions
-                                                }
-                                            >
-                                                <Image
-                                                    strokeWidth={1.5}
-                                                    size={16}
-                                                />
-                                                <span>
-                                                    Tap any image to enlarge
-                                                </span>
-                                            </div>
-                                            <div
-                                                className={
-                                                    styles.customGalleryGrid
-                                                }
-                                            >
-                                                {galleryData.map(
-                                                    (img, index) => (
-                                                        <div
-                                                            key={`gallery-item-${index}`}
-                                                            className={
-                                                                styles.galleryItem
-                                                            }
-                                                            onClick={() => {
-                                                                setLightboxIndex(
-                                                                    index
-                                                                );
-                                                                setLightboxOpen(
-                                                                    true
-                                                                );
-                                                            }}
-                                                        >
-                                                            <img
-                                                                src={img.src}
-                                                                alt={
-                                                                    img.caption ||
-                                                                    `Image ${
-                                                                        index +
-                                                                        1
-                                                                    }`
-                                                                }
-                                                            />
-                                                            {img.caption && (
-                                                                <div
-                                                                    className={
-                                                                        styles.imageCaption
-                                                                    }
-                                                                >
-                                                                    {
-                                                                        img.caption
-                                                                    }
-                                                                </div>
-                                                            )}
-                                                            <div
-                                                                className={
-                                                                    styles.galleryImageOverlay
-                                                                }
-                                                            >
-                                                                <span>
-                                                                    <Image
-                                                                        strokeWidth={
-                                                                            1.5
-                                                                        }
-                                                                        size={
-                                                                            16
-                                                                        }
-                                                                        style={{
-                                                                            marginRight:
-                                                                                '6px',
-                                                                        }}
-                                                                    />
-                                                                    Enlarge
-                                                                </span>
-                                                            </div>
-                                                        </div>
-                                                    )
-                                                )}
-                                            </div>
-                                        </div>
-                                    ) : (
-                                        <div className={styles.noDataMessage}>
-                                            <Image
-                                                strokeWidth={1.5}
-                                                size={20}
-                                            />
-                                            No images available in the gallery
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
+                        <div className={styles.touchTooltipContent}>
+                            {activeTooltip.label}
                         </div>
                     </div>
-                </Popup>
-
-                {/* Lightbox for full-size image viewing */}
-                <Lightbox
-                    open={lightboxOpen}
-                    close={() => setLightboxOpen(false)}
-                    index={lightboxIndex}
-                    slides={galleryData.map((img) => ({ src: img.src }))}
-                />
+                )}
             </>
         );
     }