@visns-studio/visns-components 5.15.5 → 5.15.7

package/src/components/CameraPlacement.jsx

@@ -3,6 +3,21 @@ import mapboxgl from 'mapbox-gl';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import html2canvas from 'html2canvas';
 import Swal from 'sweetalert2';
+import {
+    Edit3,
+    Trash2,
+    Upload,
+    Save,
+    FolderOpen,
+    Eye,
+    EyeOff,
+    Download,
+    FileImage,
+    Lightbulb,
+    Mail,
+    Users,
+    FileText,
+} 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';
@@ -23,63 +38,149 @@ const CameraPlacement = () => {
     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);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [isRotating, setIsRotating] = useState(false);
 
     // Mapbox configuration
-    const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
+    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);
+    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);
                     }
-                    setMap(null);
-                }
+                };
+                reader.readAsDataURL(file);
+            }
+        },
+        [map]
+    );
+
+    // Handle image click for camera placement (only when image is uploaded)
+    const handleImageClick = useCallback(
+        (event) => {
+            if (
+                mode !== 'image' ||
+                !imageContainer.current ||
+                !uploadedImage ||
+                isRotating
+            )
+                return;
+
+            // Check if we clicked on a camera marker or rotation handle
+            const clickedElement = event.target;
+            if (
+                clickedElement.closest('.camera-marker-container') ||
+                clickedElement.closest(`.${styles.rotationHandle}`) ||
+                clickedElement.closest(`.${styles.circularMarker}`)
+            ) {
+                return; // Don't add camera if clicking on existing camera elements
+            }
+
+            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,
             };
-            reader.readAsDataURL(file);
+
+            setCameras((prev) => [...prev, newCamera]);
+            setSelectedCamera(newCamera);
+            setShowModal(true);
+        },
+        [mode, cameras.length, uploadedImage, isRotating]
+    );
+
+    // Drag and drop handlers
+    const handleDragOver = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        setIsDragOver(true);
+    }, []);
+
+    const handleDragEnter = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+
+    const handleDragLeave = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        // Only set to false if we're leaving the main container
+        if (event.currentTarget === event.target) {
+            setIsDragOver(false);
         }
-    }, [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]);
+    const handleDrop = useCallback(
+        (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsDragOver(false);
+
+            const files = event.dataTransfer.files;
+            if (files && files.length > 0) {
+                const file = files[0];
+                if (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);
+                } else {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Invalid File Type',
+                        text: 'Please upload an image file (JPG, PNG, GIF, etc.)',
+                        confirmButtonColor: '#ef4444',
+                    });
+                }
+            }
+        },
+        [map]
+    );
 
     // Initialize Mapbox GL map
     useEffect(() => {
@@ -183,30 +284,52 @@ const CameraPlacement = () => {
     }, [map, handleMapClick]);
 
     const updateCamera = useCallback((cameraId, updates) => {
-        setCameras((prev) =>
-            prev.map((cam) =>
+        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));
+            // Find camera info for confirmation message
+            const camera = cameras.find((cam) => cam.id === cameraId);
+            const cameraName = camera
+                ? camera.customName || camera.name
+                : 'this camera';
 
-            // 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);
+            Swal.fire({
+                title: 'Delete Camera?',
+                text: `Are you sure you want to delete ${cameraName}? This action cannot be undone.`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#ef4444',
+                cancelButtonColor: '#6b7280',
+                confirmButtonText: 'Yes, delete it!',
+                cancelButtonText: 'Cancel',
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    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]
+        [map, cameras]
     );
 
     // Save placement as JSON file
@@ -216,7 +339,7 @@ const CameraPlacement = () => {
                 icon: 'warning',
                 title: 'No Data to Save',
                 text: 'Please add cameras or upload an image first.',
-                confirmButtonColor: '#8b5cf6'
+                confirmButtonColor: '#8b5cf6',
             });
             return;
         }
@@ -224,12 +347,14 @@ const CameraPlacement = () => {
         const saveData = {
             version: '1.0',
             timestamp: new Date().toISOString(),
-            image: uploadedImage ? {
-                src: uploadedImage,
-                name: 'uploaded-image'
-            } : null,
+            image: uploadedImage
+                ? {
+                      src: uploadedImage,
+                      name: 'uploaded-image',
+                  }
+                : null,
             mode: mode,
-            cameras: cameras.map(camera => ({
+            cameras: cameras.map((camera) => ({
                 id: camera.id,
                 name: camera.name,
                 customName: camera.customName,
@@ -237,15 +362,19 @@ const CameraPlacement = () => {
                 y: camera.y,
                 direction: camera.direction,
                 verkadaModel: camera.verkadaModel,
-                timestamp: camera.timestamp
-            }))
+                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 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);
@@ -259,7 +388,7 @@ const CameraPlacement = () => {
             timer: 3000,
             showConfirmButton: false,
             toast: true,
-            position: 'top-end'
+            position: 'top-end',
         });
     }, [cameras, uploadedImage, mode]);
 
@@ -268,60 +397,61 @@ const CameraPlacement = () => {
         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'
+                            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'
+                        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'
+                        text: "Error reading file. Please ensure it's a valid JSON file.",
+                        confirmButtonColor: '#f59e0b',
                     });
                 }
             };
             reader.readAsText(file);
         };
