@visns-studio/visns-components 5.10.11 → 5.11.1

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

@@ -3,7 +3,6 @@ import '../../styles/global.css';
 import React, {
     useCallback,
     useEffect,
-    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -13,19 +12,17 @@ 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 Popup from 'reactjs-popup';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
-import Field from '../Field';
 import Form from '../Form';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
+import GenericGrid from './GenericGrid';
+import GenericReportForm from './GenericReportForm';
 
 import styles from './styles/GenericIndex.module.scss';
-import reportStyles from './styles/ReportForm.module.scss';
 
 function useWindowHeight() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
@@ -226,1253 +223,6 @@ function useConfig(setting, tabs, filters, 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;
-            case 'html':
-                // Explicitly parse HTML content
-                return parse(String(value));
-            case 'richtext':
-                // Parse rich text content
-                return parse(String(value));
-            default:
-                // For text values, check if it contains HTML tags
-                if (
-                    typeof value === 'string' &&
-                    (value.includes('<br') ||
-                        value.includes('<p>') ||
-                        value.includes('<div') ||
-                        value.includes('<span'))
-                ) {
-                    // Ensure <br /> tags are properly handled
-                    const processedValue = String(value)
-                        .replace(/<br \/>/g, '<br>')
-                        .replace(/<br\/>/g, '<br>');
-                    return parse(processedValue);
-                }
-                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>
-                                                          ) : (
-                                                              <span
-                                                                  className={
-                                                                      styles.cellContent
-                                                                  }
-                                                                  data-type={
-                                                                      header.type ||
-                                                                      (typeof row[
-                                                                          header
-                                                                              .key
-                                                                      ] ===
-                                                                      'number'
-                                                                          ? 'number'
-                                                                          : '')
-                                                                  }
-                                                              >
-                                                                  {formatCellContent(
-                                                                      row[
-                                                                          header
-                                                                              .key
-                                                                      ],
-                                                                      {
-                                                                          type:
-                                                                              header.type ||
-                                                                              (typeof row[
-                                                                                  header
-                                                                                      .key
-                                                                              ] ===
-                                                                              'number'
-                                                                                  ? 'number'
-                                                                                  : ''),
-                                                                      }
-                                                                  )}
-                                                              </span>
-                                                          )
-                                                      ) : 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}
-                                              >
-                                                  <span
-                                                      className={
-                                                          styles.cellContent
-                                                      }
-                                                      data-type={
-                                                          col.type ||
-                                                          (typeof row[
-                                                              col.name
-                                                          ] === 'number'
-                                                              ? 'number'
-                                                              : '')
-                                                      }
-                                                  >
-                                                      {formatCellContent(
-                                                          row[col.name],
-                                                          col
-                                                      )}
-                                                  </span>
-                                              </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({});
-
-    const handleChange = (e) => {
-        const {
-            value,
-            dataset: { name },
-        } = e.target;
-
-        setFormData((prevData) => ({ ...prevData, [name]: value }));
-    };
-
-    const handleChangeDate = (date, id) => {
-        setFormData((prevData) => ({ ...prevData, [id]: date }));
-    };
-
-    const handleChangeSelect = (inputValue, _, id) => {
-        setFormData((prevData) => ({ ...prevData, [id]: inputValue }));
-    };
-
-    const handleExport = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-            }
-
-            const missingFields = config.form.filters
-                .filter(
-                    (item) => item.required === true && formData[item.id] === ''
-                )
-                .map((item) => item.label);
-
-            if (missingFields.length > 0) {
-                const fieldNames = missingFields.join(', ');
-                const errorMessage = `Please fill in a value for the following field(s): ${fieldNames}.`;
-                toast.error(errorMessage);
-            } else {
-                toast.info('Preparing your export...');
-
-                const res = await Download(
-                    config.form.url,
-                    config.form.method,
-                    formData
-                );
-
-                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 = `${config.form.filename}`;
-                        saveAs(res.data, fileName);
-                        toast.success('Export completed successfully');
-                    } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
-                    }
-                }
-            }
-        } catch (err) {
-            console.error(err);
-            toast.error('An error occurred during export');
-        }
-    };
-
-    useEffect(() => {
-        const tmpForm = config.form?.filters.reduce((acc, item) => {
-            acc[item.id] = '';
-            return acc;
-        }, {});
-        setFormData(tmpForm);
-    }, [config.form?.filters]);
-
-    // Determine if the form has a title
-    const formTitle = config.form?.title || 'Export Report';
-    const formDescription =
-        config.form?.description || 'Select your export criteria below.';
-
-    return (
-        <div className={reportStyles.reportFormContainer}>
-            <form className={reportStyles.reportForm}>
-                <h2 className={reportStyles.formTitle}>{formTitle}</h2>
-                <p className={reportStyles.formDescription}>
-                    {formDescription}
-                </p>
-
-                {config.form?.filters.map((item, key) => (
-                    <div
-                        key={`filter-container-${key}`}
-                        className={`${reportStyles.formField} ${
-                            item.fullWidth ? reportStyles.fullWidthField : ''
-                        }`}
-                    >
-                        <Field
-                            api={userProfile.settings.api}
-                            autocompleteCallback={() => {}}
-                            childDropdownCallback={() => {}}
-                            fetchData={() => {}}
-                            formData={formData}
-                            inputClass={''}
-                            inputValue={formData[item.id]}
-                            key={`filter-fields-${key}`}
-                            mapbox={{}}
-                            onChange={handleChange}
-                            onChangeCheckbox={() => {}}
-                            onChangeDate={handleChangeDate}
-                            onChangeNumberFormat={() => {}}
-                            onChangeRicheditor={() => {}}
-                            onChangeSelect={handleChangeSelect}
-                            onChangeToggle={() => {}}
-                            settings={item}
-                            setFormData={setFormData}
-                            style={userProfile.settings.style}
-                            uploadProgress={0}
-                            userProfile={userProfile}
-                        />
-                    </div>
-                ))}
-
-                <div className={reportStyles.formActions}>
-                    <button
-                        className={reportStyles.exportButton}
-                        onClick={handleExport}
-                        type="button"
-                    >
-                        <CloudDownload
-                            strokeWidth={2}
-                            size={18}
-                            style={{ marginRight: '8px' }}
-                        />{' '}
-                        Export
-                    </button>
-                </div>
-            </form>
-        </div>
-    );
-};
 
 function GenericIndex({
     layout = 'full',
@@ -1856,15 +606,15 @@ function GenericIndex({
     const renderContentBasedOnType = useCallback(() => {
         switch (config.type) {
             case 'grid':
-                return <Grid config={config} userProfile={userProfile} />;
+                return <GenericGrid config={config} userProfile={userProfile} />;
             case 'table':
                 return renderTable();
             case 'report':
-                return <ReportForm config={config} userProfile={userProfile} />;
+                return <GenericReportForm config={config} userProfile={userProfile} />;
             default:
                 return renderTable(); // Fallback to table if no type is specified or recognized
         }
-    }, [config, renderTable]);
+    }, [config, renderTable, userProfile]);
 
     // Custom handler for filter changes
     const handleFilterChange = useCallback(