@visns-studio/visns-components 5.15.8 → 5.15.10

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.8",
+    "version": "5.15.10",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [