@visns-studio/visns-components 5.8.7 → 5.8.9

package/src/components/crm/generic/GenericIndex.jsx

@@ -1,12 +1,19 @@
 import '../../styles/global.css';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { useParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import _ from 'lodash';
 import parse from 'html-react-parser';
 import moment from 'moment';
+import numeral from 'numeral';
 import { CloudDownload } from 'akar-icons';
 
 import CustomFetch from '../Fetch';
@@ -33,6 +40,8 @@ function useWindowHeight() {
 function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     const [config, setConfig] = useState({});
     const [subnav, setSubnav] = useState(filters || []);
+    // Add a ref to track previous active item to prevent unnecessary updates
+    const prevActiveItemRef = useRef(null);
 
     useEffect(() => {
         const newConfig = {
@@ -114,6 +123,21 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             if (activeItemResult) {
                 const activeItem = activeItemResult.item;
 
+                // Create a string representation of the active item for comparison
+                const activeItemString = JSON.stringify({
+                    id: activeItem.id,
+                    isChild: activeItemResult.isChild,
+                    parentId: activeItemResult.parent?.id,
+                });
+
+                // Skip update if the active item hasn't changed
+                if (prevActiveItemRef.current === activeItemString) {
+                    return;
+                }
+
+                // Update the ref with current active item
+                prevActiveItemRef.current = activeItemString;
+
                 // Find the tab config for this item
                 const activeTabConfig = tabs.find(
                     (t) => t.id === activeItem.id
@@ -121,6 +145,9 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
 
                 if (activeTabConfig) {
                     // We found a matching tab config, use it
+                    // Get current style to preserve it
+                    const currentStyle = config.style || {};
+
                     const updatedConfig = {
                         ...config,
                         id: activeTabConfig.id,
@@ -130,7 +157,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                         settings: activeTabConfig.settings,
                         // Preserve the style from the original config or use the tab config's style
                         style:
-                            config.style ||
+                            currentStyle ||
                             activeTabConfig.style ||
                             setting.style ||
                             {},
@@ -149,6 +176,9 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                     // If this is a child item but we couldn't find a tab config,
                     // try to use the base config but update the filter
 
+                    // Get current style to preserve it
+                    const currentStyle = config.style || {};
+
                     // Create a new config based on the base settings
                     const baseConfig = {
                         export: setting.export || {},
@@ -160,7 +190,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                         setRowsSelected,
                         settings: setting.settings,
                         // Make sure we have a style property
-                        style: config.style || setting.style || {},
+                        style: currentStyle || setting.style || {},
                         tableSetting,
                         type: setting.type ? setting.type : 'table',
                         // Preserve functions from the original config or setting
@@ -189,11 +219,1070 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                 }
             }
         }
-    }, [subnav, tabs, config, setting, setRowsSelected, tableSetting]);
+    }, [subnav, tabs, setting, setRowsSelected, tableSetting]);
 
     return { config, setConfig, subnav, setSubnav };
 }
 
+const Grid = ({ config, userProfile }) => {
+    const [gridData, setGridData] = useState([]);
+    const [sortedData, setSortedData] = useState([]);
+    const [filteredData, setFilteredData] = useState([]);
+    const [filterValues, setFilterValues] = useState({});
+    const [settingsFilterValues, setSettingsFilterValues] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [filtersCollapsed, setFiltersCollapsed] = useState(false);
+    const [sortConfig, setSortConfig] = useState({
+        key: null,
+        direction: 'asc',
+    });
+    const prevFetchParamsRef = useRef(null);
+
+    // Extract data and settings from config using useMemo to prevent unnecessary re-renders
+    const {
+        settings,
+        columns = [],
+        data = [],
+    } = useMemo(
+        () => ({
+            settings: config.settings || {},
+            columns: config.columns || [],
+            data: config.data || [],
+        }),
+        [config.settings, config.columns, config.data]
+    );
+
+    // Create table headers from columns
+    const headers = useMemo(
+        () => columns.map((col) => col.header || col.name || ''),
+        [columns]
+    );
+
+    // Format cell content based on column type or value type
+    const formatCellContent = (value, column) => {
+        if (value === null || value === undefined) return '';
+        if (value === 0) return '0'; // Explicitly handle zero values
+        if (value === '') return '';
+
+        // Try to infer the type if not provided
+        const valueType = column.type || typeof value;
+
+        switch (valueType) {
+            case 'date':
+                return moment(value).isValid()
+                    ? moment(value).format(column.format || 'DD/MM/YYYY')
+                    : value;
+            case 'datetime':
+                return moment(value).isValid()
+                    ? moment(value).format(column.format || 'DD/MM/YYYY HH:mm')
+                    : value;
+            case 'currency':
+                return numeral(value).format(column.format || '$0,0.00');
+            case 'number':
+                // Check if it's actually a number before formatting
+                return !isNaN(parseFloat(value)) && isFinite(value)
+                    ? numeral(value).format(column.format || '0,0')
+                    : value;
+            case 'boolean':
+                if (
+                    value === 1 ||
+                    value === true ||
+                    value === 'true' ||
+                    value === 'yes' ||
+                    value === 'Yes'
+                ) {
+                    return 'Yes';
+                }
+                if (
+                    value === 0 ||
+                    value === false ||
+                    value === 'false' ||
+                    value === 'no' ||
+                    value === 'No'
+                ) {
+                    return 'No';
+                }
+                return value;
+            case 'year':
+                // Special handling for year values
+                return value.toString();
+            case 'quarter':
+                // Special handling for quarter values (Q1, Q2, etc.)
+                if (value && value.toString().startsWith('Q')) {
+                    return value;
+                }
+                return value;
+            default:
+                return value;
+        }
+    };
+
+    // State for headers from API response
+    const [gridHeaders, setGridHeaders] = useState([]);
+
+    // Function to sort data
+    const sortData = useCallback(
+        (data, key, direction) => {
+            if (!key) return [...data];
+
+            return [...data].sort((a, b) => {
+                // Find the header config for this key to determine type
+                const headerConfig = gridHeaders.find((h) => h.key === key);
+                const type = headerConfig?.type || 'text';
+
+                // Get values, handling null/undefined
+                let aValue =
+                    a[key] === null || a[key] === undefined ? '' : a[key];
+                let bValue =
+                    b[key] === null || b[key] === undefined ? '' : b[key];
+
+                // Sort based on type
+                switch (type) {
+                    case 'number':
+                    case 'year':
+                        aValue = parseFloat(aValue) || 0;
+                        bValue = parseFloat(bValue) || 0;
+                        break;
+                    case 'date':
+                        // Convert to timestamp for comparison
+                        aValue = aValue ? new Date(aValue).getTime() : 0;
+                        bValue = bValue ? new Date(bValue).getTime() : 0;
+                        break;
+                    default:
+                        // For text, convert to lowercase strings
+                        aValue = String(aValue).toLowerCase();
+                        bValue = String(bValue).toLowerCase();
+                }
+
+                // Compare values
+                if (aValue < bValue) {
+                    return direction === 'asc' ? -1 : 1;
+                }
+                if (aValue > bValue) {
+                    return direction === 'asc' ? 1 : -1;
+                }
+                return 0;
+            });
+        },
+        [gridHeaders]
+    );
+
+    // Handle sort request
+    const requestSort = useCallback((key) => {
+        // If clicking the same column, toggle direction
+        // Otherwise, start with ascending sort for the new column
+        setSortConfig((prevConfig) => {
+            const newDirection =
+                prevConfig.key === key && prevConfig.direction === 'asc'
+                    ? 'desc'
+                    : 'asc';
+
+            return { key, direction: newDirection };
+        });
+    }, []);
+
+    // Function to filter data based on filter values
+    const filterData = useCallback(
+        (data) => {
+            // If no filter values are set, return the original data
+            if (Object.keys(filterValues).length === 0) {
+                return data;
+            }
+
+            // Filter the data based on the filter values
+            return data.filter((row) => {
+                // Check each filter
+                return Object.entries(filterValues).every(([key, value]) => {
+                    // Skip empty filter values
+                    if (!value) return true;
+
+                    // Get the row value
+                    const rowValue = row[key];
+                    if (rowValue === null || rowValue === undefined)
+                        return false;
+
+                    // Find the header config for this key
+                    const headerConfig = gridHeaders.find((h) => h.key === key);
+                    if (!headerConfig || !headerConfig.filter) return true;
+
+                    const { type, operator } = headerConfig.filter;
+
+                    // Apply filter based on type and operator
+                    switch (type) {
+                        case 'string':
+                            const rowStr = String(rowValue).toLowerCase();
+                            const filterStr = String(value).toLowerCase();
+
+                            switch (operator) {
+                                case 'equals':
+                                    return rowStr === filterStr;
+                                case 'contains':
+                                    return rowStr.includes(filterStr);
+                                case 'startsWith':
+                                    return rowStr.startsWith(filterStr);
+                                case 'endsWith':
+                                    return rowStr.endsWith(filterStr);
+                                default:
+                                    return rowStr.includes(filterStr);
+                            }
+
+                        case 'number':
+                            const rowNum = parseFloat(rowValue);
+                            const filterNum = parseFloat(value);
+
+                            if (isNaN(rowNum) || isNaN(filterNum)) return false;
+
+                            switch (operator) {
+                                case 'equals':
+                                    return rowNum === filterNum;
+                                case 'greaterThan':
+                                    return rowNum > filterNum;
+                                case 'lessThan':
+                                    return rowNum < filterNum;
+                                case 'greaterThanOrEqual':
+                                    return rowNum >= filterNum;
+                                case 'lessThanOrEqual':
+                                    return rowNum <= filterNum;
+                                default:
+                                    return rowNum === filterNum;
+                            }
+
+                        case 'date':
+                            const rowDate = new Date(rowValue);
+                            const filterDate = new Date(value);
+
+                            if (
+                                isNaN(rowDate.getTime()) ||
+                                isNaN(filterDate.getTime())
+                            )
+                                return false;
+
+                            switch (operator) {
+                                case 'equals':
+                                    return (
+                                        rowDate.toDateString() ===
+                                        filterDate.toDateString()
+                                    );
+                                case 'after':
+                                    return rowDate > filterDate;
+                                case 'before':
+                                    return rowDate < filterDate;
+                                default:
+                                    return (
+                                        rowDate.toDateString() ===
+                                        filterDate.toDateString()
+                                    );
+                            }
+
+                        default:
+                            return true;
+                    }
+                });
+            });
+        },
+        [filterValues, gridHeaders]
+    );
+
+    // Handle filter change
+    const handleFilterChange = useCallback((key, value) => {
+        setFilterValues((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    }, []);
+
+    // Effect to update filteredData and sortedData when gridData, filterValues, or sortConfig changes
+    useEffect(() => {
+        if (gridData.length > 0) {
+            // First apply filters
+            const filtered = filterData(gridData);
+            setFilteredData(filtered);
+
+            // Then sort the filtered data
+            const sorted = sortData(
+                filtered,
+                sortConfig.key,
+                sortConfig.direction
+            );
+            setSortedData(sorted);
+        } else {
+            setFilteredData([]);
+            setSortedData([]);
+        }
+    }, [gridData, filterValues, sortConfig, sortData, filterData]);
+
+    // Load data from API if gridSetting.fetch is provided
+    useEffect(() => {
+        const fetchData = async () => {
+            // Only fetch if we have a URL
+            if (!settings?.fetch?.url) {
+                if (data && data.length > 0) {
+                    // Use provided data if no fetch setting
+                    setGridData(data);
+                }
+                return;
+            }
+
+            const url = settings.fetch.url;
+            const method = settings.fetch.method || 'POST';
+
+            // Combine base params with settings filter values
+            const params = {
+                ...(settings.fetch.params || {}),
+                ...settingsFilterValues,
+            };
+
+            // Create a string representation of the fetch parameters for comparison
+            const fetchParamsString = JSON.stringify({ url, method, params });
+
+            // Skip fetch if the parameters haven't changed
+            if (prevFetchParamsRef.current === fetchParamsString) {
+                return;
+            }
+
+            // Update the ref with current parameters
+            prevFetchParamsRef.current = fetchParamsString;
+
+            setLoading(true);
+            try {
+                const response = await CustomFetch(url, method, params);
+
+                if (response.data.data) {
+                    // Check if the response has the expected structure with header and rows
+                    if (response.data.data.header && response.data.data.rows) {
+                        // Set the headers from the response with the new structure
+                        const headerEntries = Object.entries(
+                            response.data.data.header
+                        );
+                        setGridHeaders(
+                            headerEntries.map(([key, config]) => ({
+                                key,
+                                label: config.label || key,
+                                sort: config.sort || key,
+                                type: config.type || 'text',
+                                filter: config.filter || null,
+                                onClick: config.onClick || null,
+                            }))
+                        );
+
+                        // Initialize filter values
+                        const initialFilterValues = {};
+                        headerEntries.forEach(([key, config]) => {
+                            if (config.filter) {
+                                initialFilterValues[key] = '';
+                            }
+                        });
+                        setFilterValues(initialFilterValues);
+
+                        // Set the rows data
+                        setGridData(response.data.data.rows || []);
+                        // Also set the initial sorted data
+                        setSortedData(response.data.data.rows || []);
+                    } else {
+                        // Fallback to the previous behavior if the structure is different
+                        setGridData(response.data.data.data || []);
+                        setSortedData(response.data.data.data || []);
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching grid data:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [
+        // Only depend on the specific properties we need, not the entire objects
+        settings?.fetch?.url,
+        settings?.fetch?.method,
+        // Use JSON.stringify for the params to detect deep changes
+        JSON.stringify(settings?.fetch?.params),
+        // Only depend on data if we're not fetching
+        !settings?.fetch?.url ? JSON.stringify(data) : null,
+    ]);
+
+    // Generate year options for dropdown
+    const generateYearOptions = useCallback((startYear) => {
+        const currentYear = new Date().getFullYear();
+        const years = [];
+
+        // Start from the specified year and go up to current year
+        for (let year = startYear; year <= currentYear + 1; year++) {
+            years.push({ value: year.toString(), label: year.toString() });
+        }
+
+        return years;
+    }, []);
+
+    // Initialize settings filters
+    useEffect(() => {
+        if (settings?.filters && settings.filters.length > 0) {
+            const initialValues = {};
+
+            settings.filters.forEach((filter) => {
+                if (filter.type === 'dropdown' && filter.id === 'year') {
+                    // For year dropdown with 'now' value, set to current year
+                    if (filter.value === 'now') {
+                        initialValues[filter.id] = new Date()
+                            .getFullYear()
+                            .toString();
+                    } else {
+                        initialValues[filter.id] = filter.value || '';
+                    }
+                } else {
+                    initialValues[filter.id] = filter.value || '';
+                }
+            });
+
+            setSettingsFilterValues(initialValues);
+        }
+    }, [settings?.filters]);
+
+    // Handle settings filter change
+    const handleSettingsFilterChange = useCallback(
+        (filterId, value) => {
+            setSettingsFilterValues((prev) => ({
+                ...prev,
+                [filterId]: value,
+            }));
+
+            // Update fetch params with the new filter value
+            if (settings?.fetch?.params) {
+                const updatedParams = {
+                    ...settings.fetch.params,
+                    [filterId]: value,
+                };
+
+                // Update the settings object
+                if (config.settings && config.settings.fetch) {
+                    config.settings.fetch.params = updatedParams;
+                }
+
+                // Trigger a re-fetch with the new params
+                prevFetchParamsRef.current = null;
+            }
+        },
+        [settings, config]
+    );
+
+    // Apply custom styling from userProfile if available
+    const getCustomStyles = () => {
+        const customStyles = {};
+
+        if (userProfile?.settings?.style) {
+            const { style } = userProfile.settings;
+
+            if (style.hoverColor) {
+                customStyles.hoverColor = {
+                    '--hover-color': style.hoverColor,
+                };
+            }
+        }
+
+        return customStyles;
+    };
+
+    // CSS for sort indicators
+    const getSortIndicatorStyle = (key) => {
+        if (sortConfig.key !== key) {
+            return { opacity: 0.3 }; // Dim the icon when not sorting by this column
+        }
+        return {}; // Full opacity when sorting by this column
+    };
+
+    return (
+        <div className={styles.gridContainer}>
+            {/* Settings Filters */}
+            {settings?.filters && settings.filters.length > 0 && (
+                <div className={styles.settingsFiltersContainer}>
+                    <div className={styles.settingsFiltersHeader}>
+                        <div
+                            className={styles.headerLeft}
+                            onClick={() =>
+                                setFiltersCollapsed(!filtersCollapsed)
+                            }
+                        >
+                            <div className={styles.settingsFiltersTitle}>
+                                <svg
+                                    width="16"
+                                    height="16"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                        d="M4 6H20M7 12H17M9 18H15"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                    />
+                                </svg>
+                                Filters
+                                {/* Show active filters count when collapsed */}
+                                {filtersCollapsed && (
+                                    <div
+                                        className={
+                                            styles.activeFiltersIndicator
+                                        }
+                                    >
+                                        {Object.values(
+                                            settingsFilterValues
+                                        ).some((value) => value !== '') && (
+                                            <>
+                                                <span>Active:</span>
+                                                <span
+                                                    className={
+                                                        styles.filterBadge
+                                                    }
+                                                >
+                                                    {
+                                                        Object.values(
+                                                            settingsFilterValues
+                                                        ).filter(
+                                                            (value) =>
+                                                                value !== ''
+                                                        ).length
+                                                    }
+                                                </span>
+                                            </>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Toggle icon */}
+                            <svg
+                                className={`${styles.toggleIcon} ${
+                                    filtersCollapsed ? styles.collapsed : ''
+                                }`}
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M19 9l-7 7-7-7"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                            </svg>
+                        </div>
+
+                        {/* Clear filters button */}
+                        <button
+                            className={styles.clearFiltersButton}
+                            onClick={(e) => {
+                                e.stopPropagation(); // Prevent toggling when clicking the button
+                                // Initialize with default values
+                                const initialValues = {};
+                                settings.filters.forEach((filter) => {
+                                    if (
+                                        filter.type === 'dropdown' &&
+                                        filter.id === 'year' &&
+                                        filter.value === 'now'
+                                    ) {
+                                        initialValues[filter.id] = new Date()
+                                            .getFullYear()
+                                            .toString();
+                                    } else {
+                                        initialValues[filter.id] =
+                                            filter.value || '';
+                                    }
+                                });
+                                setSettingsFilterValues(initialValues);
+
+                                // Reset fetch params
+                                prevFetchParamsRef.current = null;
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M19 7l-7 7-7-7"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    transform="rotate(90, 12, 12)"
+                                />
+                            </svg>
+                            Clear
+                        </button>
+                    </div>
+
+                    <div
+                        className={`${styles.settingsFiltersContent} ${
+                            filtersCollapsed ? styles.collapsed : ''
+                        }`}
+                    >
+                        {settings.filters.map((filter, index) => (
+                            <div
+                                key={`settings-filter-${index}`}
+                                className={styles.settingsFilterItem}
+                            >
+                                <label className={styles.settingsFilterLabel}>
+                                    {filter.label}
+                                </label>
+                                {filter.type === 'dropdown' &&
+                                filter.id === 'year' ? (
+                                    <select
+                                        className={
+                                            styles.settingsFilterDropdown
+                                        }
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        {generateYearOptions(
+                                            filter.startYear || 2000
+                                        ).map((option) => (
+                                            <option
+                                                key={option.value}
+                                                value={option.value}
+                                            >
+                                                {option.label}
+                                            </option>
+                                        ))}
+                                    </select>
+                                ) : filter.type === 'dropdown' ? (
+                                    <select
+                                        className={
+                                            styles.settingsFilterDropdown
+                                        }
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        {filter.options &&
+                                            filter.options.map((option) => (
+                                                <option
+                                                    key={option.value}
+                                                    value={option.value}
+                                                >
+                                                    {option.label}
+                                                </option>
+                                            ))}
+                                    </select>
+                                ) : filter.type === 'text' ? (
+                                    <input
+                                        type="text"
+                                        className={styles.settingsFilterInput}
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                        placeholder={filter.placeholder || ''}
+                                    />
+                                ) : null}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {loading ? (
+                <div className={styles.loadingContainer}>
+                    <div className={styles.loadingSpinner}></div>
+                    <p>Loading data...</p>
+                </div>
+            ) : (
+                <table className={styles.gridTable}>
+                    <thead>
+                        <tr>
+                            {/* Use gridHeaders if available, otherwise fall back to headers from columns */}
+                            {gridHeaders.length > 0
+                                ? gridHeaders.map((header, index) => (
+                                      <th
+                                          key={`header-${index}`}
+                                          className={`${styles.gridHeader} ${styles.sortableHeader}`}
+                                          onClick={() =>
+                                              requestSort(header.key)
+                                          }
+                                          style={{ cursor: 'pointer' }}
+                                      >
+                                          <div className={styles.headerContent}>
+                                              {header.label}
+                                              <span
+                                                  className={
+                                                      styles.sortIndicator
+                                                  }
+                                                  style={getSortIndicatorStyle(
+                                                      header.key
+                                                  )}
+                                              >
+                                                  {sortConfig.key ===
+                                                      header.key &&
+                                                  sortConfig.direction === 'asc'
+                                                      ? ' ▲'
+                                                      : ' ▼'}
+                                              </span>
+                                          </div>
+                                      </th>
+                                  ))
+                                : headers.map((header, index) => (
+                                      <th
+                                          key={`header-${index}`}
+                                          className={styles.gridHeader}
+                                      >
+                                          {header}
+                                      </th>
+                                  ))}
+                        </tr>
+                        {/* Filter row */}
+                        {gridHeaders.some((header) => header.filter) && (
+                            <tr className={styles.filterRow}>
+                                {gridHeaders.map((header, index) => (
+                                    <th
+                                        key={`filter-${index}`}
+                                        className={styles.filterCell}
+                                    >
+                                        {header.filter ? (
+                                            <input
+                                                type={
+                                                    header.filter.type ===
+                                                    'date'
+                                                        ? 'date'
+                                                        : 'text'
+                                                }
+                                                className={styles.filterInput}
+                                                placeholder={`Filter ${header.label}...`}
+                                                value={
+                                                    filterValues[header.key] ||
+                                                    ''
+                                                }
+                                                onChange={(e) =>
+                                                    handleFilterChange(
+                                                        header.key,
+                                                        e.target.value
+                                                    )
+                                                }
+                                            />
+                                        ) : null}
+                                    </th>
+                                ))}
+                            </tr>
+                        )}
+                    </thead>
+                    <tbody>
+                        {sortedData && sortedData.length > 0 ? (
+                            sortedData.map((row, rowIndex) => (
+                                <tr
+                                    key={`row-${rowIndex}`}
+                                    className={styles.gridRow}
+                                    style={getCustomStyles().hoverColor}
+                                >
+                                    {/* Use gridHeaders if available, otherwise fall back to columns */}
+                                    {gridHeaders.length > 0
+                                        ? gridHeaders.map(
+                                              (header, colIndex) => (
+                                                  <td
+                                                      key={`cell-${rowIndex}-${colIndex}`}
+                                                      className={`${
+                                                          styles.gridCell
+                                                      } ${
+                                                          header.onClick &&
+                                                          !row[header.key]
+                                                              ? styles.clickableCell
+                                                              : ''
+                                                      }`}
+                                                      onClick={
+                                                          header.onClick &&
+                                                          !row[header.key]
+                                                              ? async () => {
+                                                                    try {
+                                                                        // Replace {id} in the URL with the row's ID
+                                                                        const url =
+                                                                            header.onClick.url.replace(
+                                                                                '{id}',
+                                                                                row.id
+                                                                            );
+
+                                                                        // Show loading toast
+                                                                        toast.info(
+                                                                            'Updating...',
+                                                                            {
+                                                                                autoClose: 1000,
+                                                                            }
+                                                                        );
+
+                                                                        // Extract field and value from params
+                                                                        const {
+                                                                            field,
+                                                                            value,
+                                                                            ...otherParams
+                                                                        } =
+                                                                            header
+                                                                                .onClick
+                                                                                .params;
+
+                                                                        // Create a new params object with the field as the key
+                                                                        const params =
+                                                                            {
+                                                                                ...otherParams,
+                                                                                _method:
+                                                                                    header
+                                                                                        .onClick
+                                                                                        .method, // Add _method for PUT/DELETE requests
+                                                                            };
+
+                                                                        // Set the field as the key with the value
+                                                                        // If value is "now", replace it with current date in ISO format
+                                                                        params[
+                                                                            field
+                                                                        ] =
+                                                                            value ===
+                                                                            'now'
+                                                                                ? new Date().toISOString()
+                                                                                : value;
+
+                                                                        // Make the API call
+                                                                        const response =
+                                                                            await CustomFetch(
+                                                                                url,
+                                                                                header
+                                                                                    .onClick
+                                                                                    .method,
+                                                                                params
+                                                                            );
+
+                                                                        if (
+                                                                            response
+                                                                                .data
+                                                                                .error
+                                                                        ) {
+                                                                            toast.error(
+                                                                                response
+                                                                                    .data
+                                                                                    .error
+                                                                            );
+                                                                        } else {
+                                                                            toast.success(
+                                                                                'Updated successfully',
+                                                                                {
+                                                                                    autoClose: 1000,
+                                                                                }
+                                                                            );
+                                                                            // Refresh the data
+                                                                            prevFetchParamsRef.current =
+                                                                                null;
+                                                                            // Force a re-fetch
+                                                                            const fetchUrl =
+                                                                                settings
+                                                                                    .fetch
+                                                                                    .url;
+                                                                            const fetchMethod =
+                                                                                settings
+                                                                                    .fetch
+                                                                                    .method ||
+                                                                                'POST';
+                                                                            const fetchParams =
+                                                                                {
+                                                                                    ...(settings
+                                                                                        .fetch
+                                                                                        .params ||
+                                                                                        {}),
+                                                                                    ...settingsFilterValues,
+                                                                                };
+
+                                                                            setLoading(
+                                                                                true
+                                                                            );
+                                                                            try {
+                                                                                const fetchResponse =
+                                                                                    await CustomFetch(
+                                                                                        fetchUrl,
+                                                                                        fetchMethod,
+                                                                                        fetchParams
+                                                                                    );
+                                                                                if (
+                                                                                    fetchResponse
+                                                                                        .data
+                                                                                        .data
+                                                                                ) {
+                                                                                    if (
+                                                                                        fetchResponse
+                                                                                            .data
+                                                                                            .data
+                                                                                            .header &&
+                                                                                        fetchResponse
+                                                                                            .data
+                                                                                            .data
+                                                                                            .rows
+                                                                                    ) {
+                                                                                        setGridData(
+                                                                                            fetchResponse
+                                                                                                .data
+                                                                                                .data
+                                                                                                .rows ||
+                                                                                                []
+                                                                                        );
+                                                                                        setSortedData(
+                                                                                            fetchResponse
+                                                                                                .data
+                                                                                                .data
+                                                                                                .rows ||
+                                                                                                []
+                                                                                        );
+                                                                                    } else {
+                                                                                        setGridData(
+                                                                                            fetchResponse
+                                                                                                .data
+                                                                                                .data
+                                                                                                .data ||
+                                                                                                []
+                                                                                        );
+                                                                                        setSortedData(
+                                                                                            fetchResponse
+                                                                                                .data
+                                                                                                .data
+                                                                                                .data ||
+                                                                                                []
+                                                                                        );
+                                                                                    }
+                                                                                }
+                                                                            } catch (error) {
+                                                                                console.error(
+                                                                                    'Error refreshing data:',
+                                                                                    error
+                                                                                );
+                                                                            } finally {
+                                                                                setLoading(
+                                                                                    false
+                                                                                );
+                                                                            }
+                                                                        }
+                                                                    } catch (error) {
+                                                                        console.error(
+                                                                            'Error updating cell:',
+                                                                            error
+                                                                        );
+                                                                        toast.error(
+                                                                            'An error occurred while updating'
+                                                                        );
+                                                                    }
+                                                                }
+                                                              : undefined
+                                                      }
+                                                  >
+                                                      {row[header.key] ? (
+                                                          header.onClick ? (
+                                                              <span
+                                                                  className={
+                                                                      styles.cellWithValue
+                                                                  }
+                                                              >
+                                                                  {formatCellContent(
+                                                                      row[
+                                                                          header
+                                                                              .key
+                                                                      ],
+                                                                      {
+                                                                          type:
+                                                                              header.type ||
+                                                                              (typeof row[
+                                                                                  header
+                                                                                      .key
+                                                                              ] ===
+                                                                              'number'
+                                                                                  ? 'number'
+                                                                                  : ''),
+                                                                      }
+                                                                  )}
+                                                              </span>
+                                                          ) : (
+                                                              formatCellContent(
+                                                                  row[
+                                                                      header.key
+                                                                  ],
+                                                                  {
+                                                                      type:
+                                                                          header.type ||
+                                                                          (typeof row[
+                                                                              header
+                                                                                  .key
+                                                                          ] ===
+                                                                          'number'
+                                                                              ? 'number'
+                                                                              : ''),
+                                                                  }
+                                                              )
+                                                          )
+                                                      ) : header.onClick ? (
+                                                          <span
+                                                              className={
+                                                                  styles.placeholderText
+                                                              }
+                                                          >
+                                                              {header.onClick
+                                                                  .placeholder ||
+                                                                  'Click to set'}
+                                                          </span>
+                                                      ) : (
+                                                          ''
+                                                      )}
+                                                  </td>
+                                              )
+                                          )
+                                        : columns.map((col, colIndex) => (
+                                              <td
+                                                  key={`cell-${rowIndex}-${colIndex}`}
+                                                  className={styles.gridCell}
+                                              >
+                                                  {formatCellContent(
+                                                      row[col.name],
+                                                      col
+                                                  )}
+                                              </td>
+                                          ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr>
+                                <td
+                                    colSpan={
+                                        gridHeaders.length || headers.length
+                                    }
+                                    className={styles.noData}
+                                >
+                                    No data available
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    );
+};
+
 const ReportForm = ({ config, userProfile }) => {
     const [formData, setFormData] = useState({});
 
@@ -410,8 +1499,6 @@ function GenericIndex({
 
             const { data, method, message, url } = checkboxUpdateConfig;
 
-            console.info('Selected rows:', rowsSelectedRef.current);
-
             if (!Object.keys(rowsSelectedRef.current).length) {
                 toast.warning(message.warning);
                 return;
@@ -585,6 +1672,8 @@ function GenericIndex({
 
     const renderContentBasedOnType = useCallback(() => {
         switch (config.type) {
+            case 'grid':
+                return <Grid config={config} userProfile={userProfile} />;
             case 'table':
                 return renderTable();
             case 'report':
@@ -664,7 +1753,13 @@ function GenericIndex({
                 </div>
             );
         }
-    }, [layout, subnav, setSubnav, setConfig, renderTable, handleFilterChange]);
+    }, [
+        layout,
+        subnav,
+        renderContentBasedOnType,
+        handleFilterChange,
+        setting.tabs,
+    ]);
 
     useEffect(() => {
         if (setting.page?.tableInfo?.hasOwnProperty('url')) {
@@ -696,6 +1791,14 @@ function GenericIndex({
 
     // Add an effect to update the config when the active tab changes
     useEffect(() => {
+        // Skip if no subnav or tabs
+        if (!subnav?.length || !setting.tabs?.length) {
+            return;
+        }
+
+        // Create a ref to track if we've already processed this combination
+        const activeFilterRef = useRef(null);
+
         // Find the active filter and its child
         const activeFilter = subnav?.find((filter) => {
             if (filter.isParent) {
@@ -707,6 +1810,11 @@ function GenericIndex({
             return filter.show === true;
         });
 
+        // Skip if no active filter
+        if (!activeFilter) {
+            return;
+        }
+
         if (
             activeFilter?.isParent &&
             activeFilter.children &&
@@ -722,6 +1830,20 @@ function GenericIndex({
                 const firstChild = activeFilter.children[0];
                 const firstChildId = firstChild.id;
 
+                // Create a string representation for comparison
+                const activeFilterString = JSON.stringify({
+                    parentId: activeFilter.id,
+                    childId: firstChildId,
+                });
+
+                // Skip if we've already processed this combination
+                if (activeFilterRef.current === activeFilterString) {
+                    return;
+                }
+
+                // Update the ref
+                activeFilterRef.current = activeFilterString;
+
                 // Find the tab config for the first child
                 const firstChildTabConfig = setting.tabs?.find(
                     (tab) => tab.id === firstChildId
@@ -729,18 +1851,25 @@ function GenericIndex({
 
                 if (firstChildTabConfig) {
                     // Update the config with the first child's tab config
-                    setConfig((prevConfig) => ({
-                        ...prevConfig,
-                        id: firstChildTabConfig.id,
-                        functions:
-                            firstChildTabConfig.functions ||
-                            prevConfig.functions ||
-                            {},
-                    }));
+                    setConfig((prevConfig) => {
+                        // Skip update if the ID is already set correctly
+                        if (prevConfig.id === firstChildTabConfig.id) {
+                            return prevConfig;
+                        }
+
+                        return {
+                            ...prevConfig,
+                            id: firstChildTabConfig.id,
+                            functions:
+                                firstChildTabConfig.functions ||
+                                prevConfig.functions ||
+                                {},
+                        };
+                    });
                 }
             }
         }
-    }, [subnav, setting.tabs, setConfig]);
+    }, [subnav, setting.tabs]);
 
     return (
         <>
@@ -765,10 +1894,12 @@ function GenericIndex({
                                         {h.label}]{' '}
                                     </span>
                                 ))}
-                            <span>
-                                [<strong>{total}</strong> Total{' '}
-                                {parse(setting.page?.title || '')}]
-                            </span>
+                            {total > 0 && (
+                                <span>
+                                    [<strong>{total}</strong> Total{' '}
+                                    {parse(setting.page?.title || '')}]
+                                </span>
+                            )}
                         </div>
                     </div>
                 </div>
@@ -826,16 +1957,6 @@ function GenericIndex({
                                 (tab) => tab.id === firstChild.id
                             );
 
-                            // Log for debugging
-                            console.log(
-                                'No active child found, using first child:',
-                                firstChild.id
-                            );
-                            console.log(
-                                'First child tab config:',
-                                firstChildTabConfig
-                            );
-
                             return {
                                 activeTabId: firstChild.id,
                                 activeTabConfig: firstChildTabConfig,