@visns-studio/visns-components 5.12.2 → 5.12.3

package/README.md

@@ -343,7 +343,7 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - `relation` - Related data display
 - `relationArray` - Array of related data
 - `richtext` - HTML content rendering
-- `stage` - Stage-based displays
+- `stage` - Stage-based displays with optional toggle functionality
 - `time` - Time formatting
 - `timer` - Interactive timer controls
 - `url` - Clickable links
@@ -351,7 +351,7 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - `address` - Formatted address display
 - `createdBy` - User creation tracking
 - `daterange` - Date range formatting
-- `stageCounter` - Visual stage progression
+- `stageCounter` - Interactive visual stage progression with toggle functionality
 
 All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
 

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.2",
+    "version": "5.12.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -2658,6 +2658,7 @@ const DataGrid = forwardRef(
                                 return renderStageColumn({
                                     column,
                                     commonProps,
+                                    onUpdate: handleReload,
                                 });
                             case 'time':
                                 return renderTimeColumn({
@@ -2678,6 +2679,7 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                     navigate,
+                                    onUpdate: handleReload,
                                 });
                             case 'url':
                                 return renderUrlColumn({ column, commonProps });
@@ -2748,8 +2750,8 @@ const DataGrid = forwardRef(
                                                 );
                                             }
 
