@visns-studio/visns-components 5.9.6 → 5.9.8

package/src/components/crm/BusinessCardOcr.jsx

@@ -0,0 +1,2376 @@
+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 CustomFetch from './Fetch';
+import ocrStyles from './styles/BusinessCardOcr.module.scss';
+
+const BusinessCardOcr = ({
+    onContactSaved,
+    onCancel,
+    isOpen = false,
+    onClose,
+    fields = [],
+    fetchConfig = null, // { url, method } from Navigation settings
+}) => {
+    const [currentStep, setCurrentStep] = useState('camera'); // camera, preview, processing, results, consultation, decisions
+    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 [backendResponse, setBackendResponse] = useState(null);
+    const [selectedClient, setSelectedClient] = useState(null);
+    const [contactDecision, setContactDecision] = useState(null); // 'create', 'update', 'merge'
+    const [isConsulting, setIsConsulting] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    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('');
+    };
+
+    // Backend consultation step
+    const consultBackend = async () => {
+        if (!fetchConfig?.url) {
+            // Fallback to direct save if no backend configuration
+            return handleDirectSave();
+        }
+
+        setIsConsulting(true);
+        setCurrentStep('consultation');
+
+        try {
+            const response = await CustomFetch(
+                fetchConfig.url,
+                fetchConfig.method || 'POST',
+                extractedData
+            );
+
+            if (!response.data.success) {
+                throw new Error(
+                    response.data.message || 'Backend consultation failed'
+                );
+            }
+
+            setBackendResponse(response.data.data);
+
+            // Determine next step based on recommendations
+            const recommendations = response.data.data.recommendations || [];
+            if (recommendations.length > 0) {
+                setCurrentStep('decisions');
+            } else {
+                // No conflicts, proceed to direct save
+                await handleFinalSave();
+            }
+        } catch (error) {
+            console.error('Backend consultation error:', error);
+            toast.error(
+                'Failed to check for existing contacts. Proceeding with direct save.'
+            );
+            await handleDirectSave();
+        } finally {
+            setIsConsulting(false);
+        }
+    };
+
+    // Direct save for fallback scenarios
+    const handleDirectSave = async () => {
+        try {
+            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.');
+        }
+    };
+
+    // Final save after user decisions
+    const handleFinalSave = async () => {
+        setIsSaving(true);
+
+        try {
+            // Prepare final data based on user decisions
+            const finalData = {
+                ...extractedData,
+                _clientDecision: selectedClient,
+                _contactDecision: contactDecision,
+                _backendResponse: backendResponse,
+            };
+
+            if (
+                fetchConfig?.url &&
+                fetchConfig?.url.includes('processBusinessCard')
+            ) {
+                // Make actual API call to save contact
+                const saveUrl = fetchConfig.url.replace(
+                    'processBusinessCard',
+                    'saveContact'
+                );
+
+                const response = await CustomFetch(saveUrl, 'POST', finalData);
+
+                if (!response.data.success) {
+                    throw new Error(response.data.message || 'Failed to save contact');
+                }
+
+                toast.success(response.data.message || 'Contact saved successfully!');
+
+                if (onContactSaved) {
+                    onContactSaved({
+                        ...finalData,
+                        _savedContact: response.data.data.contact,
+                        _actionTaken: response.data.data.action_taken,
+                        _clientAction: response.data.data.client_action,
+                    });
+                }
+            } else {
+                // Fallback to callback only
+                toast.success('Contact saved successfully!');
+
+                if (onContactSaved) {
+                    onContactSaved(finalData);
+                }
+            }
+
+            handleClose();
+        } catch (error) {
+            console.error('Final save error:', error);
+            toast.error('Failed to save contact. Please try again.');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    // Main save handler - "Next" triggers consultation, "Save Contact" does direct save
+    const handleSave = async () => {
+        if (fetchConfig?.url) {
+            // With backend: "Next" → Consultation → Decisions → "Confirm & Save"
+            await consultBackend();
+        } else {
+            // Without backend: "Save Contact" → Direct save
+            await handleDirectSave();
+        }
+    };
+
+    const handleClose = () => {
+        stopCamera();
+        setCapturedImage(null);
+        setExtractedData({});
+        setCurrentStep('camera');
+        setOcrProgress(0);
+        setShowAssignmentDropdown(false);
+        setSelectedUnusedText('');
+        setCurrentCameraIndex(0);
+        setBackendResponse(null);
+        setSelectedClient(null);
+        setContactDecision(null);
+        setIsConsulting(false);
+        setIsSaving(false);
+
+        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'}
+                        {currentStep === 'consultation' &&
+                            'Checking for Duplicates...'}
+                        {currentStep === 'decisions' && 'Resolve Conflicts'}
+                    </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() ||
+                                        isConsulting
+                                    }
+                                >
+                                    {isConsulting
+                                        ? 'Checking...'
+                                        : fetchConfig?.url
+                                        ? 'Next'
+                                        : 'Save Contact'}
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {currentStep === 'consultation' && (
+                        <div className={ocrStyles.processingContainer}>
+                            <div className={ocrStyles.loadingSpinner}></div>
+                            <p>
+                                Checking for existing companies and contacts...
+                            </p>
+                            <small>
+                                Searching for potential matches to avoid
+                                duplicates
+                            </small>
+                        </div>
+                    )}
+
+                    {currentStep === 'decisions' && backendResponse && (
+                        <div className={ocrStyles.decisionsContainer}>
+                            {backendResponse.recommendations?.map(
+                                (recommendation, index) => (
+                                    <div
+                                        key={index}
+                                        className={ocrStyles.recommendationCard}
+                                    >
+                                        {recommendation.type ===
+                                            'existing_contact' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.existingContactCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ⚠️ Contact Already
+                                                        Exists
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.contactDetails
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            ocrStyles.existingContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Existing Contact:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>
+                                                                Name:
+                                                            </strong>{' '}
+                                                            {
+                                                                recommendation
+                                                                    .data
+                                                                    .firstname
+                                                            }{' '}
+                                                            {
+                                                                recommendation
+                                                                    .data
+                                                                    .surname
+                                                            }
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Email:
+                                                            </strong>{' '}
+                                                            {
+                                                                recommendation
+                                                                    .data.email
+                                                            }
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Mobile:
+                                                            </strong>{' '}
+                                                            {recommendation.data
+                                                                .mobile ||
+                                                                'N/A'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Position:
+                                                            </strong>{' '}
+                                                            {recommendation.data
+                                                                .position ||
+                                                                'N/A'}
+                                                        </p>
+                                                        {recommendation.data
+                                                            .client && (
+                                                            <p>
+                                                                <strong>
+                                                                    Company:
+                                                                </strong>{' '}
+                                                                {
+                                                                    recommendation
+                                                                        .data
+                                                                        .client
+                                                                        .name
+                                                                }
+                                                            </p>
+                                                        )}
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            ocrStyles.newContact
+                                                        }
+                                                    >
+                                                        <h4>New Data:</h4>
+                                                        <p>
+                                                            <strong>
+                                                                Name:
+                                                            </strong>{' '}
+                                                            {
+                                                                extractedData.firstname
+                                                            }{' '}
+                                                            {
+                                                                extractedData.surname
+                                                            }
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Email:
+                                                            </strong>{' '}
+                                                            {
+                                                                extractedData.email
+                                                            }
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Mobile:
+                                                            </strong>{' '}
+                                                            {extractedData.mobile ||
+                                                                'N/A'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Position:
+                                                            </strong>{' '}
+                                                            {extractedData.position ||
+                                                                'N/A'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Company:
+                                                            </strong>{' '}
+                                                            {extractedData.company ||
+                                                                'N/A'}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.decisionButtons
+                                                    }
+                                                >
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'update'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() =>
+                                                            setContactDecision(
+                                                                'update'
+                                                            )
+                                                        }
+                                                    >
+                                                        Update Existing Contact
+                                                    </button>
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'create'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() =>
+                                                            setContactDecision(
+                                                                'create'
+                                                            )
+                                                        }
+                                                    >
+                                                        Create New Contact
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'similar_clients' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.clientSuggestionsCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        🔍 Similar Companies
+                                                        Found
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.clientSuggestions
+                                                    }
+                                                >
+                                                    {recommendation.suggestions.map(
+                                                        (
+                                                            client,
+                                                            clientIndex
+                                                        ) => (
+                                                            <div
+                                                                key={
+                                                                    clientIndex
+                                                                }
+                                                                className={`${
+                                                                    ocrStyles.clientOption
+                                                                } ${
+                                                                    selectedClient?.id ===
+                                                                    client.id
+                                                                        ? ocrStyles.selected
+                                                                        : ''
+                                                                }`}
+                                                                onClick={() =>
+                                                                    setSelectedClient(
+                                                                        client
+                                                                    )
+                                                                }
+                                                            >
+                                                                <div
+                                                                    className={
+                                                                        ocrStyles.clientInfo
+                                                                    }
+                                                                >
+                                                                    <strong>
+                                                                        {
+                                                                            client.name
+                                                                        }
+                                                                    </strong>
+                                                                    <span
+                                                                        className={
+                                                                            ocrStyles.similarity
+                                                                        }
+                                                                    >
+                                                                        {Math.round(
+                                                                            client.similarity
+                                                                        )}
+                                                                        % match
+                                                                    </span>
+                                                                    {client.abn && (
+                                                                        <small>
+                                                                            ABN:{' '}
+                                                                            {
+                                                                                client.abn
+                                                                            }
+                                                                        </small>
+                                                                    )}
+                                                                </div>
+                                                            </div>
+                                                        )
+                                                    )}
+                                                    <div
+                                                        className={`${
+                                                            ocrStyles.clientOption
+                                                        } ${
+                                                            ocrStyles.newClientOption
+                                                        } ${
+                                                            selectedClient?.isNew
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() =>
+                                                            setSelectedClient({
+                                                                isNew: true,
+                                                                name: extractedData.company,
+                                                            })
+                                                        }
+                                                    >
+                                                        <div
+                                                            className={
+                                                                ocrStyles.clientInfo
+                                                            }
+                                                        >
+                                                            <strong>
+                                                                Create New
+                                                                Company: "
+                                                                {
+                                                                    extractedData.company
+                                                                }
+                                                                "
+                                                            </strong>
+                                                            <span
+                                                                className={
+                                                                    ocrStyles.similarity
+                                                                }
+                                                            >
+                                                                New
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'new_contact_existing_client' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.existingClientCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ✅ Perfect Company Match
+                                                    </h3>
+                                                    <p>
+                                                        Create new contact for
+                                                        existing company:{' '}
+                                                        <strong>
+                                                            {
+                                                                backendResponse
+                                                                    .client_exact_match
+                                                                    ?.name
+                                                            }
+                                                        </strong>
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.autoSelected
+                                                    }
+                                                >
+                                                    Company automatically
+                                                    selected. Contact will be
+                                                    created.
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'new_client_and_contact' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.newBothCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        🆕 New Company & Contact
+                                                    </h3>
+                                                    <p>
+                                                        No matches found. Will
+                                                        create new company and
+                                                        contact.
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.autoSelected
+                                                    }
+                                                >
+                                                    New company "
+                                                    {extractedData.company}" and
+                                                    contact will be created.
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'contact_exists_different_client' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.conflictCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ⚠️ Contact & Company Conflict
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.contactDetails
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            ocrStyles.existingContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Existing Contact:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>Name:</strong>{' '}
+                                                            {recommendation.contact.firstname} {recommendation.contact.surname}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Company:</strong>{' '}
+                                                            {recommendation.contact.client?.name || 'No company'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Email:</strong>{' '}
+                                                            {recommendation.contact.email}
+                                                        </p>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            ocrStyles.newContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Matched Company:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>Company:</strong>{' '}
+                                                            {recommendation.matched_client.name}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Scanned Email:</strong>{' '}
+                                                            {extractedData.email}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.decisionButtons
+                                                    }
+                                                >
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'update'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => {
+                                                            setContactDecision('update');
+                                                            setSelectedClient(recommendation.matched_client);
+                                                        }}
+                                                    >
+                                                        Move Contact to Matched Company
+                                                    </button>
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'create'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => {
+                                                            setContactDecision('create');
+                                                            setSelectedClient(recommendation.matched_client);
+                                                        }}
+                                                    >
+                                                        Create New Contact for Matched Company
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'contact_with_suggested_clients' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.existingContactCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ✅ Contact Found in Suggested Companies
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.contactDetails
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            ocrStyles.existingContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Existing Contact:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>Name:</strong>{' '}
+                                                            {recommendation.contact.firstname} {recommendation.contact.surname}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Company:</strong>{' '}
+                                                            {recommendation.contact.client?.name}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Email:</strong>{' '}
+                                                            {recommendation.contact.email}
+                                                        </p>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            ocrStyles.newContact
+                                                        }
+                                                    >
+                                                        <h4>New Data:</h4>
+                                                        <p>
+                                                            <strong>Name:</strong>{' '}
+                                                            {extractedData.firstname} {extractedData.surname}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Position:</strong>{' '}
+                                                            {extractedData.position || 'N/A'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Mobile:</strong>{' '}
+                                                            {extractedData.mobile || 'N/A'}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.decisionButtons
+                                                    }
+                                                >
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'update'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => {
+                                                            setContactDecision('update');
+                                                            setSelectedClient(recommendation.contact.client);
+                                                        }}
+                                                    >
+                                                        Update Existing Contact
+                                                    </button>
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'create'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => {
+                                                            setContactDecision('create');
+                                                        }}
+                                                    >
+                                                        Create New Contact
+                                                    </button>
+                                                </div>
+                                                
+                                                {/* Show client suggestions below */}
+                                                <div className={ocrStyles.clientSuggestions} style={{marginTop: '1rem'}}>
+                                                    <h4>Company Options:</h4>
+                                                    {recommendation.suggestions.map((client, clientIndex) => (
+                                                        <div 
+                                                            key={clientIndex} 
+                                                            className={`${ocrStyles.clientOption} ${selectedClient?.id === client.id ? ocrStyles.selected : ''}`}
+                                                            onClick={() => setSelectedClient(client)}
+                                                        >
+                                                            <div className={ocrStyles.clientInfo}>
+                                                                <strong>{client.name}</strong>
+                                                                <span className={ocrStyles.similarity}>{Math.round(client.similarity)}% match</span>
+                                                                {client.abn && <small>ABN: {client.abn}</small>}
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'contact_exists_with_client_suggestions' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.conflictCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ⚠️ Complex Contact & Company Conflict
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.contactDetails
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            ocrStyles.existingContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Existing Contact:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>Name:</strong>{' '}
+                                                            {recommendation.contact.firstname} {recommendation.contact.surname}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Company:</strong>{' '}
+                                                            {recommendation.contact.client?.name || 'No company'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Email:</strong>{' '}
+                                                            {recommendation.contact.email}
+                                                        </p>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            ocrStyles.newContact
+                                                        }
+                                                    >
+                                                        <h4>Scanned Card Data:</h4>
+                                                        <p>
+                                                            <strong>Name:</strong>{' '}
+                                                            {extractedData.firstname} {extractedData.surname}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Company:</strong>{' '}
+                                                            {extractedData.company}
+                                                        </p>
+                                                        <p>
+                                                            <strong>Email:</strong>{' '}
+                                                            {extractedData.email}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                
+                                                {/* Show client suggestions */}
+                                                <div className={ocrStyles.clientSuggestions} style={{margin: '1rem 0'}}>
+                                                    <h4>Similar Companies Found:</h4>
+                                                    {recommendation.suggestions.map((client, clientIndex) => (
+                                                        <div 
+                                                            key={clientIndex} 
+                                                            className={`${ocrStyles.clientOption} ${selectedClient?.id === client.id ? ocrStyles.selected : ''}`}
+                                                            onClick={() => setSelectedClient(client)}
+                                                        >
+                                                            <div className={ocrStyles.clientInfo}>
+                                                                <strong>{client.name}</strong>
+                                                                <span className={ocrStyles.similarity}>{Math.round(client.similarity)}% match</span>
+                                                                {client.abn && <small>ABN: {client.abn}</small>}
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                    <div 
+                                                        className={`${ocrStyles.clientOption} ${ocrStyles.newClientOption} ${selectedClient?.isNew ? ocrStyles.selected : ''}`}
+                                                        onClick={() => setSelectedClient({ isNew: true, name: extractedData.company })}
+                                                    >
+                                                        <div className={ocrStyles.clientInfo}>
+                                                            <strong>Create New Company: "{extractedData.company}"</strong>
+                                                            <span className={ocrStyles.similarity}>New</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        ocrStyles.decisionButtons
+                                                    }
+                                                >
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'update'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => setContactDecision('update')}
+                                                    >
+                                                        Update Contact's Company
+                                                    </button>
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'create'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() => setContactDecision('create')}
+                                                    >
+                                                        Create New Contact
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {recommendation.type ===
+                                            'contact_exists_no_client_match' && (
+                                            <div
+                                                className={
+                                                    ocrStyles.conflictCard
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        ocrStyles.cardHeader
+                                                    }
+                                                >
+                                                    <h3>
+                                                        ⚠️ Contact Exists with
+                                                        Different Company
+                                                    </h3>
+                                                    <p>
+                                                        {recommendation.message}
+                                                    </p>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.contactDetails
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            ocrStyles.existingContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Existing Contact:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>
+                                                                Company:
+                                                            </strong>{' '}
+                                                            {recommendation
+                                                                .contact.client
+                                                                ?.name ||
+                                                                'No company'}
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Email:
+                                                            </strong>{' '}
+                                                            {
+                                                                recommendation
+                                                                    .contact
+                                                                    .email
+                                                            }
+                                                        </p>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            ocrStyles.newContact
+                                                        }
+                                                    >
+                                                        <h4>
+                                                            Scanned Card Says:
+                                                        </h4>
+                                                        <p>
+                                                            <strong>
+                                                                Company:
+                                                            </strong>{' '}
+                                                            {
+                                                                extractedData.company
+                                                            }
+                                                        </p>
+                                                        <p>
+                                                            <strong>
+                                                                Email:
+                                                            </strong>{' '}
+                                                            {
+                                                                extractedData.email
+                                                            }
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        ocrStyles.decisionButtons
+                                                    }
+                                                >
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'update'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() =>
+                                                            setContactDecision(
+                                                                'update'
+                                                            )
+                                                        }
+                                                    >
+                                                        Update Contact's Company
+                                                    </button>
+                                                    <button
+                                                        className={`${
+                                                            ocrStyles.decisionButton
+                                                        } ${
+                                                            contactDecision ===
+                                                            'create'
+                                                                ? ocrStyles.selected
+                                                                : ''
+                                                        }`}
+                                                        onClick={() =>
+                                                            setContactDecision(
+                                                                'create'
+                                                            )
+                                                        }
+                                                    >
+                                                        Create New Contact
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                )
+                            )}
+
+                            <div className={ocrStyles.decisionActions}>
+                                <button
+                                    onClick={() => setCurrentStep('results')}
+                                    className={ocrStyles.secondaryButton}
+                                >
+                                    Back to Edit
+                                </button>
+                                <button
+                                    onClick={handleFinalSave}
+                                    className={ocrStyles.primaryButton}
+                                    disabled={
+                                        isSaving ||
+                                        (!selectedClient &&
+                                            !contactDecision &&
+                                            backendResponse.recommendations?.some(
+                                                (r) =>
+                                                    [
+                                                        'similar_clients',
+                                                        'existing_contact',
+                                                        'contact_exists_no_client_match',
+                                                    ].includes(r.type)
+                                            ))
+                                    }
+                                >
+                                    {isSaving ? 'Saving...' : 'Confirm & Save'}
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <canvas ref={canvasRef} style={{ display: 'none' }} />
+            </motion.div>
+        </motion.div>
+    );
+};
+
+export default BusinessCardOcr;