@visns-studio/visns-components 5.15.9 → 5.15.11

package/README.md

@@ -9,10 +9,11 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
-## Recent Updates (v5.15.6)
+## Recent Updates (v5.15.10)
 
 ### Latest Enhancements
 
+- **CameraPlacement Legacy Import**: Added comprehensive legacy JSON file import functionality with support for multiple data formats, automatic image loading, and seamless database integration
 - **CameraPlacement Module**: Enhanced interactive camera placement tool with improved UI consistency, better icon visibility, drag-and-drop image upload, professional export capabilities, and complete Verkada database integration
 - **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
 - **HTML Content Support**: Terms and conditions now properly parse HTML content from TinyMCE editors with clean rendering
@@ -2461,6 +2462,15 @@ import { CameraPlacement } from 'visns-components';
 <CameraPlacement />
 ```
 
+**Legacy Import Workflow:**
+1. **Click Import Button**: Orange folder icon (📁) in the header controls
+2. **Select JSON File**: Choose legacy camera placement JSON file (.json extension)
+3. **Automatic Processing**: Smart parser handles multiple formats automatically
+4. **Import Validation**: Real-time validation with detailed error messages if needed  
+5. **Data Loading**: Cameras, background images, and project metadata loaded instantly
+6. **Review & Adjust**: Fine-tune camera positions if coordinate scaling differs
+7. **Save to Database**: Use existing save functionality to persist imported data
+
 **Key Features:**
 -   **Enhanced User Interface**: Modern icon-based controls with tooltips, consistent color theming using project CSS variables
 -   **Dual Mode Support**: Switch between Mapbox map integration and image-based placement with seamless transitions
@@ -2470,10 +2480,14 @@ import { CameraPlacement } from 'visns-components';
 -   **FOV Visualization**: Intelligent field-of-view triangles with inverse distance scaling for realistic coverage display
 -   **Interactive Placement**: Drag-and-drop camera positioning with rotation handles for directional adjustment
 -   **Save/Load Projects**: Export/import camera placements as JSON files with project metadata and timestamps
+-   **Legacy JSON Import**: One-click import of legacy camera placement files with automatic format detection and base64 image support
 -   **Professional Exports**: Generate high-quality PNG reports with side-by-side camera specifications and installation details
 -   **SweetAlert Integration**: Professional modal dialogs for confirmations, error handling, and success notifications
 
-**Recent Improvements (v5.15.6):**
+**Recent Improvements (v5.15.10):**
+- **Legacy JSON Import**: Comprehensive import functionality supporting multiple legacy data formats with automatic image loading and base64 processing
+- **Enhanced Controls Layout**: Expanded controls container to accommodate new import button with proper spacing and responsive design
+- **Smart Data Parser**: Intelligent JSON parsing that handles 4+ different legacy format structures with fallback handling
 - **Icon Visibility**: Fixed save button icon visibility with improved color contrast and explicit styling
 - **UI Consistency**: All buttons now use project-standard color variables for consistent theming
 - **Tooltips**: CSS-based tooltips for all control buttons with descriptive text
@@ -2488,6 +2502,30 @@ import { CameraPlacement } from 'visns-components';
 - **Advanced Models**: Support for optical zoom, telephoto lenses, 4K resolution, and specialized security features
 - **Real-time Updates**: Live camera specification display in sidebar with direction controls and coordinate tracking
 
+**Legacy Import System (v5.15.10+):**
+- **Multi-Format Support**: Handles 4+ different legacy JSON structures automatically with intelligent format detection
+- **Base64 Image Processing**: Seamless import of large images (4MB+) with base64 data URL support
+- **Smart Data Validation**: Comprehensive validation with user-friendly error messages and detailed debugging
+- **Format Flexibility**: Supports various naming conventions (`image.src`, `uploadedImage`, `backgroundImage`, etc.)
+- **One-Click Migration**: Import legacy projects with cameras, images, and metadata in a single operation
+- **Database Integration**: Imported data immediately compatible with save/load database functionality
+- **Visual Import Feedback**: Loading indicators, success dialogs with import summaries, and error handling
+
+**Supported Legacy Formats:**
+```javascript
+// Format 1: Standard export with image object
+{ "image": { "src": "data:image/...", "name": "..." }, "cameras": [...] }
+
+// Format 2: Nested placement structure  
+{ "placement": { "cameras": [...], "image": "...", "projectName": "..." } }
+
+// Format 3: Simple camera array
+[{ "id": 1, "name": "Camera 1", "x": 100, "y": 200, ... }]
+
+// Format 4: Auto-detected custom structures
+{ "customData": { "cameraArray": [...] }, "backgroundImage": "..." }
+```
+
 **Technical Capabilities:**
 - **Map Integration**: Mapbox GL JS with geocoding search, satellite imagery, and custom marker styling
 - **Image Processing**: Support for floor plans and site diagrams with HTML5 file API and FileReader integration

package/package.json

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

package/src/components/Breadcrumb.jsx

@@ -70,9 +70,13 @@ function Breadcrumb({ data, page }) {
 
     return (
         <h1>
-            {page?.parentTitle && page?.parentUrl && (
+            {page?.parentTitle && (
                 <>
-                    <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
+                    {page?.parentUrl ? (
+                        <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
+                    ) : (
+                        <span>{parse(page.parentTitle)}</span>
+                    )}
                     <ChevronRight strokeWidth={2} size={18} />
                 </>
             )}
@@ -92,15 +96,19 @@ function Breadcrumb({ data, page }) {
                 page &&
                 page.title && (
                     <>
-                        <Link
-                            to={`${page.previousUrl}${
-                                page.previousUrlKey && data[page.previousUrlKey]
-                                    ? '/' + data[page.previousUrlKey]
-                                    : ''
-                            }`}
-                        >
-                            {parse(page.title)}
-                        </Link>
+                        {page.previousUrl ? (
+                            <Link
+                                to={`${page.previousUrl}${
+                                    page.previousUrlKey && data[page.previousUrlKey]
+                                        ? '/' + data[page.previousUrlKey]
+                                        : ''
+                                }`}
+                            >
+                                {parse(page.title)}
+                            </Link>
+                        ) : (
+                            <span>{parse(page.title)}</span>
+                        )}
                     </>
                 )
             )}

package/src/components/CameraPlacement.jsx

@@ -48,6 +48,7 @@ const CameraPlacement = ({ userProfile }) => {
     const geocoderRef = useRef(null);
     const imageContainer = useRef(null);
     const fileInputRef = useRef(null);
+    const jsonFileInputRef = useRef(null);
     const [isDragOver, setIsDragOver] = useState(false);
     const [isRotating, setIsRotating] = useState(false);
 
@@ -186,6 +187,282 @@ const CameraPlacement = ({ userProfile }) => {
         [map]
     );
 
+    // Handle legacy JSON file upload
+    const handleJsonFileUpload = useCallback(async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        if (!file.name.toLowerCase().endsWith('.json')) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Invalid File Type',
+                text: 'Please select a JSON file (.json extension)',
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
+
+        try {
+            const text = await file.text();
+            const jsonData = JSON.parse(text);
+
+            // Show loading indicator
+            Swal.fire({
+                title: 'Processing Legacy Data...',
+                text: 'Converting and validating JSON data',
+                allowOutsideClick: false,
+                showConfirmButton: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                }
+            });
+
+            // Process and validate the JSON data
+            const result = await processLegacyJsonData(jsonData);
+            
+            Swal.close();
+
+            if (result.success) {
+                // Load the processed data
+                setProjectName(result.data.projectName);
+                setMode(result.data.mode);
+                setCameras(result.data.cameras);
+                
+                if (result.data.uploadedImage) {
+                    setUploadedImage(result.data.uploadedImage);
+                }
+
+                // Clear the selected project since this is new legacy data
+                setSelectedProject(null);
+                setSidebarTab('cameras');
+
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Legacy Data Loaded!',
+                    html: `
+                        <div style="text-align: left;">
+                            <p><strong>Successfully imported:</strong></p>
+                            <ul style="margin: 10px 0; padding-left: 20px;">
+                                <li>Project: "${result.data.projectName}"</li>
+                                <li>Cameras: ${result.data.cameras.length}</li>
+                                <li>Mode: ${result.data.mode}</li>
+                                ${result.data.uploadedImage ? '<li>Image: Yes</li>' : '<li>Image: No</li>'}
+                            </ul>
+                            <p style="color: #6b7280; font-size: 14px; margin-top: 15px;">
+                                <strong>Next steps:</strong> Review the imported data and save it to the database using the Save button.
+                            </p>
+                        </div>
+                    `,
+                    confirmButtonColor: '#3b82f6',
+                    confirmButtonText: 'Continue',
+                });
+            } else {
+                throw new Error(result.error);
+            }
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Import Failed',
+                html: `
+                    <div style="text-align: left;">
+                        <p>Failed to import legacy JSON file:</p>
+                        <div style="background: #f3f4f6; padding: 10px; border-radius: 4px; margin: 10px 0; font-family: monospace; font-size: 12px; max-height: 150px; overflow-y: auto;">
+                            ${error.message}
+                        </div>
+                        <p style="color: #6b7280; font-size: 14px;">
+                            Please check that the JSON file contains valid camera placement data.
+                        </p>
+                    </div>
+                `,
+                confirmButtonColor: '#ef4444',
+            });
+        }
+
+        // Clear the file input
+        event.target.value = '';
+    }, []);
+
+    // Process legacy JSON data and convert to current format
+    const processLegacyJsonData = useCallback(async (jsonData) => {
+        try {
+            // Validate basic structure
+            if (!jsonData || typeof jsonData !== 'object') {
+                throw new Error('Invalid JSON structure - expected an object');
+            }
+
+            let cameras = [];
+            let projectName = '';
+            let mode = 'image';
+            let uploadedImage = null;
+
+            // Handle different legacy JSON formats
+            
+            // Format 1: Direct camera placement export with cameras array
+            if (jsonData.cameras && Array.isArray(jsonData.cameras)) {
+                cameras = jsonData.cameras.map((camera, index) => {
+                    // Ensure required fields exist with fallbacks
+                    const id = camera.id || Date.now() + index;
+                    const name = camera.name || camera.customName || `Camera ${index + 1}`;
+                    const x = typeof camera.x === 'number' ? camera.x : (camera.position?.x || 0);
+                    const y = typeof camera.y === 'number' ? camera.y : (camera.position?.y || 0);
+                    const direction = typeof camera.direction === 'number' ? camera.direction : (camera.rotation || 0);
+                    
+                    return {
+                        id: id,
+                        name: name,
+                        customName: camera.customName || '',
+                        x: x,
+                        y: y,
+                        direction: direction,
+                        verkadaModel: camera.verkadaModel || camera.model || null,
+                        timestamp: camera.timestamp || new Date().toISOString(),
+                    };
+                });
+
+                projectName = jsonData.projectName || jsonData.name || jsonData.title || 'Imported Legacy Project';
+                mode = jsonData.mode || 'image';
+                
+                // Handle different image data formats - extract src string directly
+                if (jsonData.image && jsonData.image.src) {
+                    // Format: { "image": { "src": "data:image/png;base64,..." } }
+                    uploadedImage = jsonData.image.src;
+                } else if (jsonData.uploadedImage && jsonData.uploadedImage.src) {
+                    // Format: { "uploadedImage": { "src": "...", "name": "..." } }
+                    uploadedImage = jsonData.uploadedImage.src;
+                } else if (jsonData.uploadedImage && typeof jsonData.uploadedImage === 'string') {
+                    // Format: { "uploadedImage": "data:image/..." }
+                    uploadedImage = jsonData.uploadedImage;
+                } else if (jsonData.backgroundImage) {
+                    // Format: { "backgroundImage": "data:image/..." }
+                    uploadedImage = jsonData.backgroundImage;
+                } else {
+                    uploadedImage = null;
+                }
+            }
+            
+            // Format 2: Legacy format with different structure
+            else if (jsonData.placement || jsonData.cameraPlacement) {
+                const placement = jsonData.placement || jsonData.cameraPlacement;
+                
+                if (placement.cameras && Array.isArray(placement.cameras)) {
+                    cameras = placement.cameras.map((camera, index) => ({
+                        id: camera.id || Date.now() + index,
+                        name: camera.name || `Camera ${index + 1}`,
+                        customName: camera.customName || '',
+                        x: camera.x || 0,
+                        y: camera.y || 0,
+                        direction: camera.direction || 0,
+                        verkadaModel: camera.verkadaModel || null,
+                        timestamp: new Date().toISOString(),
+                    }));
+                }
+
+                projectName = placement.projectName || placement.name || 'Imported Legacy Project';
+                mode = placement.mode || 'image';
+                
+                // Handle different image data formats - extract src string directly
+                if (placement.image && placement.image.src) {
+                    uploadedImage = placement.image.src;
+                } else if (placement.image && typeof placement.image === 'string') {
+                    uploadedImage = placement.image;
+                } else if (placement.backgroundImage) {
+                    uploadedImage = placement.backgroundImage;
+                } else {
+                    uploadedImage = null;
+                }
+            }
+            
+            // Format 3: Simple array of cameras
+            else if (Array.isArray(jsonData)) {
+                cameras = jsonData.map((camera, index) => ({
+                    id: camera.id || Date.now() + index,
+                    name: camera.name || `Camera ${index + 1}`,
+                    customName: camera.customName || '',
+                    x: camera.x || 0,
+                    y: camera.y || 0,
+                    direction: camera.direction || 0,
+                    verkadaModel: camera.verkadaModel || null,
+                    timestamp: new Date().toISOString(),
+                }));
+
+                projectName = 'Imported Legacy Project';
+                mode = 'image';
+            }
+            
+            // Format 4: Check for other common legacy formats
+            else {
+                // Look for any array that might contain camera data
+                const possibleCameraArrays = Object.values(jsonData).filter(value => 
+                    Array.isArray(value) && value.length > 0 && 
+                    value[0] && typeof value[0] === 'object'
+                );
+
+                if (possibleCameraArrays.length > 0) {
+                    const cameraArray = possibleCameraArrays[0];
+                    cameras = cameraArray.map((camera, index) => ({
+                        id: camera.id || Date.now() + index,
+                        name: camera.name || `Camera ${index + 1}`,
+                        customName: camera.customName || '',
+                        x: camera.x || 0,
+                        y: camera.y || 0,
+                        direction: camera.direction || 0,
+                        verkadaModel: camera.verkadaModel || null,
+                        timestamp: new Date().toISOString(),
+                    }));
+
+                    projectName = jsonData.name || jsonData.title || 'Imported Legacy Project';
+                    mode = jsonData.mode || 'image';
+                    
+                    // Handle different image data formats - extract src string directly
+                    if (jsonData.image && jsonData.image.src) {
+                        uploadedImage = jsonData.image.src;
+                    } else if (jsonData.image && typeof jsonData.image === 'string') {
+                        uploadedImage = jsonData.image;
+                    } else if (jsonData.backgroundImage) {
+                        uploadedImage = jsonData.backgroundImage;
+                    } else {
+                        uploadedImage = null;
+                    }
+                } else {
+                    throw new Error('No valid camera data found in JSON file. Expected arrays of camera objects.');
+                }
+            }
+
+            // Validate that we have at least some cameras
+            if (!cameras || cameras.length === 0) {
+                throw new Error('No cameras found in the JSON file');
+            }
+
+            // Validate camera data
+            const invalidCameras = cameras.filter(camera => 
+                typeof camera.x !== 'number' || 
+                typeof camera.y !== 'number' || 
+                isNaN(camera.x) || 
+                isNaN(camera.y)
+            );
+
+            if (invalidCameras.length > 0) {
+                throw new Error(`${invalidCameras.length} cameras have invalid position data (x, y coordinates must be numbers)`);
+            }
+
+            return {
+                success: true,
+                data: {
+                    projectName: projectName,
+                    mode: mode,
+                    cameras: cameras,
+                    uploadedImage: uploadedImage
+                }
+            };
+
+        } catch (error) {
+            return {
+                success: false,
+                error: error.message
+            };
+        }
+    }, []);
+
     // Initialize Mapbox GL map
     useEffect(() => {
         if (!mapContainer.current || mode !== 'map') return;
@@ -575,7 +852,7 @@ const CameraPlacement = ({ userProfile }) => {
     const loadProject = useCallback(async (lightweightProject) => {
         try {
             // Show loading indicator
-            const loadingToast = Swal.fire({
+            Swal.fire({
                 title: 'Loading Project...',
                 text: 'Fetching project data',
                 allowOutsideClick: false,
@@ -1194,6 +1471,12 @@ const CameraPlacement = ({ userProfile }) => {
                             tooltip="Upload Image"
                             className={styles.uploadBtn}
                         />
+                        <IconButton
+                            icon={FolderOpen}
+                            onClick={() => jsonFileInputRef.current?.click()}
+                            tooltip="Import Legacy JSON File"
+                            className={styles.importBtn}
+                        />
                         <IconButton
                             icon={Save}
                             onClick={saveToDatabase}
@@ -2289,7 +2572,7 @@ const CameraPlacement = ({ userProfile }) => {
             </div>
             </div>
 
-            {/* Hidden file input */}
+            {/* Hidden file inputs */}
             <input
                 type="file"
                 ref={fileInputRef}
@@ -2297,6 +2580,13 @@ const CameraPlacement = ({ userProfile }) => {
                 accept="image/*"
                 style={{ display: 'none' }}
             />
+            <input
+                type="file"
+                ref={jsonFileInputRef}
+                onChange={handleJsonFileUpload}
+                accept=".json,application/json"
+                style={{ display: 'none' }}
+            />
 
             {showModal && selectedCamera && (
                 <CameraSelectionModal