-                                            // If removeFormat is true, strip HTML tags
-                                            if (column.removeFormat) {
+                                            // If removeFormat or stripHtml is true, strip HTML tags
+                                            if (column.removeFormat || column.stripHtml) {
                                                 content = content.replace(
                                                     /<\/?[^>]+(>|$)/g,
                                                     ''

package/src/components/columns/ColumnRenderers.jsx

@@ -10,6 +10,127 @@ import {
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
 } from '../../utils/relationshipSortingUtils';
 
+// Stage Toggle Utility Functions
+const buildToggleUrl = (urlTemplate, stageItem, rowData) => {
+    if (!urlTemplate) return null;
+    
+    let url = urlTemplate;
+    
+    // Replace common placeholders
+    url = url.replace('{id}', rowData.id || '');
+    url = url.replace('{stage_id}', stageItem?.id || '');
+    
+    // Replace any other field placeholders from rowData
+    Object.keys(rowData).forEach(key => {
+        url = url.replace(`{${key}}`, rowData[key] || '');
+    });
+    
+    // Replace any field placeholders from stageItem
+    if (stageItem) {
+        Object.keys(stageItem).forEach(key => {
+            url = url.replace(`{stage_${key}}`, stageItem[key] || '');
+        });
+    }
+    
+    return url;
+};
+
+const getStageStatus = (stageItem, toggleConfig) => {
+    if (!toggleConfig || !toggleConfig.statusField) return null;
+    
+    const currentValue = stageItem[toggleConfig.statusField];
+    const isActive = currentValue === toggleConfig.activeStatusValue;
+    const isInactive = currentValue === toggleConfig.inactiveStatusValue;
+    
+    return {
+        isActive,
+        isInactive,
+        currentValue,
+        targetValue: isActive ? toggleConfig.inactiveStatusValue : toggleConfig.activeStatusValue
+    };
+};
+
+const handleStageToggle = async (stageItem, toggleConfig, rowData, onUpdate) => {
+    if (!toggleConfig || !toggleConfig.updateUrl) {
+        console.warn('Stage toggle configuration missing updateUrl');
+        return;
+    }
+    
+    try {
+        const stageStatus = getStageStatus(stageItem, toggleConfig);
+        if (!stageStatus) {
+            console.warn('Unable to determine stage status');
+            return;
+        }
+        
+        // Debug logging
+        console.log('Stage toggle debug:', {
+            stageItem,
+            toggleConfig,
+            stageStatus,
+            currentValue: stageStatus.currentValue,
+            targetValue: stageStatus.targetValue,
+            isActive: stageStatus.isActive
+        });
+        
+        const url = buildToggleUrl(toggleConfig.updateUrl, stageItem, rowData);
+        if (!url) {
+            console.warn('Unable to build toggle URL');
+            return;
+        }
+        
+        const method = toggleConfig.updateMethod || 'PATCH';
+        const updateKey = toggleConfig.updateKey || toggleConfig.statusField;
+        
+        // Prepare request body
+        const body = {
+            [updateKey]: stageStatus.targetValue
+        };
+        
+        // Get CSRF token if available
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+        
+        // Prepare headers
+        const headers = {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+        };
+        
+        if (csrfToken) {
+            headers['X-CSRF-TOKEN'] = csrfToken;
+        }
+        
+        // Make API call
+        const response = await fetch(url, {
+            method,
+            headers,
+            body: JSON.stringify(body),
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        // Show success message
+        const actionText = stageStatus.isActive ? 'disabled' : 'enabled';
+        toast.success(`Stage ${actionText} successfully`);
+        
+        // Call update callback if provided
+        if (onUpdate && typeof onUpdate === 'function') {
+            onUpdate(result);
+        }
+        
+        return result;
+        
+    } catch (error) {
+        console.error('Stage toggle error:', error);
+        toast.error(`Failed to toggle stage: ${error.message}`);
+        throw error;
+    }
+};
+
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
     column,
@@ -1030,20 +1151,139 @@ export const renderRichTextColumn = ({ column, commonProps }) => {
 };
 
 // Stage Column Renderer
-export const renderStageColumn = ({ column, commonProps }) => {
+export const renderStageColumn = ({ column, commonProps, onUpdate }) => {
     return {
         ...commonProps,
         name: column.id,
         sortable: false,
         render: ({ data }) => {
             let stage = '';
+            let activeStageIndex = -1;
 
             column.keyIds.forEach((a, b) => {
                 if (data[a] === 1) {
                     stage = column.valueIds[b];
+                    activeStageIndex = b;
                 }
             });
 
+            // Check if toggle functionality is enabled
+            const isToggleable = column.toggleable && column.toggleConfig;
+            
+            // Handle stage click for toggling
+            const handleStageClick = async (e, stageIndex) => {
+                e.stopPropagation();
+                e.preventDefault();
+
+                if (!isToggleable) return;
+
+                try {
+                    // For basic stage column, we toggle the specific stage field
+                    const stageKey = column.keyIds[stageIndex];
+                    const currentValue = data[stageKey];
+                    const targetValue = currentValue === 1 ? 0 : 1;
+                    
+                    const url = buildToggleUrl(column.toggleConfig.updateUrl, null, data);
+                    if (!url) {
+                        console.warn('Unable to build toggle URL for stage column');
+                        return;
+                    }
+
+                    const method = column.toggleConfig.updateMethod || 'PATCH';
+                    const updateKey = column.toggleConfig.updateKey || stageKey;
+
+                    // Prepare request body
+                    const body = {
+                        [updateKey]: targetValue
+                    };
+
+                    // Get CSRF token if available
+                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+                    // Prepare headers
+                    const headers = {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                    };
+
+                    if (csrfToken) {
+                        headers['X-CSRF-TOKEN'] = csrfToken;
+                    }
+
+                    // Make API call
+                    const response = await fetch(url, {
+                        method,
+                        headers,
+                        body: JSON.stringify(body),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+
+                    const result = await response.json();
+
+                    // Show success message
+                    const stageLabel = column.valueIds[stageIndex];
+                    const actionText = currentValue === 1 ? 'disabled' : 'enabled';
+                    toast.success(`Stage "${stageLabel}" ${actionText} successfully`);
+
+                    // Call update callback if provided
+                    if (onUpdate && typeof onUpdate === 'function') {
+                        onUpdate(result);
+                    }
+
+                } catch (error) {
+                    console.error('Stage toggle error:', error);
+                    toast.error(`Failed to toggle stage: ${error.message}`);
+                }
+            };
+
+            // Create clickable stage buttons if toggleable
+            if (isToggleable) {
+                const stageButtons = column.keyIds.map((keyId, index) => {
+                    const isActive = data[keyId] === 1;
+                    const stageLabel = column.valueIds[index];
+                    
+                    return (
+                        <button
+                            key={index}
+                            onClick={(e) => handleStageClick(e, index)}
+                            style={{
+                                padding: '4px 8px',
+                                margin: '0 2px',
+                                borderRadius: '3px',
+                                border: '1px solid #ccc',
+                                backgroundColor: isActive ? 'var(--primary-color, #4a90e2)' : '#f8f9fa',
+                                color: isActive ? 'white' : '#333',
+                                fontSize: '11px',
+                                fontWeight: 'bold',
+                                cursor: 'pointer',
+                                opacity: isActive ? 1 : 0.7,
+                                transition: 'all 0.2s ease',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.target.style.transform = 'scale(1.05)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.target.style.transform = 'scale(1)';
+                            }}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content={`Click to ${isActive ? 'disable' : 'enable'} ${stageLabel}`}
+                        >
+                            {stageLabel}
+                        </button>
+                    );
+                });
+
+                return (
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
+                        {stageButtons}
+                    </div>
+                );
+            }
+
+            // Default non-toggleable behavior
             return (
                 <CellWithTooltip value={stage} columnType="stage">
                     <span>{stage}</span>
@@ -1592,7 +1832,7 @@ export const renderGalleryColumn = ({
     };
 };
 
-export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
+export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpdate }) => {
     return {
         ...commonProps,
         name: column.id,
@@ -1605,16 +1845,21 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                 if (stageData && Array.isArray(stageData)) {
                     const stageCount = stageData.length;
 
-                    // Create a clickable element if link is provided
-                    const handleClick = (e) => {
+                    // Check if toggle functionality is enabled
+                    const isToggleable = column.stageConfig?.toggleable && column.stageConfig?.toggleConfig;
+                    
+                    // Container click handler for navigation
+                    const handleContainerClick = (e) => {
                         e.stopPropagation();
                         e.preventDefault();
 
+                        // Only navigate if toggle is not enabled or if link is specifically configured
                         if (
                             column.link &&
                             column.link.url &&
                             column.link.key &&
-                            navigate
+                            navigate &&
+                            !isToggleable
                         ) {
                             navigate(
                                 `${column.link.url}${data[column.link.key]}`
@@ -1622,6 +1867,26 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                         }
                     };
 
+                    // Individual stage click handler for toggling
+                    const handleStageClick = async (e, stageItem, stageIndex) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+
+                        if (isToggleable) {
+                            try {
+                                await handleStageToggle(
+                                    stageItem,
+                                    column.stageConfig.toggleConfig,
+                                    data,
+                                    onUpdate
+                                );
+                            } catch (error) {
+                                // Error already handled in handleStageToggle
+                                console.error('Stage toggle failed:', error);
+                            }
+                        }
+                    };
+
                     // Create an array of squares based on the stage data
                     const squares = [];
                     for (let i = 0; i < stageCount; i++) {
@@ -1730,24 +1995,61 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                             }
                         }
 
+                        // Get stage status for visual feedback
+                        const stageStatus = isToggleable ? getStageStatus(stageItem, column.stageConfig.toggleConfig) : null;
+                        const isStageActive = stageStatus?.isActive ?? true; // Default to active if not toggleable
+                        
+                        // Debug logging for visual state
+                        if (isToggleable) {
+                            console.log('Visual state debug:', {
+                                stageItem,
+                                stageStatus,
+                                isStageActive,
+                                toggleConfig: column.stageConfig.toggleConfig
+                            });
+                        }
+                        
+                        // Apply visual feedback for inactive stages
+                        const stageStyle = {
+                            width: '20px',
+                            height: '20px',
+                            backgroundColor: backgroundColor,
+                            borderRadius: '3px',
+                            margin: '0 2px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: 'white',
+                            fontSize: '11px',
+                            fontWeight: 'bold',
+                            cursor: isToggleable ? 'pointer' : 'default',
+                            opacity: isStageActive ? 1 : 0.5,
+                            transition: 'opacity 0.2s ease, transform 0.1s ease',
+                            border: isToggleable ? '1px solid rgba(255,255,255,0.3)' : 'none',
+                        };
+
+                        // Enhanced tooltip for toggleable stages
+                        const enhancedTooltipContent = isToggleable 
+                            ? `${tooltipContent} - Click to ${isStageActive ? 'disable' : 'enable'}`
+                            : tooltipContent;
+
                         squares.push(
                             <div
                                 key={i}
-                                style={{
-                                    width: '20px',
-                                    height: '20px',
-                                    backgroundColor: backgroundColor,
-                                    borderRadius: '3px',
-                                    margin: '0 2px',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    color: 'white',
-                                    fontSize: '11px',
-                                    fontWeight: 'bold',
+                                style={stageStyle}
+                                onClick={(e) => isToggleable ? handleStageClick(e, stageItem, i) : undefined}
+                                onMouseEnter={(e) => {
+                                    if (isToggleable) {
+                                        e.target.style.transform = 'scale(1.1)';
+                                    }
+                                }}
+                                onMouseLeave={(e) => {
+                                    if (isToggleable) {
+                                        e.target.style.transform = 'scale(1)';
+                                    }
                                 }}
                                 data-tooltip-id="system-tooltip"
-                                data-tooltip-content={tooltipContent}
+                                data-tooltip-content={enhancedTooltipContent}
                             >
                                 {labelValue}
                             </div>
@@ -1756,13 +2058,13 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
 
                     return (
                         <div
-                            onClick={handleClick}
+                            onClick={handleContainerClick}
                             style={{
                                 display: 'flex',
                                 flexWrap: 'wrap',
                                 justifyContent: 'center',
                                 alignItems: 'center',
-                                cursor: column.link ? 'pointer' : 'default',
+                                cursor: (column.link && !isToggleable) ? 'pointer' : 'default',
                                 gap: '4px',
                                 padding: '2px 0',
                                 maxWidth: '100%',

package/src/components/generic/GenericDetail.jsx

@@ -305,7 +305,121 @@ function GenericDetail({
 
                 if (type === 'view') {
                     setActiveStage(stage.id);
+                } else if (type === 'stageCounter') {
+                    // Handle new stageCounter functionality
+                    console.log('handleStageUpdate called with stageCounter type:', { stage, data, stages });
+                    
+                    const stageConfig = stages.stageConfig || activeTabConfig.stages?.stageConfig;
+                    if (!stageConfig?.toggleable || !stageConfig?.toggleConfig) {
+                        console.warn('Stage is not configured for toggling', { stageConfig });
+                        return;
+                    }
+
+                    // Get current stage data
+                    const stageDataArray = data[stageConfig.key] || [];
+                    const currentStage = stageDataArray.find(s => s.id === stage.id);
+                    
+                    console.log('Stage data lookup:', { 
+                        stageDataKey: stageConfig.key, 
+                        stageDataArray, 
+                        searchingForId: stage.id, 
+                        currentStage 
+                    });
+                    
+                    if (!currentStage) {
+                        console.warn('Stage not found in data');
+                        return;
+                    }
+
+                    // Determine current and target status
+                    const currentStatus = currentStage[stageConfig.toggleConfig.statusField];
+                    const isActive = currentStatus === stageConfig.toggleConfig.activeStatusValue;
+                    const targetStatus = isActive 
+                        ? stageConfig.toggleConfig.inactiveStatusValue 
+                        : stageConfig.toggleConfig.activeStatusValue;
+                    
+                    console.log('Status toggle logic:', {
+                        currentStatus,
+                        activeStatusValue: stageConfig.toggleConfig.activeStatusValue,
+                        inactiveStatusValue: stageConfig.toggleConfig.inactiveStatusValue,
+                        isActive,
+                        targetStatus
+                    });
+
+                    // Build API URL
+                    let url = stageConfig.toggleConfig.updateUrl;
+                    url = url.replace('{id}', routeParams[stages.urlParam]);
+                    url = url.replace('{stage_id}', stage.id);
+                    
+                    // Make API call
+                    const res = await CustomFetch(
+                        url,
+                        stageConfig.toggleConfig.updateMethod || 'PUT',
+                        {
+                            [stageConfig.toggleConfig.updateKey]: targetStatus,
+                        }
+                    );
+
+                    if (res.data.error === '') {
+                        handleReload();
+                        const actionText = isActive ? 'disabled' : 'enabled';
+                        toast.success(`Stage "${stage.label}" ${actionText} successfully`);
+                    } else {
+                        toast.error(res.data.error);
+                    }
+                } else if (type === 'legacy_toggle') {
+                    // Handle legacy toggle functionality - toggle between current stage and previous
+                    console.log('handleStageUpdate called with legacy_toggle type:', { stage, data, stages });
+                    
+                    if (
+                        stages &&
+                        stages.url &&
+                        stages.url !== '' &&
+                        stages.key &&
+                        stages.key !== '' &&
+                        stages.urlParam &&
+                        stages.urlParam !== ''
+                    ) {
+                        const currentStatus = data[stages.key];
+                        let targetStatus;
+                        
+                        // If clicking on the current stage (completed), move back one step
+                        // If clicking on a future stage, move to that stage
+                        if (currentStatus >= stage.id) {
+                            // Stage is completed, move back one step (or to 0 if clicking stage 1)
+                            targetStatus = stage.id > 1 ? stage.id - 1 : 0;
+                        } else {
+                            // Stage is not completed, move to this stage
+                            targetStatus = stage.id;
+                        }
+                        
+                        console.log('Legacy toggle logic:', {
+                            currentStatus,
+                            clickedStageId: stage.id,
+                            targetStatus,
+                            isToggleBack: currentStatus >= stage.id
+                        });
+
+                        const url = `${stages.url}/${routeParams[stages.urlParam]}`;
+
+                        const res = await CustomFetch(
+                            url,
+                            stages.method || 'PUT',
+                            {
+                                [stages.key]: targetStatus,
+                            }
+                        );
+
+                        if (res.data.error === '') {
+                            handleReload();
+                            const actionText = currentStatus >= stage.id ? 'moved back from' : 'progressed to';
+                            toast.success(`Stage ${actionText} "${stage.label}" successfully`);
+                        } else {
+                            toast.error(res.data.error);
+                        }
+                    }
                 } else {
+                    // Handle legacy stage functionality
                     if (
                         activeTabConfig.stages &&
                         activeTabConfig.stages.url &&
@@ -2878,8 +2992,46 @@ function GenericDetail({
                             <div className={styles.oppstatus}>
                                 <ul className={styles.opppath}>
                                     {stages.data.map((stage) => {
-                                        const isStageComplete =
-                                            data[stages.key] >= stage.id;
+                                        let isStageComplete = false;
+                                        
+                                        if (stages.type === 'stageCounter') {
+                                            // For stageCounter, check individual stage status
+                                            const stageConfig = stages.stageConfig;
+                                            if (stageConfig && data[stageConfig.key]) {
+                                                const stageDataArray = data[stageConfig.key];
+                                                const currentStage = stageDataArray.find(s => s.id === stage.id);
+                                                if (currentStage && stageConfig.toggleConfig) {
+                                                    const currentStatus = currentStage[stageConfig.toggleConfig.statusField];
+                                                    isStageComplete = currentStatus === stageConfig.toggleConfig.activeStatusValue;
+                                                    
+                                                    // Debug logging
+                                                    console.log('Stage completion check:', {
+                                                        stageId: stage.id,
+                                                        stageLabel: stage.label,
+                                                        currentStatus,
+                                                        activeStatusValue: stageConfig.toggleConfig.activeStatusValue,
+                                                        isStageComplete
+                                                    });
+                                                }
+                                            }
+                                        } else {
+                                            // Legacy stage completion check
+                                            isStageComplete = data[stages.key] >= stage.id;
+                                        }
+
+                                        // Get color for stageCounter type
+                                        let stageColor = null;
+                                        if (stages.type === 'stageCounter' && stages.stageConfig?.stageColour) {
+                                            const stageDataArray = data[stages.stageConfig.key] || [];
+                                            const currentStage = stageDataArray.find(s => s.id === stage.id);
+                                            if (currentStage) {
+                                                const currentStatus = currentStage[stages.stageConfig.stageColour.key];
+                                                const colorOption = stages.stageConfig.stageColour.options?.find(
+                                                    opt => opt.id === currentStatus
+                                                );
+                                                stageColor = colorOption?.colour;
+                                            }
+                                        }
 
                                         return (
                                             <li
@@ -2889,6 +3041,11 @@ function GenericDetail({
                                                         ? `${styles['opp-complete']}`
                                                         : ''
                                                 }
+                                                style={stageColor ? { 
+                                                    borderColor: stageColor,
+                                                    color: isStageComplete ? '#fff' : stageColor,
+                                                    backgroundColor: isStageComplete ? stageColor : 'transparent'
+                                                } : {}}
                                                 onClick={(e) => {
                                                     e.preventDefault();
 
@@ -2898,12 +3055,15 @@ function GenericDetail({
                                                     );
                                                 }}
                                             >
-                                                <a>
+                                                <a style={stageColor ? { 
+                                                    color: isStageComplete ? '#fff' : stageColor 
+                                                } : {}}>
                                                     {stage.label}
                                                     {isStageComplete && (
                                                         <CircleCheck
                                                             strokeWidth={2}
                                                             size={16}
+                                                            color={stageColor ? '#fff' : undefined}
                                                         />
                                                     )}
                                                 </a>

package/src/components/generic/GenericIndex.jsx

@@ -1,11 +1,6 @@
 import '../styles/global.css';
 
-import React, {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
@@ -223,7 +218,6 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     return { config, setConfig, subnav, setSubnav };
 }
 
-
 function GenericIndex({
     layout = 'full',
     setting,
@@ -494,26 +488,38 @@ function GenericIndex({
             let payload = {};
             if (config.export.payload) {
                 payload = { ...config.export.payload };
-                
+
                 // Process special values in the payload
-                Object.keys(payload).forEach(key => {
+                Object.keys(payload).forEach((key) => {
                     if (payload[key] === 'currentActive()') {
                         // Get the current active filter value
-                        const activeFilter = subnav?.find(filter => {
+                        const activeFilter = subnav?.find((filter) => {
                             if (filter.isParent) {
-                                return filter.children && filter.children.some(child => child.show);
+                                return (
+                                    filter.children &&
+                                    filter.children.some((child) => child.show)
+                                );
                             }
                             return filter.show === true;
                         });
 
                         if (activeFilter) {
-                            if (activeFilter.isParent && activeFilter.children && activeFilter.children.length > 0) {
+                            if (
+                                activeFilter.isParent &&
+                                activeFilter.children &&
+                                activeFilter.children.length > 0
+                            ) {
                                 // If it's a parent filter, get the active child's value
-                                const activeChild = activeFilter.children.find(child => child.show);
-                                payload[key] = activeChild ? activeChild.value || activeChild.id : '';
+                                const activeChild = activeFilter.children.find(
+                                    (child) => child.show
+                                );
+                                payload[key] = activeChild
+                                    ? activeChild.value || activeChild.id
+                                    : '';
                             } else {
                                 // For non-parent filters, use the filter's value or id
-                                payload[key] = activeFilter.value || activeFilter.id;
+                                payload[key] =
+                                    activeFilter.value || activeFilter.id;
                             }
                         } else {
                             // If no active filter is found, set to empty string
@@ -571,7 +577,7 @@ function GenericIndex({
                     {...configWithStyle}
                     ref={gridRef}
                     hoverColor={configWithStyle.style?.hoverColor}
-                    gridHeight={windowHeight * 0.65}
+                    gridHeight={windowHeight * 0.8}
                     setConfig={setConfig}
                     setTableData={setTableData}
                     setTotal={setTotal}
@@ -606,11 +612,18 @@ function GenericIndex({
     const renderContentBasedOnType = useCallback(() => {
         switch (config.type) {
             case 'grid':
-                return <GenericGrid config={config} userProfile={userProfile} />;
+                return (
+                    <GenericGrid config={config} userProfile={userProfile} />
+                );
             case 'table':
                 return renderTable();
             case 'report':
-                return <GenericReportForm config={config} userProfile={userProfile} />;
+                return (
+                    <GenericReportForm
+                        config={config}
+                        userProfile={userProfile}
+                    />
+                );
             default:
                 return renderTable(); // Fallback to table if no type is specified or recognized
         }