-        
+
         input.click();
     }, []);
 
@@ -332,18 +462,20 @@ const CameraPlacement = () => {
                     icon: 'warning',
                     title: 'No Cameras',
                     text: 'Please add cameras first before exporting.',
-                    confirmButtonColor: '#10b981'
+                    confirmButtonColor: '#10b981',
                 });
                 return;
             }
 
-            const imageContainer = document.querySelector(`.${styles.imageContainer}`);
+            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'
+                    confirmButtonColor: '#10b981',
                 });
                 return;
             }
@@ -354,17 +486,26 @@ const CameraPlacement = () => {
                 allowTaint: true,
                 scale: 1.2,
                 backgroundColor: '#f8fafc',
-                logging: false
+                logging: false,
             });
 
-            // Calculate dimensions based on camera count (more cameras = more height needed)
-            const cameraListWidth = 450; // Wider to show more info
-            const headerHeight = 80;
-            const cameraHeight = 85; // Height per camera entry
-            const totalCameraListHeight = headerHeight + (cameras.length * cameraHeight) + 40; // padding
-            
+            // 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 finalHeight = Math.max(
+                imageCanvas.height,
+                totalCameraListHeight
+            );
             const finalWidth = imageCanvas.width + cameraListWidth + 20; // small gap
 
             // Create the composite container with calculated dimensions
