@visns-studio/visns-components 5.11.3 → 5.11.5

package/package.json

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

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/BusinessCardOcr.jsx

@@ -18,6 +18,8 @@ import {
     Zap,
     ZapOff,
     Focus,
+    Bot,
+    Play,
 } from 'lucide-react';
 
 import CustomFetch from './Fetch';
@@ -50,10 +52,20 @@ const BusinessCardOcr = ({
     const [contactDecision, setContactDecision] = useState(null); // 'create', 'update', 'merge'
     const [isConsulting, setIsConsulting] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    
+    // Auto-capture states
+    const [autoCapture, setAutoCapture] = useState(true);
+    const [focusScore, setFocusScore] = useState(0);
+    const [isCountingDown, setIsCountingDown] = useState(false);
+    const [countdown, setCountdown] = useState(0);
+    const [focusThreshold] = useState(0.15); // Adjustable focus threshold
 
     const videoRef = useRef(null);
     const canvasRef = useRef(null);
     const fileInputRef = useRef(null);
+    const focusDetectionRef = useRef(null);
+    const countdownRef = useRef(null);
+    const capturePhotoRef = useRef(null);
 
     // Detect available cameras when component opens
     useEffect(() => {
@@ -203,6 +215,121 @@ const BusinessCardOcr = ({
         }
     };
 
+    // Calculate image sharpness/focus score using Laplacian variance
+    const calculateFocusScore = useCallback((videoElement) => {
+        if (!videoElement || videoElement.videoWidth === 0) return 0;
+        
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Use smaller canvas for performance
+        const width = 320;
+        const height = 240;
+        canvas.width = width;
+        canvas.height = height;
+        
+        ctx.drawImage(videoElement, 0, 0, width, height);
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        
+        // Convert to grayscale and apply Laplacian operator
+        let sum = 0;
+        let count = 0;
+        
+        for (let y = 1; y < height - 1; y++) {
+            for (let x = 1; x < width - 1; x++) {
+                const i = (y * width + x) * 4;
+                
+                // Convert to grayscale
+                const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+                
+                // Apply Laplacian operator (edge detection)
+                const laplacian = Math.abs(
+                    -4 * gray +
+                    data[((y - 1) * width + x) * 4] * 0.299 + data[((y - 1) * width + x) * 4 + 1] * 0.587 + data[((y - 1) * width + x) * 4 + 2] * 0.114 +
+                    data[((y + 1) * width + x) * 4] * 0.299 + data[((y + 1) * width + x) * 4 + 1] * 0.587 + data[((y + 1) * width + x) * 4 + 2] * 0.114 +
+                    data[(y * width + (x - 1)) * 4] * 0.299 + data[(y * width + (x - 1)) * 4 + 1] * 0.587 + data[(y * width + (x - 1)) * 4 + 2] * 0.114 +
+                    data[(y * width + (x + 1)) * 4] * 0.299 + data[(y * width + (x + 1)) * 4 + 1] * 0.587 + data[(y * width + (x + 1)) * 4 + 2] * 0.114
+                );
+                
+                sum += laplacian * laplacian;
+                count++;
+            }
+        }
+        
+        // Return normalized variance (higher = sharper)
+        return count > 0 ? Math.sqrt(sum / count) / 255 : 0;
+    }, []);
+
+    // Auto-capture countdown logic
+    const startCountdown = useCallback(async () => {
+        if (isCountingDown || isFocusing) return;
+        
+        setIsCountingDown(true);
+        
+        for (let i = 3; i > 0; i--) {
+            setCountdown(i);
+            await new Promise(resolve => {
+                countdownRef.current = setTimeout(resolve, 1000);
+            });
+            
+            // Check if still focused during countdown
+            if (videoRef.current) {
+                const currentFocus = calculateFocusScore(videoRef.current);
+                if (currentFocus < focusThreshold) {
+                    setIsCountingDown(false);
+                    setCountdown(0);
+                    return; // Cancel if focus lost
+                }
+            }
+        }
+        
+        setCountdown(0);
+        setIsCountingDown(false);
+        
+        // Trigger capture using ref
+        if (capturePhotoRef.current) {
+            await capturePhotoRef.current();
+        }
+    }, [isCountingDown, isFocusing, calculateFocusScore, focusThreshold]);
+
+    // Focus detection loop
+    useEffect(() => {
+        if (!videoRef.current || !cameraReady || !autoCapture || currentStep !== 'camera') {
+            return;
+        }
+
+        const detectFocus = () => {
+            if (videoRef.current && !isCountingDown && !isFocusing) {
+                const score = calculateFocusScore(videoRef.current);
+                setFocusScore(score);
+                
+                // Start countdown if image is in focus
+                if (score > focusThreshold && !isCountingDown) {
+                    startCountdown();
+                }
+            }
+        };
+
+        // Check focus every 500ms
+        focusDetectionRef.current = setInterval(detectFocus, 500);
+
+        return () => {
+            if (focusDetectionRef.current) {
+                clearInterval(focusDetectionRef.current);
+            }
+        };
+    }, [cameraReady, autoCapture, currentStep, isCountingDown, isFocusing, calculateFocusScore, focusThreshold, startCountdown]);
+
+    // Cleanup countdown on unmount
+    useEffect(() => {
+        return () => {
+            if (countdownRef.current) {
+                clearTimeout(countdownRef.current);
+            }
+        };
+    }, []);
+
     // Image preprocessing pipeline
     const preprocessImage = async (imageBlob) => {
         return new Promise((resolve) => {
@@ -274,6 +401,11 @@ const BusinessCardOcr = ({
         );
     }, [cameraStream]);
 
+    // Assign capturePhoto to ref for use in startCountdown
+    useEffect(() => {
+        capturePhotoRef.current = capturePhoto;
+    }, [capturePhoto]);
+
     const switchCamera = () => {
         if (availableCameras.length > 1) {
             setCurrentCameraIndex(
@@ -1652,7 +1784,20 @@ const BusinessCardOcr = ({
                     {currentStep === 'camera' && (
                         <div className={ocrStyles.cameraContainer}>
                             <div className={ocrStyles.captureGuide}>
-                                <p>Position business card within the frame and tap to focus</p>
+                                <p>
+                                    {autoCapture 
+                                        ? 'Position business card within frame - auto-capture when focused' 
+                                        : 'Position business card within the frame and tap to focus'
+                                    }
+                                </p>
+                                <button
+                                    onClick={() => setAutoCapture(!autoCapture)}
+                                    className={`${ocrStyles.autoCaptureToggle} ${autoCapture ? ocrStyles.active : ''}`}
+                                    title={autoCapture ? 'Disable auto-capture' : 'Enable auto-capture'}
+                                >
+                                    {autoCapture ? <Bot size={16} /> : <Play size={16} />}
+                                    {autoCapture ? 'Auto' : 'Manual'}
+                                </button>
                             </div>
                             <div className={ocrStyles.videoWrapper}>
                                 <video
@@ -1663,15 +1808,54 @@ const BusinessCardOcr = ({
                                     className={ocrStyles.cameraVideo}
                                     onClick={triggerAutofocus}
                                 />
+                                <canvas 
+                                    ref={canvasRef} 
+                                    style={{ display: 'none' }}
+                                />
                                 {/* Enhanced camera overlay with focus frame */}
                                 <div className={ocrStyles.cameraOverlay}>
-                                    <div className={ocrStyles.focusFrame}>
+                                    <div className={`${ocrStyles.focusFrame} ${
+                                        focusScore > focusThreshold ? ocrStyles.focused : ''
+                                    } ${isCountingDown ? ocrStyles.countingDown : ''}`}>
+                                        
+                                        {/* Focus corners */}
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.topLeft}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.topRight}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.bottomLeft}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.bottomRight}`}></div>
+                                        
+                                        {/* Countdown display */}
+                                        {isCountingDown && countdown > 0 && (
+                                            <div className={ocrStyles.countdownDisplay}>
+                                                <div className={ocrStyles.countdownNumber}>{countdown}</div>
+                                                <div className={ocrStyles.countdownText}>Auto-capturing...</div>
+                                            </div>
+                                        )}
+                                        
+                                        {/* Focus indicator */}
                                         {isFocusing && (
                                             <div className={ocrStyles.focusIndicator}>
                                                 <Focus className={ocrStyles.focusIcon} />
                                                 <span>Focusing...</span>
                                             </div>
                                         )}
+                                        
+                                        {/* Focus status */}
+                                        {autoCapture && !isFocusing && !isCountingDown && (
+                                            <div className={ocrStyles.focusStatus}>
+                                                <div className={`${ocrStyles.focusBar} ${
+                                                    focusScore > focusThreshold ? ocrStyles.good : ocrStyles.poor
+                                                }`}>
+                                                    <div 
+                                                        className={ocrStyles.focusBarFill} 
+                                                        style={{ width: `${Math.min(focusScore * 300, 100)}%` }}
+                                                    ></div>
+                                                </div>
+                                                <span className={ocrStyles.focusText}>
+                                                    {focusScore > focusThreshold ? '✓ In Focus' : 'Move closer or adjust angle'}
+                                                </span>
+                                            </div>
+                                        )}
                                     </div>
                                 </div>
                             </div>
@@ -1704,8 +1888,9 @@ const BusinessCardOcr = ({
                                             fileInputRef.current?.click()
                                         }
                                         className={ocrStyles.secondaryButton}
+                                        title="Upload image from device"
                                     >
-                                        <ImagePlus size={20} />
+                                        <ImagePlus size={18} />
                                         Upload
                                     </button>
 
@@ -1713,9 +1898,10 @@ const BusinessCardOcr = ({
                                         onClick={capturePhoto}
                                         className={`${ocrStyles.captureButton} ${isFocusing ? ocrStyles.focusing : ''}`}
                                         disabled={isFocusing}
+                                        title={isFocusing ? 'Focusing camera...' : 'Capture business card'}
                                     >
                                         <Camera size={28} />
-                                        {isFocusing ? 'Focusing...' : 'Capture'}
+                                        {isFocusing ? 'Focus...' : 'Capture'}
                                     </button>
 
                                     <input
@@ -1725,8 +1911,6 @@ const BusinessCardOcr = ({
                                         accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                         style={{ display: 'none' }}
                                     />
-                                    
-                                    <div className={ocrStyles.placeholder}></div>
                                 </div>
                             </div>
                         </div>

package/src/components/crm/Field.jsx

@@ -157,6 +157,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 = {};