@visns-studio/visns-components 5.8.19 → 5.8.20

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -1,6 +1,24 @@
 import '../styles/global.css';
 import './styles/global-datagrid.css';
 
+/**
+ * DataGrid Component
+ *
+ * This component provides a data grid with modal form editing capabilities.
+ *
+ * Modal Vertical Alignment:
+ * To position the modal toward the top of the viewport instead of center, add the `verticalAlign: "top"` property to the form object.
+ * Example:
+ * {
+ *   form: {
+ *     verticalAlign: "top",
+ *     primaryKey: "id",
+ *     url: "/ajax/jobs",
+ *     // other form properties
+ *   }
+ * }
+ */
+
 import React, {
     forwardRef,
     useCallback,
@@ -525,47 +543,33 @@ const DataGrid = forwardRef(
 
         const handleSelectionChange = useCallback(
             (param) => {
-                // If this is a new selection (not a deselection)
-                if (
-                    param.selected === true ||
+                // Handle the selection change based on the parameter type
+                if (param.selected === true) {
+                    // Select all rows - this happens when header checkbox is clicked to select all
+                    const s = {};
+                    param.data.forEach((obj) => {
+                        s[obj.id] = obj;
+                    });
+                    setSelected(s);
+                    // Update parent component's rowsSelected state
+                    if (setRowsSelected) {
+                        setRowsSelected(s);
+                    }
+                } else if (
+                    param.selected === false ||
                     (typeof param.selected === 'object' &&
-                        Object.keys(param.selected).length > 0)
+                        Object.keys(param.selected).length === 0)
                 ) {
-                    // Process the selection directly without confirmation
-                    if (param.selected === true) {
-                        const s = {};
-                        param.data.forEach((obj) => {
-                            s[obj.id] = obj;
-                        });
-                        setSelected(s);
-                        // Update parent component's rowsSelected state
-                        if (setRowsSelected) {
-                            setRowsSelected(s);
-                        }
-                    } else if (typeof param.selected === 'object') {
-                        const selectedKey = Object.keys(param.selected)[0];
-                        const isSelectedAlready =
-                            selected.hasOwnProperty(selectedKey);
-
-                        let newSelected;
-                        if (isSelectedAlready) {
-                            newSelected = {};
-                            setSelected(newSelected);
-                        } else {
-                            newSelected = {
-                                ...selected,
-                                [selectedKey]: param.selected[selectedKey],
-                            };
-                            setSelected(newSelected);
-                        }
-
-                        // Update parent component's rowsSelected state
-                        if (setRowsSelected) {
-                            setRowsSelected(newSelected);
-                        }
+                    // Deselect all rows - this happens when header checkbox is clicked to deselect all
+                    setSelected({});
+                    // Update parent component's rowsSelected state
+                    if (setRowsSelected) {
+                        setRowsSelected({});
                     }
-                } else {
-                    // Handle deselection directly without confirmation
+                } else if (typeof param.selected === 'object') {
+                    // Individual row selection/deselection - ReactDataGrid sends the complete new selection state
+                    // ReactDataGrid sends the complete new selection state, not just the changed row
+                    // So we can directly use param.selected as the new selection state
                     setSelected(param.selected);
                     // Update parent component's rowsSelected state
                     if (setRowsSelected) {
@@ -574,7 +578,7 @@ const DataGrid = forwardRef(
                 }
             },
             [selected, setRowsSelected]
-        ); // Including selected and setRowsSelected in the dependency array
+        );
 
         const findUpdatedFilter = (filters, currentValues) => {
             for (const filter of filters) {
@@ -1141,35 +1145,85 @@ const DataGrid = forwardRef(
             }
         }, []);
 
-        const onRenderRow = useCallback((rowProps) => {
-            // save the original handlers to be called later
-            const { onClick } = rowProps;
+        const onRenderRow = useCallback(
+            (rowProps) => {
+                // save the original handlers to be called later
+                const { onClick } = rowProps;
 
-            rowProps.onClick = (event) => {
-                onRowClick(rowProps, event);
+                rowProps.onClick = (event) => {
+                    const cellElement = event.target.closest(
+                        '.InovuaReactDataGrid__cell'
+                    );
 
-                const cellElement = event.target.closest(
-                    '.InovuaReactDataGrid__cell'
-                );
+                    // Add null check to prevent errors when cellElement is null
+                    if (!cellElement) {
+                        return; // Exit early if no cell element was found
+                    }
 
-                // Add null check to prevent errors when cellElement is null
-                if (!cellElement) {
-                    return; // Exit early if no cell element was found
-                }
+                    const columnIndex = Array.from(
+                        cellElement.parentNode.children
+                    ).indexOf(cellElement);
 
-                const columnIndex = Array.from(
-                    cellElement.parentNode.children
-                ).indexOf(cellElement);
+                    const column = rowProps.columns[columnIndex];
 
-                const column = rowProps.columns[columnIndex];
+                    if (column.id === '__checkbox-column') {
+                        // For checkbox column clicks, we need to handle them specially
+                        // to ensure consistent behavior whether clicking checkbox or cell area
+
+                        // Check if clicking directly on the checkbox input
+                        const isCheckboxInput = event.target.matches(
+                            'input[type="checkbox"]'
+                        );
+
+                        if (!isCheckboxInput) {
+                            // If clicking on empty space in checkbox cell, simulate checkbox click
+                            // by manually toggling the selection state
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            const rowId =
+                                rowProps.data[rowProps.idProperty || 'id'];
+                            const isCurrentlySelected =
+                                selected.hasOwnProperty(rowId);
+
+                            let newSelected;
+                            if (isCurrentlySelected) {
+                                // Remove from selection
+                                newSelected = { ...selected };
+                                delete newSelected[rowId];
+                            } else {
+                                // Add to selection
+                                newSelected = {
+                                    ...selected,
+                                    [rowId]: rowProps.data,
+                                };
+                            }
+
+                            setSelected(newSelected);
+                            if (setRowsSelected) {
+                                setRowsSelected(newSelected);
+                            }
+
+                            return; // Don't call the original onClick
+                        }
 
-                if (column.id === '__checkbox-column') {
-                    if (onClick) {
-                        onClick(event);
+                        // If clicking directly on checkbox input, let ReactDataGrid handle it
+                        if (onClick) {
+                            onClick(event);
+                        }
+                    } else {
+                        // For non-checkbox columns, handle normal row clicks
+                        onRowClick(rowProps, event);
+
+                        // Call the original onClick handler
+                        if (onClick) {
+                            onClick(event);
+                        }
                     }
-                }
-            };
-        }, []);
+                };
+            },
+            [selected, setRowsSelected]
+        );
 
         const exportTrigger = async () => {
             try {
@@ -1403,14 +1457,29 @@ const DataGrid = forwardRef(
             );
         };
 
-        const renderAutoRefreshControls = () => {
+        // Helper function to determine if auto refresh should be relocated
+        const shouldRelocateAutoRefresh = () => {
+            const isSearchDisabled = form.searchDisable === true;
+            const isCreateDisabled = form.createDisable === true;
+            const hasAutoRefresh =
+                ajaxSetting && ajaxSetting.autoRefresh !== undefined;
+
+            // Relocate only if auto refresh is the sole control (no search, no create button)
+            return hasAutoRefresh && isSearchDisabled && isCreateDisabled;
+        };
+
+        const renderAutoRefreshControls = (isRelocated = false) => {
             // Only show auto-refresh if the setting is present in ajaxSetting
             if (!ajaxSetting || ajaxSetting.autoRefresh === undefined) {
                 return null;
             }
 
+            const containerClass = isRelocated
+                ? styles.autoRefreshContainerRelocated
+                : styles.autoRefreshContainer;
+
             return (
-                <div className={styles.autoRefreshContainer}>
+                <div className={containerClass}>
                     <label className={styles.autoRefreshLabel}>
                         <input
                             type="checkbox"
@@ -3846,14 +3915,20 @@ const DataGrid = forwardRef(
                 }}
             >
                 {/* Top container with search, action buttons, and auto-refresh */}
-                <div className={styles.dataGridTopContainer}>
-                    <div className={styles.dataGridTopLeftContainer}>
-                        {renderSearch()}
-                    </div>
-                    <div className={styles.dataGridTopRightContainer}>
-                        {renderAutoRefreshControls()}
+                {/* Only show top container if there are controls to display */}
+                {(renderSearch() ||
+                    (!shouldRelocateAutoRefresh() &&
+                        renderAutoRefreshControls())) && (
+                    <div className={styles.dataGridTopContainer}>
+                        <div className={styles.dataGridTopLeftContainer}>
+                            {renderSearch()}
+                        </div>
+                        <div className={styles.dataGridTopRightContainer}>
+                            {!shouldRelocateAutoRefresh() &&
+                                renderAutoRefreshControls()}
+                        </div>
                     </div>
-                </div>
+                )}
 
                 {/* DataGrid container with its own border */}
                 <div className={styles.dataGridContainer}>
@@ -3911,9 +3986,26 @@ const DataGrid = forwardRef(
                                 borderRadius: 'var(--br, 4px)',
                                 overflow: 'hidden',
                             }}
+                            checkboxColumnProps={{
+                                width: 60,
+                                minWidth: 60,
+                                maxWidth: 60,
+                                resizable: false,
+                                sortable: false,
+                                headerAlign: 'center',
+                                textAlign: 'center',
+                            }}
                         />
                     ) : null}
                 </div>
+
+                {/* Relocated auto refresh control when it's the only control */}
+                {shouldRelocateAutoRefresh() && (
+                    <div className={styles.dataGridBottomContainer}>
+                        {renderAutoRefreshControls(true)}
+                    </div>
+                )}
+
                 {audioSource && <audio src={audioSource} ref={audioRef} />}
                 <Popup
                     open={modalShow}
@@ -3923,25 +4015,44 @@ const DataGrid = forwardRef(
                         width: windowWidth < 768 ? '95vw' : '80vw',
                         minWidth: windowWidth < 768 ? '95vw' : '600px',
                         maxWidth: '1200px',
+                        ...(formData.verticalAlign === 'top' && {
+                            position: 'fixed',
+                            top: '5vh',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            margin: '0',
+                        }),
                     }}
                     nested
                 >
-                    <Form
-                        ajaxSetting={ajaxSetting}
-                        api={api}
-                        closeModal={modalClose}
-                        columnId={formId}
-                        fetchTable={handleReload}
-                        formSettings={formData}
-                        formType={formType}
-                        gridRef={gridRef}
-                        mapbox={mapbox}
-                        modalOpen={modalOpen}
-                        paramValue={paramValue}
-                        style={style}
-                        updateForm={setFormData}
-                        userProfile={userProfile}
-                    />
+                    <div
+                        className={`${styles.modalwrap} ${
+                            styles['top--modal']
+                        } ${styles.modalWide} ${
+                            formData.verticalAlign === 'top'
+                                ? 'modal-top-aligned'
+                                : ''
+                        }`}
+                    >
+                        <div className={styles.modal}>
+                            <Form
+                                ajaxSetting={ajaxSetting}
+                                api={api}
+                                closeModal={modalClose}
+                                columnId={formId}
+                                fetchTable={handleReload}
+                                formSettings={formData}
+                                formType={formType}
+                                gridRef={gridRef}
+                                mapbox={mapbox}
+                                modalOpen={modalOpen}
+                                paramValue={paramValue}
+                                style={style}
+                                updateForm={setFormData}
+                                userProfile={userProfile}
+                            />
+                        </div>
+                    </div>
                 </Popup>
                 <Popup
                     open={modalGalleryShow}

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

@@ -17,6 +17,20 @@ import '../../styles/global.css';
  *     // other form properties
  *   }
  * }
+ *
+ * Modal Vertical Alignment:
+ * To position the modal toward the top of the viewport instead of center, add the `verticalAlign: "top"` property to the form object.
+ * Example:
+ * {
+ *   id: 'overview',
+ *   type: 'overview',
+ *   form: {
+ *     verticalAlign: "top",
+ *     primaryKey: "id",
+ *     url: "/ajax/jobs",
+ *     // other form properties
+ *   }
+ * }
  */
 
 import React, { useEffect, useRef, useState } from 'react';
@@ -2753,9 +2767,25 @@ function GenericDetail({
                 open={modalShow}
                 onClose={modalClose}
                 closeOnDocumentClick={false}
-                contentStyle={{ width: '80vw', maxWidth: '1200px' }}
+                contentStyle={{
+                    width: '80vw',
+                    maxWidth: '1200px',
+                    ...(formData.verticalAlign === 'top' && {
+                        position: 'fixed',
+                        top: '5vh',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        margin: '0',
+                    }),
+                }}
             >
-                <div className="modalwrap top--modal modalWide">
+                <div
+                    className={`modalwrap top--modal modalWide ${
+                        formData.verticalAlign === 'top'
+                            ? 'modal-top-aligned'
+                            : ''
+                    }`}
+                >
                     <div className="modal">
                         <Form
                             closeModal={modalClose}

package/src/components/crm/styles/DataGrid.module.scss

@@ -594,6 +594,19 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
+/* Relocated auto-refresh controls (when placed at bottom) */
+.autoRefreshContainerRelocated {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 15px;
+    height: 38px;
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: var(--br, 4px);
+    margin: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
 .autoRefreshLabel {
     display: flex;
     align-items: center;
@@ -720,6 +733,15 @@
     }
 }
 
+/* Bottom container for relocated controls */
+.dataGridBottomContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 8px;
+    padding: 0 5px;
+}
+
 /* Original filter input styles kept for backward compatibility */
 .filterInput {
     display: flex;

package/src/components/crm/styles/TableFilter.module.scss

@@ -193,7 +193,38 @@
 }
 
 /* Media queries for responsive design */
-@media (max-width: 1024px) {
+
+/* Tablet view (961px to 1024px) - Keep filter expanded in left container */
+@media (max-width: 1024px) and (min-width: 961px) {
+    /* Ensure filter remains visible and properly styled for tablets */
+    .tableFilter {
+        display: block;
+        /* Maintain normal styling for tablet view */
+    }
+
+    .mobileToggle {
+        display: none; /* Hide hamburger menu on tablets */
+    }
+
+    /* Slightly adjust padding for better tablet experience */
+    .parentLink {
+        padding: 9px 16px;
+        font-size: 0.9rem;
+    }
+
+    .link {
+        padding: 9px 16px;
+        font-size: 0.85rem;
+    }
+
+    .childLink {
+        padding: 7px 16px 7px 26px;
+        font-size: 0.85rem;
+    }
+}
+
+/* Phone view (960px and below) - Use hamburger menu when navigation moves to top */
+@media (max-width: 960px) {
     .mobileToggle {
         display: flex;
     }

package/src/components/crm/styles/global-datagrid.css

@@ -32,3 +32,171 @@
     outline: none !important;
     box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
 }
+
+/* Checkbox column improvements for touch devices */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    padding: 8px 12px !important;
+    min-width: 60px !important;
+    width: 60px !important;
+    max-width: 60px !important;
+    position: relative !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    /* Ensure the entire cell is clickable */
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+/* Improve checkbox touch targets */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    input[type='checkbox'] {
+    width: 20px !important;
+    height: 20px !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
+
+/* Create larger touch target area around checkbox */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox-wrapper,
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 44px !important;
+    min-width: 44px !important;
+    padding: 12px !important;
+    margin: -12px !important;
+    cursor: pointer !important;
+    border-radius: 4px !important;
+    transition: background-color 0.2s ease !important;
+}
+
+/* Touch-friendly hover effect for the entire cell */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']:hover {
+    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05) !important;
+}
+
+/* Touch-friendly hover effect for checkbox wrapper */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox-wrapper:hover,
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox:hover {
+    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
+}
+
+/* Header checkbox improvements */
+.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
+    padding: 8px 12px !important;
+    min-width: 60px !important;
+    width: 60px !important;
+    max-width: 60px !important;
+}
+
+.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+    input[type='checkbox'] {
+    width: 20px !important;
+    height: 20px !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+}
+
+/* Prevent text selection in checkbox column */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+/* Additional checkbox styling for better UX */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__cell-content {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Focus styles for accessibility */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    input[type='checkbox']:focus {
+    outline: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.5) !important;
+    outline-offset: 2px !important;
+}
+
+/* Ensure checkbox column doesn't interfere with row hover */
+.InovuaReactDataGrid__row:hover
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    background-color: inherit !important;
+}
+
+/* Mobile-specific improvements */
+@media (max-width: 768px) {
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+        min-width: 70px !important;
+        width: 70px !important;
+        max-width: 70px !important;
+        padding: 12px 16px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 24px !important;
+        height: 24px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox-wrapper,
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox {
+        min-height: 48px !important;
+        min-width: 48px !important;
+        padding: 16px !important;
+        margin: -16px !important;
+    }
+
+    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
+        min-width: 70px !important;
+        width: 70px !important;
+        max-width: 70px !important;
+        padding: 12px 16px !important;
+    }
+
+    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 24px !important;
+        height: 24px !important;
+    }
+}
+
+/* Touch device specific improvements */
+@media (hover: none) and (pointer: coarse) {
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+        padding: 16px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 28px !important;
+        height: 28px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox-wrapper,
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox {
+        min-height: 52px !important;
+        min-width: 52px !important;
+        padding: 18px !important;
+        margin: -18px !important;
+    }
+}

