@trustchex/react-native-sdk 1.362.4 → 1.374.0

package/lib/module/Shared/Components/IdentityDocumentCamera.js

@@ -2,7 +2,7 @@
 
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { View, StyleSheet, Text as TextView, Platform, StatusBar, Vibration, Linking, Image, ActivityIndicator, PermissionsAndroid, Dimensions, ScrollView } from 'react-native';
+import { View, StyleSheet, Text as TextView, Platform, StatusBar, Vibration, Linking, Image, ActivityIndicator, PermissionsAndroid, Dimensions, ScrollView, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TrustchexCamera } from "./TrustchexCamera.js";
 import { NativeModules } from 'react-native';
@@ -21,10 +21,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const {
   OpenCVModule
 } = NativeModules;
+const AnimatedText = Animated.createAnimatedComponent(TextView);
 const HOLOGRAM_IMAGE_COUNT = 12;
 const HOLOGRAM_DETECTION_THRESHOLD = 1000; // Lowered for better sensitivity while still filtering noise
 const HOLOGRAM_DETECTION_RETRY_COUNT = 3; // More attempts but faster each (~1s per attempt)
-const SECOND_FACE_DETECTION_RETRY_COUNT = 10;
 const MIN_BRIGHTNESS_THRESHOLD = 45;
 const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
 const IdentityDocumentCamera = ({
@@ -86,6 +86,9 @@ const IdentityDocumentCamera = ({
   // Barcode caching - persist detected barcode across frames for reliability
   const cachedBarcode = useRef(null);
 
+  // Error message flash animation
+  const errorFlashAnim = useRef(new Animated.Value(1)).current;
+
   // Test mode tracking
   const [testModeData, setTestModeData] = useState(null);
 
@@ -222,10 +225,10 @@ const IdentityDocumentCamera = ({
     if (hasGuideShown) {
       // Generate message - match UI display logic exactly for consistency
       let message = '';
-      if (status === 'SCANNED') {
-        message = completedStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportScanned') : t('identityDocumentCamera.frontSideScanned') : completedStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.backSideScanned') : completedStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.hologramVerified') : t('identityDocumentCamera.scanCompleted');
+      if (nextStep === 'COMPLETED') {
+        message = t('identityDocumentCamera.scanCompleted');
       } else if (status === 'INCORRECT') {
-        message = nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.wrongSideFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.wrongSideBack') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.wrongSideFront') : t('identityDocumentCamera.alignPhotoSide');
+        message = nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.alignIDFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBack') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignIDFront') : t('identityDocumentCamera.alignPhotoSide');
       } else if (isBrightnessLow) {
         message = t('identityDocumentCamera.lowBrightness');
       } else if (isFrameBlurry) {
@@ -263,6 +266,22 @@ const IdentityDocumentCamera = ({
     }
   }, [nextStep]);
 
+  // Error flash animation - flash red text when wrong side detected
+  useEffect(() => {
+    if (status === 'INCORRECT') {
+      errorFlashAnim.setValue(1);
+      Animated.loop(Animated.sequence([Animated.timing(errorFlashAnim, {
+        toValue: 0.3,
+        duration: 300,
+        useNativeDriver: false
+      }), Animated.timing(errorFlashAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false
+      })])).start();
+    }
+  }, [status, errorFlashAnim]);
+
   // Native OpenCV: detect hologram from sequence of face images
   const detectHologramNative = useCallback(async images => {
     try {
@@ -1201,7 +1220,7 @@ const IdentityDocumentCamera = ({
       }
       setStatus('SCANNING');
     }
-  }, [nextStep, frameDimensions, currentHologramImage, currentFaceImage, hasRequiredMRZFields, areMRZFieldsEqual, detectedDocumentType, onlyMRZScan, isTorchOn, setIsTorchOn, setNextStepAndVibrate, onIdentityDocumentScanned, logMRZDetails, logMRZValidationFailure, currentSecondaryFaceImage, detectHologramNative, mrzUtils]);
+  }, [nextStep, frameDimensions, currentHologramImage, detectedDocumentType, currentFaceImage, testMode, hasRequiredMRZFields, areMRZFieldsEqual, onlyMRZScan, isTorchOn, setIsTorchOn, setNextStepAndVibrate, onIdentityDocumentScanned, logMRZDetails, logMRZValidationFailure, currentSecondaryFaceImage, detectHologramNative]);
   const handleFrame = useCallback(async event => {
     if (!isCameraInitialized.current) {
       return;
@@ -2158,174 +2177,35 @@ const IdentityDocumentCamera = ({
             current: 3,
             total: 3
           })}` : ''
-        }), /*#__PURE__*/_jsx(TextView, {
+        }), /*#__PURE__*/_jsx(AnimatedText, {
           style: [styles.topZoneText,
           // Priority order for coloring (later styles override earlier ones)
           // 1. Success (green) - scan completed
-          status === 'SCANNED' && styles.topZoneTextSuccess,
-          // 2. Error (red) - wrong side
-          status === 'INCORRECT' && styles.topZoneTextError,
+          nextStep === 'COMPLETED' && styles.topZoneTextSuccess,
+          // 2. Error (red) - wrong side - with flash opacity
+          status === 'INCORRECT' && styles.topZoneTextError, status === 'INCORRECT' && {
+            opacity: errorFlashAnim
+          },
           // 3. Warning (yellow) - quality issues
           (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning,
           // 4. Scanning (green) - all elements detected AND inside scan area
           status === 'SCANNING' && allElementsDetected && elementsOutsideScanArea.length === 0 && !isBrightnessLow && !isFrameBlurry && styles.topZoneTextScanning
           // 5. Default (white) - aligning (not all detected OR elements outside scan area)
           ],
-          children: status === 'SCANNED' ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportScanned') : t('identityDocumentCamera.frontSideScanned') : completedStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.backSideScanned') : completedStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.hologramVerified') : t('identityDocumentCamera.scanCompleted') : status === 'INCORRECT' ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.wrongSideFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.wrongSideBack') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.wrongSideFront') // Hologram is on front, show same message as front scan
-          : t('identityDocumentCamera.alignPhotoSide') : isBrightnessLow ? t('identityDocumentCamera.lowBrightness') : isFrameBlurry ? t('identityDocumentCamera.avoidBlur') : status === 'SCANNING' && allElementsDetected && elementsOutsideScanArea.length === 0 ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.idCardBackDetected') : detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportDetected') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.idCardFrontDetected') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : elementsOutsideScanArea.length > 0 ? t('identityDocumentCamera.centerDocument') : (status === 'SCANNING' || status === 'SEARCHING') && !allElementsDetected ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBack') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.alignPassport') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.alignIDFront') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : nextStep === 'SCAN_ID_BACK' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignIDBackSide') : nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : ''
+          children: nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : status === 'INCORRECT' ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? t('identityDocumentCamera.alignIDFront') : nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBack') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignIDFront') : t('identityDocumentCamera.alignPhotoSide') : isBrightnessLow ? t('identityDocumentCamera.lowBrightness') : isFrameBlurry ? t('identityDocumentCamera.avoidBlur') : status === 'SCANNING' && allElementsDetected && elementsOutsideScanArea.length === 0 ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.idCardBackDetected') : detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.passportDetected') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.idCardFrontDetected') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : elementsOutsideScanArea.length > 0 ? t('identityDocumentCamera.centerDocument') : (status === 'SCANNING' || status === 'SEARCHING') && !allElementsDetected ? nextStep === 'SCAN_ID_BACK' ? t('identityDocumentCamera.alignIDBack') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? detectedDocumentType === 'PASSPORT' ? t('identityDocumentCamera.alignPassport') : detectedDocumentType === 'ID_FRONT' ? t('identityDocumentCamera.alignIDFront') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : t('identityDocumentCamera.readingDocument') : nextStep === 'SCAN_ID_FRONT_OR_PASSPORT' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignPhotoSide') : nextStep === 'SCAN_HOLOGRAM' ? t('identityDocumentCamera.alignHologram') : nextStep === 'SCAN_ID_BACK' ? status === 'SCANNING' ? t('identityDocumentCamera.readingDocument') : t('identityDocumentCamera.alignIDBackSide') : nextStep === 'COMPLETED' ? t('identityDocumentCamera.scanCompleted') : ''
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.leftZone
       }), /*#__PURE__*/_jsx(View, {
         style: styles.rightZone
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.bottomZone,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.debugImagesRow,
-          children: [isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
-            style: styles.imageContainer,
-            children: [currentFaceImage ? /*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: `data:image/jpeg;base64,${currentFaceImage}`
-              },
-              style: styles.faceImage
-            }) : /*#__PURE__*/_jsx(View, {
-              style: [styles.faceImage, {
-                backgroundColor: '#333',
-                justifyContent: 'center'
-              }],
-              children: /*#__PURE__*/_jsx(TextView, {
-                style: {
-                  color: '#666',
-                  fontSize: 10,
-                  textAlign: 'center'
-                },
-                children: "Waiting..."
-              })
-            }), /*#__PURE__*/_jsx(TextView, {
-              style: [styles.imageContainerText, currentFaceImage && {
-                color: '#4CAF50'
-              }],
-              children: `${currentFaceImage ? '✓ ' : ''}Face`
-            })]
-          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
-            style: styles.imageContainer,
-            children: [currentSecondaryFaceImage ? /*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`
-              },
-              style: styles.faceImage
-            }) : /*#__PURE__*/_jsx(View, {
-              style: [styles.faceImage, {
-                backgroundColor: '#333',
-                justifyContent: 'center'
-              }],
-              children: /*#__PURE__*/_jsx(TextView, {
-                style: {
-                  color: '#666',
-                  fontSize: 10,
-                  textAlign: 'center'
-                },
-                children: "Waiting..."
-              })
-            }), /*#__PURE__*/_jsx(TextView, {
-              style: [styles.imageContainerText, currentSecondaryFaceImage && {
-                color: '#4CAF50'
-              }],
-              children: `${currentSecondaryFaceImage ? '✓ ' : ''}2nd Face`
-            })]
-          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
-            style: styles.imageContainer,
-            children: [currentHologramImage ? /*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: `data:image/jpeg;base64,${currentHologramImage}`
-              },
-              style: styles.faceImage
-            }) : latestHologramFaceImage && hologramImageCount > 0 ? /*#__PURE__*/_jsxs(View, {
-              style: {
-                position: 'relative'
-              },
-              children: [/*#__PURE__*/_jsx(Image, {
-                source: {
-                  uri: `data:image/jpeg;base64,${latestHologramFaceImage}`
-                },
-                style: [styles.faceImage, {
-                  opacity: 0.7
-                }]
-              }), /*#__PURE__*/_jsx(View, {
-                style: {
-                  position: 'absolute',
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  backgroundColor: 'rgba(0,0,0,0.7)',
-                  padding: 2
-                },
-                children: /*#__PURE__*/_jsxs(TextView, {
-                  style: {
-                    color: '#FFA500',
-                    fontSize: 8,
-                    textAlign: 'center',
-                    fontWeight: 'bold'
-                  },
-                  children: [hologramImageCount, "/", HOLOGRAM_IMAGE_COUNT]
-                })
-              })]
-            }) : /*#__PURE__*/_jsx(View, {
-              style: [styles.faceImage, {
-                backgroundColor: '#333',
-                justifyContent: 'center'
-              }],
-              children: /*#__PURE__*/_jsx(TextView, {
-                style: {
-                  color: '#666',
-                  fontSize: 10,
-                  textAlign: 'center'
-                },
-                children: "Waiting..."
-              })
-            }), /*#__PURE__*/_jsx(TextView, {
-              style: [styles.imageContainerText, currentHologramImage && {
-                color: '#4CAF50'
-              }, latestHologramFaceImage && !currentHologramImage && {
-                color: '#FFA500'
-              }],
-              children: `${currentHologramImage ? '✓ ' : latestHologramFaceImage ? '⏳ ' : ''}Hologram`
-            })]
-          }), isDebugEnabled() && /*#__PURE__*/_jsxs(View, {
-            style: styles.imageContainer,
-            children: [_currentHologramMaskImage ? /*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`
-              },
-              style: styles.faceImage
-            }) : /*#__PURE__*/_jsx(View, {
-              style: [styles.faceImage, {
-                backgroundColor: '#333',
-                justifyContent: 'center'
-              }],
-              children: /*#__PURE__*/_jsx(TextView, {
-                style: {
-                  color: '#666',
-                  fontSize: 10,
-                  textAlign: 'center'
-                },
-                children: "Waiting..."
-              })
-            }), /*#__PURE__*/_jsx(TextView, {
-              style: [styles.imageContainerText, _currentHologramMaskImage && {
-                color: '#4CAF50'
-              }],
-              children: `${_currentHologramMaskImage ? '✓ ' : ''}Mask`
-            })]
-          })]
-        })
+        style: styles.bottomZone
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.scanArea, {
-          borderColor: status === 'SCANNED' || nextStep === 'COMPLETED' ? '#4CAF50' : status === 'INCORRECT' ? '#f44336' : status === 'SCANNING' ? '#2196F3' : isBrightnessLow || isFrameBlurry ? '#FFC107' : 'white',
+          borderColor: nextStep === 'COMPLETED' ? '#4CAF50' : status === 'INCORRECT' ? '#f44336' : status === 'SCANNING' ? '#2196F3' : isBrightnessLow || isFrameBlurry ? '#FFC107' : 'white',
           borderWidth: status === 'SCANNING' ? 3 : 2
         }],
