@visns-studio/visns-components 5.11.4 → 5.11.6

package/package.json

@@ -13,6 +13,7 @@
         "@nivo/pie": "^0.99.0",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.1",
+        "@uiw/react-color": "^2.6.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
         "@vitejs/plugin-react": "^4.5.2",
@@ -27,15 +28,14 @@
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.516.0",
+        "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
         "motion": "^12.18.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.19.3",
-        "react-color": "^2.19.3",
+        "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.4.0",
         "react-dropzone": "^14.3.8",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.4",
+    "version": "5.11.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -108,5 +108,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.9.1"
+    "packageManager": "yarn@4.9.2"
 }

package/src/components/crm/AssociationManager.jsx

@@ -13,6 +13,7 @@ const AssociationManager = ({
 }) => {
     const [associations, setAssociations] = useState([]);
     const [availableOptions, setAvailableOptions] = useState([]);
+    const [childOptions, setChildOptions] = useState({});
     const [loading, setLoading] = useState(true);
     
     // Dynamic state based on config
@@ -49,23 +50,42 @@ const AssociationManager = ({
 
     // Load existing associations
     const loadAssociations = async () => {
-        if (!endpoints.list) return;
+        console.log('🔍 AssociationManager - loadAssociations called');
+        console.log('📡 Endpoints:', endpoints);
+        console.log('⚙️ Config:', config);
+        console.log('🆔 DataId:', dataId);
+        
+        if (!endpoints.list) {
+            console.error('❌ No endpoints.list defined');
+            return;
+        }
         
         try {
             setLoading(true);
             const url = processTemplate(endpoints.list);
+            console.log('🌐 Loading associations from URL:', url);
+            
             const method = endpoints.listMethod || 'GET';
+            console.log('📤 HTTP Method:', method);
+            
             const response = await CustomFetch(url, method, endpoints.listParams || {});
+            console.log('📥 Raw API Response:', response);
             
             const dataPath = config.dataPath || 'data';
+            console.log('🗂️ Using dataPath:', dataPath);
+            
             const associationsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response);
+            console.log('📊 Extracted associations data:', associationsData);
             
             // Ensure associationsData is always an array
             const validAssociations = Array.isArray(associationsData) ? associationsData : [];
+            console.log('✅ Valid associations (final):', validAssociations);
+            console.log('📈 Associations count:', validAssociations.length);
+            
             setAssociations(validAssociations);
         } catch (error) {
             toast.error(config.messages?.loadError || 'Failed to load associations');
-            console.error('Error loading associations:', error);
+            console.error('❌ Error loading associations:', error);
             setAssociations([]); // Set empty array on error
         } finally {
             setLoading(false);
@@ -74,20 +94,102 @@ const AssociationManager = ({
 
     // Load available options for dropdown/select fields
     const loadAvailableOptions = async () => {
-        if (!config.optionsEndpoint) return;
+        console.log('🔍 AssociationManager - loadAvailableOptions called');
+        console.log('⚙️ Config.optionsEndpoint:', config.optionsEndpoint);
+        
+        if (!config.optionsEndpoint) {
+            console.error('❌ No config.optionsEndpoint defined');
+            return;
+        }
         
         try {
             const url = processTemplate(config.optionsEndpoint.url);
+            console.log('🌐 Loading options from URL:', url);
+            
             const method = config.optionsEndpoint.method || 'POST';
+            console.log('📤 HTTP Method:', method);
+            
             const params = config.optionsEndpoint.params || {};
+            console.log('📋 Request params:', params);
             
             const response = await CustomFetch(url, method, params);
+            console.log('📥 Raw options API Response:', response);
+            
             const dataPath = config.optionsEndpoint.dataPath || 'data';
+            console.log('🗂️ Using options dataPath:', dataPath);
+            
             const optionsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response) || [];
+            console.log('📊 Extracted options data:', optionsData);
+            console.log('📈 Options count:', optionsData.length);
             
             setAvailableOptions(optionsData);
         } catch (error) {
-            console.error('Failed to load options:', error);
+            console.error('❌ Failed to load options:', error);
+        }
+    };
+
+    // Load child dropdown options based on parent selection
+    const loadChildOptions = async (parentFieldId, parentValue, childConfig) => {
+        if (!parentValue || !childConfig.url) return [];
+        
+        try {
+            console.log(`🔍 Loading child options for ${childConfig.id} based on ${parentFieldId}:`, parentValue);
+            
+            const filter = {
+                where: [
+                    {
+                        id: parentFieldId,
+                        value: parentValue,
+                        ...(childConfig.whereHas && { whereHas: childConfig.whereHas })
+                    }
+                ]
+            };
+            
+            if (childConfig.fields) {
+                filter.fields = childConfig.fields;
+            }
+            
+            console.log('📋 Child filter params:', filter);
+            
+            const response = await CustomFetch(childConfig.url, 'POST', filter);
+            console.log('📥 Child options response:', response);
+            
+            // Extract child options - response structure is {data: {data: [...]}}
+            const childData = response.data?.data || response.data || [];
+            console.log('📊 Extracted child options:', childData);
+            
+            return childData;
+        } catch (error) {
+            console.error(`❌ Failed to load child options for ${childConfig.id}:`, error);
+            return [];
+        }
+    };
+
+    // Handle parent field changes and load child options
+    const handleFieldChange = async (fieldId, value, field) => {
+        // Update the field value
+        setNewAssociation(prev => ({ ...prev, [fieldId]: value }));
+        
+        // Load child options if this field has children
+        if (field.child && Array.isArray(field.child)) {
+            console.log(`🔗 Parent field ${fieldId} changed, loading child options...`);
+            
+            const newChildOptions = { ...childOptions };
+            
+            for (const childConfig of field.child) {
+                const childFieldOptions = await loadChildOptions(fieldId, value?.value || value, childConfig);
+                newChildOptions[childConfig.id] = childFieldOptions;
+                console.log(`✅ Loaded ${childFieldOptions.length} options for ${childConfig.id}`);
+            }
+            
+            setChildOptions(newChildOptions);
+            
+            // Clear child field values when parent changes
+            const updatedAssociation = { ...newAssociation, [fieldId]: value };
+            field.child.forEach(childConfig => {
+                updatedAssociation[childConfig.id] = '';
+            });
+            setNewAssociation(updatedAssociation);
         }
     };
 
@@ -164,21 +266,29 @@ const AssociationManager = ({
     };
 
     // Set primary handler
-    const handleSetPrimary = async (itemId) => {
+    const handleSetPrimary = async (association) => {
         if (!endpoints.setPrimary) return;
         
         const idField = config.primaryTargetField || config.deleteField || 'id';
+        const targetValue = association[idField] || association.customer_id || association.id;
         
-        await handleAction('setPrimary', { [idField]: itemId });
+        console.log('🌟 Setting primary for association:', association);
+        console.log('🎯 Using field:', idField, 'with value:', targetValue);
+        
+        await handleAction('setPrimary', { [idField]: targetValue });
     };
 
     // Remove primary handler
-    const handleRemovePrimary = async (itemId) => {
+    const handleRemovePrimary = async (association) => {
         if (!endpoints.removePrimary) return;
         
         const idField = config.primaryTargetField || config.deleteField || 'id';
+        const targetValue = association[idField] || association.customer_id || association.id;
+        
+        console.log('🌟 Removing primary for association:', association);
+        console.log('🎯 Using field:', idField, 'with value:', targetValue);
         
-        await handleAction('removePrimary', { [idField]: itemId });
+        await handleAction('removePrimary', { [idField]: targetValue });
     };
 
     // Clear all primary statuses (useful after merge)
@@ -195,9 +305,17 @@ const AssociationManager = ({
     };
 
     useEffect(() => {
+        console.log('🚀 AssociationManager - Component initialized');
+        console.log('🆔 DataId:', dataId);
+        console.log('📡 Endpoints:', endpoints);
+        console.log('⚙️ Config:', config);
+        
         if (dataId) {
+            console.log('✅ DataId exists, loading data...');
             loadAssociations();
             loadAvailableOptions();
+        } else {
+            console.warn('⚠️ No dataId provided, skipping data load');
         }
     }, [dataId]);
 
@@ -245,21 +363,31 @@ const AssociationManager = ({
                 ) : (
                     <div className={styles.associationsList}>
                         {associations.map((association) => {
+                            console.log('🔍 Rendering association:', association);
+                            
                             const nameField = config.displayFields?.name || 'name';
                             const primaryField = config.displayFields?.primary || 'is_primary';
                             const relationshipField = config.displayFields?.relationship || 'relationship_type';
                             const notesField = config.displayFields?.notes || 'notes';
                             const dateField = config.displayFields?.date || 'associated_at';
                             
+                            console.log('📊 Field values:', {
+                                name: association[nameField],
+                                primary: association[primaryField],
+                                relationship: association[relationshipField],
+                                notes: association[notesField],
+                                date: association[dateField]
+                            });
+                            
                             return (
                                 <div 
                                     key={association.id} 
-                                    className={`${styles.associationItem} ${association[primaryField] ? styles.primary : ''}`}
+                                    className={`${styles.associationItem} ${Boolean(association[primaryField]) ? styles.primary : ''}`}
                                 >
                                     <div className={styles.associationInfo}>
                                         <div className={styles.entityName}>
                                             {association[nameField]}
-                                            {association[primaryField] && (
+                                            {Boolean(association[primaryField]) && (
                                                 <span className={styles.primaryBadge}>
                                                     <Star size={12} style={{ marginRight: '4px' }} />
                                                     {config.labels?.primaryBadge || 'Primary'}
@@ -288,21 +416,22 @@ const AssociationManager = ({
                                         )}
                                     </div>
                                     <div className={styles.associationActions}>
-                                        {!association[primaryField] && endpoints.setPrimary && (
+                                        {console.log('🎯 Actions for:', association[nameField], 'Primary:', association[primaryField], 'Boolean:', Boolean(association[primaryField]))}
+                                        {!Boolean(association[primaryField]) && endpoints.setPrimary && (
                                             <button
                                                 type="button"
                                                 className={styles.setPrimaryBtn}
-                                                onClick={() => handleSetPrimary(association.id)}
+                                                onClick={() => handleSetPrimary(association)}
                                             >
                                                 <Star size={14} style={{ marginRight: '4px' }} />
                                                 {config.labels?.setPrimary || 'Set Primary'}
                                             </button>
                                         )}
-                                        {association[primaryField] && endpoints.removePrimary && (
+                                        {Boolean(association[primaryField]) && endpoints.removePrimary && (
                                             <button
                                                 type="button"
                                                 className={styles.removePrimaryBtn}
-                                                onClick={() => handleRemovePrimary(association.id)}
+                                                onClick={() => handleRemovePrimary(association)}
                                                 title={config.labels?.removePrimaryTooltip || 'Remove primary status from this association'}
                                             >
                                                 <X size={14} style={{ marginRight: '4px' }} />
@@ -343,9 +472,9 @@ const AssociationManager = ({
                                         <MultiSelect
                                             settings={{ id: field.id }}
                                             multi={field.multi || false}
-                                            onChange={(value) => setNewAssociation(prev => ({ ...prev, [field.id]: value }))}
+                                            onChange={(value) => handleFieldChange(field.id, value, field)}
                                             inputValue={fieldValue}
-                                            options={availableOptions}
+                                            options={field.id === 'customer_id' ? availableOptions : (childOptions[field.id] || [])}
                                             placeholder={field.placeholder || `Select ${field.label}...`}
                                         />
                                     )}
@@ -353,13 +482,11 @@ const AssociationManager = ({
                                     {field.type === 'select' && (
                                         <select
                                             value={fieldValue}
-                                            onChange={(e) => setNewAssociation(prev => ({ 
-                                                ...prev, 
-                                                [field.id]: e.target.value 
-                                            }))}
+                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
                                             className={styles.selectField}
                                         >
-                                            {field.options && field.options.map(option => (
+                                            <option value="">Select {field.label}...</option>
+                                            {(field.options || childOptions[field.id] || []).map(option => (
                                                 <option key={option.value || option} value={option.value || option}>
                                                     {option.label || option}
                                                 </option>
@@ -372,10 +499,7 @@ const AssociationManager = ({
                                             <input
                                                 type="checkbox"
                                                 checked={fieldValue}
-                                                onChange={(e) => setNewAssociation(prev => ({ 
-                                                    ...prev, 
-                                                    [field.id]: e.target.checked 
-                                                }))}
+                                                onChange={(e) => handleFieldChange(field.id, e.target.checked, field)}
                                             />
                                             {field.checkboxLabel || field.label}
                                         </label>
@@ -384,10 +508,7 @@ const AssociationManager = ({
                                     {field.type === 'textarea' && (
                                         <textarea
                                             value={fieldValue}
-                                            onChange={(e) => setNewAssociation(prev => ({ 
-                                                ...prev, 
-                                                [field.id]: e.target.value 
-                                            }))}
+                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
                                             placeholder={field.placeholder || ''}
                                             className={styles.textareaField}
                                             rows={field.rows || 3}
@@ -398,10 +519,7 @@ const AssociationManager = ({
                                         <input
                                             type="text"
                                             value={fieldValue}
-                                            onChange={(e) => setNewAssociation(prev => ({ 
-                                                ...prev, 
-                                                [field.id]: e.target.value 
-                                            }))}
+                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
                                             placeholder={field.placeholder || ''}
                                             className={styles.textField}
                                         />

package/src/components/crm/Field.jsx

@@ -7,7 +7,7 @@ import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
-import { BlockPicker } from 'react-color';
+import { Sketch } from '@uiw/react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { Editor } from '@tinymce/tinymce-react';
@@ -110,12 +110,13 @@ function Field({
         right: '0px',
         bottom: '0px',
         left: '0px',
+        zIndex: '999998',
     };
     const popover = {
         position: 'absolute',
-        zIndex: '2',
-        left: '20px',
-        marginTop: '6px',
+        zIndex: '999999',
+        left: '0',
+        marginTop: '8px',
     };
 
     useEffect(() => {
@@ -157,6 +158,33 @@ function Field({
         fetchAutoValue();
     }, [settings.url, settings.type, settings.id, settings.autoValueKey]);
 
+    // Handle profileId parameter - auto-populate field value with userProfile.id
+    useEffect(() => {
+        if (
+            settings.param === 'profileId' &&
+            (!settings.value || settings.value === '') &&
+            userProfile?.id &&
+            (!inputValue || inputValue === '')
+        ) {
+            // Simulate an onChange event to update the form data with userProfile.id
+            const simulatedEvent = {
+                target: {
+                    dataset: { name: settings.id },
+                    value: userProfile.id,
+                },
+            };
+            onChange(simulatedEvent);
+
+            // Also directly update the form data to ensure it's synchronized
+            if (setFormData) {
+                setFormData((prevState) => ({
+                    ...prevState,
+                    [settings.id]: userProfile.id,
+                }));
+            }
+        }
+    }, [settings.param, settings.value, settings.id, userProfile?.id, inputValue, onChange, setFormData]);
+
     useEffect(() => {
         const fetchOptions = () => {
             let filter = {};
@@ -429,6 +457,12 @@ function Field({
         }
     };
 
+    // Utility function to detect if a string is a valid hex color
+    const isHexColor = (str) => {
+        if (!str || typeof str !== 'string') return false;
+        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+    };
+
     const renderRelationText = (value) => {
         let text = '';
 
@@ -446,23 +480,56 @@ function Field({
             text = processKeys(value);
         }
 
+        // If the text is a hex color, render it with a color preview
+        if (isHexColor(text)) {
+            return (
+                <div className="relation-color-container">
+                    <div 
+                        className="relation-color-preview"
+                        style={{ backgroundColor: text }}
+                        title={`Color: ${text}`}
+                    ></div>
+                    <span className="relation-color-text">{text}</span>
+                </div>
+            );
+        }
+
         return text;
     };
 
     const renderRelationArrayText = (value) => {
-        let text = '';
-
         if (value && settings.nameFrom) {
-            value.forEach((a, b) => {
-                if (b > 0) {
-                    text += ', ';
-                }
-
-                text += a[settings.nameFrom];
-            });
+            return (
+                <div className="relation-array-container">
+                    {value.map((item, index) => {
+                        const itemValue = item[settings.nameFrom];
+                        
+                        if (isHexColor(itemValue)) {
+                            return (
+                                <div key={index} className="relation-color-container inline">
+                                    <div 
+                                        className="relation-color-preview"
+                                        style={{ backgroundColor: itemValue }}
+                                        title={`Color: ${itemValue}`}
+                                    ></div>
+                                    <span className="relation-color-text">{itemValue}</span>
+                                    {index < value.length - 1 && <span className="separator">, </span>}
+                                </div>
+                            );
+                        }
+                        
+                        return (
+                            <span key={index}>
+                                {itemValue}
+                                {index < value.length - 1 && ', '}
+                            </span>
+                        );
+                    })}
+                </div>
+            );
         }
 
-        return text;
+        return '';
     };
 
     const renderInput = () => {
@@ -597,52 +664,41 @@ function Field({
                 );
             case 'colour':
                 return (
-                    <div className="cpicker">
-                        <div
-                            className="cpicker__box"
-                            style={
-                                inputValue && inputValue !== 'null'
-                                    ? { background: inputValue }
-                                    : {}
-                            }
-                        ></div>
-                        <div className="cpicker__btn">
-                            <button
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    setColorPickerShow(
-                                        colorPickerShow === true ? false : true
+                    <div className="cpicker-inline">
+                        <div className="cpicker-preview-container">
+                            <div
+                                className="cpicker__box"
+                                data-color={inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                                style={
+                                    inputValue && inputValue !== 'null'
+                                        ? { backgroundColor: inputValue }
+                                        : {}
+                                }
+                                title={inputValue && inputValue !== 'null' ? `Current colour: ${inputValue}` : 'No colour selected'}
+                            ></div>
+                            <span className="cpicker-value">
+                                {inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                            </span>
+                        </div>
+                        <div className="cpicker-container">
+                            <Sketch
+                                color={
+                                    inputValue && inputValue !== 'null'
+                                        ? inputValue
+                                        : '#000000'
+                                }
+                                onChange={(color) => {
+                                    onChangeColour(
+                                        { target: { value: color.hex } },
+                                        { hex: color.hex },
+                                        settings.id
                                     );
                                 }}
-                            >
-                                Pick Color
-                            </button>
-                            {colorPickerShow === true ? (
-                                <div style={popover}>
-                                    <div
-                                        style={cover}
-                                        onClick={() => {
-                                            setColorPickerShow(false);
-                                        }}
-                                    />
-
-                                    <BlockPicker
-                                        color={
-                                            inputValue && inputValue !== 'null'
-                                                ? inputValue
-                                                : ''
-                                        }
-                                        onChangeComplete={(color, event) => {
-                                            onChangeColour(
-                                                event,
-                                                color,
-                                                settings.id
-                                            );
-                                        }}
-                                    />
-                                </div>
-                            ) : null}
+                                style={{
+                                    boxShadow: 'none',
+                                    border: 'none'
+                                }}
+                            />
                         </div>
                     </div>
                 );
@@ -1954,13 +2010,12 @@ function Field({
                                 'media',
                                 'table',
                                 'code',
-                                'hr',
                             ],
                             toolbar:
                                 'insertTextDropdown | undo redo | blocks | ' +
                                 'bold italic forecolor | alignleft aligncenter ' +
                                 'alignright alignjustify | bullist numlist outdent indent | ' +
-                                'hr | removeformat | table | code',
+                                'removeformat | table | code',
                             content_style:
                                 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                             setup: (editor) => {

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -767,6 +767,25 @@ export const renderRelationColumn = ({
                         typeof value === 'string' ||
                         typeof value === 'number'
                     ) {
+                        // Check if the value is a hex color and render with color preview
+                        const isHexColor = (str) => {
+                            if (!str || typeof str !== 'string') return false;
+                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+                        };
+
+                        if (isHexColor(value)) {
+                            return (
+                                <div className="relation-color-container">
+                                    <div 
+                                        className="relation-color-preview"
+                                        style={{ backgroundColor: value }}
+                                        title={`Color: ${value}`}
+                                    ></div>
+                                    <span className="relation-color-text">{value}</span>
+                                </div>
+                            );
+                        }
+
                         return (
                             <CellWithTooltip
                                 value={value}