@visns-studio/visns-components 5.9.7 → 5.9.9

package/src/components/crm/BusinessCardOcr.jsx

@@ -17,6 +17,7 @@ import {
     Plus,
 } from 'akar-icons';
 
+import CustomFetch from './Fetch';
 import ocrStyles from './styles/BusinessCardOcr.module.scss';
 
 const BusinessCardOcr = ({
@@ -25,8 +26,9 @@ const BusinessCardOcr = ({
     isOpen = false,
     onClose,
     fields = [],
+    fetchConfig = null, // { url, method } from Navigation settings
 }) => {
-    const [currentStep, setCurrentStep] = useState('camera'); // camera, preview, processing, results
+    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)
@@ -37,6 +39,11 @@ const BusinessCardOcr = ({
     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);
@@ -49,6 +56,7 @@ const BusinessCardOcr = ({
         }
     }, [isOpen]);
 
+
     // Initialize camera when component opens
     useEffect(() => {
         if (isOpen && currentStep === 'camera') {
@@ -57,32 +65,44 @@ const BusinessCardOcr = ({
         return () => {
             stopCamera();
         };
-    }, [isOpen, currentStep, cameraFacing, currentCameraIndex, availableCameras]);
+    }, [
+        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());
+                    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);
+                    console.warn(
+                        `Camera ${
+                            device.label || device.deviceId
+                        } not accessible:`,
+                        err
+                    );
                 }
             }
-            
+
             setAvailableCameras(workingCameras);
         } catch (error) {
             console.error('Error detecting cameras:', error);
@@ -93,12 +113,18 @@ const BusinessCardOcr = ({
     const initializeCamera = async () => {
         try {
             let constraints;
-            
+
             // Use specific device if available cameras are detected
-            if (availableCameras.length > 0 && availableCameras[currentCameraIndex]) {
+            if (
+                availableCameras.length > 0 &&
+                availableCameras[currentCameraIndex]
+            ) {
                 constraints = {
                     video: {
-                        deviceId: { exact: availableCameras[currentCameraIndex].deviceId },
+                        deviceId: {
+                            exact: availableCameras[currentCameraIndex]
+                                .deviceId,
+                        },
                         width: { ideal: 1280 },
                         height: { ideal: 720 },
                     },
@@ -114,7 +140,9 @@ const BusinessCardOcr = ({
                 };
             }
 
-            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            const stream = await navigator.mediaDevices.getUserMedia(
+                constraints
+            );
             setCameraStream(stream);
 
             if (videoRef.current) {
@@ -157,8 +185,8 @@ const BusinessCardOcr = ({
 
     const switchCamera = () => {
         if (availableCameras.length > 1) {
-            setCurrentCameraIndex((prev) => 
-                (prev + 1) % availableCameras.length
+            setCurrentCameraIndex(
+                (prev) => (prev + 1) % availableCameras.length
             );
         } else {
             // Fallback to facing mode switch
@@ -175,47 +203,53 @@ const BusinessCardOcr = ({
 
     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.');
+            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() {
+        img.onload = function () {
             if (this.width < 100 || this.height < 100) {
-                toast.error('Image is too small. Please select a larger image.');
+                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.');
+
+        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 = '';
     };
@@ -255,40 +289,54 @@ const BusinessCardOcr = ({
     // 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())) {
+        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;
@@ -298,85 +346,94 @@ const BusinessCardOcr = ({
         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;
-        
+        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*$/;
+        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})*$/;
+        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);
-        
+
+        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);
+            const consonantClusters = word.match(
+                /[bcdfghjklmnpqrstvwxzBCDFGHJKLMNPQRSTVWXZ]{4,}/g
+            );
             if (consonantClusters && consonantClusters.length > 0) {
                 gibberishWords++;
                 continue;
             }
-            
-            // Check for excessive single character "words" 
+
+            // 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"
@@ -386,47 +443,62 @@ const BusinessCardOcr = ({
             // 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]+.*$/
+            /^[^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;
-        
+        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())) {
+        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':
@@ -437,7 +509,7 @@ const BusinessCardOcr = ({
                 // 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, '');
@@ -446,9 +518,12 @@ const BusinessCardOcr = ({
                 // 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, '');
+                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, '');
@@ -459,34 +534,37 @@ const BusinessCardOcr = ({
                 // 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, '');
+                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;
     };
 
@@ -497,15 +575,61 @@ const BusinessCardOcr = ({
         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,})?/;
-        
+        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'];
-        
+        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'];
+        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) => {
@@ -543,7 +667,10 @@ const BusinessCardOcr = ({
             // Extract website (high confidence)
             const websiteMatch = trimmedLine.match(websiteRegex);
             if (websiteMatch && !parsed.website && !emailMatch) {
-                const cleanedWebsite = cleanFieldValue(websiteMatch[0], 'website');
+                const cleanedWebsite = cleanFieldValue(
+                    websiteMatch[0],
+                    'website'
+                );
                 if (cleanedWebsite) {
                     parsed.website = cleanedWebsite;
                     usedLineIndices.add(index);
@@ -552,26 +679,51 @@ const BusinessCardOcr = ({
             }
 
             // 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));
-                
+            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)) {
-                    
+                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 (
+                        isValidName(firstName) &&
+                        (lastName === '' || isValidName(lastName))
+                    ) {
+                        const cleanedFirstName = cleanFieldValue(
+                            firstName,
+                            'name'
+                        );
+                        const cleanedLastName = cleanFieldValue(
+                            lastName,
+                            'name'
+                        );
+
                         if (cleanedFirstName) {
                             parsed.firstname = cleanedFirstName;
                             parsed.lastname = cleanedLastName;
@@ -587,15 +739,30 @@ const BusinessCardOcr = ({
 
             // Smart position/job title detection with validation
             if (!parsed.position) {
-                const hasJobTitle = jobTitleKeywords.some(keyword => lowerLine.includes(keyword));
+                const hasJobTitle = jobTitleKeywords.some((keyword) =>
+                    lowerLine.includes(keyword)
+                );
                 const words = trimmedLine.split(/\s+/);
-                const letterRatio = (trimmedLine.match(/[a-zA-Z]/g) || []).length / trimmedLine.length;
-                
+                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 (
+                    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);
@@ -606,17 +773,35 @@ const BusinessCardOcr = ({
 
             // 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 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;
-                
+                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 (
+                    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);
@@ -628,12 +813,15 @@ const BusinessCardOcr = ({
 
         // Collect unused lines for manual assignment (excluding artifacts)
         lines.forEach((line, index) => {
-            if (!usedLineIndices.has(index) && !isLikelyOCRArtifact(line.trim())) {
+            if (
+                !usedLineIndices.has(index) &&
+                !isLikelyOCRArtifact(line.trim())
+            ) {
                 const cleanedLine = cleanFieldValue(line.trim(), 'general');
                 if (cleanedLine && cleanedLine.length > 1) {
                     unusedLines.push({
                         text: cleanedLine,
-                        index: index
+                        index: index,
                     });
                 }
             }
@@ -692,10 +880,12 @@ const BusinessCardOcr = ({
     const hasMinimumRequiredData = () => {
         if (fields.length > 0) {
             // Check if at least one field has data
-            return fields.some(field => extractedData[field.id]?.trim());
+            return fields.some((field) => extractedData[field.id]?.trim());
         } else {
             // Fallback for hardcoded fields
-            return extractedData.first_name?.trim() || extractedData.email?.trim();
+            return (
+                extractedData.first_name?.trim() || extractedData.email?.trim()
+            );
         }
     };
 
@@ -713,16 +903,60 @@ const BusinessCardOcr = ({
         setExtractedData((prev) => ({
             ...prev,
             [fieldId]: text,
-            _unusedData: prev._unusedData?.filter(item => item.text !== text) || []
+            _unusedData:
+                prev._unusedData?.filter((item) => item.text !== text) || [],
         }));
         setShowAssignmentDropdown(false);
         setSelectedUnusedText('');
     };
 
-    const handleSave = async () => {
+    // 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 {
-            // For now, just simulate saving and pass the data to the callback
-            // Real implementation would make API call to save contact
             toast.success('Contact information extracted successfully!');
 
             if (onContactSaved) {
@@ -736,6 +970,74 @@ const BusinessCardOcr = ({
         }
     };
 
+    // 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);
@@ -745,6 +1047,11 @@ const BusinessCardOcr = ({
         setShowAssignmentDropdown(false);
         setSelectedUnusedText('');
         setCurrentCameraIndex(0);
+        setBackendResponse(null);
+        setSelectedClient(null);
+        setContactDecision(null);
+        setIsConsulting(false);
+        setIsSaving(false);
 
         if (onClose) onClose();
         if (onCancel) onCancel();
@@ -771,6 +1078,9 @@ const BusinessCardOcr = ({
                         {currentStep === 'preview' && 'Review Capture'}
                         {currentStep === 'processing' && 'Processing...'}
                         {currentStep === 'results' && 'Contact Information'}
+                        {currentStep === 'consultation' &&
+                            'Checking for Duplicates...'}
+                        {currentStep === 'decisions' && 'Resolve Conflicts'}
                     </h2>
                     <button
                         onClick={handleClose}
@@ -784,9 +1094,7 @@ const BusinessCardOcr = ({
                     {currentStep === 'camera' && (
                         <div className={ocrStyles.cameraContainer}>
                             <div className={ocrStyles.captureGuide}>
-                                <p>
-                                    Position business card within the frame
-                                </p>
+                                <p>Position business card within the frame</p>
                             </div>
                             <div className={ocrStyles.videoWrapper}>
                                 <video
@@ -796,8 +1104,7 @@ const BusinessCardOcr = ({
                                     muted
                                     className={ocrStyles.cameraVideo}
                                 />
-                                <div className={ocrStyles.cameraOverlay}>
-                                </div>
+                                <div className={ocrStyles.cameraOverlay}></div>
                             </div>
 
                             <div className={ocrStyles.cameraControls}>
@@ -889,21 +1196,32 @@ const BusinessCardOcr = ({
                             <div className={ocrStyles.formGrid}>
                                 {fields.length > 0 ? (
                                     fields.map((field) => (
-                                        <div key={field.id} className={ocrStyles.fieldGroup}>
+                                        <div
+                                            key={field.id}
+                                            className={ocrStyles.fieldGroup}
+                                        >
                                             <label>
                                                 {getFieldIcon(field.id)}
                                                 {field.label}
                                             </label>
                                             <input
-                                                type={getFieldInputType(field.id)}
-                                                value={extractedData[field.id] || ''}
+                                                type={getFieldInputType(
+                                                    field.id
+                                                )}
+                                                value={
+                                                    extractedData[field.id] ||
+                                                    ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         field.id,
                                                         e.target.value
                                                     )
                                                 }
-                                                placeholder={getFieldPlaceholder(field.id, field.label)}
+                                                placeholder={getFieldPlaceholder(
+                                                    field.id,
+                                                    field.label
+                                                )}
                                                 className={ocrStyles.inputField}
                                             />
                                         </div>
@@ -918,7 +1236,10 @@ const BusinessCardOcr = ({
                                             </label>
                                             <input
                                                 type="text"
-                                                value={extractedData.first_name || ''}
+                                                value={
+                                                    extractedData.first_name ||
+                                                    ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         'first_name',
@@ -936,7 +1257,10 @@ const BusinessCardOcr = ({
                                             </label>
                                             <input
                                                 type="text"
-                                                value={extractedData.last_name || ''}
+                                                value={
+                                                    extractedData.last_name ||
+                                                    ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         'last_name',
@@ -954,7 +1278,9 @@ const BusinessCardOcr = ({
                                             </label>
                                             <input
                                                 type="email"
-                                                value={extractedData.email || ''}
+                                                value={
+                                                    extractedData.email || ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         'email',
@@ -969,7 +1295,9 @@ const BusinessCardOcr = ({
                                             <label>Phone</label>
                                             <input
                                                 type="tel"
-                                                value={extractedData.phone || ''}
+                                                value={
+                                                    extractedData.phone || ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         'phone',
@@ -987,7 +1315,9 @@ const BusinessCardOcr = ({
                                             </label>
                                             <input
                                                 type="text"
-                                                value={extractedData.company || ''}
+                                                value={
+                                                    extractedData.company || ''
+                                                }
                                                 onChange={(e) =>
                                                     handleInputChange(
                                                         'company',
@@ -1002,56 +1332,101 @@ const BusinessCardOcr = ({
                                 )}
                             </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)}
+                            {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
+                                                }
                                             >
-                                                {item.text}
+                                                <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>
-                                    {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}>
+                                    <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>
+                                        <span className={ocrStyles.expandIcon}>
+                                            ▶
+                                        </span>
                                     </summary>
                                     <div className={ocrStyles.rawTextContent}>
                                         {extractedData.rawText}
@@ -1071,9 +1446,921 @@ const BusinessCardOcr = ({
                                 <button
                                     onClick={handleSave}
                                     className={ocrStyles.primaryButton}
-                                    disabled={!hasMinimumRequiredData()}
+                                    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)
+                                            ))
+                                    }
                                 >
-                                    Save Contact
+                                    {isSaving ? 'Saving...' : 'Confirm & Save'}
                                 </button>
                             </div>
                         </div>