-        children: nextStep === 'COMPLETED' || status === 'SCANNED' ? /*#__PURE__*/_jsx(LottieView, {
+        children: nextStep === 'COMPLETED' ? /*#__PURE__*/_jsx(LottieView, {
           source: require('../../Shared/Animations/success.json'),
           style: styles.animation,
           loop: false,
@@ -2340,11 +2220,6 @@ const IdentityDocumentCamera = ({
           style: styles.animation,
           loop: true,
           autoPlay: true
-        }) : status === 'SCANNING' ? /*#__PURE__*/_jsx(LottieView, {
-          source: require('../../Shared/Animations/scanning.json'),
-          style: styles.animation,
-          loop: true,
-          autoPlay: true
         }) : null
       }), isDebugEnabled() && /*#__PURE__*/_jsx(SafeAreaView, {
         style: {
@@ -2357,71 +2232,333 @@ const IdentityDocumentCamera = ({
         },
         children: /*#__PURE__*/_jsxs(View, {
           style: {
-            marginTop: 10,
-            backgroundColor: 'rgba(0, 0, 0, 0.85)',
-            padding: 10,
-            borderRadius: 8,
+            marginTop: 8,
+            marginHorizontal: 8,
+            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+            padding: 8,
+            borderRadius: 6,
             borderWidth: 1,
-            borderColor: '#FF6B6B',
-            minWidth: 200
+            borderColor: 'rgba(255, 82, 82, 0.5)',
+            minWidth: 220,
+            maxWidth: '92%'
           },
-          children: [/*#__PURE__*/_jsx(TextView, {
+          children: [/*#__PURE__*/_jsxs(View, {
             style: {
-              color: '#FF6B6B',
-              fontSize: 11,
-              fontWeight: 'bold',
-              marginBottom: 6,
-              textAlign: 'center'
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 4
             },
-            children: "DEBUG MODE"
-          }), /*#__PURE__*/_jsx(TextView, {
+            children: [/*#__PURE__*/_jsx(TextView, {
+              style: {
+                color: '#88D8B0',
+                fontSize: 10,
+                fontWeight: 'bold'
+              },
+              children: `Status: ${status}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: {
+                color: '#FFEB3B',
+                fontSize: 10,
+                fontWeight: 'bold'
+              },
+              children: `Step: ${nextStep}`
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 4,
+              gap: 3
             },
-            children: `Step: ${nextStep}`
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                backgroundColor: isBrightnessLow ? '#f44336' : '#4CAF50',
+                paddingHorizontal: 6,
+                paddingVertical: 1,
+                borderRadius: 3
+              },
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#FFFFFF',
+                  fontSize: 8,
+                  fontWeight: 'bold'
+                },
+                children: isBrightnessLow ? 'Low Light' : 'Good Light'
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                backgroundColor: isFrameBlurry ? '#f44336' : '#4CAF50',
+                paddingHorizontal: 6,
+                paddingVertical: 1,
+                borderRadius: 3
+              },
+              children: /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: '#FFFFFF',
+                  fontSize: 8,
+                  fontWeight: 'bold'
+                },
+                children: isFrameBlurry ? 'Blurry' : 'Sharp'
+              })
+            })]
           }), /*#__PURE__*/_jsx(TextView, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
+              color: elementsOutsideScanArea.length === 0 ? '#4CAF50' : '#FFA500',
+              fontSize: 8,
+              marginBottom: 3
             },
-            children: `Status: ${status}`
+            children: elementsOutsideScanArea.length === 0 ? 'All elements in frame' : `Outside: ${elementsOutsideScanArea.join(', ')}`
           }), /*#__PURE__*/_jsx(TextView, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
+              color: 'rgba(255, 255, 255, 0.7)',
+              fontSize: 8,
+              marginBottom: 3
             },
-            children: `Doc Type: ${detectedDocumentType}`
-          }), /*#__PURE__*/_jsx(TextView, {
+            children: `Face: ${documentPlaneBounds ? '✓' : '✗'}, MRZ: ${mrzBounds ? '✓' : '✗'}, Sig: ${signatureBounds ? '✓' : '✗'}`
+          }), nextStep === 'SCAN_HOLOGRAM' && hologramImageCount > 0 && /*#__PURE__*/_jsx(TextView, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
-            },
-            children: `Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`
-          }), /*#__PURE__*/_jsx(TextView, {
-            style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
+              color: '#9C27B0',
+              fontSize: 8,
+              fontWeight: 'bold',
+              marginBottom: 3
             },
-            children: `Blur: ${isFrameBlurry ? '⚠️' : '✓'}`
-          }), /*#__PURE__*/_jsx(TextView, {
+            children: `Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`
+          }), /*#__PURE__*/_jsxs(View, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9,
-              marginBottom: 2
+              flexDirection: 'row',
+              gap: 8,
+              paddingTop: 3,
+              borderTopWidth: 1,
+              borderTopColor: 'rgba(255, 255, 255, 0.2)',
+              marginBottom: 4
             },
-            children: `Flash: ${isTorchOn ? '🔦' : '○'}`
-          }), /*#__PURE__*/_jsx(TextView, {
+            children: [/*#__PURE__*/_jsx(TextView, {
+              style: {
+                color: 'rgba(255, 255, 255, 0.7)',
+                fontSize: 8,
+                marginTop: 3
+              },
+              children: `Doc: ${detectedDocumentType}`
+            }), /*#__PURE__*/_jsx(TextView, {
+              style: {
+                color: 'rgba(255, 255, 255, 0.7)',
+                fontSize: 8,
+                marginTop: 3
+              },
+              children: `Flash: ${isTorchOn ? '🔦' : '○'}`
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
             style: {
-              color: '#88D8B0',
-              fontSize: 9
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: 4,
+              justifyContent: 'center'
             },
-            children: `Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [currentFaceImage ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: `data:image/jpeg;base64,${currentFaceImage}`
+                },
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#4CAF50'
+                }
+              }) : /*#__PURE__*/_jsx(View, {
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#666',
+                  backgroundColor: '#222',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(TextView, {
+                  style: {
+                    color: '#666',
+                    fontSize: 7
+                  },
+                  children: "\u2014"
+                })
+              }), /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: currentFaceImage ? '#4CAF50' : '#999',
+                  fontSize: 7,
+                  marginTop: 1,
+                  fontWeight: 'bold'
+                },
+                children: `${currentFaceImage ? '✓' : '○'} Face`
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [currentSecondaryFaceImage ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`
+                },
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#2196F3'
+                }
+              }) : /*#__PURE__*/_jsx(View, {
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#666',
+                  backgroundColor: '#222',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(TextView, {
+                  style: {
+                    color: '#666',
+                    fontSize: 7
+                  },
+                  children: "\u2014"
+                })
+              }), /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: currentSecondaryFaceImage ? '#2196F3' : '#999',
+                  fontSize: 7,
+                  marginTop: 1,
+                  fontWeight: 'bold'
+                },
+                children: `${currentSecondaryFaceImage ? '✓' : '○'} 2nd`
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [currentHologramImage ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: `data:image/jpeg;base64,${currentHologramImage}`
+                },
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#9C27B0'
+                }
+              }) : latestHologramFaceImage && hologramImageCount > 0 ? /*#__PURE__*/_jsxs(View, {
+                style: {
+                  position: 'relative'
+                },
+                children: [/*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: `data:image/jpeg;base64,${latestHologramFaceImage}`
+                  },
+                  style: {
+                    width: 40,
+                    height: 48,
+                    borderRadius: 2,
+                    borderWidth: 1,
+                    borderColor: '#FFA500',
+                    opacity: 0.7
+                  }
+                }), /*#__PURE__*/_jsx(View, {
+                  style: {
+                    position: 'absolute',
+                    bottom: 1,
+                    left: 1,
+                    right: 1,
+                    backgroundColor: 'rgba(0,0,0,0.8)',
+                    paddingVertical: 0,
+                    borderRadius: 1
+                  },
+                  children: /*#__PURE__*/_jsxs(TextView, {
+                    style: {
+                      color: '#FFA500',
+                      fontSize: 6,
+                      textAlign: 'center',
+                      fontWeight: 'bold'
+                    },
+                    children: [hologramImageCount, "/", HOLOGRAM_IMAGE_COUNT]
+                  })
+                })]
+              }) : /*#__PURE__*/_jsx(View, {
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#666',
+                  backgroundColor: '#222',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(TextView, {
+                  style: {
+                    color: '#666',
+                    fontSize: 7
+                  },
+                  children: "\u2014"
+                })
+              }), /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: currentHologramImage ? '#9C27B0' : latestHologramFaceImage ? '#FFA500' : '#999',
+                  fontSize: 7,
+                  marginTop: 1,
+                  fontWeight: 'bold'
+                },
+                children: `${currentHologramImage ? '✓' : latestHologramFaceImage ? '⏳' : '○'} Holo`
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                alignItems: 'center'
+              },
+              children: [_currentHologramMaskImage ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`
+                },
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#FF6B6B'
+                }
+              }) : /*#__PURE__*/_jsx(View, {
+                style: {
+                  width: 40,
+                  height: 48,
+                  borderRadius: 2,
+                  borderWidth: 1,
+                  borderColor: '#666',
+                  backgroundColor: '#222',
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(TextView, {
+                  style: {
+                    color: '#666',
+                    fontSize: 7
+                  },
+                  children: "\u2014"
+                })
+              }), /*#__PURE__*/_jsx(TextView, {
+                style: {
+                  color: _currentHologramMaskImage ? '#FF6B6B' : '#999',
+                  fontSize: 7,
+                  marginTop: 1,
+                  fontWeight: 'bold'
+                },
+                children: `${_currentHologramMaskImage ? '✓' : '○'} Mask`
+              })]
+            })]
           })]
         })
       }), testMode && testModeData && /*#__PURE__*/_jsx(SafeAreaView, {