@@ -377,7 +518,8 @@ const CameraPlacement = () => {
             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';
+            exportContainer.style.fontFamily =
+                '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif';
             document.body.appendChild(exportContainer);
 
             // Left side: Image
@@ -397,7 +539,7 @@ const CameraPlacement = () => {
             scaledCanvas.width = imageCanvas.width;
             scaledCanvas.height = imageCanvas.height;
             ctx.drawImage(imageCanvas, 0, 0);
-            
+
             imageDiv.appendChild(scaledCanvas);
             exportContainer.appendChild(imageDiv);
 
@@ -410,48 +552,235 @@ const CameraPlacement = () => {
             cameraListDiv.style.overflow = 'visible';
             cameraListDiv.style.boxSizing = 'border-box';
 
-            // Generate optimized camera list HTML
+            // Generate professional report-style HTML
             const cameraListHTML = `
-                <div style="margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 12px;">
-                    <h2 style="margin: 0 0 6px 0; font-size: 18px; font-weight: 700; color: #111827;">Camera Reference</h2>
-                    <p style="margin: 0; font-size: 12px; color: #6b7280;">Generated ${new Date().toLocaleDateString()}</p>
-                    <p style="margin: 2px 0 0 0; font-size: 12px; color: #6b7280;">${cameras.length} camera${cameras.length !== 1 ? 's' : ''} placed</p>
+                <!-- 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) => {
-                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
-                    const cameraNumber = (camera.customName || camera.name).replace(/\D/g, '') || camera.id;
-                    
-                    return `
-                        <div style="margin-bottom: 12px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; page-break-inside: avoid;">
-                            <div style="display: flex; align-items: center; margin-bottom: 6px;">
-                                <div style="width: 22px; height: 22px; background: ${verkadaCamera?.environment === 'indoor' ? '#10b981' : '#f59e0b'}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; margin-right: 8px; flex-shrink: 0;">${cameraNumber}</div>
-                                <div style="flex: 1; min-width: 0;">
-                                    <div style="font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${camera.customName || camera.name}</div>
-                                    <div style="font-size: 10px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${verkadaCamera ? verkadaCamera.name : 'No Model Selected'}</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>
                             
-                            ${verkadaCamera ? `
-                                <div style="font-size: 10px; line-height: 1.5;">
-                                    <div style="margin-bottom: 4px;"><strong>Resolution:</strong> ${verkadaCamera.resolution} | <strong>FOV:</strong> ${verkadaCamera.fov}°</div>
-                                    <div style="margin-bottom: 4px;"><strong>Environment:</strong> ${verkadaCamera.environment} | <strong>Range:</strong> ${verkadaCamera.irRange}m IR</div>
-                                    ${camera.direction ? `<div style="margin-bottom: 4px;"><strong>Direction:</strong> ${camera.direction}°</div>` : ''}
-                                    <div style="color: #6b7280; margin-top: 6px; font-size: 9px; line-height: 1.4;">${verkadaCamera.features?.slice(0, 3).join(', ') || 'No features'}</div>
-                                </div>
-                            ` : `
-                                <div style="font-size: 10px; color: #dc2626; font-style: italic; margin-top: 4px;">Camera model not selected</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('')}
+                    })
+                    .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));
+            await new Promise((resolve) => setTimeout(resolve, 100));
 
             // Capture the composite with exact dimensions
             const finalCanvas = await html2canvas(exportContainer, {
@@ -461,7 +790,7 @@ const CameraPlacement = () => {
                 backgroundColor: '#ffffff',
                 logging: false,
                 width: finalWidth,
-                height: finalHeight
+                height: finalHeight,
             });
 
             // Clean up
@@ -469,30 +798,31 @@ const CameraPlacement = () => {
 
             // Download
             const link = document.createElement('a');
-            link.download = `camera-layout-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}.png`;
-            link.href = finalCanvas.toDataURL('image/png', 0.9);
+            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();
 
-            console.log('Export completed successfully');
-
             // Show success message
             Swal.fire({
                 icon: 'success',
                 title: 'Export Complete!',
-                text: `Camera layout exported as ${link.download}`,
+                text: `Professional camera installation report exported as ${link.download}`,
                 timer: 3000,
                 showConfirmButton: false,
                 toast: true,
-                position: 'top-end'
+                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'
+                confirmButtonColor: '#10b981',
             });
         }
     }, [cameras]);
@@ -510,12 +840,15 @@ const CameraPlacement = () => {
         try {
             const style = map.getStyle();
             if (style && style.sources) {
-                existingSources = Object.keys(style.sources).filter(
-                    (id) => id.startsWith('fov-')
+                existingSources = Object.keys(style.sources).filter((id) =>
+                    id.startsWith('fov-')
                 );
             }
         } catch (error) {
-            console.warn('Could not access map style, skipping FOV layer cleanup:', error);
+            console.warn(
+                'Could not access map style, skipping FOV layer cleanup:',
+                error
+            );
         }
         existingSources.forEach((sourceId) => {
             try {
@@ -527,7 +860,10 @@ const CameraPlacement = () => {
                     map.removeSource(sourceId);
                 }
             } catch (error) {
-                console.warn(`Could not remove layer/source ${sourceId}:`, error);
+                console.warn(
+                    `Could not remove layer/source ${sourceId}:`,
+                    error
+                );
             }
         });
 
@@ -574,6 +910,7 @@ const CameraPlacement = () => {
             const handleRotationStart = (e) => {
                 e.stopPropagation();
                 isRotating = true;
+                setIsRotating(true);
                 const rect = markerContainer.getBoundingClientRect();
                 const centerX = rect.left + rect.width / 2;
                 const centerY = rect.top + rect.height / 2;
@@ -607,6 +944,7 @@ const CameraPlacement = () => {
 
             const handleRotationEnd = () => {
                 isRotating = false;
+                setIsRotating(false);
                 markerContainer.classList.remove('rotating');
                 document.removeEventListener('mousemove', handleRotationMove);
                 document.removeEventListener('mouseup', handleRotationEnd);
@@ -753,552 +1091,872 @@ const CameraPlacement = () => {
         });
     }, [map, cameras, mode]);
 
+    // Icon button with tooltip component
+    const IconButton = ({
+        icon: Icon,
+        onClick,
+        disabled = false,
+        tooltip,
+        className = '',
+    }) => (
+        <button
+            onClick={onClick}
+            disabled={disabled}
+            className={`${styles.iconButton} ${className}`}
+            title={tooltip}
+        >
+            <Icon size={20} />
+        </button>
+    );
 
     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
+                <div className={styles.headerContent}>
+                    <h1 className={styles.title}>Site Layout Planner</h1>
+                    <div className={styles.controls}>
+                        <IconButton
+                            icon={Upload}
                             onClick={() => fileInputRef.current?.click()}
+                            tooltip="Upload Image"
                             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
+                        />
+                        <IconButton
+                            icon={Save}
                             onClick={saveAsFile}
-                            className={styles.saveFileBtn}
                             disabled={!cameras.length && !uploadedImage}
-                            title="Save camera placement as JSON file"
-                        >
-                            Save File
-                        </button>
-                        <button
+                            tooltip="Save camera placement as JSON file"
+                            className={styles.saveFileBtn}
+                        />
+                        <IconButton
+                            icon={FolderOpen}
                             onClick={loadFromFile}
+                            tooltip="Load camera placement from JSON file"
                             className={styles.loadFileBtn}
-                            title="Load camera placement from JSON file"
-                        >
-                            Load File
-                        </button>
-                        <button
+                        />
+                        <IconButton
+                            icon={sidebarCollapsed ? Eye : EyeOff}
                             onClick={() =>
                                 setSidebarCollapsed(!sidebarCollapsed)
                             }
-                        >
-                            {sidebarCollapsed ? 'Show' : 'Hide'} Cameras
-                        </button>
-                        <button
-                            className={styles.exportBtn}
+                            tooltip={`${
+                                sidebarCollapsed ? 'Show' : 'Hide'
+                            } Cameras`}
+                        />
+                        <IconButton
+                            icon={Download}
                             onClick={exportMap}
                             disabled={mode === 'image' && !uploadedImage}
-                        >
-                            Export {mode === 'map' ? 'Map' : 'Image'}
-                        </button>
+                            tooltip={`Export ${
+                                mode === 'map' ? 'Map' : 'Image'
+                            }`}
+                            className={styles.exportBtn}
+                        />
                     </div>
                 </div>
             </div>
 
             <div className={styles.mainContent}>
-                <div 
-                    className={`${styles.imageContainer} ${addCameraMode ? styles.addMode : ''} ${sidebarCollapsed ? styles.sidebarCollapsed : ''}`} 
-                    ref={imageContainer} 
+                <div
+                    className={`${styles.imageContainer} ${
+                        uploadedImage ? styles.addMode : ''
+                    } ${sidebarCollapsed ? styles.sidebarCollapsed : ''} ${
+                        isDragOver ? styles.dragOver : ''
+                    }`}
+                    ref={imageContainer}
                     onClick={handleImageClick}
+                    onDragOver={handleDragOver}
+                    onDragEnter={handleDragEnter}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
                 >
-                        {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;
+                    {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`;
 
-                                    // 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);
+                                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>
+                                );
+                            })}
 
