@visns-studio/visns-components 5.15.3 → 5.15.5

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.3)
+## Recent Updates (v5.15.4)
 
 ### Latest Enhancements
 
+- **CameraPlacement Module**: New interactive camera placement tool with Verkada database integration, FOV visualization, grid-based camera selection, save/load functionality, and professional export capabilities
 - **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
 - **Improved Typography**: Refined font sizing in Terms and Conditions to match page typography hierarchy
@@ -73,6 +74,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **StandardModal** - Reusable modal component with consistent styling
 -   **Call Popup** - Modal dialogs
 -   **QR Code** - QR code generation and printing
+-   **CameraPlacement** - Interactive camera placement tool with Verkada database, FOV visualization, and save/load functionality
 
 ### Generic Pages
 
@@ -2450,6 +2452,45 @@ The CustomFetch component includes these features:
 -   **CSRF Protection**: Redirects to login page on CSRF token mismatch
 -   **Authentication Handling**: Silently handles unauthenticated errors without showing toast notifications
 
+#### CameraPlacement
+Interactive camera placement and visualization tool for security system design. Features a comprehensive Verkada camera database, FOV triangle visualization, and project save/load functionality.
+
+```jsx
+import { CameraPlacement } from 'visns-components';
+
+<CameraPlacement />
+```
+
+**Key Features:**
+-   **Dual Mode Support**: Switch between Mapbox map integration and image-based placement
+-   **Verkada Database**: Complete catalog of Verkada cameras with specifications, FOV, and environmental ratings
+-   **Grid-Based Selection**: Visual camera selection modal with categorized camera cards showing specs and icons  
+-   **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 for project continuity
+-   **Export Functionality**: Generate high-quality PNG exports with side-by-side camera reference lists
+-   **SweetAlert Integration**: Professional modal dialogs for confirmations and notifications
+
+**Camera Database:**
+- **29+ Camera Models**: Complete Verkada lineup including dome, bullet, PTZ, multisensor, fisheye, mini, and video intercom cameras
+- **Detailed Specifications**: Resolution, FOV, IR range, sensor size, environment rating, and feature lists
+- **Smart Categorization**: Organized by camera type with visual icons and environment compatibility
+- **Advanced Models**: Support for optical zoom, telephoto lenses, 4K resolution, and specialized features
+
+**Technical Capabilities:**
+- **Map Integration**: Mapbox GL JS with geocoding search and satellite imagery
+- **Image Upload**: Support for floor plans and site diagrams with HTML5 file API
+- **FOV Calculations**: Dynamic triangle sizing based on camera specifications with mathematical precision
+- **Export Quality**: HTML2Canvas integration for professional-grade layout exports
+- **State Management**: React hooks-based architecture with real-time updates
+
+**Use Cases:**
+- Security system design and planning
+- Camera coverage analysis and optimization  
+- Client presentations with visual layouts
+- Installation planning and documentation
+- Site survey and assessment tools
+
 #### Download
 
 File download utility.
@@ -3660,13 +3701,23 @@ All existing GenericQuote functionality remains unchanged:
 
 Proposal features are **opt-in** and activated only when `proposalConfig.enabled: true` is set.
 
-**Recent Improvements (v5.15.3):**
+**Recent Improvements (v5.15.3 & 2025 Updates):**
 - **StandardModal Integration**: Replaced reactjs-popup with StandardModal for consistent modal behavior and better maintainability
 - **HTML Content Rendering**: Terms and conditions now support rich HTML content from TinyMCE editors with proper parsing via `html-react-parser`
 - **Typography Optimization**: Refined font sizing (14px desktop, 12px mobile) for better visual hierarchy and page consistency
 - **Enhanced Styling**: Improved CSS for HTML elements including lists, paragraphs, and formatted text in terms sections
 - **Complete Modal Consistency**: All modals throughout the library now use the same StandardModal component
 
+**Latest 2025 Enhancements:**
+- **Enhanced Content Editor Modal**: Increased modal dimensions (98% width, 95% height) for better TinyMCE integration
+- **Streamlined Section Management**: Removed unnecessary section type selector from Edit Proposal Content modal
+- **Maximized Editor Space**: TinyMCE editor height increased from 400px to 500px with improved container sizing
+- **Dynamic Template Integration**: Template section titles now properly populate from backend configuration instead of hardcoded values
+- **Improved Content Flow**: Fixed proposal content insertion ensuring custom content appears correctly in generated PDFs
+- **Professional PDF Layout**: Enhanced margin handling with 40px/50px margins for all sections (except cover page preservation)
+- **Branding Color System**: Automatic application of branding profile colors (H1=primary, H2=secondary, H3=accent)
+- **Robust PDF Generation**: Improved error handling and blank page prevention during proposal PDF creation
+
 **Advanced Usage Example:**
 
 ```jsx

package/package.json

@@ -7,6 +7,7 @@
         "@fontsource/barlow": "^5.2.6",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
+        "@mapbox/mapbox-gl-geocoder": "^5.1.0",
         "@nivo/bar": "^0.99.0",
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
@@ -27,9 +28,11 @@
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.12",
         "html-react-parser": "^5.2.6",
+        "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.536.0",
+        "mapbox-gl": "^3.14.0",
         "moment": "^2.30.1",
         "motion": "^12.23.12",
         "numeral": "^2.0.6",
@@ -90,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.3",
+    "version": "5.15.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [