@visns-studio/visns-components 5.11.2 → 5.11.4

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

@@ -0,0 +1,362 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from './Fetch';
+import MultiSelect from './MultiSelect';
+import styles from './styles/ClientAssociationManager.module.scss';
+
+const ClientAssociationManager = ({ 
+    endpoints, 
+    config, 
+    dataId,
+    onUpdate = () => {} 
+}) => {
+    const [associations, setAssociations] = useState([]);
+    const [availableOptions, setAvailableOptions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    
+    // Dynamic state based on config
+    const [newAssociation, setNewAssociation] = useState(() => {
+        const initialState = {};
+        
+        // Set up dynamic fields based on config
+        if (config.fields) {
+            config.fields.forEach(field => {
+                initialState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                       field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                       field.type === 'multi-select' ? [] : '');
+            });
+        }
+        
+        return initialState;
+    });
+
+    // Replace placeholders in endpoint URLs and data
+    const processTemplate = (template, data = {}) => {
+        let processed = template;
+        
+        // Replace {dataId} with current dataId
+        processed = processed.replace(/\{dataId\}/g, dataId);
+        
+        // Replace any other placeholders from provided data
+        Object.keys(data).forEach(key => {
+            const placeholder = new RegExp(`\\{${key}\\}`, 'g');
+            processed = processed.replace(placeholder, data[key]);
+        });
+        
+        return processed;
+    };
+
+    // Load existing associations
+    const loadAssociations = async () => {
+        if (!endpoints.list) return;
+        
+        try {
+            setLoading(true);
+            const url = processTemplate(endpoints.list);
+            const method = endpoints.listMethod || 'GET';
+            const response = await CustomFetch(url, method, endpoints.listParams || {});
+            
+            const dataPath = config.dataPath || 'data';
+            const associationsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response);
+            
+            // Ensure associationsData is always an array
+            const validAssociations = Array.isArray(associationsData) ? associationsData : [];
+            setAssociations(validAssociations);
+        } catch (error) {
+            toast.error(config.messages?.loadError || 'Failed to load associations');
+            console.error('Error loading associations:', error);
+            setAssociations([]); // Set empty array on error
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Load available options for dropdown/select fields
+    const loadAvailableOptions = async () => {
+        if (!config.optionsEndpoint) return;
+        
+        try {
+            const url = processTemplate(config.optionsEndpoint.url);
+            const method = config.optionsEndpoint.method || 'POST';
+            const params = config.optionsEndpoint.params || {};
+            
+            const response = await CustomFetch(url, method, params);
+            const dataPath = config.optionsEndpoint.dataPath || 'data.data';
+            const optionsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response) || [];
+            
+            setAvailableOptions(optionsData);
+        } catch (error) {
+            console.error('Failed to load options:', error);
+        }
+    };
+
+    // Generic action handler
+    const handleAction = async (actionKey, data = {}) => {
+        const endpoint = endpoints[actionKey];
+        if (!endpoint) return;
+
+        try {
+            const url = processTemplate(endpoint.url || endpoint, data);
+            const method = endpoint.method || 'POST';
+            const params = { ...endpoint.params, ...data };
+
+            await CustomFetch(url, method, params);
+
+            const successMessage = config.messages?.[`${actionKey}Success`] || 
+                                 endpoint.successMessage || 
+                                 'Action completed successfully';
+            toast.success(successMessage);
+
+            // Reset form if it's an associate action
+            if (actionKey === 'associate') {
+                const resetState = {};
+                if (config.fields) {
+                    config.fields.forEach(field => {
+                        resetState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                               field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                               field.type === 'multi-select' ? [] : '');
+                    });
+                }
+                setNewAssociation(resetState);
+            }
+
+            loadAssociations();
+            onUpdate();
+        } catch (error) {
+            const errorMessage = config.messages?.[`${actionKey}Error`] || 
+                                endpoint.errorMessage || 
+                                'Action failed';
+            toast.error(errorMessage);
+            console.error(error);
+        }
+    };
+
+    // Associate handler
+    const handleAssociate = async () => {
+        // Validate required fields
+        const requiredField = config.fields?.find(field => field.required);
+        const primaryField = config.fields?.find(field => field.isPrimary);
+        
+        if (requiredField && !newAssociation[requiredField.id]) {
+            toast.error(`Please select a ${requiredField.label || requiredField.id}`);
+            return;
+        }
+
+        // Prepare data for submission
+        const submitData = { ...newAssociation };
+        
+        // Handle complex field values (like objects from MultiSelect)
+        Object.keys(submitData).forEach(key => {
+            const value = submitData[key];
+            if (value && typeof value === 'object' && value.value !== undefined) {
+                submitData[key] = value.value;
+            }
+        });
+
+        await handleAction('associate', submitData);
+    };
+
+    // Remove association handler
+    const handleDissociate = async (itemId) => {
+        const deleteField = config.deleteField || 'id';
+        await handleAction('dissociate', { [deleteField]: itemId });
+    };
+
+    // Set primary handler
+    const handleSetPrimary = async (itemId) => {
+        if (!endpoints.setPrimary) return;
+        
+        const primaryField = config.fields?.find(field => field.isPrimary);
+        const idField = primaryField?.targetField || 'id';
+        
+        await handleAction('setPrimary', { [idField]: itemId });
+    };
+
+    useEffect(() => {
+        if (dataId) {
+            loadAssociations();
+            loadAvailableOptions();
+        }
+    }, [dataId]);
+
+    if (loading) {
+        return <div className={styles.loading}>{config.messages?.loading || 'Loading associations...'}</div>;
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <h3>{config.title || 'Associations'}</h3>
+                <p>{config.description || 'Manage associations'}</p>
+            </div>
+
+            {/* Existing Associations */}
+            <div className={styles.existingAssociations}>
+                <h4>{config.labels?.currentAssociations || 'Current Associations'}</h4>
+                {associations.length === 0 ? (
+                    <div className={styles.noAssociations}>
+                        {config.messages?.noAssociations || 'No associations found.'}
+                    </div>
+                ) : (
+                    <div className={styles.associationsList}>
+                        {associations.map((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';
+                            
+                            return (
+                                <div 
+                                    key={association.id} 
+                                    className={`${styles.associationItem} ${association[primaryField] ? styles.primary : ''}`}
+                                >
+                                    <div className={styles.associationInfo}>
+                                        <div className={styles.companyName}>
+                                            {association[nameField]}
+                                            {association[primaryField] && (
+                                                <span className={styles.primaryBadge}>{config.labels?.primaryBadge || 'Primary'}</span>
+                                            )}
+                                        </div>
+                                        <div className={styles.relationshipInfo}>
+                                            <span className={styles.relationshipType}>
+                                                {association[relationshipField]}
+                                            </span>
+                                            {association[notesField] && (
+                                                <span className={styles.notes}>
+                                                    - {association[notesField]}
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div className={styles.associatedAt}>
+                                            {config.labels?.associatedAt || 'Associated'}: {new Date(association[dateField]).toLocaleDateString()}
+                                        </div>
+                                    </div>
+                                    <div className={styles.associationActions}>
+                                        {!association[primaryField] && endpoints.setPrimary && (
+                                            <button
+                                                type="button"
+                                                className={styles.setPrimaryBtn}
+                                                onClick={() => handleSetPrimary(association.id)}
+                                            >
+                                                {config.labels?.setPrimary || 'Set Primary'}
+                                            </button>
+                                        )}
+                                        <button
+                                            type="button"
+                                            className={styles.removeBtn}
+                                            onClick={() => handleDissociate(association.id)}
+                                        >
+                                            {config.labels?.remove || 'Remove'}
+                                        </button>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+
+            {/* Add New Association */}
+            <div className={styles.newAssociation}>
+                <h4>{config.labels?.addNew || 'Add New Association'}</h4>
+                <div className={styles.associationForm}>
+                    {config.fields && config.fields.map((field, index) => {
+                        const fieldValue = newAssociation[field.id] || '';
+                        
+                        return (
+                            <div key={field.id} className={styles.formRow}>
+                                <div className={styles.formField}>
+                                    <label>
+                                        {field.label}{field.required && ' *'}
+                                    </label>
+                                    
+                                    {field.type === 'multi-select' && (
+                                        <MultiSelect
+                                            settings={{ id: field.id }}
+                                            multi={field.multi || false}
+                                            onChange={(value) => setNewAssociation(prev => ({ ...prev, [field.id]: value }))}
+                                            inputValue={fieldValue}
+                                            options={availableOptions}
+                                            placeholder={field.placeholder || `Select ${field.label}...`}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'select' && (
+                                        <select
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            className={styles.selectField}
+                                        >
+                                            {field.options && field.options.map(option => (
+                                                <option key={option.value || option} value={option.value || option}>
+                                                    {option.label || option}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    )}
+                                    
+                                    {field.type === 'boolean' && (
+                                        <label>
+                                            <input
+                                                type="checkbox"
+                                                checked={fieldValue}
+                                                onChange={(e) => setNewAssociation(prev => ({ 
+                                                    ...prev, 
+                                                    [field.id]: e.target.checked 
+                                                }))}
+                                            />
+                                            {field.checkboxLabel || field.label}
+                                        </label>
+                                    )}
+                                    
+                                    {field.type === 'textarea' && (
+                                        <textarea
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textareaField}
+                                            rows={field.rows || 3}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'text' && (
+                                        <input
+                                            type="text"
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textField}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    <div className={styles.formActions}>
+                        <button
+                            type="button"
+                            className={styles.associateBtn}
+                            onClick={handleAssociate}
+                            disabled={!newAssociation[config.fields?.find(f => f.required)?.id || 'id']}
+                        >
+                            {config.labels?.addButton || 'Add Association'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ClientAssociationManager;