-                                    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 (
+                            {/* 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
-                                            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,
-                                            }}
-                                            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 });
+                                            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;
                                                     }
-                                                };
-                                                
-                                                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);
+                                                    if (container._tooltip) {
+                                                        container.removeChild(
+                                                            container._tooltip
+                                                        );
+                                                        container._tooltip =
+                                                            null;
                                                     }
-                                                    
-                                                    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)`,
-                                                    }}
-                                                    onMouseDown={(e) => {
-                                                        e.stopPropagation();
-                                                        let isRotating = false;
-                                                        let currentRotation = camera.direction || 0;
-                                                        
-                                                        const markerRect = e.currentTarget.parentElement.getBoundingClientRect();
-                                                        const centerX = markerRect.left + markerRect.width / 2;
-                                                        const centerY = markerRect.top + markerRect.height / 2;
-                                                        
-                                                        const handleRotationMove = (moveEvent) => {
-                                                            if (!isRotating) {
-                                                                isRotating = true;
-                                                            }
-                                                            
-                                                            const angle = Math.atan2(
-                                                                moveEvent.clientY - centerY,
-                                                                moveEvent.clientX - centerX
+                                                }}
+                                                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;
+                                                            setIsRotating(true);
+                                                            markerContainer.classList.add(
+                                                                'rotating'
                                                             );
-                                                            
-                                                            const degrees = ((angle * 180) / Math.PI + 90 + 360) % 360;
-                                                            currentRotation = Math.round(degrees);
-                                                            
-                                                            // Update rotation handle visual
-                                                            e.currentTarget.style.transform = `rotate(${currentRotation}deg)`;
-                                                            
+                                                        }
+
+                                                        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: currentRotation });
-                                                        };
-                                                        
-                                                        const handleRotationEnd = () => {
-                                                            document.removeEventListener('mousemove', handleRotationMove);
-                                                            document.removeEventListener('mouseup', handleRotationEnd);
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        newRotation,
+                                                                }
+                                                            );
+                                                        }
+                                                    };
+
+                                                    const handleRotationEnd =
+                                                        () => {
+                                                            if (isRotating) {
+                                                                markerContainer.classList.remove(
+                                                                    'rotating'
+                                                                );
+                                                            }
+                                                            setIsRotating(
+                                                                false
+                                                            );
+                                                            document.removeEventListener(
+                                                                'mousemove',
+                                                                handleRotationMove
+                                                            );
+                                                            document.removeEventListener(
+                                                                'mouseup',
+                                                                handleRotationEnd
+                                                            );
                                                         };
-                                                        
-                                                        document.addEventListener('mousemove', handleRotationMove);
-                                                        document.addEventListener('mouseup', handleRotationEnd);
-                                                    }}
-                                                />
-                                            </div>
+
+                                                    document.addEventListener(
+                                                        'mousemove',
+                                                        handleRotationMove
+                                                    );
+                                                    document.addEventListener(
+                                                        'mouseup',
+                                                        handleRotationEnd
+                                                    );
+                                                }}
+                                            />
                                         </div>
-                                    );
-                                })}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <div className={styles.uploadPlaceholder}>
+                            <div className={styles.uploadIcon}>
+                                <FileImage size={48} />
                             </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>
+                            <h3>Upload an Image</h3>
+                            <p>
+                                Drag and drop an image file here, or click the
+                                upload button 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 className={styles.dragDropHint}>
+                                <Lightbulb
+                                    size={16}
+                                    className={styles.hintIcon}
+                                />
+                                <span>
+                                    You can also drag and drop image files
+                                    directly onto this area
+                                </span>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
-                
-                {/* Hidden file input */}
-                <input
-                    type="file"
-                    ref={fileInputRef}
-                    onChange={handleImageUpload}
-                    accept="image/*"
-                    style={{ display: 'none' }}
-                />
+            </div>
 
-                <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>
+            {/* 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 className={styles.camerasList}>
+                    {cameras.length === 0 ? (
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                color: '#6c757d',
+                                padding: '40px 20px',
+                                fontStyle: 'italic',
+                            }}
+                        >
+                            <div>
+                                Upload an image first, then click anywhere on it
+                                to place cameras
+                            </div>
                             <div
                                 style={{
-                                    textAlign: 'center',
-                                    color: '#6c757d',
-                                    padding: '40px 20px',
-                                    fontStyle: 'italic',
+                                    fontSize: '12px',
+                                    marginTop: '8px',
                                 }}
                             >
-                                <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>
+                                Once placed, you can drag cameras to reposition
+                                them and use the rotation handle to adjust
+                                direction
                             </div>
-                        ) : (
-                            cameras.map((camera) => {
-                                const verkadaCamera = camera.verkadaModel
-                                    ? getCameraById(camera.verkadaModel)
-                                    : null;
+                        </div>
+                    ) : (
+                        cameras.map((camera) => {
+                            const verkadaCamera = camera.verkadaModel
+                                ? getCameraById(camera.verkadaModel)
+                                : null;
 
-                                return (
-                                    <div
-                                        key={camera.id}
-                                        className={styles.cameraItem}
-                                    >
-                                        <div className={styles.cameraHeader}>
-                                            <h4 className={styles.cameraName}>
-                                                {verkadaCamera && (
-                                                    <CameraIcon
-                                                        icon={
-                                                            verkadaCamera.icon
-                                                        }
-                                                        size={16}
-                                                    />
-                                                )}{' '}
-                                                {camera.customName ||
-                                                    camera.name}
-                                            </h4>
-                                            {verkadaCamera && (
-                                                <span
-                                                    className={`${
-                                                        styles.cameraType
-                                                    } ${
-                                                        styles[
-                                                            verkadaCamera
-                                                                .environment
-                                                        ]
-                                                    }`}
+                            return (
+                                <div
+                                    key={camera.id}
+                                    className={styles.cameraItem}
+                                >
+                                    <div className={styles.cameraHeader}>
+                                        <div
+                                            className={styles.sidebarCameraInfo}
+                                        >
+                                            {verkadaCamera && (
+                                                <div
+                                                    className={
+                                                        styles.sidebarCameraImageContainer
+                                                    }
                                                 >
-                                                    {verkadaCamera.id}
-                                                </span>
+                                                    <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>
 
-                                        {verkadaCamera ? (
                                             <div
-                                                className={styles.cameraDetails}
+                                                className={
+                                                    modalStyles.cameraSpecGrid
+                                                }
                                             >
                                                 <div
                                                     className={
-                                                        modalStyles.cameraModelName
+                                                        modalStyles.specItem
                                                     }
                                                 >
-                                                    <strong>
-                                                        {verkadaCamera.name}
-                                                    </strong>
+                                                    <span
+                                                        className={
+                                                            modalStyles.specLabel
+                                                        }
+                                                    >
+                                                        Resolution:
+                                                    </span>
+                                                    <span
+                                                        className={
+                                                            modalStyles.specValue
+                                                        }
+                                                    >
+                                                        {
+                                                            verkadaCamera.resolution
+                                                        }
+                                                    </span>
                                                 </div>
-
                                                 <div
                                                     className={
-                                                        modalStyles.cameraSpecGrid
+                                                        modalStyles.specItem
                                                     }
                                                 >
-                                                    <div
+                                                    <span
                                                         className={
-                                                            modalStyles.specItem
+                                                            modalStyles.specLabel
                                                         }
                                                     >
-                                                        <span
-                                                            className={
-                                                                modalStyles.specLabel
-                                                            }
-                                                        >
-                                                            Resolution:
-                                                        </span>
-                                                        <span
-                                                            className={
-                                                                modalStyles.specValue
-                                                            }
-                                                        >
-                                                            {
-                                                                verkadaCamera.resolution
-                                                            }
-                                                        </span>
-                                                    </div>
-                                                    <div
+                                                        FOV:
+                                                    </span>
+                                                    <span
                                                         className={
-                                                            modalStyles.specItem
+                                                            modalStyles.specValue
                                                         }
                                                     >
-                                                        <span
-                                                            className={
-                                                                modalStyles.specLabel
-                                                            }
-                                                        >
-                                                            FOV:
-                                                        </span>
-                                                        <span
-                                                            className={
-                                                                modalStyles.specValue
-                                                            }
-                                                        >
-                                                            {verkadaCamera.fov}°
-                                                        </span>
-                                                    </div>
-                                                    <div
+                                                        {verkadaCamera.fov}°
+                                                    </span>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        modalStyles.specItem
+                                                    }
+                                                >
+                                                    <span
                                                         className={
-                                                            modalStyles.specItem
+                                                            modalStyles.specLabel
                                                         }
                                                     >
-                                                        <span
-                                                            className={
-                                                                modalStyles.specLabel
-                                                            }
-                                                        >
-                                                            Environment:
-                                                        </span>
-                                                        <span
-                                                            className={`${
-                                                                modalStyles.specValue
-                                                            } ${
-                                                                modalStyles[
-                                                                    verkadaCamera
-                                                                        .environment
-                                                                ]
-                                                            }`}
-                                                        >
-                                                            {
-                                                                verkadaCamera.environment
-                                                            }
-                                                        </span>
-                                                    </div>
-                                                    <div
-                                                        className={
-                                                            modalStyles.specItem
-                                                        }
+                                                        Environment:
+                                                    </span>
+                                                    <span
+                                                        className={`${
+                                                            modalStyles.specValue
+                                                        } ${
+                                                            modalStyles[
+                                                                verkadaCamera
+                                                                    .environment
+                                                            ]
+                                                        }`}
                                                     >
-                                                        <span
-                                                            className={
-                                                                modalStyles.specLabel
-                                                            }
-                                                        >
-                                                            IR Range:
-                                                        </span>
-                                                        <span
-                                                            className={
-                                                                modalStyles.specValue
-                                                            }
-                                                        >
-                                                            {
-                                                                verkadaCamera.irRange
-                                                            }
-                                                            m
-                                                        </span>
-                                                    </div>
-                                                    <div
+                                                        {
+                                                            verkadaCamera.environment
+                                                        }
+                                                    </span>
+                                                </div>
+                                                <div
+                                                    className={
+                                                        modalStyles.specItem
+                                                    }
+                                                >
+                                                    <span
                                                         className={
-                                                            modalStyles.specItem
+                                                            modalStyles.specLabel
                                                         }
                                                     >
-                                                        <span
-                                                            className={
-                                                                modalStyles.specLabel
-                                                            }
-                                                        >
-                                                            Zoom:
-                                                        </span>
-                                                        <span
-                                                            className={
-                                                                modalStyles.specValue
-                                                            }
-                                                        >
-                                                            {verkadaCamera.zoom}
-                                                        </span>
-                                                    </div>
-                                                    <div
+                                                        IR Range:
+                                                    </span>
+                                                    <span
                                                         className={
-                                                            modalStyles.specItem
+                                                            modalStyles.specValue
                                                         }
                                                     >
-                                                        <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>
-                                                        </>
-                                                    )}
+                                                        {verkadaCamera.irRange}m
+                                                    </span>
                                                 </div>
-
                                                 <div
                                                     className={
-                                                        modalStyles.cameraFeatures
+                                                        modalStyles.specItem
                                                     }
                                                 >
                                                     <span
@@ -1306,172 +1964,231 @@ const CameraPlacement = () => {
                                                             modalStyles.specLabel
                                                         }
                                                     >
-                                                        Features:
+                                                        Zoom:
                                                     </span>
-                                                    <div
+                                                    <span
                                                         className={
-                                                            modalStyles.featuresList
+                                                            modalStyles.specValue
                                                         }
                                                     >
-                                                        {verkadaCamera.features.map(
-                                                            (
-                                                                feature,
-                                                                index
-                                                            ) => (
-                                                                <span
-                                                                    key={index}
-                                                                    className={
-                                                                        modalStyles.featureTag
-                                                                    }
-                                                                >
-                                                                    {feature}
-                                                                </span>
-                                                            )
-                                                        )}
-                                                    </div>
+                                                        {verkadaCamera.zoom}
+                                                    </span>
                                                 </div>
-
                                                 <div
                                                     className={
-                                                        modalStyles.directionControl
+                                                        modalStyles.specItem
                                                     }
                                                 >
-                                                    <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
-                                                                        ),
-                                                                }
-                                                            )
-                                                        }
+                                                    <span
                                                         className={
-                                                            modalStyles.directionSlider
+                                                            modalStyles.specLabel
                                                         }
-                                                    />
-                                                    <div
+                                                    >
+                                                        Rating:
+                                                    </span>
+                                                    <span
                                                         className={
-                                                            modalStyles.directionHelper
+                                                            modalStyles.specValue
                                                         }
                                                     >
-                                                        0° = North, 90° = East,
-                                                        180° = South, 270° =
-                                                        West
-                                                    </div>
+                                                        {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={styles.cameraDetails}
+                                                className={
+                                                    modalStyles.cameraFeatures
+                                                }
                                             >
-                                                <div
+                                                <span
                                                     className={
-                                                        modalStyles.noModel
+                                                        modalStyles.specLabel
                                                     }
                                                 >
-                                                    No Verkada model selected -
-                                                    Click "Edit" to choose a
-                                                    camera
-                                                </div>
+                                                    Features:
+                                                </span>
                                                 <div
                                                     className={
-                                                        modalStyles.directionControl
+                                                        modalStyles.featuresList
                                                     }
                                                 >
-                                                    <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
-                                                                        ),
+                                                    {verkadaCamera.features.map(
+                                                        (feature, index) => (
+                                                            <span
+                                                                key={index}
+                                                                className={
+                                                                    modalStyles.featureTag
                                                                 }
-                                                            )
-                                                        }
-                                                        className={
-                                                            modalStyles.directionSlider
-                                                        }
-                                                    />
-                                                    <div
-                                                        className={
-                                                            modalStyles.directionHelper
-                                                        }
-                                                    >
-                                                        0° = North, 90° = East,
-                                                        180° = South, 270° =
-                                                        West
-                                                    </div>
+                                                            >
+                                                                {feature}
+                                                            </span>
+                                                        )
+                                                    )}
                                                 </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
+                                                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.cameraActions}>
-                                            <button
-                                                className={styles.editBtn}
-                                                onClick={() => {
-                                                    setSelectedCamera(camera);
-                                                    setShowModal(true);
-                                                }}
+                                    ) : (
+                                        <div className={styles.cameraDetails}>
+                                            <div
+                                                className={modalStyles.noModel}
                                             >
-                                                Edit
-                                            </button>
-                                            <button
-                                                className={styles.removeBtn}
-                                                onClick={() =>
-                                                    removeCamera(camera.id)
+                                                No Verkada model selected -
+                                                Click "Edit" to choose a camera
+                                            </div>
+                                            <div
+                                                className={
+                                                    modalStyles.directionControl
                                                 }
                                             >
-                                                Remove
-                                            </button>
+                                                <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>
-            
+            </div>
+
             {showModal && selectedCamera && (
                 <CameraSelectionModal
                     camera={selectedCamera}
@@ -1479,7 +2196,9 @@ const CameraPlacement = () => {
                         updateCamera(selectedCamera.id, updates);
                         setShowModal(false);
                     }}
-                    onClose={() => setShowModal(false)}
+                    onClose={() => {
+                        setShowModal(false);
+                    }}
                 />
             )}
         </div>
@@ -1487,9 +2206,13 @@ const CameraPlacement = () => {
 };
 
 const CameraSelectionModal = ({ camera, onSave, onClose }) => {
-    const [customName, setCustomName] = useState(camera.customName || '');
+    // 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(null);
+    const [selectedCamera, setSelectedCamera] = useState(
+        camera.verkadaModel ? getCameraById(camera.verkadaModel) : null
+    );
 
     // Filter cameras based on selected category
     const filteredCameras = Object.values(VERKADA_CAMERAS).filter((cam) => {
@@ -1508,7 +2231,6 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
         }
 
         onSave({
-            customName: customName.trim(),
             verkadaModel: selectedCamera.id,
         });
     };
@@ -1518,39 +2240,43 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
             <div className={styles.cameraSelectionModal}>
                 <div className={styles.modalHeader}>
                     <h3>Select Verkada Camera</h3>
-                    <button className={styles.closeBtn} onClick={onClose}>×</button>
+                    <button className={styles.closeBtn} onClick={onClose}>
+                        ×
+                    </button>
                 </div>
 
                 <div className={styles.modalContent}>
                     <div className={styles.topSection}>
-                        <div className={styles.formGroup}>
-                            <label>Custom Name:</label>
-                            <input
-                                type="text"
-                                value={customName}
-                                onChange={(e) => setCustomName(e.target.value)}
-                                placeholder="Enter camera name (optional)"
-                            />
-                        </div>
-
                         <div className={styles.categoryFilter}>
                             <label>Filter by Category:</label>
                             <div className={styles.categoryButtons}>
                                 <button
-                                    className={selectedCategory === 'all' ? styles.active : ''}
+                                    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>
-                                ))}
+                                {Object.entries(CAMERA_CATEGORIES).map(
+                                    ([key, category]) => (
+                                        <button
+                                            key={key}
+                                            className={
+                                                selectedCategory === key
+                                                    ? styles.active
+                                                    : ''
+                                            }
+                                            onClick={() =>
+                                                setSelectedCategory(key)
+                                            }
+                                        >
+                                            {category.name}
+                                        </button>
+                                    )
+                                )}
                             </div>
                         </div>
                     </div>
@@ -1559,48 +2285,104 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
                         {filteredCameras.map((cam) => (
                             <div
                                 key={cam.id}
-                                className={`${styles.cameraCard} ${selectedCamera?.id === cam.id ? styles.selectedCard : ''}`}
+                                className={`${styles.cameraCard} ${
+                                    selectedCamera?.id === cam.id
+                                        ? styles.selectedCard
+                                        : ''
+                                }`}
                                 onClick={() => handleCameraSelect(cam)}
                             >
                                 <div className={styles.cardHeader}>
-                                    <div className={styles.cameraIcon}>
-                                        <CameraIcon icon={cam.icon} size={24} />
+                                    <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]}`}>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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 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
+                                            ?.slice(0, 2)
+                                            .map((feature, index) => (
+                                                <span
+                                                    key={index}
+                                                    className={
+                                                        styles.featureBadge
+                                                    }
+                                                >
+                                                    {feature}
+                                                </span>
+                                            ))}
                                         {cam.features?.length > 2 && (
-                                            <span className={styles.moreFeatures}>
+                                            <span
+                                                className={styles.moreFeatures}
+                                            >
                                                 +{cam.features.length - 2} more
                                             </span>
                                         )}
@@ -1621,12 +2403,12 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
                         <button onClick={onClose} className={styles.cancelBtn}>
                             Cancel
                         </button>
-                        <button 
-                            onClick={handleSave} 
+                        <button
+                            onClick={handleSave}
                             disabled={!selectedCamera}
                             className={styles.saveBtn}
                         >
-                            Add Camera
+                            {isUpdating ? 'Update Camera' : 'Add Camera'}
                         </button>
                     </div>
                 </div>