@visns-studio/visns-components 5.11.3 → 5.11.4

package/README.md

@@ -1650,6 +1650,61 @@ Modal components support vertical alignment configuration with the `verticalAlig
 
 The ReactDataGrid's `defaultGroupBy` prop enables internal grouping functionality that creates collapsible group headers within the table structure. It does NOT create any external UI elements that need relocation, as all grouping controls are internal to the table component.
 
+### Navigation Component Icon Visibility Issues
+
+#### Browser Rendering Optimization Fix
+
+**Problem:** Navigation action icons (specifically anchor/Link elements) would disappear during page scroll in production environments. The issue only affected anchor tags while button elements remained visible. Notably, the problem disappeared when browser dev tools were open, indicating a browser rendering optimization conflict.
+
+**Root Cause:** Firefox and other browsers apply aggressive rendering optimizations that can incorrectly cull elements from the paint tree. The combination of CSS `contain: layout` property with sticky positioning was causing anchor elements to be optimized out of view during scroll events.
+
+**Solution Applied:**
+
+1. **Removed problematic containment properties:**
+   - Removed `contain: layout` from `.content-header` and action elements
+   - This property was causing layout optimization conflicts
+
+2. **Enhanced compositor layer creation:**
+   - Changed `transform: translateZ(0)` to `transform: translateZ(0) translateX(0) translateY(0)`
+   - Added `isolation: isolate` to force elements onto their own render layers
+   - Added `backface-visibility: hidden` to prevent rendering glitches
+
+3. **Improved z-index stacking:**
+   - Elevated z-index values from 100-103 range to 1000-1003 range
+   - Ensures action icons stay above sticky header's stacking context
+
+**Files Modified:**
+- `src/components/crm/styles/Navigation.module.scss` (content-header and action styling)
+- Enhanced both regular and alternate theme action containers
+
+#### Navigation Component Debug Mode
+
+The Navigation component now includes optional debugging capabilities to help diagnose rendering issues:
+
+**Enable Debug Mode:**
+```jsx
+<Navigation debugIcons={true} {...otherProps} />
+```
+
+**Debug Features:**
+- **Visual indicators:** Red borders around anchor elements with 'A' labels, blue borders around buttons with 'B' labels
+- **Console logging:** Detailed scroll event logs showing element positions, visibility, z-index, transforms, and containment properties
+- **Real-time monitoring:** Tracks icon visibility changes during scroll events
+
+**Debug CSS Classes:**
+The component includes `.debug-icons` styles that can be applied for visual debugging:
+```scss
+.debug-icons {
+    a, button {
+        border: 2px solid red !important;
+        background: rgba(255, 0, 0, 0.1) !important;
+        // Additional debug styling...
+    }
+}
+```
+
+This fix ensures navigation icons remain visible during scroll across all browser environments and rendering contexts.
+
 ## Support
 
 For support, please contact the VISNS Studio team or open an issue on GitHub.

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.3",
+    "version": "5.11.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/BusinessCardOcr.jsx

@@ -18,6 +18,8 @@ import {
     Zap,
     ZapOff,
     Focus,
+    Bot,
+    Play,
 } from 'lucide-react';
 
 import CustomFetch from './Fetch';
@@ -50,10 +52,20 @@ const BusinessCardOcr = ({
     const [contactDecision, setContactDecision] = useState(null); // 'create', 'update', 'merge'
     const [isConsulting, setIsConsulting] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    
+    // Auto-capture states
+    const [autoCapture, setAutoCapture] = useState(true);
+    const [focusScore, setFocusScore] = useState(0);
+    const [isCountingDown, setIsCountingDown] = useState(false);
+    const [countdown, setCountdown] = useState(0);
+    const [focusThreshold] = useState(0.15); // Adjustable focus threshold
 
     const videoRef = useRef(null);
     const canvasRef = useRef(null);
     const fileInputRef = useRef(null);
+    const focusDetectionRef = useRef(null);
+    const countdownRef = useRef(null);
+    const capturePhotoRef = useRef(null);
 
     // Detect available cameras when component opens
     useEffect(() => {
@@ -203,6 +215,121 @@ const BusinessCardOcr = ({
         }
     };
 
+    // Calculate image sharpness/focus score using Laplacian variance
+    const calculateFocusScore = useCallback((videoElement) => {
+        if (!videoElement || videoElement.videoWidth === 0) return 0;
+        
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Use smaller canvas for performance
+        const width = 320;
+        const height = 240;
+        canvas.width = width;
+        canvas.height = height;
+        
+        ctx.drawImage(videoElement, 0, 0, width, height);
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        
+        // Convert to grayscale and apply Laplacian operator
+        let sum = 0;
+        let count = 0;
+        
+        for (let y = 1; y < height - 1; y++) {
+            for (let x = 1; x < width - 1; x++) {
+                const i = (y * width + x) * 4;
+                
+                // Convert to grayscale
+                const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+                
+                // Apply Laplacian operator (edge detection)
+                const laplacian = Math.abs(
+                    -4 * gray +
+                    data[((y - 1) * width + x) * 4] * 0.299 + data[((y - 1) * width + x) * 4 + 1] * 0.587 + data[((y - 1) * width + x) * 4 + 2] * 0.114 +
+                    data[((y + 1) * width + x) * 4] * 0.299 + data[((y + 1) * width + x) * 4 + 1] * 0.587 + data[((y + 1) * width + x) * 4 + 2] * 0.114 +
+                    data[(y * width + (x - 1)) * 4] * 0.299 + data[(y * width + (x - 1)) * 4 + 1] * 0.587 + data[(y * width + (x - 1)) * 4 + 2] * 0.114 +
+                    data[(y * width + (x + 1)) * 4] * 0.299 + data[(y * width + (x + 1)) * 4 + 1] * 0.587 + data[(y * width + (x + 1)) * 4 + 2] * 0.114
+                );
+                
+                sum += laplacian * laplacian;
+                count++;
+            }
+        }
+        
+        // Return normalized variance (higher = sharper)
+        return count > 0 ? Math.sqrt(sum / count) / 255 : 0;
+    }, []);
+
+    // Auto-capture countdown logic
+    const startCountdown = useCallback(async () => {
+        if (isCountingDown || isFocusing) return;
+        
+        setIsCountingDown(true);
+        
+        for (let i = 3; i > 0; i--) {
+            setCountdown(i);
+            await new Promise(resolve => {
+                countdownRef.current = setTimeout(resolve, 1000);
+            });
+            
+            // Check if still focused during countdown
+            if (videoRef.current) {
+                const currentFocus = calculateFocusScore(videoRef.current);
+                if (currentFocus < focusThreshold) {
+                    setIsCountingDown(false);
+                    setCountdown(0);
+                    return; // Cancel if focus lost
+                }
+            }
+        }
+        
+        setCountdown(0);
+        setIsCountingDown(false);
+        
+        // Trigger capture using ref
+        if (capturePhotoRef.current) {
+            await capturePhotoRef.current();
+        }
+    }, [isCountingDown, isFocusing, calculateFocusScore, focusThreshold]);
+
+    // Focus detection loop
+    useEffect(() => {
+        if (!videoRef.current || !cameraReady || !autoCapture || currentStep !== 'camera') {
+            return;
+        }
+
+        const detectFocus = () => {
+            if (videoRef.current && !isCountingDown && !isFocusing) {
+                const score = calculateFocusScore(videoRef.current);
+                setFocusScore(score);
+                
+                // Start countdown if image is in focus
+                if (score > focusThreshold && !isCountingDown) {
+                    startCountdown();
+                }
+            }
+        };
+
+        // Check focus every 500ms
+        focusDetectionRef.current = setInterval(detectFocus, 500);
+
+        return () => {
+            if (focusDetectionRef.current) {
+                clearInterval(focusDetectionRef.current);
+            }
+        };
+    }, [cameraReady, autoCapture, currentStep, isCountingDown, isFocusing, calculateFocusScore, focusThreshold, startCountdown]);
+
+    // Cleanup countdown on unmount
+    useEffect(() => {
+        return () => {
+            if (countdownRef.current) {
+                clearTimeout(countdownRef.current);
+            }
+        };
+    }, []);
+
     // Image preprocessing pipeline
     const preprocessImage = async (imageBlob) => {
         return new Promise((resolve) => {
@@ -274,6 +401,11 @@ const BusinessCardOcr = ({
         );
     }, [cameraStream]);
 
+    // Assign capturePhoto to ref for use in startCountdown
+    useEffect(() => {
+        capturePhotoRef.current = capturePhoto;
+    }, [capturePhoto]);
+
     const switchCamera = () => {
         if (availableCameras.length > 1) {
             setCurrentCameraIndex(
@@ -1652,7 +1784,20 @@ const BusinessCardOcr = ({
                     {currentStep === 'camera' && (
                         <div className={ocrStyles.cameraContainer}>
                             <div className={ocrStyles.captureGuide}>
-                                <p>Position business card within the frame and tap to focus</p>
+                                <p>
+                                    {autoCapture 
+                                        ? 'Position business card within frame - auto-capture when focused' 
+                                        : 'Position business card within the frame and tap to focus'
+                                    }
+                                </p>
+                                <button
+                                    onClick={() => setAutoCapture(!autoCapture)}
+                                    className={`${ocrStyles.autoCaptureToggle} ${autoCapture ? ocrStyles.active : ''}`}
+                                    title={autoCapture ? 'Disable auto-capture' : 'Enable auto-capture'}
+                                >
+                                    {autoCapture ? <Bot size={16} /> : <Play size={16} />}
+                                    {autoCapture ? 'Auto' : 'Manual'}
+                                </button>
                             </div>
                             <div className={ocrStyles.videoWrapper}>
                                 <video
@@ -1663,15 +1808,54 @@ const BusinessCardOcr = ({
                                     className={ocrStyles.cameraVideo}
                                     onClick={triggerAutofocus}
                                 />
+                                <canvas 
+                                    ref={canvasRef} 
+                                    style={{ display: 'none' }}
+                                />
                                 {/* Enhanced camera overlay with focus frame */}
                                 <div className={ocrStyles.cameraOverlay}>
-                                    <div className={ocrStyles.focusFrame}>
+                                    <div className={`${ocrStyles.focusFrame} ${
+                                        focusScore > focusThreshold ? ocrStyles.focused : ''
+                                    } ${isCountingDown ? ocrStyles.countingDown : ''}`}>
+                                        
+                                        {/* Focus corners */}
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.topLeft}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.topRight}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.bottomLeft}`}></div>
+                                        <div className={`${ocrStyles.focusCorner} ${ocrStyles.bottomRight}`}></div>
+                                        
+                                        {/* Countdown display */}
+                                        {isCountingDown && countdown > 0 && (
+                                            <div className={ocrStyles.countdownDisplay}>
+                                                <div className={ocrStyles.countdownNumber}>{countdown}</div>
+                                                <div className={ocrStyles.countdownText}>Auto-capturing...</div>
+                                            </div>
+                                        )}
+                                        
+                                        {/* Focus indicator */}
                                         {isFocusing && (
                                             <div className={ocrStyles.focusIndicator}>
                                                 <Focus className={ocrStyles.focusIcon} />
                                                 <span>Focusing...</span>
                                             </div>
                                         )}