package/src/components/styles/global.css

@@ -228,6 +228,35 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     max-width: 1200px !important;
 }
 
+/* Top-aligned modal styles */
+.modal-top-aligned {
+    max-height: 90vh !important;
+    overflow-y: auto !important;
+}
+
+/* Ensure modal content is scrollable when top-aligned */
+.modal-top-aligned .modal__content {
+    max-height: calc(90vh - 60px) !important;
+    overflow-y: auto !important;
+}
+
+/* Responsive adjustments for top-aligned modals */
+@media (max-width: 768px) {
+    .popup-content[style*='top: 5vh'] {
+        top: 2vh !important;
+        width: 95vw !important;
+        max-width: none !important;
+    }
+
+    .modal-top-aligned {
+        max-height: 95vh !important;
+    }
+
+    .modal-top-aligned .modal__content {
+        max-height: calc(95vh - 60px) !important;
+    }
+}
+
 .AutocompletePlace-results {
     z-index: 999;
     width: 500px;

package/src/examples/ImprovedCheckboxDataGrid.jsx

@@ -0,0 +1,269 @@
+import React, { useState } from 'react';
+import DataGrid from '../components/crm/DataGrid';
+
+/**
+ * Example demonstrating the improved checkbox column functionality in DataGrid
+ *
+ * Key improvements:
+ * 1. Larger touch targets for mobile devices
+ * 2. Fixed unintended "uncheck all" behavior when clicking empty space
+ * 3. Better visual feedback for clickable areas
+ * 4. Maintained existing selection functionality
+ */
+const ImprovedCheckboxDataGrid = () => {
+    const [rowsSelected, setRowsSelected] = useState({});
+    const [tableData, setTableData] = useState([]);
+    const [total, setTotal] = useState(0);
+
+    // Example configuration with checkbox functionality enabled
+    const exampleConfig = {
+        ajaxSetting: {
+            url: '/api/example/data',
+            take: 25,
+            sortBy: 'id',
+            sort: 'desc',
+            where: [],
+        },
+        columns: [
+            {
+                id: 'id',
+                label: 'ID',
+                type: 'text',
+                minWidth: 80,
+                maxWidth: 80,
+            },
+            {
+                id: 'name',
+                label: 'Name',
+                type: 'text',
+                flex: 1,
+            },
+            {
+                id: 'email',
+                label: 'Email',
+                type: 'text',
+                flex: 1,
+            },
+            {
+                id: 'status',
+                label: 'Status',
+                type: 'text',
+                minWidth: 100,
+                maxWidth: 100,
+            },
+        ],
+        settings: [
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit',
+                url: '/edit/{id}',
+            },
+            {
+                id: 'delete',
+                label: 'Delete',
+                icon: 'delete',
+                url: '/delete/{id}',
+                method: 'DELETE',
+            },
+        ],
+        // Enable checkbox column functionality
+        tableSetting: {
+            checkboxColumn: true,
+            enableSelection: true,
+        },
+        functions: {
+            checkboxUpdate: {
+                url: '/api/bulk-update',
+                method: 'POST',
+                data: {},
+                message: {
+                    warning: 'Please select at least one item to update.',
+                    success: 'Items updated successfully!',
+                    error: 'Failed to update items.',
+                },
+                label: 'Update Selected',
+            },
+            checkboxDelete: {
+                url: '/api/bulk-delete',
+                method: 'DELETE',
+                data: {},
+                message: {
+                    warning: 'Please select at least one item to delete.',
+                    success: 'Items deleted successfully!',
+                    error: 'Failed to delete items.',
+                },
+                label: 'Delete Selected',
+            },
+        },
+    };
+
+    const handleBulkUpdate = () => {
+        const selectedCount = Object.keys(rowsSelected).length;
+        console.log(
+            `Bulk update triggered for ${selectedCount} items:`,
+            rowsSelected
+        );
+        // In a real implementation, this would call the API
+    };
+
+    const handleBulkDelete = () => {
+        const selectedCount = Object.keys(rowsSelected).length;
+        console.log(
+            `Bulk delete triggered for ${selectedCount} items:`,
+            rowsSelected
+        );
+        // In a real implementation, this would call the API
+    };
+
+    return (
+        <div style={{ padding: '20px' }}>
+            <h2>Improved Checkbox DataGrid Example</h2>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3>Key Improvements:</h3>
+                <ul>
+                    <li>
+                        <strong>Fixed checkbox cell clicks:</strong> Clicking
+                        anywhere in a checkbox cell (including empty space) now
+                        properly toggles ONLY that row
+                    </li>
+                    <li>
+                        <strong>Eliminated "clear all" bug:</strong> No more
+                        accidental clearing of all selections when clicking
+                        checkbox cell areas
+                    </li>
+                    <li>
+                        <strong>Consistent toggle behavior:</strong> Both
+                        checkbox input clicks and cell area clicks now behave
+                        identically
+                    </li>
+                    <li>
+                        <strong>Multiple selection support:</strong> Can
+                        properly select/deselect individual rows when multiple
+                        rows are already selected
+                    </li>
+                    <li>
+                        <strong>Header-only bulk actions:</strong>{' '}
+                        Select/unselect all only works from header checkbox
+                    </li>
+                    <li>
+                        <strong>Touch-friendly targets:</strong> Larger
+                        clickable areas for mobile devices
+                    </li>
+                </ul>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <p>
+                    <strong>Selected items:</strong>{' '}
+                    {Object.keys(rowsSelected).length}
+                </p>
+                {Object.keys(rowsSelected).length > 0 && (
+                    <div style={{ display: 'flex', gap: '10px' }}>
+                        <button
+                            onClick={handleBulkUpdate}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: '#3b82f6',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            Update Selected ({Object.keys(rowsSelected).length})
+                        </button>
+                        <button
+                            onClick={handleBulkDelete}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: '#ef4444',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            Delete Selected ({Object.keys(rowsSelected).length})
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            <div
+                style={{
+                    border: '1px solid #d1d5db',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                }}
+            >
+                <DataGrid
+                    {...exampleConfig}
+                    setRowsSelected={setRowsSelected}
+                    setTableData={setTableData}
+                    setTotal={setTotal}
+                    gridHeight={400}
+                />
+            </div>
+
+            <div
+                style={{
+                    marginTop: '20px',
+                    fontSize: '14px',
+                    color: '#6b7280',
+                }}
+            >
+                <h4>Testing Instructions:</h4>
+                <ol>
+                    <li>
+                        <strong>Test checkbox input clicks:</strong> Click
+                        directly on checkbox inputs - should toggle individual
+                        rows
+                    </li>
+                    <li>
+                        <strong>Test cell area clicks:</strong> Click on empty
+                        space within checkbox cells - should behave identically
+                        to checkbox clicks
+                    </li>
+                    <li>
+                        <strong>Test multiple selections:</strong> Select 2-3
+                        rows, then try to deselect individual rows - should work
+                        properly
+                    </li>
+                    <li>
+                        <strong>Test header checkbox:</strong> Click header
+                        checkbox to select/unselect ALL rows
+                    </li>
+                    <li>
+                        <strong>Test mixed interactions:</strong> Mix checkbox
+                        input clicks and cell area clicks - should behave
+                        consistently
+                    </li>
+                    <li>
+                        <strong>Touch devices:</strong> Verify larger touch
+                        targets work properly on mobile devices
+                    </li>
+                </ol>
+
+                <h4>Expected Behavior:</h4>
+                <ul>
+                    <li>
+                        ✅ Clicking any part of a checkbox cell toggles that
+                        specific row
+                    </li>
+                    <li>
+                        ✅ Header checkbox controls select/unselect all
+                        functionality
+                    </li>
+                    <li>✅ No more unexpected "uncheck all" behavior</li>
+                    <li>
+                        ✅ Consistent behavior across desktop and mobile devices
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default ImprovedCheckboxDataGrid;