@visns-studio/visns-components 5.15.4 → 5.15.6

package/src/components/CameraPlacement.jsx

@@ -0,0 +1,1871 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import html2canvas from 'html2canvas';
+import Swal from 'sweetalert2';
+import { Edit3, Trash2 } from 'lucide-react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+import styles from './styles/CameraPlacement.module.scss';
+import modalStyles from './styles/CameraPlacementModal.module.scss';
+import './styles/CameraMarkers.scss';
+import {
+    VERKADA_CAMERAS,
+    CAMERA_CATEGORIES,
+    getCameraById,
+} from './data/verkadaCameras';
+import CameraIcon from './utils/CameraIcon';
+
+const CameraPlacement = () => {
+    const [cameras, setCameras] = useState([]);
+    const [selectedCamera, setSelectedCamera] = useState(null);
+    const [showModal, setShowModal] = useState(false);
+    const [map, setMap] = useState(null);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [mode, setMode] = useState('image'); // 'image' or 'map' - default to image
+    const [uploadedImage, setUploadedImage] = useState(null);
+    const [addCameraMode, setAddCameraMode] = useState(false);
+    const mapContainer = useRef(null);
+    const mapRef = useRef(null);
+    const geocoderRef = useRef(null);
+    const imageContainer = useRef(null);
+    const fileInputRef = useRef(null);
+
+    // Mapbox configuration
+    const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
+
+    // Handle image upload
+    const handleImageUpload = useCallback((event) => {
+        const file = event.target.files[0];
+        if (file && file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                setUploadedImage(e.target.result);
+                setMode('image');
+                // Reset cameras when switching to image mode
+                setCameras([]);
+                // Cleanup map if it exists
+                if (map) {
+                    try {
+                        map.remove();
+                    } catch (error) {
+                        console.warn('Error removing map:', error);
+                    }
+                    setMap(null);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    }, [map]);
+
+    // Handle image click for camera placement (only when in add camera mode)
+    const handleImageClick = useCallback((event) => {
+        if (mode !== 'image' || !imageContainer.current || !addCameraMode) return;
+
+        const rect = imageContainer.current.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        const newCamera = {
+            id: Date.now(),
+            x: x, // Image coordinates instead of lat/lng
+            y: y,
+            name: `Camera ${cameras.length + 1}`,
+            verkadaModel: null,
+            customName: '',
+            direction: 0,
+        };
+
+        setCameras((prev) => [...prev, newCamera]);
+        setSelectedCamera(newCamera);
+        setShowModal(true);
+        setAddCameraMode(false); // Exit add camera mode after placing
+    }, [mode, cameras.length, addCameraMode]);
+
+
+    // Initialize Mapbox GL map
+    useEffect(() => {
+        if (!mapContainer.current || mode !== 'map') return;
+
+        // Set Mapbox access token
+        mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
+
+        const mapInstance = new mapboxgl.Map({
+            container: mapContainer.current,
+            style: 'mapbox://styles/mapbox/satellite-streets-v12', // Start with satellite imagery
+            center: [115.8605, -31.9505], // Perth, Australia default
+            zoom: 16,
+            maxZoom: 22, // Allow higher zoom for better detail
+            minZoom: 10,
+            bearing: 0,
+            pitch: 0,
+            preserveDrawingBuffer: true, // Required for canvas export
+        });
+
+        // Add Mapbox geocoder
+        const geocoder = new MapboxGeocoder({
+            accessToken: MAPBOX_ACCESS_TOKEN,
+            mapboxgl: mapboxgl,
+            placeholder: 'Search for addresses...',
+            proximity: {
+                longitude: 144.9631,
+                latitude: -37.8136,
+            },
+        });
+
+        mapInstance.on('load', () => {
+            setMap(mapInstance);
+            mapRef.current = mapInstance;
+
+            // Add zoom controls to the map using Mapbox GL
+            const zoomControl = new mapboxgl.NavigationControl({
+                showCompass: false, // Hide compass, only show zoom buttons
+                showZoom: true,
+            });
+            mapInstance.addControl(zoomControl, 'top-right');
+
+            // Add fullscreen control using Mapbox GL
+            const fullscreenControl = new mapboxgl.FullscreenControl();
+            mapInstance.addControl(fullscreenControl, 'top-right');
+
+            // Add Mapbox geocoder to the map
+            if (geocoderRef.current) {
+                geocoderRef.current.appendChild(geocoder.onAdd(mapInstance));
+            }
+
+            // Handle geocoder result for Mapbox
+            geocoder.on('result', (e) => {
+                // Mapbox geocoder result format
+                const coordinates = e.result.center;
+                if (coordinates) {
+                    mapInstance.flyTo({
+                        center: coordinates,
+                        zoom: Math.min(Math.max(mapInstance.getZoom(), 18), 20), // Allow zoom up to 20 for better detail
+                    });
+                }
+            });
+        });
+
+        return () => {
+            mapInstance.remove();
+        };
+    }, [mode]);
+
+    // Handle map click to add camera
+    const handleMapClick = useCallback(
+        (e) => {
+            if (!map || mode !== 'map') return;
+
+            const { lng, lat } = e.lngLat;
+            const newCamera = {
+                id: Date.now(),
+                lng,
+                lat,
+                name: `Camera ${cameras.length + 1}`,
+                verkadaModel: null, // Will be selected in modal
+                customName: '',
+                direction: 0,
+            };
+
+            setCameras((prev) => [...prev, newCamera]);
+            setSelectedCamera(newCamera);
+            setShowModal(true);
+        },
+        [map, cameras.length, mode]
+    );
+
+    // Add click listener to map
+    useEffect(() => {
+        if (!map) return;
+
+        map.on('click', handleMapClick);
+        return () => {
+            map.off('click', handleMapClick);
+        };
+    }, [map, handleMapClick]);
+
+    const updateCamera = useCallback((cameraId, updates) => {
+        setCameras((prev) => {
+            const updated = prev.map((cam) =>
+                cam.id === cameraId ? { ...cam, ...updates } : cam
+            );
+            return updated;
+        });
+    }, []);
+
+    const removeCamera = useCallback(
+        (cameraId) => {
+            setCameras((prev) => prev.filter((cam) => cam.id !== cameraId));
+
+            // Remove FOV layer and source from map
+            if (map) {
+                const layerId = `fov-layer-${cameraId}`;
+                const sourceId = `fov-${cameraId}`;
+                if (map.getLayer(layerId)) {
+                    map.removeLayer(layerId);
+                }
+                if (map.getSource(sourceId)) {
+                    map.removeSource(sourceId);
+                }
+            }
+        },
+        [map]
+    );
+
+    // Save placement as JSON file
+    const saveAsFile = useCallback(() => {
+        if (!cameras.length && !uploadedImage) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'No Data to Save',
+                text: 'Please add cameras or upload an image first.',
+                confirmButtonColor: '#8b5cf6'
+            });
+            return;
+        }
+
+        const saveData = {
+            version: '1.0',
+            timestamp: new Date().toISOString(),
+            image: uploadedImage ? {
+                src: uploadedImage,
+                name: 'uploaded-image'
+            } : null,
+            mode: mode,
+            cameras: cameras.map(camera => ({
+                id: camera.id,
+                name: camera.name,
+                customName: camera.customName,
+                x: camera.x,
+                y: camera.y,
+                direction: camera.direction,
+                verkadaModel: camera.verkadaModel,
+                timestamp: camera.timestamp
+            }))
+        };
+
+        const dataStr = JSON.stringify(saveData, null, 2);
+        const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+        
+        const exportFileDefaultName = `camera-placement-${new Date().toISOString().split('T')[0]}.json`;
+        
+        const linkElement = document.createElement('a');
+        linkElement.setAttribute('href', dataUri);
+        linkElement.setAttribute('download', exportFileDefaultName);
+        linkElement.click();
+
+        // Show success message
+        Swal.fire({
+            icon: 'success',
+            title: 'File Saved!',
+            text: `Camera placement saved as ${exportFileDefaultName}`,
+            timer: 3000,
+            showConfirmButton: false,
+            toast: true,
+            position: 'top-end'
+        });
+    }, [cameras, uploadedImage, mode]);
+
+    // Load placement from JSON file
+    const loadFromFile = useCallback(() => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        
+        input.onchange = (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+            
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const saveData = JSON.parse(e.target.result);
+                    
+                    // Validate data structure
+                    if (!saveData.version || !Array.isArray(saveData.cameras)) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Invalid File',
+                            text: 'Please select a valid camera placement file.',
+                            confirmButtonColor: '#f59e0b'
+                        });
+                        return;
+                    }
+                    
+                    // Load image if present
+                    if (saveData.image && saveData.image.src) {
+                        setUploadedImage(saveData.image.src);
+                    }
+                    
+                    // Set mode
+                    if (saveData.mode) {
+                        setMode(saveData.mode);
+                    }
+                    
+                    // Load cameras
+                    setCameras(saveData.cameras || []);
+                    
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'File Loaded!',
+                        text: `Successfully loaded ${saveData.cameras?.length || 0} cameras from ${file.name}`,
+                        confirmButtonColor: '#f59e0b'
+                    });
+                    
+                } catch (error) {
+                    console.error('Error loading file:', error);
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'File Error',
+                        text: 'Error reading file. Please ensure it\'s a valid JSON file.',
+                        confirmButtonColor: '#f59e0b'
+                    });
+                }
+            };
+            reader.readAsText(file);
+        };
+        
+        input.click();
+    }, []);
+
+    const exportMap = useCallback(async () => {
+        try {
+            if (!cameras.length) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'No Cameras',
+                    text: 'Please add cameras first before exporting.',
+                    confirmButtonColor: '#10b981'
+                });
+                return;
+            }
+
+            const imageContainer = document.querySelector(`.${styles.imageContainer}`);
+            if (!imageContainer) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'No Image',
+                    text: 'Please upload an image first before exporting.',
+                    confirmButtonColor: '#10b981'
+                });
+                return;
+            }
+
+            // First, take a screenshot of just the image container to get its natural size
+            const imageCanvas = await html2canvas(imageContainer, {
+                useCORS: true,
+                allowTaint: true,
+                scale: 1.2,
+                backgroundColor: '#f8fafc',
+                logging: false
+            });
+
+            // Calculate dimensions for professional report layout
+            const cameraListWidth = 550; // Fixed width for professional report
+            const headerHeight = 140; // Space for report header
+            const summaryHeight = 120; // Space for project summary
+            const cameraHeight = 180; // More space per camera card
+            const footerHeight = 300; // Space for legend and notes
+            const totalCameraListHeight = headerHeight + summaryHeight + (cameras.length * cameraHeight) + footerHeight;
+            
+            // Use the larger of image height or camera list height
+            const finalHeight = Math.max(imageCanvas.height, totalCameraListHeight);
+            const finalWidth = imageCanvas.width + cameraListWidth + 20; // small gap
+
+            // Create the composite container with calculated dimensions
+            const exportContainer = document.createElement('div');
+            exportContainer.style.position = 'absolute';
+            exportContainer.style.top = '-10000px';
+            exportContainer.style.left = '-10000px';
+            exportContainer.style.width = finalWidth + 'px';
+            exportContainer.style.height = finalHeight + 'px';
+            exportContainer.style.backgroundColor = '#ffffff';
+            exportContainer.style.display = 'flex';
+            exportContainer.style.gap = '10px';
+            exportContainer.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif';
+            document.body.appendChild(exportContainer);
+
+            // Left side: Image
+            const imageDiv = document.createElement('div');
+            imageDiv.style.width = imageCanvas.width + 'px';
+            imageDiv.style.height = finalHeight + 'px';
+            imageDiv.style.background = '#f8fafc';
+            imageDiv.style.display = 'flex';
+            imageDiv.style.alignItems = 'center';
+            imageDiv.style.justifyContent = 'center';
+            imageDiv.style.borderRight = '2px solid #e5e7eb';
+            imageDiv.style.flexShrink = '0';
+
+            // Scale the canvas to fit if needed
+            const scaledCanvas = document.createElement('canvas');
+            const ctx = scaledCanvas.getContext('2d');
+            scaledCanvas.width = imageCanvas.width;
+            scaledCanvas.height = imageCanvas.height;
+            ctx.drawImage(imageCanvas, 0, 0);
+            
+            imageDiv.appendChild(scaledCanvas);
+            exportContainer.appendChild(imageDiv);
+
+            // Right side: Camera list
+            const cameraListDiv = document.createElement('div');
+            cameraListDiv.style.width = cameraListWidth + 'px';
+            cameraListDiv.style.height = finalHeight + 'px';
+            cameraListDiv.style.padding = '20px';
+            cameraListDiv.style.background = '#ffffff';
+            cameraListDiv.style.overflow = 'visible';
+            cameraListDiv.style.boxSizing = 'border-box';
+
+            // Generate professional report-style HTML
+            const cameraListHTML = `
+                <!-- Report Header -->
+                <div style="background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: white; padding: 32px; margin: -20px -20px 0 -20px; border-radius: 16px 16px 0 0; box-shadow: 0 6px 20px rgba(0,0,0,0.15);">
+                    <h1 style="margin: 0 0 16px 0; font-size: 36px; font-weight: 800; text-align: center; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); letter-spacing: -0.6px; line-height: 1.1;">Security Camera Installation Report</h1>
+                    <div style="text-align: center; margin-bottom: 24px;">
+                        <div style="display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 12px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #e5e7eb;">
+                            PROJECT LAYOUT & SPECIFICATIONS
+                        </div>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; letter-spacing: 0.3px;">
+                        <div style="color: #d1d5db; font-weight: 500;"><strong style="color: #f3f4f6; font-weight: 600;">Generated:</strong> ${new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>
+                        <div style="color: #d1d5db; font-weight: 500;"><strong style="color: #f3f4f6; font-weight: 600;">Time:</strong> ${new Date().toLocaleTimeString()}</div>
+                    </div>
+                </div>
+                
+                
+                ${cameras.map((camera, index) => {
+                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                    // Generate sequential camera number
+                    const cameraNumber = index + 1;
+                    
+                    return `
+                        <div style="margin-bottom: 20px; background: white; border: 1px solid #d1d5db; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); page-break-inside: avoid;">
+                            <!-- Camera Header -->
+                            <div style="background: ${verkadaCamera?.environment === 'indoor' ? 'linear-gradient(135deg, #0d9488 0%, #0f766e 100%)' : 'linear-gradient(135deg, #ea580c 0%, #dc2626 100%)'}; color: white; padding: 16px 20px; position: relative;">
+                                <div style="display: flex; align-items: center; gap: 16px;">
+                                    <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.3);">${cameraNumber}</div>
+                                    <div style="flex: 1;">
+                                        <h4 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; text-shadow: 0 1px 3px rgba(0,0,0,0.2);">Camera ${cameraNumber}</h4>
+                                        <div style="font-size: 13px; opacity: 0.95; margin-top: 4px; letter-spacing: 0.2px;">${verkadaCamera ? verkadaCamera.name : 'Model Not Selected'}</div>
+                                    </div>
+                                    ${verkadaCamera?.ptz ? '<div style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;">PTZ</div>' : ''}
+                                </div>
+                            </div>
+                            
+                            <!-- Camera Details -->
+                            <div style="padding: 20px;">
+                                ${verkadaCamera ? `
+                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
+                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #3b82f6;">
+                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Resolution</div>
+                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.resolution}</div>
+                                        </div>
+                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #8b5cf6;">
+                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Field of View</div>
+                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.fov}°</div>
+                                        </div>
+                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid ${verkadaCamera.environment === 'indoor' ? '#10b981' : '#f59e0b'};">
+                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Environment</div>
+                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; text-transform: capitalize; line-height: 1.3;">${verkadaCamera.environment}</div>
+                                        </div>
+                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #ef4444;">
+                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">IR Range</div>
+                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.irRange}m</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Position & Direction -->
+                                    <div style="background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
+                                        <div style="font-size: 13px; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; text-align: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;">Installation Details</div>
+                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                                            <div style="background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;">
+                                                <div style="font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Direction</div>
+                                                <div style="font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4;">${camera.direction ? `${camera.direction}° from North` : 'Not set'}</div>
+                                            </div>
+                                            <div style="background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;">
+                                                <div style="font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Coordinates</div>
+                                                <div style="font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4; font-family: monospace;">${mode === 'map' ? `${camera.lat?.toFixed(6)}, ${camera.lng?.toFixed(6)}` : `X: ${Math.round(camera.x)}, Y: ${Math.round(camera.y)}`}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Features -->
+                                    ${verkadaCamera.features && verkadaCamera.features.length > 0 ? `
+                                        <div style="background: white; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0;">
+                                            <div style="font-size: 13px; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; text-align: center;">Key Features</div>
+                                            <div style="display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;">
+                                                ${verkadaCamera.features.slice(0, 6).map(feature => 
+                                                    `<span style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; border: 1px solid #93c5fd; padding: 6px 12px; border-radius: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;">${feature}</span>`
+                                                ).join('')}
+                                                ${verkadaCamera.features.length > 6 ? `<span style="color: #64748b; font-size: 11px; align-self: center; padding: 4px 8px; border-radius: 12px; background: #f1f5f9; font-weight: 500;">+${verkadaCamera.features.length - 6} more</span>` : ''}
+                                            </div>
+                                        </div>
+                                    ` : ''}
+                                ` : `
+                                    <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #fca5a5; border-radius: 12px; margin: 10px 0;">
+                                        <div style="font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #dc2626; letter-spacing: 0.2px;">⚠ No Camera Model Selected</div>
+                                        <div style="font-size: 13px; color: #7f1d1d; line-height: 1.5; letter-spacing: 0.2px;">Please configure this camera before installation</div>
+                                    </div>
+                                `}
+                            </div>
+                        </div>
+                    `;
+                }).join('')}
+                
+                <!-- Report Footer -->
+                <div style="margin-top: 32px; padding: 24px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border-radius: 16px; border: 1px solid #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
+                    <!-- Legend Section -->
+                    <div style="margin-bottom: 24px;">
+                        <h3 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 800; color: #0f172a; text-align: center; letter-spacing: -0.4px;">Camera Types & Legend</h3>
+                        <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
+                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                                <div style="width: 24px; height: 24px; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(13,148,136,0.3);"></div>
+                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">Indoor Camera</span>
+                            </div>
+                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                                <div style="width: 24px; height: 24px; background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%); border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(234,88,12,0.3);"></div>
+                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">Outdoor Camera</span>
+                            </div>
+                            ${cameras.some(c => getCameraById(c.verkadaModel)?.ptz) ? `
+                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                                <div style="width: 24px; height: 24px; background: #6b7280; border-radius: 50%; border: 3px solid #ef4444; box-shadow: 0 2px 6px rgba(239,68,68,0.3);"></div>
+                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">PTZ Camera</span>
+                            </div>` : ''}
+                        </div>
+                    </div>
+                    
+                    <!-- Technical Notes -->
+                    <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
+                        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700; color: #0f172a; text-align: center; letter-spacing: -0.2px;">📋 Installation Notes</h4>
+                        <div style="font-size: 13px; line-height: 1.8; color: #374151; letter-spacing: 0.2px;">
+                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #3b82f6;"><strong style="color: #1e40af;">Direction Reference:</strong> All camera directions are measured clockwise from North (0° = North, 90° = East, 180° = South, 270° = West)</div>
+                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #8b5cf6;"><strong style="color: #7c3aed;">Field of View:</strong> FOV angles represent the horizontal viewing angle. Actual coverage may vary based on mounting height and obstacles</div>
+                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #10b981;"><strong style="color: #059669;">Coordinates:</strong> ${mode === 'map' ? 'Geographic coordinates (Latitude, Longitude) in decimal degrees' : 'Pixel coordinates relative to uploaded image (X, Y from top-left corner)'}</div>
+                            <div style="padding: 12px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-radius: 8px; border-left: 3px solid #ef4444;"><strong style="color: #dc2626;">Important:</strong> This layout should be verified on-site during installation. Actual camera placement may need adjustment based on physical constraints, lighting conditions, and site requirements</div>
+                        </div>
+                    </div>
+                    
+                    <!-- Report ID & Disclaimer -->
+                    <div style="text-align: center; margin-top: 20px; padding-top: 16px; border-top: 2px solid #cbd5e1;">
+                        <div style="font-size: 12px; color: #475569; margin-bottom: 8px; letter-spacing: 0.5px; font-weight: 600;">Report ID: <span style="font-family: monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;">${Date.now().toString(36).toUpperCase()}</span></div>
+                        <div style="font-size: 11px; color: #64748b; line-height: 1.6; letter-spacing: 0.3px; max-width: 400px; margin: 0 auto;">This report was generated automatically and should be reviewed by qualified security installation professionals</div>
+                    </div>
+                </div>
+            `;
+
+            cameraListDiv.innerHTML = cameraListHTML;
+            exportContainer.appendChild(cameraListDiv);
+
+            // Wait for rendering
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            // Capture the composite with exact dimensions
+            const finalCanvas = await html2canvas(exportContainer, {
+                useCORS: true,
+                allowTaint: true,
+                scale: 1,
+                backgroundColor: '#ffffff',
+                logging: false,
+                width: finalWidth,
+                height: finalHeight
+            });
+
+            // Clean up
+            document.body.removeChild(exportContainer);
+
+            // Download
+            const link = document.createElement('a');
+            const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-');
+            link.download = `Security-Camera-Installation-Report-${timestamp}.png`;
+            link.href = finalCanvas.toDataURL('image/png', 1.0); // Maximum quality
+            link.click();
+
+
+            // Show success message
+            Swal.fire({
+                icon: 'success',
+                title: 'Export Complete!',
+                text: `Professional camera installation report exported as ${link.download}`,
+                timer: 3000,
+                showConfirmButton: false,
+                toast: true,
+                position: 'top-end'
+            });
+
+        } catch (error) {
+            console.error('Error exporting:', error);
+            Swal.fire({
+                icon: 'error',
+                title: 'Export Failed',
+                text: 'Export failed. Please try again or take a manual screenshot.',
+                confirmButtonColor: '#10b981'
+            });
+        }
+    }, [cameras]);
+
+    // Update cameras with markers on map
+    useEffect(() => {
+        if (!map || mode !== 'map') return;
+
+        // Clear existing markers
+        const existingMarkers = document.querySelectorAll('.camera-map-marker');
+        existingMarkers.forEach((marker) => marker.remove());
+
+        // Clear existing FOV layers
+        let existingSources = [];
+        try {
+            const style = map.getStyle();
+            if (style && style.sources) {
+                existingSources = Object.keys(style.sources).filter(
+                    (id) => id.startsWith('fov-')
+                );
+            }
+        } catch (error) {
+            console.warn('Could not access map style, skipping FOV layer cleanup:', error);
+        }
+        existingSources.forEach((sourceId) => {
+            try {
+                const layerId = `fov-layer-${sourceId.replace('fov-', '')}`;
+                if (map.getLayer(layerId)) {
+                    map.removeLayer(layerId);
+                }
+                if (map.getSource(sourceId)) {
+                    map.removeSource(sourceId);
+                }
+            } catch (error) {
+                console.warn(`Could not remove layer/source ${sourceId}:`, error);
+            }
+        });
+
+        // Add camera markers and FOV
+        cameras.forEach((camera, index) => {
+            const verkadaCamera = camera.verkadaModel
+                ? getCameraById(camera.verkadaModel)
+                : null;
+
+            // Create main marker container
+            const markerContainer = document.createElement('div');
+            markerContainer.className = 'camera-marker-container';
+
+            // Create marker element
+            const markerEl = document.createElement('div');
+            const cameraType = verkadaCamera ? verkadaCamera.type : 'unknown';
+            const environment = verkadaCamera
+                ? verkadaCamera.environment
+                : 'outdoor';
+
+            markerEl.className = `camera-map-marker ${cameraType} ${environment}`;
+
+            // Extract camera number from name or use index + 1
+            const cameraNumber =
+                (camera.customName || camera.name).replace(/\D/g, '') ||
+                index + 1;
+
+            markerEl.innerHTML = `
+                <div class="camera-marker-content">
+                    <div class="camera-number">${cameraNumber}</div>
+                </div>
+            `;
+
+            // Create rotation handle
+            const rotationHandle = document.createElement('div');
+            rotationHandle.className = 'rotation-handle';
+            rotationHandle.innerHTML = '<div class="rotation-icon"></div>';
+
+            // Add rotation functionality
+            let isRotating = false;
+            let startAngle = 0;
+            let currentRotation = camera.direction || 0;
+
+            const handleRotationStart = (e) => {
+                e.stopPropagation();
+                isRotating = true;
+                const rect = markerContainer.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                startAngle =
+                    (Math.atan2(e.clientY - centerY, e.clientX - centerX) *
+                        180) /
+                    Math.PI;
+                markerContainer.classList.add('rotating');
+                document.addEventListener('mousemove', handleRotationMove);
+                document.addEventListener('mouseup', handleRotationEnd);
+            };
+
+            const handleRotationMove = (e) => {
+                if (!isRotating) return;
+                const rect = markerContainer.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const currentAngle =
+                    (Math.atan2(e.clientY - centerY, e.clientX - centerX) *
+                        180) /
+                    Math.PI;
+                const deltaAngle = currentAngle - startAngle;
+                const newRotation = (currentRotation + deltaAngle + 360) % 360;
+
+                // Update visual rotation
+                rotationHandle.style.transform = `rotate(${newRotation}deg)`;
+
+                // Update camera direction in real-time
+                updateCamera(camera.id, { direction: Math.round(newRotation) });
+            };
+
+            const handleRotationEnd = () => {
+                isRotating = false;
+                markerContainer.classList.remove('rotating');
+                document.removeEventListener('mousemove', handleRotationMove);
+                document.removeEventListener('mouseup', handleRotationEnd);
+
+                // Get final rotation value
+                const transform = rotationHandle.style.transform;
+                const match = transform.match(/rotate\(([^)]+)deg\)/);
+                if (match) {
+                    currentRotation = parseFloat(match[1]);
+                    updateCamera(camera.id, {
+                        direction: Math.round(currentRotation),
+                    });
+                }
+            };
+
+            // Add event listeners
+            rotationHandle.addEventListener('mousedown', handleRotationStart);
+
+            // Set initial rotation
+            rotationHandle.style.transform = `rotate(${currentRotation}deg)`;
+
+            // Click handler for main marker (not rotation handle)
+            markerEl.onclick = () => {
+                if (!isRotating) {
+                    setSelectedCamera(camera);
+                    setShowModal(true);
+                }
+            };
+
+            // Assemble marker structure
+            markerContainer.appendChild(markerEl);
+            markerContainer.appendChild(rotationHandle);
+
+            // Add marker to map with drag functionality using Mapbox GL
+            const marker = new mapboxgl.Marker({
+                element: markerContainer,
+                draggable: true,
+                anchor: 'center', // Ensure marker is centered on coordinates
+            })
+                .setLngLat([camera.lng, camera.lat])
+                .addTo(map);
+
+            // Handle drag start
+            marker.on('dragstart', () => {
+                markerContainer.classList.add('dragging');
+                // Hide rotation handle during drag
+                rotationHandle.style.opacity = '0.2';
+            });
+
+            // Handle drag (real-time coordinate updates)
+            marker.on('drag', () => {
+                const { lng, lat } = marker.getLngLat();
+                // Update coordinates in real-time (optional - can be removed if performance is an issue)
+                updateCamera(camera.id, {
+                    lng: parseFloat(lng.toFixed(6)),
+                    lat: parseFloat(lat.toFixed(6)),
+                });
+            });
+
+            // Handle drag end to finalize camera position
+            marker.on('dragend', () => {
+                markerContainer.classList.remove('dragging');
+                rotationHandle.style.opacity = '0.9';
+
+                const { lng, lat } = marker.getLngLat();
+                updateCamera(camera.id, {
+                    lng: parseFloat(lng.toFixed(6)),
+                    lat: parseFloat(lat.toFixed(6)),
+                });
+            });
+
+            // Prevent rotation handle from triggering drag
+            rotationHandle.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+                marker.setDraggable(false);
+            });
+
+            // Re-enable dragging after rotation ends
+            const enableDragAfterRotation = () => {
+                setTimeout(() => {
+                    marker.setDraggable(true);
+                }, 100);
+            };
+
+            document.addEventListener('mouseup', enableDragAfterRotation);
+
+            // Add FOV visualization if camera model is selected
+            if (verkadaCamera) {
+                const fov = verkadaCamera.ptz ? 90 : verkadaCamera.fov; // Use 90 degrees for PTZ as default view
+                const fovRad = (fov * Math.PI) / 180;
+                const distance = verkadaCamera.ptz ? 0.001 : 0.0005; // Larger range for PTZ
+                const directionRad = (camera.direction * Math.PI) / 180;
+
+                // Calculate FOV triangle points
+                const point1Lng =
+                    camera.lng + distance * Math.cos(directionRad - fovRad / 2);
+                const point1Lat =
+                    camera.lat + distance * Math.sin(directionRad - fovRad / 2);
+                const point2Lng =
+                    camera.lng + distance * Math.cos(directionRad + fovRad / 2);
+                const point2Lat =
+                    camera.lat + distance * Math.sin(directionRad + fovRad / 2);
+
+                const fovPolygon = {
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Polygon',
+                        coordinates: [
+                            [
+                                [camera.lng, camera.lat],
+                                [point1Lng, point1Lat],
+                                [point2Lng, point2Lat],
+                                [camera.lng, camera.lat],
+                            ],
+                        ],
+                    },
+                };
+
+                // Add FOV polygon to map
+                const sourceId = `fov-${camera.id}`;
+                const layerId = `fov-layer-${camera.id}`;
+
+                map.addSource(sourceId, {
+                    type: 'geojson',
+                    data: fovPolygon,
+                });
+
+                // Color based on camera type and environment
+                const fovColor =
+                    verkadaCamera.environment === 'indoor'
+                        ? '#10b981'
+                        : '#f59e0b';
+
+                map.addLayer({
+                    id: layerId,
+                    type: 'fill',
+                    source: sourceId,
+                    paint: {
+                        'fill-color': fovColor,
+                        'fill-opacity': 0.25,
+                    },
+                });
+            }
+        });
+    }, [map, cameras, mode]);
+
+
+    return (
+        <div className={styles.cameraPlacement}>
+            <div className={styles.header}>
+                <h1 className={styles.title}>Camera Placement Tool</h1>
+                <div className={styles.controls}>
+                    <div className={styles.leftControls}>
+                        <button
+                            onClick={() => fileInputRef.current?.click()}
+                            className={styles.uploadBtn}
+                        >
+                            Upload Image
+                        </button>
+                        {uploadedImage && (
+                            <button
+                                onClick={() => setAddCameraMode(!addCameraMode)}
+                                className={`${styles.addCameraBtn} ${addCameraMode ? styles.activeControl : ''}`}
+                            >
+                                {addCameraMode ? 'Cancel Add' : 'Add Camera'}
+                            </button>
+                        )}
+                    </div>
+                    <div className={styles.rightControls}>
+                        <button
+                            onClick={saveAsFile}
+                            className={styles.saveFileBtn}
+                            disabled={!cameras.length && !uploadedImage}
+                            title="Save camera placement as JSON file"
+                        >
+                            Save File
+                        </button>
+                        <button
+                            onClick={loadFromFile}
+                            className={styles.loadFileBtn}
+                            title="Load camera placement from JSON file"
+                        >
+                            Load File
+                        </button>
+                        <button
+                            onClick={() =>
+                                setSidebarCollapsed(!sidebarCollapsed)
+                            }
+                        >
+                            {sidebarCollapsed ? 'Show' : 'Hide'} Cameras
+                        </button>
+                        <button
+                            className={styles.exportBtn}
+                            onClick={exportMap}
+                            disabled={mode === 'image' && !uploadedImage}
+                        >
+                            Export {mode === 'map' ? 'Map' : 'Image'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.mainContent}>
+                <div 
+                    className={`${styles.imageContainer} ${addCameraMode ? styles.addMode : ''} ${sidebarCollapsed ? styles.sidebarCollapsed : ''}`} 
+                    ref={imageContainer} 
+                    onClick={handleImageClick}
+                >
+                        {uploadedImage ? (
+                            <div className={styles.imageWrapper}>
+                                <img 
+                                    src={uploadedImage} 
+                                    alt="Floor plan or site layout" 
+                                    className={styles.uploadedImage}
+                                />
+                                {/* Render FOV triangles first (behind markers) */}
+                                {cameras.map((camera) => {
+                                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                                    if (!verkadaCamera) return null;
+                                    
+                                    let fov = verkadaCamera.ptz ? 90 : verkadaCamera.fov;
+                                    
+                                    // Handle special FOV cases
+                                    if (fov >= 360) fov = 120; // PTZ cameras showing max practical FOV
+                                    else if (fov >= 270) fov = 150; // Multi-sensor cameras
+                                    else if (fov >= 180) fov = 130; // Fisheye cameras
+                                    
+                                    const fovRad = (fov * Math.PI) / 180;
+                                    
+                                    // Calculate distance based on FOV - wider angles get shorter distances
+                                    // Base distance of 100px for 60° FOV, scaled inversely with bounds
+                                    const baseFov = 60; // Reference FOV angle
+                                    const baseDistance = verkadaCamera.ptz ? 120 : 100;
+                                    let distance = baseDistance * (baseFov / fov);
+                                    
+                                    // Apply bounds: min 30px, max 200px
+                                    distance = Math.max(30, Math.min(200, distance));
+                                    const directionRad = (camera.direction * Math.PI) / 180;
+
+                                    // Calculate FOV triangle points in pixels
+                                    const point1X = camera.x + distance * Math.cos(directionRad - fovRad / 2);
+                                    const point1Y = camera.y + distance * Math.sin(directionRad - fovRad / 2);
+                                    const point2X = camera.x + distance * Math.cos(directionRad + fovRad / 2);
+                                    const point2Y = camera.y + distance * Math.sin(directionRad + fovRad / 2);
+
+                                    const fovColor = verkadaCamera.environment === 'indoor' ? '#10b981' : '#f59e0b';
+                                    
+                                    // Create SVG path for the triangle
+                                    const pathData = `M ${camera.x} ${camera.y} L ${point1X} ${point1Y} L ${point2X} ${point2Y} Z`;
+
+                                    return (
+                                        <svg
+                                            key={`fov-${camera.id}`}
+                                            className={styles.fovTriangle}
+                                            style={{
+                                                position: 'absolute',
+                                                top: 0,
+                                                left: 0,
+                                                width: '100%',
+                                                height: '100%',
+                                                pointerEvents: 'none',
+                                                zIndex: 1,
+                                            }}
+                                        >
+                                            <path
+                                                d={pathData}
+                                                fill={fovColor}
+                                                fillOpacity="0.25"
+                                                stroke={fovColor}
+                                                strokeOpacity="0.5"
+                                                strokeWidth="2"
+                                            />
+                                        </svg>
+                                    );
+                                })}
+                                
+                                {/* Render camera markers on image */}
+                                {cameras.map((camera) => {
+                                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                                    const environment = verkadaCamera ? verkadaCamera.environment : 'outdoor';
+                                    const cameraNumber = (camera.customName || camera.name).replace(/\D/g, '') || camera.id;
+
+                                    return (
+                                        <div
+                                            key={camera.id}
+                                            className={`camera-marker-container ${styles.imageMarker}`}
+                                            style={{
+                                                position: 'absolute',
+                                                left: camera.x - 20, // Adjusted for smaller circular marker
+                                                top: camera.y - 20,  // Adjusted for smaller circular marker
+                                                transform: 'none',
+                                                zIndex: 2,
+                                            }}
+                                            onMouseEnter={(e) => {
+                                                // Only show tooltip if not hovering over rotation handle
+                                                if (verkadaCamera && !e.target.closest(`.${styles.rotationHandle}`)) {
+                                                    // Add delay to prevent tooltip from showing during quick rotations
+                                                    const targetElement = e.currentTarget;
+                                                    targetElement._tooltipTimeout = setTimeout(() => {
+                                                        // Check if element still exists and is in DOM
+                                                        if (!targetElement || !targetElement.parentNode) {
+                                                            return;
+                                                        }
+                                                        
+                                                        
+                                                        const tooltip = document.createElement('div');
+                                                        tooltip.className = styles.cameraTooltip;
+                                                        tooltip.innerHTML = `
+                                                            <div class="${styles.tooltipImage}">
+                                                                <img src="${verkadaCamera.image}" alt="${verkadaCamera.name}" />
+                                                            </div>
+                                                            <div class="${styles.tooltipContent}">
+                                                                <div class="${styles.tooltipTitle}">${verkadaCamera.name}</div>
+                                                                <div class="${styles.tooltipSpecs}">
+                                                                    <div>Resolution: ${verkadaCamera.resolution}</div>
+                                                                    <div>FOV: ${verkadaCamera.fov}°</div>
+                                                                    <div>Environment: ${verkadaCamera.environment}</div>
+                                                                </div>
+                                                            </div>
+                                                        `;
+                                                        
+                                                        // Position tooltip away from rotation handle
+                                                        tooltip.style.left = '50px';
+                                                        tooltip.style.top = '-10px';
+                                                        
+                                                        targetElement.appendChild(tooltip);
+                                                        targetElement._tooltip = tooltip;
+                                                        
+                                                    }, 300); // 300ms delay
+                                                }
+                                            }}
+                                            onMouseLeave={(e) => {
+                                                // Clear timeout if leaving before tooltip shows
+                                                if (e.currentTarget._tooltipTimeout) {
+                                                    clearTimeout(e.currentTarget._tooltipTimeout);
+                                                    e.currentTarget._tooltipTimeout = null;
+                                                }
+                                                // Remove tooltip if it exists
+                                                if (e.currentTarget._tooltip) {
+                                                    e.currentTarget.removeChild(e.currentTarget._tooltip);
+                                                    e.currentTarget._tooltip = null;
+                                                }
+                                            }}
+                                            onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                let isDragging = false;
+                                                let startTime = Date.now();
+                                                const startX = e.clientX;
+                                                const startY = e.clientY;
+                                                const containerRect = imageContainer.current.getBoundingClientRect();
+                                                
+                                                const handleMouseMove = (moveEvent) => {
+                                                    const deltaX = Math.abs(moveEvent.clientX - startX);
+                                                    const deltaY = Math.abs(moveEvent.clientY - startY);
+                                                    
+                                                    // Start dragging if moved more than 5px
+                                                    if (!isDragging && (deltaX > 5 || deltaY > 5)) {
+                                                        isDragging = true;
+                                                    }
+                                                    
+                                                    if (isDragging) {
+                                                        const newX = moveEvent.clientX - containerRect.left;
+                                                        const newY = moveEvent.clientY - containerRect.top;
+                                                        
+                                                        // Update camera position
+                                                        updateCamera(camera.id, { x: newX, y: newY });
+                                                    }
+                                                };
+                                                
+                                                const handleMouseUp = () => {
+                                                    const clickDuration = Date.now() - startTime;
+                                                    
+                                                    // If it was a quick click without dragging, show modal
+                                                    if (!isDragging && clickDuration < 200) {
+                                                        setSelectedCamera(camera);
+                                                        setShowModal(true);
+                                                    }
+                                                    
+                                                    document.removeEventListener('mousemove', handleMouseMove);
+                                                    document.removeEventListener('mouseup', handleMouseUp);
+                                                };
+                                                
+                                                document.addEventListener('mousemove', handleMouseMove);
+                                                document.addEventListener('mouseup', handleMouseUp);
+                                            }}
+                                        >
+                                            <div className={`${styles.circularMarker} ${environment} ${verkadaCamera?.ptz ? styles.ptzMarker : ''}`}>
+                                                <div className={styles.markerNumber}>{cameraNumber}</div>
+                                                <div 
+                                                    className={styles.rotationHandle}
+                                                    style={{
+                                                        transform: `rotate(${camera.direction || 0}deg)`,
+                                                    }}
+                                                    onMouseEnter={(e) => {
+                                                        // Hide tooltip when hovering over rotation handle
+                                                        const container = e.currentTarget.parentElement.parentElement;
+                                                        if (container._tooltipTimeout) {
+                                                            clearTimeout(container._tooltipTimeout);
+                                                            container._tooltipTimeout = null;
+                                                        }
+                                                        if (container._tooltip) {
+                                                            container.removeChild(container._tooltip);
+                                                            container._tooltip = null;
+                                                        }
+                                                    }}
+                                                    onMouseDown={(e) => {
+                                                        
+                                                        e.stopPropagation();
+                                                        
+                                                        // Store references to prevent React event pooling issues
+                                                        const rotationHandle = e.currentTarget;
+                                                        const startMouseX = e.clientX;
+                                                        const startMouseY = e.clientY;
+                                                        
+                                                        let isRotating = false;
+                                                        let startAngle = 0;
+                                                        let currentRotation = camera.direction || 0;
+                                                        
+                                                        // Get the center of the camera marker
+                                                        const markerContainer = rotationHandle.parentElement;
+                                                        const markerRect = markerContainer.getBoundingClientRect();
+                                                        const centerX = markerRect.left + markerRect.width / 2;
+                                                        const centerY = markerRect.top + markerRect.height / 2;
+                                                        
+                                                        
+                                                        // Calculate initial angle from center to mouse position
+                                                        const startDeltaX = startMouseX - centerX;
+                                                        const startDeltaY = startMouseY - centerY;
+                                                        startAngle = Math.atan2(startDeltaX, -startDeltaY) * 180 / Math.PI;
+                                                        
+                                                        
+                                                        const handleRotationMove = (moveEvent) => {
+                                                            const deltaX = Math.abs(moveEvent.clientX - startMouseX);
+                                                            const deltaY = Math.abs(moveEvent.clientY - startMouseY);
+                                                            
+                                                            
+                                                            // Start rotating if mouse has moved more than 5 pixels
+                                                            if (!isRotating && (deltaX > 5 || deltaY > 5)) {
+                                                                isRotating = true;
+                                                                markerContainer.classList.add('rotating');
+                                                            }
+                                                            
+                                                            if (isRotating) {
+                                                                // Calculate current angle from center to mouse position
+                                                                const currentDeltaX = moveEvent.clientX - centerX;
+                                                                const currentDeltaY = moveEvent.clientY - centerY;
+                                                                const currentAngle = Math.atan2(currentDeltaX, -currentDeltaY) * 180 / Math.PI;
+                                                                
+                                                                // Calculate rotation delta
+                                                                let angleDelta = currentAngle - startAngle;
+                                                                
+                                                                // Handle angle wrapping
+                                                                if (angleDelta > 180) angleDelta -= 360;
+                                                                if (angleDelta < -180) angleDelta += 360;
+                                                                
+                                                                // Calculate new rotation
+                                                                let newRotation = (currentRotation + angleDelta + 360) % 360;
+                                                                newRotation = Math.round(newRotation);
+                                                                
+                                                                
+                                                                // Update rotation handle visual using stored reference
+                                                                if (rotationHandle && rotationHandle.style) {
+                                                                    rotationHandle.style.transform = `rotate(${newRotation}deg)`;
+                                                                } else {
+                                                                    console.error('🔄 Rotation handle is null or has no style property');
+                                                                }
+                                                                
+                                                                // Update camera direction
+                                                                updateCamera(camera.id, { direction: newRotation });
+                                                            }
+                                                        };
+                                                        
+                                                        const handleRotationEnd = () => {
+                                                            
+                                                            if (isRotating) {
+                                                                markerContainer.classList.remove('rotating');
+                                                            }
+                                                            document.removeEventListener('mousemove', handleRotationMove);
+                                                            document.removeEventListener('mouseup', handleRotationEnd);
+                                                        };
+                                                        
+                                                        document.addEventListener('mousemove', handleRotationMove);
+                                                        document.addEventListener('mouseup', handleRotationEnd);
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : (
+                            <div className={styles.uploadPlaceholder}>
+                                <div className={styles.uploadIcon}>📁</div>
+                                <h3>Upload an Image</h3>
+                                <p>Click "Upload Image" to add a floor plan, site layout, or any image where you want to place cameras.</p>
+                                <button 
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className={styles.uploadBtn}
+                                >
+                                    Choose Image File
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                
+                {/* Hidden file input */}
+                <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleImageUpload}
+                    accept="image/*"
+                    style={{ display: 'none' }}
+                />
+
+                <div
+                    className={`${styles.sidebar} ${
+                        sidebarCollapsed ? styles.collapsed : ''
+                    }`}
+                >
+                    <div className={styles.sidebarHeader}>
+                        <h3 className={styles.sidebarTitle}>Camera List</h3>
+                        <p className={styles.cameraCount}>
+                            {cameras.length} camera
+                            {cameras.length !== 1 ? 's' : ''} placed
+                        </p>
+                    </div>
+
+                    <div className={styles.camerasList}>
+                        {cameras.length === 0 ? (
+                            <div
+                                style={{
+                                    textAlign: 'center',
+                                    color: '#6c757d',
+                                    padding: '40px 20px',
+                                    fontStyle: 'italic',
+                                }}
+                            >
+                                <div>
+                                    Click "Add Camera" to place your first camera
+                                </div>
+                                <div
+                                    style={{
+                                        fontSize: '12px',
+                                        marginTop: '8px',
+                                    }}
+                                >
+                                    Once placed, you can drag cameras to reposition them and use the rotation handle to adjust direction
+                                </div>
+                            </div>
+                        ) : (
+                            cameras.map((camera) => {
+                                const verkadaCamera = camera.verkadaModel
+                                    ? getCameraById(camera.verkadaModel)
+                                    : null;
+
+                                return (
+                                    <div
+                                        key={camera.id}
+                                        className={styles.cameraItem}
+                                    >
+                                        <div className={styles.cameraHeader}>
+                                            <div className={styles.sidebarCameraInfo}>
+                                                {verkadaCamera && (
+                                                    <div className={styles.sidebarCameraImageContainer}>
+                                                        <img 
+                                                            src={verkadaCamera.image} 
+                                                            alt={verkadaCamera.name}
+                                                            className={styles.sidebarCameraImage}
+                                                            onLoad={(e) => {
+                                                                e.target.style.opacity = '1';
+                                                            }}
+                                                            onError={(e) => {
+                                                                // Fallback to icon if image fails to load
+                                                                e.target.style.display = 'none';
+                                                                e.target.nextSibling.style.display = 'flex';
+                                                            }}
+                                                            style={{opacity: '0.3'}}
+                                                        />
+                                                        <div className={styles.sidebarCameraIcon} style={{display: 'none'}}>
+                                                            <CameraIcon
+                                                                icon={verkadaCamera.icon}
+                                                                size={16}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                <div className={styles.sidebarCameraText}>
+                                                    <h4 className={styles.cameraName}>
+                                                        {camera.customName || camera.name}
+                                                    </h4>
+                                                    {verkadaCamera && (
+                                                        <span
+                                                            className={`${styles.cameraType} ${styles[verkadaCamera.environment]}`}
+                                                        >
+                                                            {verkadaCamera.id}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </div>
+                                            
+                                            {/* Compact action buttons */}
+                                            <div className={styles.cameraActions}>
+                                                <button
+                                                    className={styles.iconBtn}
+                                                    onClick={() => {
+                                                        setSelectedCamera(camera);
+                                                        setShowModal(true);
+                                                    }}
+                                                    title="Edit camera"
+                                                >
+                                                    <Edit3 size={16} />
+                                                </button>
+                                                <button
+                                                    className={styles.iconBtn}
+                                                    onClick={() => removeCamera(camera.id)}
+                                                    title="Remove camera"
+                                                >
+                                                    <Trash2 size={16} />
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                        {verkadaCamera ? (
+                                            <div
+                                                className={styles.cameraDetails}
+                                            >
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraModelName
+                                                    }
+                                                >
+                                                    <strong>
+                                                        {verkadaCamera.name}
+                                                    </strong>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraSpecGrid
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Resolution:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.resolution
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            FOV:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {verkadaCamera.fov}°
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Environment:
+                                                        </span>
+                                                        <span
+                                                            className={`${
+                                                                modalStyles.specValue
+                                                            } ${
+                                                                modalStyles[
+                                                                    verkadaCamera
+                                                                        .environment
+                                                                ]
+                                                            }`}
+                                                        >
+                                                            {
+                                                                verkadaCamera.environment
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            IR Range:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.irRange
+                                                            }
+                                                            m
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Zoom:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {verkadaCamera.zoom}
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Rating:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.rating
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    {verkadaCamera.ptz && (
+                                                        <>
+                                                            <div
+                                                                className={
+                                                                    modalStyles.specItem
+                                                                }
+                                                            >
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specLabel
+                                                                    }
+                                                                >
+                                                                    Pan:
+                                                                </span>
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specValue
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        verkadaCamera.pan
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                            <div
+                                                                className={
+                                                                    modalStyles.specItem
+                                                                }
+                                                            >
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specLabel
+                                                                    }
+                                                                >
+                                                                    Tilt:
+                                                                </span>
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specValue
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        verkadaCamera.tilt
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </>
+                                                    )}
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraFeatures
+                                                    }
+                                                >
+                                                    <span
+                                                        className={
+                                                            modalStyles.specLabel
+                                                        }
+                                                    >
+                                                        Features:
+                                                    </span>
+                                                    <div
+                                                        className={
+                                                            modalStyles.featuresList
+                                                        }
+                                                    >
+                                                        {verkadaCamera.features.map(
+                                                            (
+                                                                feature,
+                                                                index
+                                                            ) => (
+                                                                <span
+                                                                    key={index}
+                                                                    className={
+                                                                        modalStyles.featureTag
+                                                                    }
+                                                                >
+                                                                    {feature}
+                                                                </span>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.directionControl
+                                                    }
+                                                >
+                                                    <label>
+                                                        Direction:{' '}
+                                                        {camera.direction}°
+                                                    </label>
+                                                    <input
+                                                        type="range"
+                                                        min="0"
+                                                        max="360"
+                                                        value={camera.direction}
+                                                        onChange={(e) =>
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        parseInt(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                }
+                                                            )
+                                                        }
+                                                        className={
+                                                            modalStyles.directionSlider
+                                                        }
+                                                    />
+                                                    <div
+                                                        className={
+                                                            modalStyles.directionHelper
+                                                        }
+                                                    >
+                                                        0° = North, 90° = East,
+                                                        180° = South, 270° =
+                                                        West
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <div
+                                                className={styles.cameraDetails}
+                                            >
+                                                <div
+                                                    className={
+                                                        modalStyles.noModel
+                                                    }
+                                                >
+                                                    No Verkada model selected -
+                                                    Click "Edit" to choose a
+                                                    camera
+                                                </div>
+                                                <div
+                                                    className={
+                                                        modalStyles.directionControl
+                                                    }
+                                                >
+                                                    <label>
+                                                        Direction:{' '}
+                                                        {camera.direction}°
+                                                    </label>
+                                                    <input
+                                                        type="range"
+                                                        min="0"
+                                                        max="360"
+                                                        value={camera.direction}
+                                                        onChange={(e) =>
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        parseInt(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                }
+                                                            )
+                                                        }
+                                                        className={
+                                                            modalStyles.directionSlider
+                                                        }
+                                                    />
+                                                    <div
+                                                        className={
+                                                            modalStyles.directionHelper
+                                                        }
+                                                    >
+                                                        0° = North, 90° = East,
+                                                        180° = South, 270° =
+                                                        West
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        <div className={styles.cameraCoords}>
+                                            <span className={styles.coordLabel}>
+                                                Location:
+                                            </span>
+                                            {mode === 'map' ? (
+                                                <>
+                                                    {camera.lat?.toFixed(6)},{' '}
+                                                    {camera.lng?.toFixed(6)}
+                                                </>
+                                            ) : (
+                                                <>
+                                                    X: {Math.round(camera.x)}, Y: {Math.round(camera.y)}
+                                                </>
+                                            )}
+                                        </div>
+
+                                    </div>
+                                );
+                            })
+                        )}
+                    </div>
+                </div>
+            
+            {showModal && selectedCamera && (
+                <CameraSelectionModal
+                    camera={selectedCamera}
+                    onSave={(updates) => {
+                        updateCamera(selectedCamera.id, updates);
+                        setShowModal(false);
+                    }}
+                    onClose={() => {
+                        setShowModal(false);
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+const CameraSelectionModal = ({ camera, onSave, onClose }) => {
+    // Determine if this is editing an existing camera or adding a new one
+    const isUpdating = Boolean(camera.verkadaModel);
+    
+    const [selectedCategory, setSelectedCategory] = useState('all');
+    const [selectedCamera, setSelectedCamera] = useState(camera.verkadaModel ? getCameraById(camera.verkadaModel) : null);
+
+    // Filter cameras based on selected category
+    const filteredCameras = Object.values(VERKADA_CAMERAS).filter((cam) => {
+        if (selectedCategory === 'all') return true;
+        return cam.type === selectedCategory;
+    });
+
+
+    const handleCameraSelect = (cameraModel) => {
+        setSelectedCamera(cameraModel);
+    };
+
+    const handleSave = () => {
+        if (!selectedCamera) {
+            alert('Please select a camera model before saving.');
+            return;
+        }
+
+        onSave({
+            verkadaModel: selectedCamera.id,
+        });
+    };
+
+    return (
+        <div className={styles.modalOverlay}>
+            <div className={styles.cameraSelectionModal}>
+                <div className={styles.modalHeader}>
+                    <h3>Select Verkada Camera</h3>
+                    <button className={styles.closeBtn} onClick={onClose}>×</button>
+                </div>
+
+                <div className={styles.modalContent}>
+                    <div className={styles.topSection}>
+<div className={styles.categoryFilter}>
+                            <label>Filter by Category:</label>
+                            <div className={styles.categoryButtons}>
+                                <button
+                                    className={selectedCategory === 'all' ? styles.active : ''}
+                                    onClick={() => setSelectedCategory('all')}
+                                >
+                                    All Cameras
+                                </button>
+                                {Object.entries(CAMERA_CATEGORIES).map(([key, category]) => (
+                                    <button
+                                        key={key}
+                                        className={selectedCategory === key ? styles.active : ''}
+                                        onClick={() => setSelectedCategory(key)}
+                                    >
+                                        {category.name}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.cameraGrid}>
+                        {filteredCameras.map((cam) => (
+                            <div
+                                key={cam.id}
+                                className={`${styles.cameraCard} ${selectedCamera?.id === cam.id ? styles.selectedCard : ''}`}
+                                onClick={() => handleCameraSelect(cam)}
+                            >
+                                <div className={styles.cardHeader}>
+                                    <div className={styles.cameraImageContainer}>
+                                        <img 
+                                            src={cam.image} 
+                                            alt={cam.name}
+                                            className={styles.cameraImage}
+                                            onLoad={(e) => {
+                                                e.target.style.opacity = '1';
+                                            }}
+                                            onError={(e) => {
+                                                // Fallback to icon if image fails to load
+                                                e.target.style.display = 'none';
+                                                e.target.nextSibling.style.display = 'flex';
+                                            }}
+                                            style={{opacity: '0.3'}}
+                                        />
+                                        <div className={styles.cameraIcon} style={{display: 'none'}}>
+                                            <CameraIcon icon={cam.icon} size={24} />
+                                        </div>
+                                    </div>
+                                    <div className={styles.cameraTitle}>
+                                        <h4>{cam.name}</h4>
+                                        <span className={`${styles.environmentBadge} ${styles[cam.environment]}`}>
+                                            {cam.environment}
+                                        </span>
+                                    </div>
+                                </div>
+                                
+                                <div className={styles.cardBody}>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>Resolution:</span>
+                                        <span className={styles.specValue}>{cam.resolution}</span>
+                                    </div>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>FOV:</span>
+                                        <span className={styles.specValue}>{cam.fov}°</span>
+                                    </div>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>Range:</span>
+                                        <span className={styles.specValue}>{cam.irRange}m IR</span>
+                                    </div>
+                                    {cam.ptz && (
+                                        <div className={styles.ptzBadge}>PTZ</div>
+                                    )}
+                                </div>
+
+                                <div className={styles.cardFooter}>
+                                    <div className={styles.features}>
+                                        {cam.features?.slice(0, 2).map((feature, index) => (
+                                            <span key={index} className={styles.featureBadge}>
+                                                {feature}
+                                            </span>
+                                        ))}
+                                        {cam.features?.length > 2 && (
+                                            <span className={styles.moreFeatures}>
+                                                +{cam.features.length - 2} more
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className={styles.modalActions}>
+                    <div className={styles.selectedInfo}>
+                        {selectedCamera && (
+                            <span>Selected: {selectedCamera.name}</span>
+                        )}
+                    </div>
+                    <div className={styles.actionButtons}>
+                        <button onClick={onClose} className={styles.cancelBtn}>
+                            Cancel
+                        </button>
+                        <button 
+                            onClick={handleSave} 
+                            disabled={!selectedCamera}
+                            className={styles.saveBtn}
+                        >
+                            {isUpdating ? 'Update Camera' : 'Add Camera'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CameraPlacement;