+                                        
+                                        {/* Focus status */}
+                                        {autoCapture && !isFocusing && !isCountingDown && (
+                                            <div className={ocrStyles.focusStatus}>
+                                                <div className={`${ocrStyles.focusBar} ${
+                                                    focusScore > focusThreshold ? ocrStyles.good : ocrStyles.poor
+                                                }`}>
+                                                    <div 
+                                                        className={ocrStyles.focusBarFill} 
+                                                        style={{ width: `${Math.min(focusScore * 300, 100)}%` }}
+                                                    ></div>
+                                                </div>
+                                                <span className={ocrStyles.focusText}>
+                                                    {focusScore > focusThreshold ? '✓ In Focus' : 'Move closer or adjust angle'}
+                                                </span>
+                                            </div>
+                                        )}
                                     </div>
                                 </div>
                             </div>
@@ -1704,8 +1888,9 @@ const BusinessCardOcr = ({
                                             fileInputRef.current?.click()
                                         }
                                         className={ocrStyles.secondaryButton}
+                                        title="Upload image from device"
                                     >
-                                        <ImagePlus size={20} />
+                                        <ImagePlus size={18} />
                                         Upload
                                     </button>
 
@@ -1713,9 +1898,10 @@ const BusinessCardOcr = ({
                                         onClick={capturePhoto}
                                         className={`${ocrStyles.captureButton} ${isFocusing ? ocrStyles.focusing : ''}`}
                                         disabled={isFocusing}
+                                        title={isFocusing ? 'Focusing camera...' : 'Capture business card'}
                                     >
                                         <Camera size={28} />
-                                        {isFocusing ? 'Focusing...' : 'Capture'}
+                                        {isFocusing ? 'Focus...' : 'Capture'}
                                     </button>
 
                                     <input
@@ -1725,8 +1911,6 @@ const BusinessCardOcr = ({
                                         accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
                                         style={{ display: 'none' }}
                                     />
-                                    
-                                    <div className={ocrStyles.placeholder}></div>
                                 </div>
                             </div>
                         </div>

package/src/components/crm/Navigation.jsx

@@ -183,6 +183,7 @@ function Navigation({
     setSystemAuth,
     themeType,
     userProfile,
+    debugIcons = false, // Add debug flag
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -197,6 +198,7 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
+    const actionItemsRef = useRef(null);
 
     const appNavClasses = styles['app-nav'];
 
@@ -294,7 +296,7 @@ function Navigation({
                         to={n.url}
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
-                        className={`tooltip ${activeClass}`}
+                        className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
                         title={n.label}
                     >
@@ -532,13 +534,65 @@ function Navigation({
     useEffect(() => {
         function handleScroll() {
             setIsScrolled(window.scrollY > 0);
+
+            // Debug logging for icon visibility
+            if (debugIcons && actionItemsRef.current) {
+                const anchors = actionItemsRef.current.querySelectorAll('a');
+                const buttons =
+                    actionItemsRef.current.querySelectorAll('button');
+
+                console.log('=== SCROLL DEBUG ===');
+                console.log('Scroll Y:', window.scrollY);
+                console.log('Anchors found:', anchors.length);
+                console.log('Buttons found:', buttons.length);
+
+                anchors.forEach((anchor, index) => {
+                    const rect = anchor.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(anchor);
+                    console.log(`Anchor ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+
+                buttons.forEach((button, index) => {
+                    const rect = button.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(button);
+                    console.log(`Button ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+            }
         }
 
         window.addEventListener('scroll', handleScroll);
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, []);
+    }, [debugIcons]);
 
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
@@ -601,7 +655,12 @@ function Navigation({
                             <span></span>
                         </button>
                     </div>
-                    <div className={styles['hactions-alternate']}>
+                    <div
+                        className={`${styles['hactions-alternate']} ${
+                            debugIcons ? styles['debug-icons'] : ''
+                        }`}
+                        ref={actionItemsRef}
+                    >
                         <ul>
                             {navData.settings.map((setting, settingKey) =>
                                 setting.permission === true ? (
@@ -653,11 +712,12 @@ function Navigation({
                 </ul>
             </div>
             <div
-                className={
+                className={`${
                     themeType === 'alternate'
                         ? styles['hactions-alternate']
                         : styles.hactions
-                }
+                } ${debugIcons ? styles['debug-icons'] : ''}`}
+                ref={actionItemsRef}
             >
                 <ul>
                     {navData.settings.map((setting, settingKey) =>