@visns-studio/visns-components 5.15.11 → 5.15.12

package/package.json

@@ -13,10 +13,10 @@
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
         "@react-pdf/renderer": "^4.3.0",
-        "@tanstack/react-query": "^5.84.2",
+        "@tanstack/react-query": "^5.85.5",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
-        "@uiw/react-color": "^2.7.3",
+        "@uiw/react-color": "^2.8.0",
         "@visns-studio/visns-datagrid-community": "1.1.0",
         "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -32,7 +32,7 @@
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.536.0",
+        "lucide-react": "^0.540.0",
         "mapbox-gl": "^3.14.0",
         "moment": "^2.30.1",
         "motion": "^12.23.12",
@@ -43,7 +43,7 @@
         "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
         "react-currency-input-field": "^3.10.0",
-        "react-datepicker": "^8.4.0",
+        "react-datepicker": "^8.7.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
         "react-number-format": "^5.4.4",
@@ -64,7 +64,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.3",
+        "sweetalert2": "^11.22.4",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -75,12 +75,12 @@
         "yet-another-react-lightbox": "^3.25.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.28.0",
-        "@babel/plugin-transform-runtime": "^7.28.0",
-        "@babel/preset-env": "^7.28.0",
+        "@babel/core": "^7.28.3",
+        "@babel/plugin-transform-runtime": "^7.28.3",
+        "@babel/preset-env": "^7.28.3",
         "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
-        "copy-webpack-plugin": "^13.0.0",
+        "copy-webpack-plugin": "^13.0.1",
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.2",
         "mini-css-extract-plugin": "^2.9.4",
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.11",
+    "version": "5.15.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -309,11 +309,6 @@ const DataGrid = forwardRef(
 
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
-            console.log('🔍 modalOpen called:', {
-                formType: formType,
-                formId: formId,
-                timestamp: new Date().toISOString(),
-            });
             setModalShow(true);
             setFormType(formType);
             setFormId(formId);

package/src/components/Field.jsx

@@ -23,6 +23,7 @@ import {
     ArrowLeft,
     Trash2,
     X,
+    Lightbulb,
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 import validator from 'validator';
@@ -38,6 +39,7 @@ import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
+import MultiCheckbox from './MultiCheckbox';
 import DatePickerPortal from './utils/DatePickerPortal';
 
 import 'react-toggle/style.css';
@@ -338,6 +340,7 @@ function Field({
                 break;
             case 'dropdown-ajax':
             case 'multi-dropdown-ajax':
+            case 'multi-checkbox-ajax':
             case 'radio-ajax':
                 // Only fetch if there are no dependent fields (no 'where' conditions)
                 if (!settings.where || settings.where.length === 0) {
@@ -375,7 +378,7 @@ function Field({
 
     // Separate useEffect for handling dependent form data changes for dropdown refetch
     useEffect(() => {
-        if (['dropdown-ajax', 'multi-dropdown-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
+        if (['dropdown-ajax', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
             let filter = {};
 
             const processedWhere = settings.where.map((whereItem) => {
@@ -567,6 +570,7 @@ function Field({
                     'image',
                     'multi-dropdown',
                     'multi-dropdown-ajax',
+                    'multi-checkbox-ajax',
                     'plaindate',
                     'plaindatetime',
                     'plainrelation',
@@ -708,6 +712,7 @@ function Field({
                             options={options}
                             dataOptions={dataOptions}
                             isCreatable={settings.isCreatable || false}
+                            creatableConfig={settings.creatableConfig || {}}
                         />
                         {settings.create && (
                             <button
@@ -1655,7 +1660,7 @@ function Field({
                             return (
                                 <div style={{ display: 'flex', justifyContent: 'center' }}>
                                     <Toggle
-                                        checked={cellValue || false}
+                                        checked={Boolean(cellValue) || false}
                                         onChange={(e) => 
                                             onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'toggle')
                                         }
@@ -1888,6 +1893,7 @@ function Field({
                             }
                             isSearchable={settings.isSearchable ?? true}
                             isCreatable={settings.isCreatable ?? false}
+                            creatableConfig={settings.creatableConfig || {}}
                             dataOptions={dataOptions}
                             style={style}
                         />
@@ -1922,6 +1928,35 @@ function Field({
                         )}
                     </div>
                 );
+            case 'multi-checkbox-ajax':
+                return (
+                    <MultiCheckbox
+                        settings={settings}
+                        className={inputClass[settings.id]}
+                        inputValue={
+                            inputValue === null || inputValue === undefined
+                                ? []
+                                : inputValue
+                        }
+                        onChange={(newSelected, action, fieldId) => {
+                            // Call the original onChangeSelect handler
+                            if (onChangeSelect) {
+                                onChangeSelect(newSelected, action, fieldId);
+                            }
+                            
+                            // If a new option was created, refresh the options list
+                            if (action && action.action === 'create-option') {
+                                setCounter(prev => prev + 1);
+                            }
+                        }}
+                        options={options}
+                        isCreatable={settings.isCreatable ?? false}
+                        isEditable={settings.isEditable ?? false}
+                        creatableConfig={settings.creatableConfig || {}}
+                        editableConfig={settings.editableConfig || {}}
+                        style={style}
+                    />
+                );
             case 'percentage':
                 return (
                     <NumericFormat
@@ -2250,7 +2285,7 @@ function Field({
                                                 ? false
                                                 : cell[cellKey] === 'on'
                                                 ? false
-                                                : cell[cellKey]
+                                                : Boolean(cell[cellKey])
                                             : false
                                     }
                                     onChange={(e) => {
@@ -2448,7 +2483,7 @@ function Field({
                                                 ? false
                                                 : cell === 'on'
                                                 ? false
-                                                : cell
+                                                : Boolean(cell)
                                             : false
                                     }
                                     onChange={(e) => {
@@ -2644,6 +2679,7 @@ function Field({
                 'line-break',
                 'multi-dropdown',
                 'multi-dropdown-ajax',
+                'multi-checkbox-ajax',
                 'plaindate',
                 'plaindatetime',
                 'plainrelation',
@@ -2847,7 +2883,7 @@ function Field({
                                         ? false
                                         : inputValue === 'on'
                                         ? false
-                                        : inputValue
+                                        : Boolean(inputValue)
                                     : false
                             }
                             onChange={onChangeToggle}
@@ -2906,7 +2942,7 @@ function Field({
                 // Get options based on dropdown type
                 if (['dropdown', 'multi-dropdown'].includes(settings.type) && settings.options) {
                     existingOptions = settings.options;
-                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
+                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
                     existingOptions = options;
                 }
                 
@@ -2977,7 +3013,7 @@ function Field({
                         [settings.id]: createdItem.id
                     }));
                 }
-            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
+            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
                 // For multi-select fields, we need to handle existing selections
                 if (onChangeSelect) {
                     // Get current value to determine if it's multi-select
@@ -3068,7 +3104,7 @@ function Field({
 
     useEffect(() => {
         if (counter > 0) {
-            if (settings.create.parent_id !== '') {
+            if (settings.create && settings.create.parent_id !== '') {
                 formSettings.fields.forEach((item) => {
                     if (item.id === settings.create.parent_id) {
                         fetchChildDropdownData(
@@ -3094,6 +3130,20 @@ function Field({
                 {renderInput()}
                 {renderFieldLabel()}
             </label>
+            {(settings.type === 'multi-dropdown-ajax' || settings.type === 'multi-dropdown') && settings.isCreatable && (
+                <div style={{ 
+                    fontSize: '0.75rem', 
+                    color: '#6b7280', 
+                    marginTop: '4px',
+                    fontStyle: 'italic',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px'
+                }}>
+                    <Lightbulb size={12} />
+                    Tip: Type to create new entries and press Enter
+                </div>
+            )}
             {renderAdditionalContainer()}
             <StandardModal
                 isOpen={childFormShow}

package/src/components/Form.jsx

@@ -204,10 +204,11 @@ function Form({
         if (!_.isEmpty(_dataset)) {
             Object.keys(_dataset).forEach((c) => {
                 if (formData.hasOwnProperty(c)) {
-                    setFormData((prevState) => ({
-                        ...prevState,
-                        [c]: _dataset[c],
-                    }));
+                    if (c !== 'name' && c !== 'label')
+                        setFormData((prevState) => ({
+                            ...prevState,
+                            [c]: _dataset[c],
+                        }));
                 }
             });
         }
@@ -407,6 +408,7 @@ function Form({
         switch (action.action) {
             case 'select-option':
             case 'create-option': // New case to handle create-option
+            case 'deselect-option': // Handle unchecking tags
                 handleSelectOption();
                 break;
             case 'clear':
@@ -1659,7 +1661,17 @@ function Form({
 
                         const res = await CustomFetch(url, method, payload);
 
+
                         if (res.data.error === '') {
+                            // Update form data with fresh response data after successful submission
+                            if (res.data.data && typeof res.data.data === 'object') {
+                                
+                                setFormData(prevFormData => ({
+                                    ...prevFormData,
+                                    ...res.data.data
+                                }));
+                            }
+                            
                             if (formSettings?.save?.pageReload) {
                                 setTimeout(() => {
                                     location.reload();
@@ -1895,7 +1907,12 @@ function Form({
                     method = 'GET';
                 }
 
-                const url = `${formSettings.url}${urlSuffix}`;
+                // Add cache-busting parameter for GET requests to ensure fresh data
+                let url = `${formSettings.url}${urlSuffix}`;
+                if (method === 'GET' && formType === 'update') {
+                    url += `?_t=${Date.now()}`;
+                }
+                
                 const result = await CustomFetch(url, method, payload);
 
                 const data = result.hasOwnProperty('data')
@@ -2141,7 +2158,7 @@ function Form({
 
     useEffect(() => {
         fetchData();
-    }, []);
+    }, [columnId, formType]); // Re-fetch data whenever columnId or formType changes
 
     // Update dataRef when tableData changes
     useEffect(() => {

package/src/components/MultiCheckbox.jsx

@@ -0,0 +1,335 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Plus, Edit3, X, Check } from 'lucide-react';
+import CustomFetch from './Fetch';
+import { toast } from 'react-toastify';
+import styles from './styles/MultiCheckbox.module.scss';
+
+function MultiCheckbox({
+    className,
+    inputValue = [],
+    onChange,
+    options = [],
+    placeholder,
+    settings,
+    style,
+    isCreatable = false,
+    isEditable = false,
+    creatableConfig = {},
+    editableConfig = {},
+}) {
+    const [checkboxOptions, setCheckboxOptions] = useState([]);
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [isCreating, setIsCreating] = useState(false);
+    const [isEditing, setIsEditing] = useState(null);
+    const [newTagName, setNewTagName] = useState('');
+    const [editTagName, setEditTagName] = useState('');
+    const prevInputValueRef = useRef();
+
+    // Transform options to checkbox format
+    useEffect(() => {
+        const _options = Array.isArray(options) && options.length > 0
+            ? options.map((item) => {
+                if (item && typeof item === 'object') {
+                    return {
+                        id: item.id || 'unknown-id',
+                        label: item.label || item.name || item.description || 'Unknown',
+                        value: item.id || 'unknown-id',
+                        ...item,
+                    };
+                }
+                return {
+                    id: 'unknown-id',
+                    label: 'Unknown',
+                    value: 'unknown-id',
+                };
+            })
+            : [];
+        setCheckboxOptions(_options);
+    }, [options]);
+
+    // Transform inputValue to selected values
+    useEffect(() => {
+        if (JSON.stringify(prevInputValueRef.current) !== JSON.stringify(inputValue)) {
+            const _selected = Array.isArray(inputValue)
+                ? inputValue.map((item) => ({
+                    id: item.id,
+                    label: item.label || item.name || item.description || 'Unknown',
+                    value: item.id,
+                    ...item,
+                }))
+                : inputValue && typeof inputValue === 'object'
+                ? [{
+                    id: inputValue.id,
+                    label: inputValue.label || inputValue.name || inputValue.description || 'Unknown',
+                    value: inputValue.id,
+                    ...inputValue,
+                }]
+                : [];
+            
+            setSelectedValues(_selected);
+            prevInputValueRef.current = inputValue;
+        }
+    }, [inputValue, checkboxOptions]);
+
+    // Use all options since search is removed
+    const filteredOptions = checkboxOptions;
+
+    const handleCheckboxChange = (option, isChecked) => {
+        let newSelected;
+        
+        if (isChecked) {
+            // Add to selection
+            newSelected = [...selectedValues, option];
+        } else {
+            // Remove from selection
+            newSelected = selectedValues.filter(item => item.id !== option.id);
+        }
+        
+        setSelectedValues(newSelected);
+        
+        // Call parent onChange with the new selection
+        if (onChange) {
+            onChange(newSelected, { action: isChecked ? 'select-option' : 'deselect-option' }, settings.id);
+        }
+    };
+
+    const handleCreateTag = async () => {
+        if (!newTagName.trim() || !creatableConfig.url) return;
+
+        try {
+            const response = await CustomFetch(
+                creatableConfig.url,
+                creatableConfig.method || 'POST',
+                { label: newTagName.trim() }
+            );
+
+            if (response && response.data) {
+                const newOption = {
+                    id: response.data.id,
+                    label: response.data.label || newTagName.trim(),
+                    value: response.data.id,
+                    ...response.data,
+                };
+
+                // Add to options
+                setCheckboxOptions(prev => [...prev, newOption]);
+                
+                // Auto-select the new tag
+                const newSelected = [...selectedValues, newOption];
+                setSelectedValues(newSelected);
+                
+                if (onChange) {
+                    onChange(newSelected, { action: 'create-option' }, settings.id);
+                }
+
+                setNewTagName('');
+                setIsCreating(false);
+                toast.success('Tag created successfully');
+            }
+        } catch (error) {
+            toast.error('Failed to create tag');
+            console.error('Error creating tag:', error);
+        }
+    };
+
+    const handleEditTag = async (tagId) => {
+        if (!editTagName.trim() || !editableConfig.url) return;
+
+        console.log('Editing tag:', { tagId, editableConfig, editTagName });
+
+        try {
+            const url = editableConfig.url.replace('{id}', tagId);
+            console.log('Edit URL:', url);
+            
+            const response = await CustomFetch(
+                url,
+                editableConfig.method || 'PUT',
+                { label: editTagName.trim() }
+            );
+
+            if (response && response.data) {
+                // Update in options
+                setCheckboxOptions(prev => 
+                    prev.map(opt => 
+                        opt.id === tagId 
+                            ? { ...opt, label: response.data.label || editTagName.trim() }
+                            : opt
+                    )
+                );
+
+                // Update in selected values
+                setSelectedValues(prev => 
+                    prev.map(sel => 
+                        sel.id === tagId 
+                            ? { ...sel, label: response.data.label || editTagName.trim() }
+                            : sel
+                    )
+                );
+
+                setEditTagName('');
+                setIsEditing(null);
+                toast.success('Tag updated successfully');
+            }
+        } catch (error) {
+            toast.error('Failed to update tag');
+            console.error('Error updating tag:', error);
+        }
+    };
+
+    const isSelected = (optionId) => {
+        return selectedValues.some(selected => selected.id === optionId);
+    };
+
+    const maxColumns = settings.maxColumns || 3;
+
+    return (
+        <div className={`${styles.multiCheckbox} ${className || ''}`} style={style}>
+
+            {/* Create new tag section */}
+            {isCreatable && (
+                <div className={styles.createSection}>
+                    {!isCreating ? (
+                        <button
+                            type="button"
+                            onClick={() => setIsCreating(true)}
+                            className={styles.createButton}
+                        >
+                            <Plus size={16} />
+                            Create New Tag
+                        </button>
+                    ) : (
+                        <div className={styles.createForm}>
+                            <input
+                                type="text"
+                                placeholder="Enter tag name..."
+                                value={newTagName}
+                                onChange={(e) => setNewTagName(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                        handleCreateTag();
+                                    } else if (e.key === 'Escape') {
+                                        e.preventDefault();
+                                        setIsCreating(false);
+                                        setNewTagName('');
+                                    }
+                                }}
+                                className={styles.createInput}
+                                autoFocus
+                            />
+                            <button
+                                type="button"
+                                onClick={handleCreateTag}
+                                className={styles.saveButton}
+                                disabled={!newTagName.trim()}
+                                title="Save tag"
+                            >
+                                <Check size={16} />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    setIsCreating(false);
+                                    setNewTagName('');
+                                }}
+                                className={styles.cancelButton}
+                            >
+                                <X size={16} />
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Checkbox grid */}
+            <div 
+                className={styles.checkboxGrid}
+                style={{
+                    gridTemplateColumns: `repeat(${maxColumns}, 1fr)`
+                }}
+            >
+                {filteredOptions.map((option, index) => (
+                    <div key={option.id || `option-${index}`} className={styles.checkboxItem}>
+                        {isEditing === option.id ? (
+                            <div className={styles.editForm}>
+                                <input
+                                    type="text"
+                                    value={editTagName}
+                                    onChange={(e) => setEditTagName(e.target.value)}
+                                    onKeyPress={(e) => {
+                                        if (e.key === 'Enter') {
+                                            handleEditTag(option.id);
+                                        } else if (e.key === 'Escape') {
+                                            setIsEditing(null);
+                                            setEditTagName('');
+                                        }
+                                    }}
+                                    className={styles.editInput}
+                                    autoFocus
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => handleEditTag(option.id)}
+                                    className={styles.saveButton}
+                                    disabled={!editTagName.trim()}
+                                    title="Save changes"
+                                >
+                                    <Check size={16} />
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        setIsEditing(null);
+                                        setEditTagName('');
+                                    }}
+                                    className={styles.cancelButton}
+                                >
+                                    <X size={16} />
+                                </button>
+                            </div>
+                        ) : (
+                            <label className={styles.checkboxLabel}>
+                                <input
+                                    type="checkbox"
+                                    checked={isSelected(option.id)}
+                                    onChange={(e) => handleCheckboxChange(option, e.target.checked)}
+                                    className={styles.checkbox}
+                                />
+                                <span className={styles.labelText}>{option.label}</span>
+                                {isEditable && (
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            console.log('Starting edit for option:', option);
+                                            setIsEditing(option.id);
+                                            setEditTagName(option.label);
+                                        }}
+                                        className={styles.editButton}
+                                    >
+                                        <Edit3 size={12} />
+                                    </button>
+                                )}
+                            </label>
+                        )}
+                    </div>
+                ))}
+            </div>
+
+            {/* No options message */}
+            {filteredOptions.length === 0 && (
+                <div className={styles.noOptions}>
+                    No tags available
+                    {isCreatable && (
+                        <div style={{ marginTop: '8px', fontSize: '12px', color: '#64748b' }}>
+                            Click "Create New Tag" above to add your first tag
+                        </div>
+                    )}
+                </div>
+            )}
+
+        </div>
+    );
+}
+
+export default MultiCheckbox;

package/src/components/MultiSelect.jsx

@@ -112,6 +112,27 @@ const CustomMultiValueRemove = (props) => {
     );
 };
 
+// Custom NoOptionsMessage component to guide users about creation capability
+const CustomNoOptionsMessage = (props) => {
+    const { isCreatable, inputValue } = props.selectProps;
+    
+    if (isCreatable && inputValue) {
+        return (
+            <components.NoOptionsMessage {...props}>
+                <div style={{ textAlign: 'center', padding: '8px' }}>
+                    Press Enter to create "<strong>{inputValue}</strong>"
+                </div>
+            </components.NoOptionsMessage>
+        );
+    }
+    
+    return (
+        <components.NoOptionsMessage {...props}>
+            No options found
+        </components.NoOptionsMessage>
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -275,12 +296,14 @@ function MultiSelect({
             isClearable
             isSearchable={isSearchable}
             isMulti={multi}
+            isCreatable={isCreatable}
             filterOption={createFilter({ ignoreAccents: false })}
             components={{
                 SelectList,
                 Option: CustomOption,
                 MultiValue: (props) => <CustomMultiValue {...props} settings={settings} />,
                 MultiValueRemove: CustomMultiValueRemove,
+                NoOptionsMessage: CustomNoOptionsMessage,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
@@ -411,7 +434,13 @@ function MultiSelect({
             }}
             value={selectValue}
             onCreateOption={handleCreate}
-            placeholder={placeholder ? placeholder : 'Select...'}
+            placeholder={
+                placeholder 
+                    ? placeholder 
+                    : isCreatable 
+                        ? 'Select or type to create new...' 
+                        : 'Select...'
+            }
             isOptionDisabled={
                 settings.limit && multi && settings.limit > 1
                     ? () => selectValue.length >= settings.limit

package/src/components/columns/ColumnRenderers.jsx

@@ -1255,25 +1255,7 @@ export const renderRelationColumn = ({
     );
 
     // Log sorting analysis in development
-    if (
-        intelligentSortingConfig.logAnalysis &&
-        process.env.NODE_ENV === 'development'
-    ) {
-        const relationshipPath = getRelationshipPath(column);
-        console.log(
-            `Relationship sorting analysis for "${relationshipPath}":`,
-            {
-                sortable: isSortable,
-                fieldName: column.nameFrom,
-                relationshipDepth: Array.isArray(column.id)
-                    ? column.id.length
-                    : 1,
-                explicitSortable: column.hasOwnProperty('sortable')
-                    ? column.sortable
-                    : 'not specified',
-            }
-        );
-    }
+    // Debug logging removed for cleaner console output
 
     return {
         ...commonProps,
@@ -1386,25 +1368,7 @@ export const renderRelationArrayColumn = ({
     );
 
     // Log sorting analysis in development
-    if (
-        intelligentSortingConfig.logAnalysis &&
-        process.env.NODE_ENV === 'development'
-    ) {
-        const relationshipPath = getRelationshipPath(column);
-        console.log(
-            `Relationship array sorting analysis for "${relationshipPath}":`,
-            {
-                sortable: isSortable,
-                fieldName: column.nameFrom,
-                relationshipDepth: Array.isArray(column.id)
-                    ? column.id.length
-                    : 1,
-                explicitSortable: column.hasOwnProperty('sortable')
-                    ? column.sortable
-                    : 'not specified',
-            }
-        );
-    }
+    // Debug logging removed for cleaner console output
 
     return {
         ...commonProps,

package/src/components/generic/GenericDetail.jsx

@@ -243,16 +243,6 @@ function GenericDetail({
     /** Fileupload states */
     const [files, setFiles] = useState([]);
 
-    // Debug logging for files state changes
-    useEffect(() => {
-        console.log('GenericDetail: Files state changed:', {
-            files,
-            filesCount: files ? files.length : 0,
-            filesType: typeof files,
-            isArray: Array.isArray(files),
-            firstFile: files && files.length > 0 ? files[0] : null,
-        });
-    }, [files]);
     const [loadingProgress, setLoadingProgress] = useState(0);
 
     /** General States */

package/src/components/styles/MultiCheckbox.module.scss

@@ -0,0 +1,321 @@
+.multiCheckbox {
+    width: 100%;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 16px;
+    background: white;
+    min-height: 100px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    
+    .searchContainer {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+        position: relative;
+        
+        .searchIcon {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #6b7280;
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        .searchInput {
+            width: 100%;
+            padding: 12px 45px 12px 16px;
+            border: 1px solid #d1d5db;
+            border-radius: 8px;
+            font-size: 14px;
+            background: #f8fafc;
+            transition: all 0.2s ease;
+            
+            &:focus {
+                outline: none;
+                border-color: #3b82f6;
+                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+                background: white;
+            }
+            
+            &::placeholder {
+                color: #94a3b8;
+            }
+        }
+    }
+    
+    .createSection {
+        margin-bottom: 12px;
+        
+        .createButton {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border: 2px dashed #cbd5e1;
+            border-radius: 8px;
+            color: #475569;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 14px;
+            font-weight: 600;
+            width: 100%;
+            justify-content: center;
+            
+            &:hover {
+                background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+                border-color: #3b82f6;
+                color: #3b82f6;
+                transform: translateY(-1px);
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            }
+        }
+        
+        .createForm {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            
+            .createInput {
+                flex: 1;
+                padding: 10px 12px;
+                border: 1px solid #d1d5db;
+                border-radius: 6px;
+                font-size: 14px;
+                transition: all 0.2s ease;
+                
+                &:focus {
+                    outline: none;
+                    border-color: #3b82f6;
+                    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+                }
+            }
+        }
+    }
+    
+    .checkboxGrid {
+        display: grid;
+        gap: 8px;
+        margin-bottom: 12px;
+        
+        .checkboxItem {
+            .checkboxLabel {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                padding: 10px 12px;
+                border: 1px solid #e2e8f0;
+                border-radius: 6px;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                position: relative;
+                background: #fafbfc;
+                
+                &:hover {
+                    background: #f1f5f9;
+                    border-color: #3b82f6;
+                    transform: translateY(-1px);
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                    
+                    .editButton {
+                        opacity: 1;
+                    }
+                }
+                
+                .checkbox {
+                    margin: 0;
+                    cursor: pointer;
+                    width: 18px;
+                    height: 18px;
+                    accent-color: #3b82f6;
+                    
+                    &:checked + .labelText {
+                        font-weight: 600;
+                        color: #1e40af;
+                    }
+                }
+                
+                .labelText {
+                    flex: 1;
+                    font-size: 14px;
+                    color: #374151;
+                    user-select: none;
+                    line-height: 1.4;
+                    font-weight: 500;
+                }
+                
+                .editButton {
+                    opacity: 0;
+                    padding: 6px;
+                    background: none;
+                    border: none;
+                    color: #6b7280;
+                    cursor: pointer;
+                    border-radius: 6px;
+                    transition: all 0.2s ease;
+                    
+                    &:hover {
+                        background: #e2e8f0;
+                        color: #374151;
+                        transform: scale(1.1);
+                    }
+                }
+            }
+            
+            .editForm {
+                display: flex;
+                gap: 6px;
+                align-items: center;
+                
+                .editInput {
+                    flex: 1;
+                    padding: 8px 12px;
+                    border: 1px solid #d1d5db;
+                    border-radius: 6px;
+                    font-size: 14px;
+                    transition: all 0.2s ease;
+                    
+                    &:focus {
+                        outline: none;
+                        border-color: #3b82f6;
+                        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+                    }
+                }
+            }
+        }
+    }
+    
+    .saveButton {
+        padding: 8px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        height: 32px;
+        
+        &:hover:not(:disabled) {
+            background: #2563eb;
+            transform: scale(1.05);
+        }
+        
+        &:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+    }
+    
+    .cancelButton {
+        padding: 8px;
+        background: #f1f5f9;
+        color: #64748b;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &:hover {
+            background: #e2e8f0;
+            color: #475569;
+        }
+    }
+    
+    .noOptions {
+        text-align: center;
+        padding: 24px 20px;
+        color: #64748b;
+        font-size: 14px;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        border-radius: 8px;
+        border: 2px dashed #cbd5e1;
+        margin: 12px 0;
+        line-height: 1.5;
+        
+        .createFromSearch {
+            display: block;
+            margin: 16px auto 0;
+            padding: 10px 20px;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+            max-width: fit-content;
+            
+            &:hover {
+                background: #2563eb;
+                transform: translateY(-1px);
+                box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+            }
+        }
+    }
+    
+    .selectedCount {
+        padding: 10px 16px;
+        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+        border: 2px solid #3b82f6;
+        border-radius: 8px;
+        color: #1e40af;
+        font-size: 13px;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 12px;
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
+        position: relative;
+        
+        &::before {
+            content: "✓";
+            display: inline-block;
+            margin-right: 6px;
+            color: #3b82f6;
+            font-weight: bold;
+        }
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+    .multiCheckbox {
+        .checkboxGrid {
+            grid-template-columns: 1fr !important;
+        }
+        
+        .createForm {
+            flex-direction: column;
+            align-items: stretch;
+            
+            .createInput {
+                margin-bottom: 8px;
+            }
+            
+            .saveButton, .cancelButton {
+                align-self: stretch;
+                justify-content: center;
+            }
+        }
+        
+        .editForm {
+            flex-direction: column;
+            align-items: stretch;
+            
+            .editInput {
+                margin-bottom: 6px;
+            }
+        }
+    }
+}

package/src/index.js

@@ -24,6 +24,7 @@ import Form from './components/Form';
 import Loader from './components/Loader';
 import MergeEntity from './components/MergeEntity';
 import MultiSelect from './components/MultiSelect';
+import MultiCheckbox from './components/MultiCheckbox';
 import Navigation from './components/Navigation';
 import Notification from './components/Notification';
 import SelectList from './components/SelectList';
@@ -140,6 +141,7 @@ export {
     Login,
     MergeEntity,
     MultiSelect,
+    MultiCheckbox,
     Navigation,
     Notification,
     NotificationList,