@visns-studio/visns-components 5.9.6 → 5.9.7

package/src/components/crm/BusinessCardOcr.jsx

@@ -0,0 +1,1089 @@
+import '../styles/global.css';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import Tesseract from 'tesseract.js';
+import {
+    Camera,
+    Image as ImageIcon,
+    CircleX,
+    ArrowCycle,
+    CircleCheck,
+    ArrowCounterClockwise,
+    Envelope,
+    Network,
+    Edit,
+    Plus,
+} from 'akar-icons';
+
+import ocrStyles from './styles/BusinessCardOcr.module.scss';
+
+const BusinessCardOcr = ({
+    onContactSaved,
+    onCancel,
+    isOpen = false,
+    onClose,
+    fields = [],
+}) => {
+    const [currentStep, setCurrentStep] = useState('camera'); // camera, preview, processing, results
+    const [capturedImage, setCapturedImage] = useState(null);
+    const [cameraStream, setCameraStream] = useState(null);
+    const [cameraFacing, setCameraFacing] = useState('environment'); // environment (back), user (front)
+    const [availableCameras, setAvailableCameras] = useState([]);
+    const [currentCameraIndex, setCurrentCameraIndex] = useState(0);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [extractedData, setExtractedData] = useState({});
+    const [ocrProgress, setOcrProgress] = useState(0);
+    const [showAssignmentDropdown, setShowAssignmentDropdown] = useState(false);
+    const [selectedUnusedText, setSelectedUnusedText] = useState('');
+
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    const fileInputRef = useRef(null);
+
+    // Detect available cameras when component opens
+    useEffect(() => {
+        if (isOpen) {
+            detectCameras();
+        }
+    }, [isOpen]);
+
+    // Initialize camera when component opens
+    useEffect(() => {
+        if (isOpen && currentStep === 'camera') {
+            initializeCamera();
+        }
+        return () => {
+            stopCamera();
+        };
+    }, [isOpen, currentStep, cameraFacing, currentCameraIndex, availableCameras]);
+
+    const detectCameras = async () => {
+        try {
+            // Request permission first to get proper device labels
+            await navigator.mediaDevices.getUserMedia({ video: true });
+            
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const videoDevices = devices.filter(
+                (device) => device.kind === 'videoinput' && device.deviceId
+            );
+            
+            // Filter out devices that might not work
+            const workingCameras = [];
+            for (const device of videoDevices) {
+                try {
+                    const testStream = await navigator.mediaDevices.getUserMedia({
+                        video: { deviceId: device.deviceId }
+                    });
+                    testStream.getTracks().forEach(track => track.stop());
+                    workingCameras.push(device);
+                } catch (err) {
+                    console.warn(`Camera ${device.label || device.deviceId} not accessible:`, err);
+                }
+            }
+            
+            setAvailableCameras(workingCameras);
+        } catch (error) {
+            console.error('Error detecting cameras:', error);
+            setAvailableCameras([]);
+        }
+    };
+
+    const initializeCamera = async () => {
+        try {
+            let constraints;
+            
+            // Use specific device if available cameras are detected
+            if (availableCameras.length > 0 && availableCameras[currentCameraIndex]) {
+                constraints = {
+                    video: {
+                        deviceId: { exact: availableCameras[currentCameraIndex].deviceId },
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 },
+                    },
+                };
+            } else {
+                // Fallback to facing mode
+                constraints = {
+                    video: {
+                        facingMode: cameraFacing,
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 },
+                    },
+                };
+            }
+
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            setCameraStream(stream);
+
+            if (videoRef.current) {
+                videoRef.current.srcObject = stream;
+            }
+        } catch (error) {
+            console.error('Error accessing camera:', error);
+            toast.error('Unable to access camera. Please check permissions.');
+        }
+    };
+
+    const stopCamera = () => {
+        if (cameraStream) {
+            cameraStream.getTracks().forEach((track) => track.stop());
+            setCameraStream(null);
+        }
+    };
+
+    const capturePhoto = useCallback(() => {
+        if (!videoRef.current || !canvasRef.current) return;
+
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        context.drawImage(video, 0, 0);
+
+        canvas.toBlob(
+            (blob) => {
+                setCapturedImage(blob);
+                setCurrentStep('preview');
+                stopCamera();
+            },
+            'image/jpeg',
+            0.9
+        );
+    }, []);
+
+    const switchCamera = () => {
+        if (availableCameras.length > 1) {
+            setCurrentCameraIndex((prev) => 
+                (prev + 1) % availableCameras.length
+            );
+        } else {
+            // Fallback to facing mode switch
+            setCameraFacing((prev) =>
+                prev === 'environment' ? 'user' : 'environment'
+            );
+        }
+    };
+
+    const retakePhoto = () => {
+        setCapturedImage(null);
+        setCurrentStep('camera');
+    };
+
+    const handleFileUpload = (event) => {
+        const file = event.target.files[0];
+        
+        if (!file) {
+            return;
+        }
+        
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            toast.error('Please select a valid image file (JPG, PNG, etc.)');
+            return;
+        }
+        
+        // Validate file size (max 10MB)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            toast.error('Image file is too large. Please select a file smaller than 10MB.');
+            return;
+        }
+        
+        // Check if it's a reasonable image size
+        const img = new Image();
+        img.onload = function() {
+            if (this.width < 100 || this.height < 100) {
+                toast.error('Image is too small. Please select a larger image.');
+                URL.revokeObjectURL(this.src); // Clean up memory
+                return;
+            }
+            
+            URL.revokeObjectURL(this.src); // Clean up memory
+            setCapturedImage(file);
+            setCurrentStep('preview');
+            stopCamera();
+        };
+        
+        img.onerror = function() {
+            toast.error('Unable to load the selected image. Please try another file.');
+            URL.revokeObjectURL(this.src); // Clean up memory
+        };
+        
+        const objectUrl = URL.createObjectURL(file);
+        img.src = objectUrl;
+        
+        // Clear the input to allow re-selecting the same file
+        event.target.value = '';
+    };
+
+    const processBusinessCard = async () => {
+        if (!capturedImage) return;
+
+        setIsProcessing(true);
+        setCurrentStep('processing');
+        setOcrProgress(0);
+
+        try {
+            const result = await Tesseract.recognize(capturedImage, 'eng', {
+                logger: (m) => {
+                    if (m.status === 'recognizing text') {
+                        const progress = Math.round(m.progress * 100);
+                        setOcrProgress(progress);
+                    }
+                },
+            });
+
+            const text = result.data.text;
+            const parsedData = parseExtractedText(text);
+            setExtractedData({ ...parsedData, rawText: text });
+            setCurrentStep('results');
+            toast.success('Business card processed successfully!');
+        } catch (error) {
+            console.error('OCR Error:', error);
+            toast.error('Failed to process business card. Please try again.');
+            setCurrentStep('preview');
+        } finally {
+            setIsProcessing(false);
+            setOcrProgress(0);
+        }
+    };
+
+    // Helper functions for data quality validation
+    const isValidName = (name) => {
+        if (!name || typeof name !== 'string') return false;
+        
+        const trimmed = name.trim();
+        
+        // Must be at least 2 characters for first name, 1 for last name
+        if (trimmed.length < 1) return false;
+        
+        // No single character first names except common ones
+        const commonSingleChars = ['J', 'D', 'R', 'M', 'K', 'T', 'S', 'B', 'C', 'A'];
+        if (trimmed.length === 1 && !commonSingleChars.includes(trimmed.toUpperCase())) {
+            return false;
+        }
+        
+        // Must contain mostly letters
+        const letterCount = (trimmed.match(/[a-zA-Z]/g) || []).length;
+        const letterRatio = letterCount / trimmed.length;
+        if (letterRatio < 0.6) return false;
+        
+        // No operators or excessive special characters
+        const invalidChars = /[=+\-*/<>|\\#$%^&@!~`{}[\]]/;
+        if (invalidChars.test(trimmed)) return false;
+        
+        // Allow common name characters
+        const validNamePattern = /^[a-zA-Z\s'.,-]+$/;
+        return validNamePattern.test(trimmed);
+    };
+    
+    const isLikelyOCRArtifact = (line) => {
+        if (!line || typeof line !== 'string') return true;
+        
+        const trimmed = line.trim();
+        
+        // Too short or too long
+        if (trimmed.length < 2 || trimmed.length > 50) return true;
+        
+        // Calculate character type ratios
+        const letters = (trimmed.match(/[a-zA-Z]/g) || []).length;
+        const numbers = (trimmed.match(/[0-9]/g) || []).length;
+        const symbols = (trimmed.match(/[^a-zA-Z0-9\s.,;:!?'-]/g) || []).length;
+        const spaces = (trimmed.match(/\s/g) || []).length;
+        const total = trimmed.length;
+        const letterRatio = letters / total;
+        const symbolRatio = symbols / total;
+        const spaceRatio = spaces / total;
+        
+        // Skip if mostly symbols
+        if (symbolRatio > 0.3) return true;
+        
+        // Skip if too many consecutive spaces or weird spacing
+        if (spaceRatio > 0.4) return true;
+        
+        // Skip if it's all numbers or mostly numbers (unless it looks like a phone)
+        if (numbers > 0 && letterRatio < 0.2 && !trimmed.match(/^\+?[\d\s\-()]+$/)) return true;
+        
+        // Skip lines that look like formatting artifacts
+        const formatArtifacts = /^[.\-_|]+$|^[^a-zA-Z]*[|]+[^a-zA-Z]*$|^\s*[.]\s*[A-Z]?\s*$/;
+        if (formatArtifacts.test(trimmed)) return true;
+        
+        // Skip if it has random character combinations
+        const randomPattern = /^[a-zA-Z]{1,2}\s+[a-zA-Z]{1,2}(\s+[a-zA-Z]{1,2})*$/;
+        if (randomPattern.test(trimmed) && trimmed.length < 8) return true;
+        
+        // Enhanced gibberish detection
+        if (isGibberish(trimmed)) return true;
+        
+        return false;
+    };
+    
+    // Advanced gibberish detection
+    const isGibberish = (text) => {
+        if (!text || text.length < 3) return false;
+        
+        const words = text.split(/\s+/).filter(word => word.length > 0);
+        
+        // Check for excessive mixed case patterns like "Li FOR go > ips"
+        let mixedCaseWords = 0;
+        let gibberishWords = 0;
+        let totalWords = words.length;
+        
+        for (const word of words) {
+            // Skip very short words
+            if (word.length < 2) continue;
+            
+            // Check for excessive symbol contamination in words
+            const symbolsInWord = (word.match(/[^a-zA-Z0-9]/g) || []).length;
+            if (symbolsInWord / word.length > 0.3) {
+                gibberishWords++;
+                continue;
+            }
+            
+            // Check for random mixed case patterns
+            const hasRandomCase = /[a-z][A-Z]|[A-Z][a-z][A-Z]/.test(word);
+            if (hasRandomCase && word.length > 2) {
+                mixedCaseWords++;
+            }
+            
+            // Check for consonant/vowel patterns that don't make sense
+            const consonantClusters = word.match(/[bcdfghjklmnpqrstvwxzBCDFGHJKLMNPQRSTVWXZ]{4,}/g);
+            if (consonantClusters && consonantClusters.length > 0) {
+                gibberishWords++;
+                continue;
+            }
+            
+            // Check for excessive single character "words" 
+            if (word.length === 1 && /[a-zA-Z]/.test(word)) {
+                gibberishWords++;
+                continue;
+            }
+            
+            // Check for patterns like "FOR", "ips", "ED", "RE" in sequence (common OCR errors)
+            if (word.length <= 3 && word.match(/^[A-Z]{2,3}$|^[a-z]{2,3}$/)) {
+                // Count as potential gibberish if there are many of these short words
+                gibberishWords += 0.5;
+            }
+        }
+        
+        // If more than 60% of words are gibberish or mixed case, consider it gibberish
+        const gibberishRatio = gibberishWords / Math.max(totalWords, 1);
+        const mixedCaseRatio = mixedCaseWords / Math.max(totalWords, 1);
+        
+        if (gibberishRatio > 0.6) return true;
+        if (mixedCaseRatio > 0.5 && totalWords > 2) return true;
+        
+        // Check for specific gibberish patterns
+        const gibberishPatterns = [
+            // Patterns like ": Re : Bei oc oC"
+            /^[:;]\s*[A-Za-z]{1,3}\s*[:;]\s*[A-Za-z]{1,4}\s+[a-z]{1,2}\s+[a-zA-Z]{1,2}$/,
+            // Patterns like "HE — SE TL Beant 2 Es Re Se"
+            /^[A-Z]{1,3}\s*[—\-]\s*[A-Z]{1,3}\s+[A-Z]{1,3}\s+[A-Za-z]{1,6}\s+\d+\s+[A-Za-z]{1,3}\s+[A-Za-z]{1,3}\s+[A-Za-z]{1,3}$/,
+            // Patterns with excessive brackets, symbols mixed with short words
+            /[>\[\]]{2,}|[A-Za-z]{1,3}\s+[>\[\]<]+\s+[A-Za-z]{1,3}/,
+            // Excessive punctuation mixed with short letter sequences
+            /^[^a-zA-Z]*[a-zA-Z]{1,2}[^a-zA-Z]+[a-zA-Z]{1,3}[^a-zA-Z]+.*$/
+        ];
+        
+        for (const pattern of gibberishPatterns) {
+            if (pattern.test(text)) return true;
+        }
+        
+        // Check for excessive spacing patterns
+        if (/\s{3,}/.test(text)) return true;
+        
+        // Check for lines with too many single characters
+        const singleChars = text.match(/\b[a-zA-Z]\b/g);
+        if (singleChars && singleChars.length > 3 && text.length < 30) return true;
+        
+        return false;
+    };
+    
+    const hasValidNameStructure = (words) => {
+        if (!words || words.length === 0) return false;
+        
+        // Check each word for name validity
+        for (const word of words) {
+            if (!isValidName(word)) return false;
+        }
+        
+        // First word should be at least 2 characters (unless common single char)
+        const firstName = words[0];
+        const commonSingleChars = ['J', 'D', 'R', 'M', 'K', 'T', 'S', 'B', 'C', 'A'];
+        if (firstName.length === 1 && !commonSingleChars.includes(firstName.toUpperCase())) {
+            return false;
+        }
+        
+        return true;
+    };
+
+    // Helper function to clean and validate field values
+    const cleanFieldValue = (value, fieldType = 'general') => {
+        if (!value || typeof value !== 'string') return '';
+        
+        let cleaned = value.trim();
+        
+        // Remove common OCR artifacts and invalid characters
+        switch (fieldType) {
+            case 'name':
+                // For names: only letters, spaces, apostrophes, periods, hyphens
+                cleaned = cleaned.replace(/[^a-zA-Z\s'.-]/g, '');
+                // Remove excessive spaces
+                cleaned = cleaned.replace(/\s+/g, ' ');
+                // Remove leading/trailing punctuation
+                cleaned = cleaned.replace(/^[^a-zA-Z]+|[^a-zA-Z]+$/g, '');
+                break;
+                
+            case 'company':
+                // For companies: letters, numbers, spaces, common punctuation
+                cleaned = cleaned.replace(/[^a-zA-Z0-9\s&.,'-]/g, '');
+                // Remove pipe characters and equals signs that OCR often mistakes
+                cleaned = cleaned.replace(/[|="]/g, '');
+                // Remove excessive spaces
+                cleaned = cleaned.replace(/\s+/g, ' ');
+                // Remove leading/trailing punctuation except periods
+                cleaned = cleaned.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9.]+$/g, '');
+                break;
+                
+            case 'position':
+                // For positions: letters, spaces, common punctuation
+                cleaned = cleaned.replace(/[^a-zA-Z\s&.,'-]/g, '');
+                // Remove pipe characters and equals signs
+                cleaned = cleaned.replace(/[|="]/g, '');
+                // Remove excessive spaces
+                cleaned = cleaned.replace(/\s+/g, ' ');
+                // Remove leading/trailing punctuation
+                cleaned = cleaned.replace(/^[^a-zA-Z]+|[^a-zA-Z]+$/g, '');
+                break;
+                
+            case 'email':
+                // For emails: standard email characters only
+                cleaned = cleaned.replace(/[^a-zA-Z0-9@._+-]/g, '');
+                break;
+                
+            case 'phone':
+                // For phones: numbers, spaces, parentheses, hyphens, plus
+                cleaned = cleaned.replace(/[^0-9\s()+-]/g, '');
+                break;
+                
+            case 'website':
+                // For websites: standard URL characters
+                cleaned = cleaned.replace(/[^a-zA-Z0-9./:?#@!$&'()*+,;=-]/g, '');
+                break;
+                
+            default:
+                // General cleaning: remove obvious artifacts
+                cleaned = cleaned.replace(/[|="]/g, '');
+                cleaned = cleaned.replace(/\s+/g, ' ');
+        }
+        
+        // Final cleanup
+        cleaned = cleaned.trim();
+        
+        // Return empty string if result is too short or invalid
+        if (cleaned.length < 1) return '';
+        
+        return cleaned;
+    };
+
+    const parseExtractedText = (text) => {
+        const lines = text.split('\n').filter((line) => line.trim());
+        const parsed = {};
+        const unusedLines = [];
+        const usedLineIndices = new Set();
+
+        // Enhanced regex patterns
+        const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/;
+        const phoneRegex = /(?:\+?1[-.\s]?)?\(?([0-9]{3})\)?[-.\s]?([0-9]{3})[-.\s]?([0-9]{4})/;
+        const websiteRegex = /(?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?/;
+        
+        // Job title keywords for better position detection
+        const jobTitleKeywords = ['ceo', 'cto', 'cfo', 'manager', 'director', 'president', 'vice', 'senior', 'lead', 'head', 'chief', 'supervisor', 'coordinator', 'specialist', 'analyst', 'engineer', 'developer', 'designer', 'consultant', 'sales', 'marketing', 'hr', 'owner', 'founder'];
+        
+        // Company indicators
+        const companyIndicators = ['inc', 'corp', 'ltd', 'llc', 'company', 'co.', 'corporation', 'incorporated', 'limited', 'enterprises', 'group', 'solutions', 'services', 'systems', 'technologies', 'tech', 'consulting'];
+
+        // Smart field extraction with confidence scoring
+        lines.forEach((line, index) => {
+            const trimmedLine = line.trim();
+            const lowerLine = trimmedLine.toLowerCase();
+
+            // Skip obvious OCR artifacts early
+            if (isLikelyOCRArtifact(trimmedLine)) {
+                return;
+            }
+
+            // Extract email (high confidence)
+            const emailMatch = trimmedLine.match(emailRegex);
+            if (emailMatch && !parsed.email) {
+                const cleanedEmail = cleanFieldValue(emailMatch[0], 'email');
+                if (cleanedEmail) {
+                    parsed.email = cleanedEmail;
+                    usedLineIndices.add(index);
+                    return;
+                }
+            }
+
+            // Extract phone/mobile (high confidence)
+            const phoneMatch = trimmedLine.match(phoneRegex);
+            if (phoneMatch && !parsed.mobile && !parsed.phone) {
+                const cleanedPhone = cleanFieldValue(phoneMatch[0], 'phone');
+                if (cleanedPhone) {
+                    parsed.mobile = cleanedPhone;
+                    parsed.phone = cleanedPhone; // For backward compatibility
+                    usedLineIndices.add(index);
+                    return;
+                }
+            }
+
+            // Extract website (high confidence)
+            const websiteMatch = trimmedLine.match(websiteRegex);
+            if (websiteMatch && !parsed.website && !emailMatch) {
+                const cleanedWebsite = cleanFieldValue(websiteMatch[0], 'website');
+                if (cleanedWebsite) {
+                    parsed.website = cleanedWebsite;
+                    usedLineIndices.add(index);
+                    return;
+                }
+            }
+
+            // Smart name detection with enhanced validation
+            if (!parsed.firstname && !emailMatch && !phoneMatch && !websiteMatch) {
+                const words = trimmedLine.split(/\s+/).filter(word => word.length > 0);
+                const hasJobTitle = jobTitleKeywords.some(keyword => lowerLine.includes(keyword));
+                const hasCompanyIndicator = companyIndicators.some(indicator => lowerLine.includes(indicator));
+                
+                // Enhanced name validation
+                if (words.length >= 1 && words.length <= 3 && 
+                    !hasJobTitle && 
+                    !hasCompanyIndicator && 
+                    !(trimmedLine === trimmedLine.toUpperCase() && trimmedLine.length > 3) &&
+                    hasValidNameStructure(words)) {
+                    
+                    const firstName = words[0];
+                    const lastName = words.slice(1).join(' ');
+                    
+                    // Final validation for names
+                    if (isValidName(firstName) && (lastName === '' || isValidName(lastName))) {
+                        const cleanedFirstName = cleanFieldValue(firstName, 'name');
+                        const cleanedLastName = cleanFieldValue(lastName, 'name');
+                        
+                        if (cleanedFirstName) {
+                            parsed.firstname = cleanedFirstName;
+                            parsed.lastname = cleanedLastName;
+                            // For backward compatibility
+                            parsed.first_name = parsed.firstname;
+                            parsed.last_name = parsed.lastname;
+                            usedLineIndices.add(index);
+                            return;
+                        }
+                    }
+                }
+            }
+
+            // Smart position/job title detection with validation
+            if (!parsed.position) {
+                const hasJobTitle = jobTitleKeywords.some(keyword => lowerLine.includes(keyword));
+                const words = trimmedLine.split(/\s+/);
+                const letterRatio = (trimmedLine.match(/[a-zA-Z]/g) || []).length / trimmedLine.length;
+                
+                // Must have good letter ratio and reasonable length
+                if (letterRatio > 0.6 && trimmedLine.length >= 3 && trimmedLine.length <= 40 &&
+                    (hasJobTitle || (words.length >= 2 && words.length <= 6 && 
+                    !companyIndicators.some(indicator => lowerLine.includes(indicator))))) {
+                    const cleanedPosition = cleanFieldValue(trimmedLine, 'position');
+                    if (cleanedPosition) {
+                        parsed.position = cleanedPosition;
+                        usedLineIndices.add(index);
+                        return;
+                    }
+                }
+            }
+
+            // Smart company detection with validation
+            if (!parsed.company) {
+                const hasCompanyIndicator = companyIndicators.some(indicator => lowerLine.includes(indicator));
+                const isAllCaps = trimmedLine === trimmedLine.toUpperCase() && trimmedLine.length > 2;
+                const words = trimmedLine.split(/\s+/);
+                const letterRatio = (trimmedLine.match(/[a-zA-Z]/g) || []).length / trimmedLine.length;
+                
+                // Must have good letter ratio and reasonable structure
+                if (letterRatio > 0.5 && trimmedLine.length >= 2 && trimmedLine.length <= 50 &&
+                    (hasCompanyIndicator || isAllCaps || 
+                    (words.length >= 1 && words.length <= 4 && index > 0 && 
+                     !jobTitleKeywords.some(keyword => lowerLine.includes(keyword))))) {
+                    const cleanedCompany = cleanFieldValue(trimmedLine, 'company');
+                    if (cleanedCompany) {
+                        parsed.company = cleanedCompany;
+                        usedLineIndices.add(index);
+                        return;
+                    }
+                }
+            }
+        });
+
+        // Collect unused lines for manual assignment (excluding artifacts)
+        lines.forEach((line, index) => {
+            if (!usedLineIndices.has(index) && !isLikelyOCRArtifact(line.trim())) {
+                const cleanedLine = cleanFieldValue(line.trim(), 'general');
+                if (cleanedLine && cleanedLine.length > 1) {
+                    unusedLines.push({
+                        text: cleanedLine,
+                        index: index
+                    });
+                }
+            }
+        });
+
+        parsed._unusedData = unusedLines;
+        return parsed;
+    };
+
+    // Helper function to get field input type
+    const getFieldInputType = (fieldId) => {
+        const fieldTypeMap = {
+            email: 'email',
+            mobile: 'tel',
+            phone: 'tel',
+            website: 'url',
+            position: 'text',
+            company: 'text',
+            firstname: 'text',
+            lastname: 'text',
+        };
+        return fieldTypeMap[fieldId] || 'text';
+    };
+
+    // Helper function to get field icon
+    const getFieldIcon = (fieldId) => {
+        const iconMap = {
+            email: <Envelope size={16} />,
+            mobile: null,
+            phone: null,
+            website: <Network size={16} />,
+            position: null,
+            company: <Network size={16} />,
+            firstname: <Edit size={16} />,
+            lastname: <Edit size={16} />,
+        };
+        return iconMap[fieldId];
+    };
+
+    // Helper function to get field placeholder
+    const getFieldPlaceholder = (fieldId, label) => {
+        const placeholderMap = {
+            email: 'email@company.com',
+            mobile: '(555) 123-4567',
+            phone: '(555) 123-4567',
+            website: 'https://company.com',
+            position: 'Job Title',
+            company: 'Company Name',
+            firstname: 'First Name',
+            lastname: 'Last Name',
+        };
+        return placeholderMap[fieldId] || label;
+    };
+
+    // Helper function to check if form has minimum required data
+    const hasMinimumRequiredData = () => {
+        if (fields.length > 0) {
+            // Check if at least one field has data
+            return fields.some(field => extractedData[field.id]?.trim());
+        } else {
+            // Fallback for hardcoded fields
+            return extractedData.first_name?.trim() || extractedData.email?.trim();
+        }
+    };
+
+    const handleInputChange = (field, value) => {
+        setExtractedData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const handleUnusedDataClick = (text) => {
+        setSelectedUnusedText(text);
+        setShowAssignmentDropdown(true);
+    };
+
+    const assignToField = (fieldId, text) => {
+        // Update the field with the assigned text
+        setExtractedData((prev) => ({
+            ...prev,
+            [fieldId]: text,
+            _unusedData: prev._unusedData?.filter(item => item.text !== text) || []
+        }));
+        setShowAssignmentDropdown(false);
+        setSelectedUnusedText('');
+    };
+
+    const handleSave = async () => {
+        try {
+            // For now, just simulate saving and pass the data to the callback
+            // Real implementation would make API call to save contact
+            toast.success('Contact information extracted successfully!');
+
+            if (onContactSaved) {
+                onContactSaved(extractedData);
+            }
+
+            handleClose();
+        } catch (error) {
+            console.error('Save error:', error);
+            toast.error('Failed to save contact. Please try again.');
+        }
+    };
+
+    const handleClose = () => {
+        stopCamera();
+        setCapturedImage(null);
+        setExtractedData({});
+        setCurrentStep('camera');
+        setOcrProgress(0);
+        setShowAssignmentDropdown(false);
+        setSelectedUnusedText('');
+        setCurrentCameraIndex(0);
+
+        if (onClose) onClose();
+        if (onCancel) onCancel();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <motion.div
+            className={ocrStyles.modalOverlay}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+        >
+            <motion.div
+                className={ocrStyles.modalContent}
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.9, opacity: 0 }}
+            >
+                <div className={ocrStyles.modalHeader}>
+                    <h2>
+                        {currentStep === 'camera' && 'Capture Business Card'}
+                        {currentStep === 'preview' && 'Review Capture'}
+                        {currentStep === 'processing' && 'Processing...'}
+                        {currentStep === 'results' && 'Contact Information'}
+                    </h2>
+                    <button
+                        onClick={handleClose}
+                        className={ocrStyles.closeButton}
+                    >
+                        <CircleX size={24} />
+                    </button>
+                </div>
+
+                <div className={ocrStyles.modalBody}>
+                    {currentStep === 'camera' && (
+                        <div className={ocrStyles.cameraContainer}>
+                            <div className={ocrStyles.captureGuide}>
+                                <p>
+                                    Position business card within the frame
+                                </p>
+                            </div>
+                            <div className={ocrStyles.videoWrapper}>
+                                <video
+                                    ref={videoRef}
+                                    autoPlay
+                                    playsInline
+                                    muted
+                                    className={ocrStyles.cameraVideo}
+                                />
+                                <div className={ocrStyles.cameraOverlay}>
+                                </div>
+                            </div>
+
+                            <div className={ocrStyles.cameraControls}>
+                                {availableCameras.length > 1 && (
+                                    <button
+                                        onClick={switchCamera}
+                                        className={ocrStyles.secondaryButton}
+                                    >
+                                        <ArrowCycle size={20} />
+                                        Switch Camera
+                                    </button>
+                                )}
+
+                                <button
+                                    onClick={capturePhoto}
+                                    className={ocrStyles.captureButton}
+                                >
+                                    <Camera size={24} />
+                                    Capture
+                                </button>
+
+                                <input
+                                    type="file"
+                                    ref={fileInputRef}
+                                    onChange={handleFileUpload}
+                                    accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
+                                    style={{ display: 'none' }}
+                                />
+                                <button
+                                    onClick={() =>
+                                        fileInputRef.current?.click()
+                                    }
+                                    className={ocrStyles.secondaryButton}
+                                >
+                                    <ImageIcon size={24} />
+                                    Upload Image
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {currentStep === 'preview' && capturedImage && (
+                        <div className={ocrStyles.previewContainer}>
+                            <div className={ocrStyles.imagePreview}>
+                                <img
+                                    src={URL.createObjectURL(capturedImage)}
+                                    alt="Captured business card"
+                                    className={ocrStyles.previewImage}
+                                />
+                            </div>
+
+                            <div className={ocrStyles.previewControls}>
+                                <button
+                                    onClick={retakePhoto}
+                                    className={ocrStyles.secondaryButton}
+                                >
+                                    <ArrowCounterClockwise size={20} />
+                                    Retake
+                                </button>
+
+                                <button
+                                    onClick={processBusinessCard}
+                                    disabled={isProcessing}
+                                    className={ocrStyles.primaryButton}
+                                >
+                                    <CircleCheck size={20} />
+                                    Process Card
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {currentStep === 'processing' && (
+                        <div className={ocrStyles.processingContainer}>
+                            <div className={ocrStyles.loadingSpinner}></div>
+                            <p>Extracting contact information...</p>
+                            <div className={ocrStyles.progressBar}>
+                                <div
+                                    className={ocrStyles.progressFill}
+                                    style={{ width: `${ocrProgress}%` }}
+                                ></div>
+                            </div>
+                            <small>{ocrProgress}% complete</small>
+                        </div>
+                    )}
+
+                    {currentStep === 'results' && (
+                        <div className={ocrStyles.contactForm}>
+                            <div className={ocrStyles.formGrid}>
+                                {fields.length > 0 ? (
+                                    fields.map((field) => (
+                                        <div key={field.id} className={ocrStyles.fieldGroup}>
+                                            <label>
+                                                {getFieldIcon(field.id)}
+                                                {field.label}
+                                            </label>
+                                            <input
+                                                type={getFieldInputType(field.id)}
+                                                value={extractedData[field.id] || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        field.id,
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder={getFieldPlaceholder(field.id, field.label)}
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                    ))
+                                ) : (
+                                    // Fallback to original hardcoded fields if no fields config provided
+                                    <>
+                                        <div className={ocrStyles.fieldGroup}>
+                                            <label>
+                                                <Edit size={16} />
+                                                First Name
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={extractedData.first_name || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        'first_name',
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder="First Name"
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                        <div className={ocrStyles.fieldGroup}>
+                                            <label>
+                                                <Edit size={16} />
+                                                Last Name
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={extractedData.last_name || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        'last_name',
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder="Last Name"
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                        <div className={ocrStyles.fieldGroup}>
+                                            <label>
+                                                <Envelope size={16} />
+                                                Email
+                                            </label>
+                                            <input
+                                                type="email"
+                                                value={extractedData.email || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        'email',
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder="email@company.com"
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                        <div className={ocrStyles.fieldGroup}>
+                                            <label>Phone</label>
+                                            <input
+                                                type="tel"
+                                                value={extractedData.phone || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        'phone',
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder="(555) 123-4567"
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                        <div className={ocrStyles.fieldGroup}>
+                                            <label>
+                                                <Network size={16} />
+                                                Company
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={extractedData.company || ''}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        'company',
+                                                        e.target.value
+                                                    )
+                                                }
+                                                placeholder="Company Name"
+                                                className={ocrStyles.inputField}
+                                            />
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+
+                            {extractedData._unusedData && extractedData._unusedData.length > 0 && (
+                                <div className={ocrStyles.unusedDataSection}>
+                                    <h4>Unassigned Data</h4>
+                                    <p>The following text wasn't automatically assigned. Drag or click to assign to a field:</p>
+                                    <div className={ocrStyles.unusedDataGrid}>
+                                        {extractedData._unusedData.map((item, index) => (
+                                            <div 
+                                                key={`unused-${index}`} 
+                                                className={ocrStyles.unusedDataItem}
+                                                onClick={() => handleUnusedDataClick(item.text)}
+                                            >
+                                                {item.text}
+                                            </div>
+                                        ))}
+                                    </div>
+                                    {showAssignmentDropdown && (
+                                        <div className={ocrStyles.assignmentDropdown}>
+                                            <p>Assign "{selectedUnusedText}" to:</p>
+                                            <div className={ocrStyles.assignmentOptions}>
+                                                {fields.map((field) => (
+                                                    <button
+                                                        key={field.id}
+                                                        onClick={() => assignToField(field.id, selectedUnusedText)}
+                                                        className={ocrStyles.assignmentOption}
+                                                    >
+                                                        {field.label}
+                                                    </button>
+                                                ))}
+                                            </div>
+                                            <button 
+                                                onClick={() => setShowAssignmentDropdown(false)}
+                                                className={ocrStyles.cancelAssignment}
+                                            >
+                                                Cancel
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+
+                            {extractedData.rawText && (
+                                <details className={ocrStyles.rawTextSection}>
+                                    <summary className={ocrStyles.rawTextSummary}>
+                                        <span className={ocrStyles.summaryText}>
+                                            📄 Raw Extracted Text
+                                        </span>
+                                        <span className={ocrStyles.summaryHint}>
+                                            (Click to expand)
+                                        </span>
+                                        <span className={ocrStyles.expandIcon}>▶</span>
+                                    </summary>
+                                    <div className={ocrStyles.rawTextContent}>
+                                        {extractedData.rawText}
+                                    </div>
+                                </details>
+                            )}
+
+                            <div className={ocrStyles.formActions}>
+                                <button
+                                    onClick={retakePhoto}
+                                    className={ocrStyles.secondaryButton}
+                                >
+                                    <ImageIcon size={20} />
+                                    Scan Another
+                                </button>
+
+                                <button
+                                    onClick={handleSave}
+                                    className={ocrStyles.primaryButton}
+                                    disabled={!hasMinimumRequiredData()}
+                                >
+                                    Save Contact
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <canvas ref={canvasRef} style={{ display: 'none' }} />
+            </motion.div>
+        </motion.div>
+    );
+};
+
+export default BusinessCardOcr;