@visns-studio/visns-components 5.15.6 → 5.15.8

package/src/components/CameraPlacement.jsx

@@ -3,7 +3,24 @@ import mapboxgl from 'mapbox-gl';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import html2canvas from 'html2canvas';
 import Swal from 'sweetalert2';
-import { Edit3, Trash2 } from 'lucide-react';
+import { pdf } from '@react-pdf/renderer';
+import CameraReportPDF from './utils/CameraReportPDF';
+import SimpleCameraReportPDF from './utils/SimpleCameraReportPDF';
+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';
@@ -24,64 +41,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);
-        }
-    }, [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]);
+            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);
+        }
+    }, []);
 
+    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(() => {
@@ -195,21 +297,42 @@ const CameraPlacement = () => {
 
     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
@@ -219,7 +342,7 @@ const CameraPlacement = () => {
                 icon: 'warning',
                 title: 'No Data to Save',
                 text: 'Please add cameras or upload an image first.',
-                confirmButtonColor: '#8b5cf6'
+                confirmButtonColor: '#8b5cf6',
             });
             return;
         }
@@ -227,12 +350,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,
@@ -240,15 +365,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);
@@ -262,7 +391,7 @@ const CameraPlacement = () => {
             timer: 3000,
             showConfirmButton: false,
             toast: true,
-            position: 'top-end'
+            position: 'top-end',
         });
     }, [cameras, uploadedImage, mode]);
 
@@ -271,336 +400,218 @@ 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();
     }, []);
 
-    const exportMap = useCallback(async () => {
+    const exportToPDF = useCallback(async () => {
         try {
             if (!cameras.length) {
                 Swal.fire({
                     icon: 'warning',
                     title: 'No Cameras',
                     text: 'Please add cameras first before exporting.',
-                    confirmButtonColor: '#10b981'
-                });
-                return;
-            }
-
-            const imageContainer = document.querySelector(`.${styles.imageContainer}`);
-            if (!imageContainer) {
-                Swal.fire({
-                    icon: 'warning',
-                    title: 'No Image',
-                    text: 'Please upload an image first before exporting.',
-                    confirmButtonColor: '#10b981'
+                    confirmButtonColor: '#1e40af',
                 });
                 return;
             }
 
-            // First, take a screenshot of just the image container to get its natural size
-            const imageCanvas = await html2canvas(imageContainer, {
-                useCORS: true,
-                allowTaint: true,
-                scale: 1.2,
-                backgroundColor: '#f8fafc',
-                logging: false
+            // Show loading message
+            Swal.fire({
+                icon: 'info',
+                title: 'Generating PDF...',
+                text: 'Please wait while we create your professional camera installation report.',
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+                showConfirmButton: false,
+                willOpen: () => {
+                    Swal.showLoading();
+                },
             });
 
-            // Calculate dimensions for professional report layout
-            const cameraListWidth = 550; // Fixed width for professional report
-            const headerHeight = 140; // Space for report header
-            const summaryHeight = 120; // Space for project summary
-            const cameraHeight = 180; // More space per camera card
-            const footerHeight = 300; // Space for legend and notes
-            const totalCameraListHeight = headerHeight + summaryHeight + (cameras.length * cameraHeight) + footerHeight;
-            
-            // Use the larger of image height or camera list height
-            const finalHeight = Math.max(imageCanvas.height, totalCameraListHeight);
-            const finalWidth = imageCanvas.width + cameraListWidth + 20; // small gap
-
-            // Create the composite container with calculated dimensions
-            const exportContainer = document.createElement('div');
-            exportContainer.style.position = 'absolute';
-            exportContainer.style.top = '-10000px';
-            exportContainer.style.left = '-10000px';
-            exportContainer.style.width = finalWidth + 'px';
-            exportContainer.style.height = finalHeight + 'px';
-            exportContainer.style.backgroundColor = '#ffffff';
-            exportContainer.style.display = 'flex';
-            exportContainer.style.gap = '10px';
-            exportContainer.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif';
-            document.body.appendChild(exportContainer);
-
-            // Left side: Image
-            const imageDiv = document.createElement('div');
-            imageDiv.style.width = imageCanvas.width + 'px';
-            imageDiv.style.height = finalHeight + 'px';
-            imageDiv.style.background = '#f8fafc';
-            imageDiv.style.display = 'flex';
-            imageDiv.style.alignItems = 'center';
-            imageDiv.style.justifyContent = 'center';
-            imageDiv.style.borderRight = '2px solid #e5e7eb';
-            imageDiv.style.flexShrink = '0';
-
-            // Scale the canvas to fit if needed
-            const scaledCanvas = document.createElement('canvas');
-            const ctx = scaledCanvas.getContext('2d');
-            scaledCanvas.width = imageCanvas.width;
-            scaledCanvas.height = imageCanvas.height;
-            ctx.drawImage(imageCanvas, 0, 0);
-            
-            imageDiv.appendChild(scaledCanvas);
-            exportContainer.appendChild(imageDiv);
-
-            // Right side: Camera list
-            const cameraListDiv = document.createElement('div');
-            cameraListDiv.style.width = cameraListWidth + 'px';
-            cameraListDiv.style.height = finalHeight + 'px';
-            cameraListDiv.style.padding = '20px';
-            cameraListDiv.style.background = '#ffffff';
-            cameraListDiv.style.overflow = 'visible';
-            cameraListDiv.style.boxSizing = 'border-box';
-
-            // Generate professional report-style HTML
-            const cameraListHTML = `
-                <!-- Report Header -->
-                <div style="background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: white; padding: 32px; margin: -20px -20px 0 -20px; border-radius: 16px 16px 0 0; box-shadow: 0 6px 20px rgba(0,0,0,0.15);">
-                    <h1 style="margin: 0 0 16px 0; font-size: 36px; font-weight: 800; text-align: center; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); letter-spacing: -0.6px; line-height: 1.1;">Security Camera Installation Report</h1>
-                    <div style="text-align: center; margin-bottom: 24px;">
-                        <div style="display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 12px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #e5e7eb;">
-                            PROJECT LAYOUT & SPECIFICATIONS
-                        </div>
-                    </div>
-                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; letter-spacing: 0.3px;">
-                        <div style="color: #d1d5db; font-weight: 500;"><strong style="color: #f3f4f6; font-weight: 600;">Generated:</strong> ${new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>
-                        <div style="color: #d1d5db; font-weight: 500;"><strong style="color: #f3f4f6; font-weight: 600;">Time:</strong> ${new Date().toLocaleTimeString()}</div>
-                    </div>
-                </div>
-                
-                
-                ${cameras.map((camera, index) => {
-                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
-                    // Generate sequential camera number
-                    const cameraNumber = index + 1;
-                    
-                    return `
-                        <div style="margin-bottom: 20px; background: white; border: 1px solid #d1d5db; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); page-break-inside: avoid;">
-                            <!-- Camera Header -->
-                            <div style="background: ${verkadaCamera?.environment === 'indoor' ? 'linear-gradient(135deg, #0d9488 0%, #0f766e 100%)' : 'linear-gradient(135deg, #ea580c 0%, #dc2626 100%)'}; color: white; padding: 16px 20px; position: relative;">
-                                <div style="display: flex; align-items: center; gap: 16px;">
-                                    <div style="width: 40px; height: 40px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.3);">${cameraNumber}</div>
-                                    <div style="flex: 1;">
-                                        <h4 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; text-shadow: 0 1px 3px rgba(0,0,0,0.2);">Camera ${cameraNumber}</h4>
-                                        <div style="font-size: 13px; opacity: 0.95; margin-top: 4px; letter-spacing: 0.2px;">${verkadaCamera ? verkadaCamera.name : 'Model Not Selected'}</div>
-                                    </div>
-                                    ${verkadaCamera?.ptz ? '<div style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;">PTZ</div>' : ''}
-                                </div>
-                            </div>
-                            
-                            <!-- Camera Details -->
-                            <div style="padding: 20px;">
-                                ${verkadaCamera ? `
-                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
-                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #3b82f6;">
-                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Resolution</div>
-                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.resolution}</div>
-                                        </div>
-                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #8b5cf6;">
-                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Field of View</div>
-                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.fov}°</div>
-                                        </div>
-                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid ${verkadaCamera.environment === 'indoor' ? '#10b981' : '#f59e0b'};">
-                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">Environment</div>
-                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; text-transform: capitalize; line-height: 1.3;">${verkadaCamera.environment}</div>
-                                        </div>
-                                        <div style="background: #f8fafc; padding: 12px; border-radius: 10px; border-left: 3px solid #ef4444;">
-                                            <div style="font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;">IR Range</div>
-                                            <div style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3;">${verkadaCamera.irRange}m</div>
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Position & Direction -->
-                                    <div style="background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
-                                        <div style="font-size: 13px; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; text-align: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;">Installation Details</div>
-                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
-                                            <div style="background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;">
-                                                <div style="font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Direction</div>
-                                                <div style="font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4;">${camera.direction ? `${camera.direction}° from North` : 'Not set'}</div>
-                                            </div>
-                                            <div style="background: white; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;">
-                                                <div style="font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Coordinates</div>
-                                                <div style="font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4; font-family: monospace;">${mode === 'map' ? `${camera.lat?.toFixed(6)}, ${camera.lng?.toFixed(6)}` : `X: ${Math.round(camera.x)}, Y: ${Math.round(camera.y)}`}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Features -->
-                                    ${verkadaCamera.features && verkadaCamera.features.length > 0 ? `
-                                        <div style="background: white; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0;">
-                                            <div style="font-size: 13px; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; text-align: center;">Key Features</div>
-                                            <div style="display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;">
-                                                ${verkadaCamera.features.slice(0, 6).map(feature => 
-                                                    `<span style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; border: 1px solid #93c5fd; padding: 6px 12px; border-radius: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;">${feature}</span>`
-                                                ).join('')}
-                                                ${verkadaCamera.features.length > 6 ? `<span style="color: #64748b; font-size: 11px; align-self: center; padding: 4px 8px; border-radius: 12px; background: #f1f5f9; font-weight: 500;">+${verkadaCamera.features.length - 6} more</span>` : ''}
-                                            </div>
-                                        </div>
-                                    ` : ''}
-                                ` : `
-                                    <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #fca5a5; border-radius: 12px; margin: 10px 0;">
-                                        <div style="font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #dc2626; letter-spacing: 0.2px;">⚠ No Camera Model Selected</div>
-                                        <div style="font-size: 13px; color: #7f1d1d; line-height: 1.5; letter-spacing: 0.2px;">Please configure this camera before installation</div>
-                                    </div>
-                                `}
-                            </div>
-                        </div>
-                    `;
-                }).join('')}
-                
-                <!-- Report Footer -->
-                <div style="margin-top: 32px; padding: 24px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border-radius: 16px; border: 1px solid #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
-                    <!-- Legend Section -->
-                    <div style="margin-bottom: 24px;">
-                        <h3 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 800; color: #0f172a; text-align: center; letter-spacing: -0.4px;">Camera Types & Legend</h3>
-                        <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
-                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                                <div style="width: 24px; height: 24px; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(13,148,136,0.3);"></div>
-                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">Indoor Camera</span>
-                            </div>
-                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                                <div style="width: 24px; height: 24px; background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%); border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(234,88,12,0.3);"></div>
-                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">Outdoor Camera</span>
-                            </div>
-                            ${cameras.some(c => getCameraById(c.verkadaModel)?.ptz) ? `
-                            <div style="display: flex; align-items: center; gap: 12px; background: white; padding: 12px 16px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                                <div style="width: 24px; height: 24px; background: #6b7280; border-radius: 50%; border: 3px solid #ef4444; box-shadow: 0 2px 6px rgba(239,68,68,0.3);"></div>
-                                <span style="font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: 0.2px;">PTZ Camera</span>
-                            </div>` : ''}
-                        </div>
-                    </div>
-                    
-                    <!-- Technical Notes -->
-                    <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
-                        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700; color: #0f172a; text-align: center; letter-spacing: -0.2px;">📋 Installation Notes</h4>
-                        <div style="font-size: 13px; line-height: 1.8; color: #374151; letter-spacing: 0.2px;">
-                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #3b82f6;"><strong style="color: #1e40af;">Direction Reference:</strong> All camera directions are measured clockwise from North (0° = North, 90° = East, 180° = South, 270° = West)</div>
-                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #8b5cf6;"><strong style="color: #7c3aed;">Field of View:</strong> FOV angles represent the horizontal viewing angle. Actual coverage may vary based on mounting height and obstacles</div>
-                            <div style="margin-bottom: 12px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #10b981;"><strong style="color: #059669;">Coordinates:</strong> ${mode === 'map' ? 'Geographic coordinates (Latitude, Longitude) in decimal degrees' : 'Pixel coordinates relative to uploaded image (X, Y from top-left corner)'}</div>
-                            <div style="padding: 12px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-radius: 8px; border-left: 3px solid #ef4444;"><strong style="color: #dc2626;">Important:</strong> This layout should be verified on-site during installation. Actual camera placement may need adjustment based on physical constraints, lighting conditions, and site requirements</div>
-                        </div>
-                    </div>
-                    
-                    <!-- Report ID & Disclaimer -->
-                    <div style="text-align: center; margin-top: 20px; padding-top: 16px; border-top: 2px solid #cbd5e1;">
-                        <div style="font-size: 12px; color: #475569; margin-bottom: 8px; letter-spacing: 0.5px; font-weight: 600;">Report ID: <span style="font-family: monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;">${Date.now().toString(36).toUpperCase()}</span></div>
-                        <div style="font-size: 11px; color: #64748b; line-height: 1.6; letter-spacing: 0.3px; max-width: 400px; margin: 0 auto;">This report was generated automatically and should be reviewed by qualified security installation professionals</div>
-                    </div>
-                </div>
-            `;
+            let mapImageData = null;
 
-            cameraListDiv.innerHTML = cameraListHTML;
-            exportContainer.appendChild(cameraListDiv);
-
-            // Wait for rendering
-            await new Promise(resolve => setTimeout(resolve, 100));
-
-            // Capture the composite with exact dimensions
-            const finalCanvas = await html2canvas(exportContainer, {
-                useCORS: true,
-                allowTaint: true,
-                scale: 1,
-                backgroundColor: '#ffffff',
-                logging: false,
-                width: finalWidth,
-                height: finalHeight
-            });
+            // Capture the site map image if available
+            if (uploadedImage || mode === 'image') {
+                const imageContainer = document.querySelector(
+                    `.${styles.imageContainer}`
+                );
+                if (imageContainer && uploadedImage) {
+                    try {
+                        const canvas = await html2canvas(imageContainer, {
+                            useCORS: true,
+                            allowTaint: true,
+                            scale: 1.2,
+                            backgroundColor: '#f8fafc',
+                            logging: false,
+                        });
+                        mapImageData = canvas.toDataURL('image/png', 0.9);
+                    } catch (error) {
+                        console.warn('Could not capture site map image:', error);
+                        // Continue without image if capture fails
+                    }
+                }
+            }
 
-            // Clean up
-            document.body.removeChild(exportContainer);
+            // Generate PDF using React-PDF with fallback
+            let pdfBlob;
+            try {
+                // Try the enhanced PDF first
+                pdfBlob = await pdf(
+                    React.createElement(CameraReportPDF, {
+                        cameras: cameras,
+                        mapImageData: mapImageData,
+                        mode: mode,
+                        customColors: {} // Can be extended to read from props or CSS variables
+                    })
+                ).toBlob();
+            } catch (pdfError) {
+                console.warn('Enhanced PDF failed, trying simple version:', pdfError);
+                
+                // Fallback to simple PDF
+                pdfBlob = await pdf(
+                    React.createElement(SimpleCameraReportPDF, {
+                        cameras: cameras,
+                        mapImageData: mapImageData,
+                        mode: mode,
+                        customColors: {} // Can be extended to read from props or CSS variables
+                    })
+                ).toBlob();
+            }
 
-            // Download
+            // Create download link
+            const url = URL.createObjectURL(pdfBlob);
             const link = document.createElement('a');
-            const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-');
-            link.download = `Security-Camera-Installation-Report-${timestamp}.png`;
-            link.href = finalCanvas.toDataURL('image/png', 1.0); // Maximum quality
+            const timestamp = new Date()
+                .toISOString()
+                .slice(0, 19)
+                .replace(/[:.]/g, '-');
+            link.download = `Security-Camera-Installation-Report-${timestamp}.pdf`;
+            link.href = url;
             link.click();
 
+            // Clean up
+            URL.revokeObjectURL(url);
 
             // Show success message
             Swal.fire({
                 icon: 'success',
-                title: 'Export Complete!',
-                text: `Professional camera installation report exported as ${link.download}`,
-                timer: 3000,
-                showConfirmButton: false,
-                toast: true,
-                position: 'top-end'
+                title: 'PDF Export Complete!',
+                html: `
+                    <div style="text-align: left; font-size: 14px; line-height: 1.6;">
+                        <p><strong>Your professional camera installation report has been generated!</strong></p>
+                        <div style="margin: 15px 0;">
+                            <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px; flex-shrink: 0;">
+                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                                    <polyline points="14,2 14,8 20,8"></polyline>
+                                </svg>
+                                <span><strong>Page 1:</strong> Site layout with camera positions</span>
+                            </div>
+                            <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px; flex-shrink: 0;">
+                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                                    <polyline points="21,15 16,10 5,21"></polyline>
+                                </svg>
+                                <span><strong>Page 2:</strong> Detailed camera specifications</span>
+                            </div>
+                            <div style="display: flex; align-items: center;">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px; flex-shrink: 0;">
+                                    <polyline points="20,6 9,17 4,12"></polyline>
+                                </svg>
+                                <span><strong>Includes:</strong> Camera legend and specifications</span>
+                            </div>
+                        </div>
+                        <p style="color: #6b7280; font-size: 12px; margin-top: 15px;">
+                            File saved as: <code>${link.download}</code>
+                        </p>
+                    </div>
+                `,
+                confirmButtonColor: '#1e40af',
+                confirmButtonText: 'Great!',
             });
-
         } catch (error) {
-            console.error('Error exporting:', error);
+            console.error('Error generating PDF:', error);
+            
+            // More specific error handling
+            let errorMessage = 'Unable to generate PDF report. Please try again.';
+            if (error.message.includes('Buffer') || error.message.includes('DataView')) {
+                errorMessage = 'PDF generation failed due to font loading issue. This is a known issue with React-PDF in development mode.';
+            } else if (error.message.includes('font') || error.message.includes('glyph')) {
+                errorMessage = 'Font-related error occurred during PDF generation. Trying alternative approach...';
+            }
+            
             Swal.fire({
                 icon: 'error',
-                title: 'Export Failed',
-                text: 'Export failed. Please try again or take a manual screenshot.',
-                confirmButtonColor: '#10b981'
+                title: 'PDF Export Failed',
+                html: `
+                    <div style="text-align: left;">
+                        <p>${errorMessage}</p>
+                        <details style="margin-top: 10px;">
+                            <summary style="cursor: pointer; color: #6b7280;">Technical Details</summary>
+                            <pre style="font-size: 11px; background: #f3f4f6; padding: 8px; margin: 8px 0; border-radius: 4px; max-height: 100px; overflow-y: auto;">${error.message}</pre>
+                        </details>
+                    </div>
+                `,
+                confirmButtonColor: '#dc2626',
             });
         }
-    }, [cameras]);
+    }, [cameras, uploadedImage, mode]);
 
     // Update cameras with markers on map
     useEffect(() => {
@@ -615,12 +626,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 {
@@ -632,7 +646,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
+                );
             }
         });
 
@@ -679,6 +696,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;
@@ -712,6 +730,7 @@ const CameraPlacement = () => {
 
             const handleRotationEnd = () => {
                 isRotating = false;
+                setIsRotating(false);
                 markerContainer.classList.remove('rotating');
                 document.removeEventListener('mousemove', handleRotationMove);
                 document.removeEventListener('mouseup', handleRotationEnd);
@@ -858,167 +877,230 @@ 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
+                            tooltip={`${
+                                sidebarCollapsed ? 'Show' : 'Hide'
+                            } Cameras`}
+                        />
+                        <IconButton
+                            icon={Download}
+                            onClick={exportToPDF}
+                            disabled={!cameras.length}
+                            tooltip="Export to PDF Report"
                             className={styles.exportBtn}
-                            onClick={exportMap}
-                            disabled={mode === 'image' && !uploadedImage}
-                        >
-                            Export {mode === 'map' ? 'Map' : 'Image'}
-                        </button>
+                        />
                     </div>
                 </div>
             </div>
 
             <div className={styles.mainContent}>
-                <div 
-                    className={`${styles.imageContainer} ${addCameraMode ? styles.addMode : ''} ${sidebarCollapsed ? styles.sidebarCollapsed : ''}`} 
-                    ref={imageContainer} 
+                <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;
-
-                                    // Calculate FOV triangle points in pixels
-                                    const point1X = camera.x + distance * Math.cos(directionRad - fovRad / 2);
-                                    const point1Y = camera.y + distance * Math.sin(directionRad - fovRad / 2);
-                                    const point2X = camera.x + distance * Math.cos(directionRad + fovRad / 2);
-                                    const point2Y = camera.y + distance * Math.sin(directionRad + fovRad / 2);
-
-                                    const fovColor = verkadaCamera.environment === 'indoor' ? '#10b981' : '#f59e0b';
-                                    
-                                    // Create SVG path for the triangle
-                                    const pathData = `M ${camera.x} ${camera.y} L ${point1X} ${point1Y} L ${point2X} ${point2Y} Z`;
-
-                                    return (
-                                        <svg
-                                            key={`fov-${camera.id}`}
-                                            className={styles.fovTriangle}
-                                            style={{
-                                                position: 'absolute',
-                                                top: 0,
-                                                left: 0,
-                                                width: '100%',
-                                                height: '100%',
-                                                pointerEvents: 'none',
-                                                zIndex: 1,
-                                            }}
-                                        >
-                                            <path
-                                                d={pathData}
-                                                fill={fovColor}
-                                                fillOpacity="0.25"
-                                                stroke={fovColor}
-                                                strokeOpacity="0.5"
-                                                strokeWidth="2"
-                                            />
-                                        </svg>
-                                    );
-                                })}
-                                
-                                {/* Render camera markers on image */}
-                                {cameras.map((camera) => {
-                                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
-                                    const environment = verkadaCamera ? verkadaCamera.environment : 'outdoor';
-                                    const cameraNumber = (camera.customName || camera.name).replace(/\D/g, '') || camera.id;
-
-                                    return (
-                                        <div
-                                            key={camera.id}
-                                            className={`camera-marker-container ${styles.imageMarker}`}
-                                            style={{
-                                                position: 'absolute',
-                                                left: camera.x - 20, // Adjusted for smaller circular marker
-                                                top: camera.y - 20,  // Adjusted for smaller circular marker
-                                                transform: 'none',
-                                                zIndex: 2,
-                                            }}
-                                            onMouseEnter={(e) => {
-                                                // Only show tooltip if not hovering over rotation handle
-                                                if (verkadaCamera && !e.target.closest(`.${styles.rotationHandle}`)) {
-                                                    // Add delay to prevent tooltip from showing during quick rotations
-                                                    const targetElement = e.currentTarget;
-                                                    targetElement._tooltipTimeout = setTimeout(() => {
+                    {uploadedImage ? (
+                        <div className={styles.imageWrapper}>
+                            <img
+                                src={uploadedImage}
+                                alt="Floor plan or site layout"
+                                className={styles.uploadedImage}
+                            />
+                            {/* Render FOV triangles first (behind markers) */}
+                            {cameras.map((camera) => {
+                                const verkadaCamera = camera.verkadaModel
+                                    ? getCameraById(camera.verkadaModel)
+                                    : null;
+                                if (!verkadaCamera) return null;
+
+                                let fov = verkadaCamera.ptz
+                                    ? 90
+                                    : verkadaCamera.fov;
+
+                                // Handle special FOV cases
+                                if (fov >= 360)
+                                    fov = 120; // PTZ cameras showing max practical FOV
+                                else if (fov >= 270)
+                                    fov = 150; // Multi-sensor cameras
+                                else if (fov >= 180) fov = 130; // Fisheye cameras
+
+                                const fovRad = (fov * Math.PI) / 180;
+
+                                // Calculate distance based on FOV - wider angles get shorter distances
+                                // Base distance of 100px for 60° FOV, scaled inversely with bounds
+                                const baseFov = 60; // Reference FOV angle
+                                const baseDistance = verkadaCamera.ptz
+                                    ? 120
+                                    : 100;
+                                let distance = baseDistance * (baseFov / fov);
+
+                                // Apply bounds: min 30px, max 200px
+                                distance = Math.max(
+                                    30,
+                                    Math.min(200, distance)
+                                );
+                                const directionRad =
+                                    (camera.direction * Math.PI) / 180;
+
+                                // Calculate FOV triangle points in pixels
+                                const point1X =
+                                    camera.x +
+                                    distance *
+                                        Math.cos(directionRad - fovRad / 2);
+                                const point1Y =
+                                    camera.y +
+                                    distance *
+                                        Math.sin(directionRad - fovRad / 2);
+                                const point2X =
+                                    camera.x +
+                                    distance *
+                                        Math.cos(directionRad + fovRad / 2);
+                                const point2Y =
+                                    camera.y +
+                                    distance *
+                                        Math.sin(directionRad + fovRad / 2);
+
+                                const fovColor =
+                                    verkadaCamera.environment === 'indoor'
+                                        ? '#10b981'
+                                        : '#f59e0b';
+
+                                // Create SVG path for the triangle
+                                const pathData = `M ${camera.x} ${camera.y} L ${point1X} ${point1Y} L ${point2X} ${point2Y} Z`;
+
+                                return (
+                                    <svg
+                                        key={`fov-${camera.id}`}
+                                        className={styles.fovTriangle}
+                                        style={{
+                                            position: 'absolute',
+                                            top: 0,
+                                            left: 0,
+                                            width: '100%',
+                                            height: '100%',
+                                            pointerEvents: 'none',
+                                            zIndex: 1,
+                                        }}
+                                    >
+                                        <path
+                                            d={pathData}
+                                            fill={fovColor}
+                                            fillOpacity="0.25"
+                                            stroke={fovColor}
+                                            strokeOpacity="0.5"
+                                            strokeWidth="2"
+                                        />
+                                    </svg>
+                                );
+                            })}
+
+                            {/* Render camera markers on image */}
+                            {cameras.map((camera) => {
+                                const verkadaCamera = camera.verkadaModel
+                                    ? getCameraById(camera.verkadaModel)
+                                    : null;
+                                const environment = verkadaCamera
+                                    ? verkadaCamera.environment
+                                    : 'outdoor';
+                                const cameraNumber =
+                                    (camera.customName || camera.name).replace(
+                                        /\D/g,
+                                        ''
+                                    ) || camera.id;
+
+                                return (
+                                    <div
+                                        key={camera.id}
+                                        className={`camera-marker-container ${styles.imageMarker}`}
+                                        style={{
+                                            position: 'absolute',
+                                            left: camera.x - 20, // Adjusted for smaller circular marker
+                                            top: camera.y - 20, // Adjusted for smaller circular marker
+                                            transform: 'none',
+                                            zIndex: 2,
+                                        }}
+                                        onMouseEnter={(e) => {
+                                            // Only show tooltip if not hovering over rotation handle
+                                            if (
+                                                verkadaCamera &&
+                                                !e.target.closest(
+                                                    `.${styles.rotationHandle}`
+                                                )
+                                            ) {
+                                                // Add delay to prevent tooltip from showing during quick rotations
+                                                const targetElement =
+                                                    e.currentTarget;
+                                                targetElement._tooltipTimeout =
+                                                    setTimeout(() => {
                                                         // Check if element still exists and is in DOM
-                                                        if (!targetElement || !targetElement.parentNode) {
+                                                        if (
+                                                            !targetElement ||
+                                                            !targetElement.parentNode
+                                                        ) {
                                                             return;
                                                         }
-                                                        
-                                                        
-                                                        const tooltip = document.createElement('div');
-                                                        tooltip.className = styles.cameraTooltip;
+
+                                                        const tooltip =
+                                                            document.createElement(
+                                                                'div'
+                                                            );
+                                                        tooltip.className =
+                                                            styles.cameraTooltip;
                                                         tooltip.innerHTML = `
                                                             <div class="${styles.tooltipImage}">
                                                                 <img src="${verkadaCamera.image}" alt="${verkadaCamera.name}" />
@@ -1032,515 +1114,633 @@ const CameraPlacement = () => {
                                                                 </div>
                                                             </div>
                                                         `;
-                                                        
+
                                                         // Position tooltip away from rotation handle
-                                                        tooltip.style.left = '50px';
-                                                        tooltip.style.top = '-10px';
-                                                        
-                                                        targetElement.appendChild(tooltip);
-                                                        targetElement._tooltip = tooltip;
-                                                        
+                                                        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;
                                                 }
-                                            }}
-                                            onMouseLeave={(e) => {
-                                                // Clear timeout if leaving before tooltip shows
-                                                if (e.currentTarget._tooltipTimeout) {
-                                                    clearTimeout(e.currentTarget._tooltipTimeout);
-                                                    e.currentTarget._tooltipTimeout = null;
+
+                                                if (isDragging) {
+                                                    const newX =
+                                                        moveEvent.clientX -
+                                                        containerRect.left;
+                                                    const newY =
+                                                        moveEvent.clientY -
+                                                        containerRect.top;
+
+                                                    // Update camera position
+                                                    updateCamera(camera.id, {
+                                                        x: newX,
+                                                        y: newY,
+                                                    });
                                                 }
-                                                // Remove tooltip if it exists
-                                                if (e.currentTarget._tooltip) {
-                                                    e.currentTarget.removeChild(e.currentTarget._tooltip);
-                                                    e.currentTarget._tooltip = 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);
                                                 }
-                                            }}
-                                            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 });
+
+                                                document.removeEventListener(
+                                                    'mousemove',
+                                                    handleMouseMove
+                                                );
+                                                document.removeEventListener(
+                                                    'mouseup',
+                                                    handleMouseUp
+                                                );
+                                            };
+
+                                            document.addEventListener(
+                                                'mousemove',
+                                                handleMouseMove
+                                            );
+                                            document.addEventListener(
+                                                'mouseup',
+                                                handleMouseUp
+                                            );
+                                        }}
+                                    >
+                                        <div
+                                            className={`${
+                                                styles.circularMarker
+                                            } ${environment} ${
+                                                verkadaCamera?.ptz
+                                                    ? styles.ptzMarker
+                                                    : ''
+                                            }`}
+                                        >
+                                            <div
+                                                className={styles.markerNumber}
+                                            >
+                                                {cameraNumber}
+                                            </div>
+                                            <div
+                                                className={
+                                                    styles.rotationHandle
+                                                }
+                                                style={{
+                                                    transform: `rotate(${
+                                                        camera.direction || 0
+                                                    }deg)`,
+                                                }}
+                                                onMouseEnter={(e) => {
+                                                    // Hide tooltip when hovering over rotation handle
+                                                    const container =
+                                                        e.currentTarget
+                                                            .parentElement
+                                                            .parentElement;
+                                                    if (
+                                                        container._tooltipTimeout
+                                                    ) {
+                                                        clearTimeout(
+                                                            container._tooltipTimeout
+                                                        );
+                                                        container._tooltipTimeout =
+                                                            null;
                                                     }
-                                                };
-                                                
-                                                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)`,
-                                                    }}
-                                                    onMouseEnter={(e) => {
-                                                        // Hide tooltip when hovering over rotation handle
-                                                        const container = e.currentTarget.parentElement.parentElement;
-                                                        if (container._tooltipTimeout) {
-                                                            clearTimeout(container._tooltipTimeout);
-                                                            container._tooltipTimeout = null;
+                                                }}
+                                                onMouseDown={(e) => {
+                                                    e.stopPropagation();
+
+                                                    // Store references to prevent React event pooling issues
+                                                    const rotationHandle =
+                                                        e.currentTarget;
+                                                    const startMouseX =
+                                                        e.clientX;
+                                                    const startMouseY =
+                                                        e.clientY;
+
+                                                    let isRotating = false;
+                                                    let startAngle = 0;
+                                                    let currentRotation =
+                                                        camera.direction || 0;
+
+                                                    // Get the center of the camera marker
+                                                    const markerContainer =
+                                                        rotationHandle.parentElement;
+                                                    const markerRect =
+                                                        markerContainer.getBoundingClientRect();
+                                                    const centerX =
+                                                        markerRect.left +
+                                                        markerRect.width / 2;
+                                                    const centerY =
+                                                        markerRect.top +
+                                                        markerRect.height / 2;
+
+                                                    // Calculate initial angle from center to mouse position
+                                                    const startDeltaX =
+                                                        startMouseX - centerX;
+                                                    const startDeltaY =
+                                                        startMouseY - centerY;
+                                                    startAngle =
+                                                        (Math.atan2(
+                                                            startDeltaX,
+                                                            -startDeltaY
+                                                        ) *
+                                                            180) /
+                                                        Math.PI;
+
+                                                    const handleRotationMove = (
+                                                        moveEvent
+                                                    ) => {
+                                                        const deltaX = Math.abs(
+                                                            moveEvent.clientX -
+                                                                startMouseX
+                                                        );
+                                                        const deltaY = Math.abs(
+                                                            moveEvent.clientY -
+                                                                startMouseY
+                                                        );
+
+                                                        // Start rotating if mouse has moved more than 5 pixels
+                                                        if (
+                                                            !isRotating &&
+                                                            (deltaX > 5 ||
+                                                                deltaY > 5)
+                                                        ) {
+                                                            isRotating = true;
+                                                            setIsRotating(true);
+                                                            markerContainer.classList.add(
+                                                                'rotating'
+                                                            );
                                                         }
-                                                        if (container._tooltip) {
-                                                            container.removeChild(container._tooltip);
-                                                            container._tooltip = null;
-                                                        }
-                                                    }}
-                                                    onMouseDown={(e) => {
-                                                        
-                                                        e.stopPropagation();
-                                                        
-                                                        // Store references to prevent React event pooling issues
-                                                        const rotationHandle = e.currentTarget;
-                                                        const startMouseX = e.clientX;
-                                                        const startMouseY = e.clientY;
-                                                        
-                                                        let isRotating = false;
-                                                        let startAngle = 0;
-                                                        let currentRotation = camera.direction || 0;
-                                                        
-                                                        // Get the center of the camera marker
-                                                        const markerContainer = rotationHandle.parentElement;
-                                                        const markerRect = markerContainer.getBoundingClientRect();
-                                                        const centerX = markerRect.left + markerRect.width / 2;
-                                                        const centerY = markerRect.top + markerRect.height / 2;
-                                                        
-                                                        
-                                                        // Calculate initial angle from center to mouse position
-                                                        const startDeltaX = startMouseX - centerX;
-                                                        const startDeltaY = startMouseY - centerY;
-                                                        startAngle = Math.atan2(startDeltaX, -startDeltaY) * 180 / Math.PI;
-                                                        
-                                                        
-                                                        const handleRotationMove = (moveEvent) => {
-                                                            const deltaX = Math.abs(moveEvent.clientX - startMouseX);
-                                                            const deltaY = Math.abs(moveEvent.clientY - startMouseY);
-                                                            
-                                                            
-                                                            // Start rotating if mouse has moved more than 5 pixels
-                                                            if (!isRotating && (deltaX > 5 || deltaY > 5)) {
-                                                                isRotating = true;
-                                                                markerContainer.classList.add('rotating');
+
+                                                        if (isRotating) {
+                                                            // Calculate current angle from center to mouse position
+                                                            const currentDeltaX =
+                                                                moveEvent.clientX -
+                                                                centerX;
+                                                            const currentDeltaY =
+                                                                moveEvent.clientY -
+                                                                centerY;
+                                                            const currentAngle =
+                                                                (Math.atan2(
+                                                                    currentDeltaX,
+                                                                    -currentDeltaY
+                                                                ) *
+                                                                    180) /
+                                                                Math.PI;
+
+                                                            // Calculate rotation delta
+                                                            let angleDelta =
+                                                                currentAngle -
+                                                                startAngle;
+
+                                                            // Handle angle wrapping
+                                                            if (
+                                                                angleDelta > 180
+                                                            )
+                                                                angleDelta -= 360;
+                                                            if (
+                                                                angleDelta <
+                                                                -180
+                                                            )
+                                                                angleDelta += 360;
+
+                                                            // Calculate new rotation
+                                                            let newRotation =
+                                                                (currentRotation +
+                                                                    angleDelta +
+                                                                    360) %
+                                                                360;
+                                                            newRotation =
+                                                                Math.round(
+                                                                    newRotation
+                                                                );
+
+                                                            // Update rotation handle visual using stored reference
+                                                            if (
+                                                                rotationHandle &&
+                                                                rotationHandle.style
+                                                            ) {
+                                                                rotationHandle.style.transform = `rotate(${newRotation}deg)`;
+                                                            } else {
+                                                                console.error(
+                                                                    'Rotation handle is null or has no style property'
+                                                                );
                                                             }
-                                                            
-                                                            if (isRotating) {
-                                                                // Calculate current angle from center to mouse position
-                                                                const currentDeltaX = moveEvent.clientX - centerX;
-                                                                const currentDeltaY = moveEvent.clientY - centerY;
-                                                                const currentAngle = Math.atan2(currentDeltaX, -currentDeltaY) * 180 / Math.PI;
-                                                                
-                                                                // Calculate rotation delta
-                                                                let angleDelta = currentAngle - startAngle;
-                                                                
-                                                                // Handle angle wrapping
-                                                                if (angleDelta > 180) angleDelta -= 360;
-                                                                if (angleDelta < -180) angleDelta += 360;
-                                                                
-                                                                // Calculate new rotation
-                                                                let newRotation = (currentRotation + angleDelta + 360) % 360;
-                                                                newRotation = Math.round(newRotation);
-                                                                
-                                                                
-                                                                // Update rotation handle visual using stored reference
-                                                                if (rotationHandle && rotationHandle.style) {
-                                                                    rotationHandle.style.transform = `rotate(${newRotation}deg)`;
-                                                                } else {
-                                                                    console.error('🔄 Rotation handle is null or has no style property');
+
+                                                            // Update camera direction
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        newRotation,
                                                                 }
-                                                                
-                                                                // Update camera direction
-                                                                updateCamera(camera.id, { direction: newRotation });
-                                                            }
-                                                        };
-                                                        
-                                                        const handleRotationEnd = () => {
-                                                            
+                                                            );
+                                                        }
+                                                    };
+
+                                                    const handleRotationEnd =
+                                                        () => {
                                                             if (isRotating) {
-                                                                markerContainer.classList.remove('rotating');
+                                                                markerContainer.classList.remove(
+                                                                    'rotating'
+                                                                );
                                                             }
-                                                            document.removeEventListener('mousemove', handleRotationMove);
-                                                            document.removeEventListener('mouseup', handleRotationEnd);
+                                                            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}>
-                                            <div className={styles.sidebarCameraInfo}>
-                                                {verkadaCamera && (
-                                                    <div className={styles.sidebarCameraImageContainer}>
-                                                        <img 
-                                                            src={verkadaCamera.image} 
-                                                            alt={verkadaCamera.name}
-                                                            className={styles.sidebarCameraImage}
-                                                            onLoad={(e) => {
-                                                                e.target.style.opacity = '1';
-                                                            }}
-                                                            onError={(e) => {
-                                                                // Fallback to icon if image fails to load
-                                                                e.target.style.display = 'none';
-                                                                e.target.nextSibling.style.display = 'flex';
-                                                            }}
-                                                            style={{opacity: '0.3'}}
+                            return (
+                                <div
+                                    key={camera.id}
+                                    className={styles.cameraItem}
+                                >
+                                    <div className={styles.cameraHeader}>
+                                        <div
+                                            className={styles.sidebarCameraInfo}
+                                        >
+                                            {verkadaCamera && (
+                                                <div
+                                                    className={
+                                                        styles.sidebarCameraImageContainer
+                                                    }
+                                                >
+                                                    <img
+                                                        src={
+                                                            verkadaCamera.image
+                                                        }
+                                                        alt={verkadaCamera.name}
+                                                        className={
+                                                            styles.sidebarCameraImage
+                                                        }
+                                                        onLoad={(e) => {
+                                                            e.target.style.opacity =
+                                                                '1';
+                                                        }}
+                                                        onError={(e) => {
+                                                            // Fallback to icon if image fails to load
+                                                            e.target.style.display =
+                                                                'none';
+                                                            e.target.nextSibling.style.display =
+                                                                'flex';
+                                                        }}
+                                                        style={{
+                                                            opacity: '0.3',
+                                                        }}
+                                                    />
+                                                    <div
+                                                        className={
+                                                            styles.sidebarCameraIcon
+                                                        }
+                                                        style={{
+                                                            display: 'none',
+                                                        }}
+                                                    >
+                                                        <CameraIcon
+                                                            icon={
+                                                                verkadaCamera.icon
+                                                            }
+                                                            size={16}
                                                         />
-                                                        <div 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"
+                                            )}
+                                            <div
+                                                className={
+                                                    styles.sidebarCameraText
+                                                }
+                                            >
+                                                <h4
+                                                    className={
+                                                        styles.cameraName
+                                                    }
                                                 >
-                                                    <Trash2 size={16} />
-                                                </button>
+                                                    {camera.customName ||
+                                                        camera.name}
+                                                </h4>
+                                                {verkadaCamera && (
+                                                    <span
+                                                        className={`${
+                                                            styles.cameraType
+                                                        } ${
+                                                            styles[
+                                                                verkadaCamera
+                                                                    .environment
+                                                            ]
+                                                        }`}
+                                                    >
+                                                        {verkadaCamera.id}
+                                                    </span>
+                                                )}
                                             </div>
                                         </div>
 
-                                        {verkadaCamera ? (
+                                        {/* 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={styles.cameraDetails}
+                                                className={
+                                                    modalStyles.cameraModelName
+                                                }
+                                            >
+                                                <strong>
+                                                    {verkadaCamera.name}
+                                                </strong>
+                                            </div>
+
+                                            <div
+                                                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
@@ -1548,153 +1748,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.cameraDetails}>
+                                            <div
+                                                className={modalStyles.noModel}
+                                            >
+                                                No Verkada model selected -
+                                                Click "Edit" to choose a camera
+                                            </div>
+                                            <div
+                                                className={
+                                                    modalStyles.directionControl
+                                                }
+                                            >
+                                                <label>
+                                                    Direction:{' '}
+                                                    {camera.direction}°
+                                                </label>
+                                                <input
+                                                    type="range"
+                                                    min="0"
+                                                    max="360"
+                                                    value={camera.direction}
+                                                    onChange={(e) =>
+                                                        updateCamera(
+                                                            camera.id,
+                                                            {
+                                                                direction:
+                                                                    parseInt(
+                                                                        e.target
+                                                                            .value
+                                                                    ),
+                                                            }
+                                                        )
+                                                    }
+                                                    className={
+                                                        modalStyles.directionSlider
+                                                    }
+                                                />
+                                                <div
+                                                    className={
+                                                        modalStyles.directionHelper
+                                                    }
+                                                >
+                                                    0° = North, 90° = East, 180°
+                                                    = South, 270° = West
+                                                </div>
+                                            </div>
                                         </div>
+                                    )}
 
+                                    <div className={styles.cameraCoords}>
+                                        <span className={styles.coordLabel}>
+                                            Location:
+                                        </span>
+                                        {mode === 'map' ? (
+                                            <>
+                                                {camera.lat?.toFixed(6)},{' '}
+                                                {camera.lng?.toFixed(6)}
+                                            </>
+                                        ) : (
+                                            <>
+                                                X: {Math.round(camera.x)}, Y:{' '}
+                                                {Math.round(camera.y)}
+                                            </>
+                                        )}
                                     </div>
-                                );
-                            })
-                        )}
-                    </div>
+                                </div>
+                            );
+                        })
+                    )}
                 </div>
-            
+            </div>
+
             {showModal && selectedCamera && (
                 <CameraSelectionModal
                     camera={selectedCamera}
@@ -1714,9 +1992,11 @@ const CameraPlacement = () => {
 const CameraSelectionModal = ({ camera, onSave, onClose }) => {
     // Determine if this is editing an existing camera or adding a new one
     const isUpdating = Boolean(camera.verkadaModel);
-    
+
     const [selectedCategory, setSelectedCategory] = useState('all');
-    const [selectedCamera, setSelectedCamera] = useState(camera.verkadaModel ? getCameraById(camera.verkadaModel) : null);
+    const [selectedCamera, setSelectedCamera] = useState(
+        camera.verkadaModel ? getCameraById(camera.verkadaModel) : null
+    );
 
     // Filter cameras based on selected category
     const filteredCameras = Object.values(VERKADA_CAMERAS).filter((cam) => {
@@ -1724,7 +2004,6 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
         return cam.type === selectedCategory;
     });
 
-
     const handleCameraSelect = (cameraModel) => {
         setSelectedCamera(cameraModel);
     };
@@ -1745,29 +2024,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.categoryFilter}>
+                        <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>
@@ -1776,13 +2069,19 @@ 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.cameraImageContainer}>
-                                        <img 
-                                            src={cam.image} 
+                                    <div
+                                        className={styles.cameraImageContainer}
+                                    >
+                                        <img
+                                            src={cam.image}
                                             alt={cam.name}
                                             className={styles.cameraImage}
                                             onLoad={(e) => {
@@ -1791,49 +2090,83 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
                                             onError={(e) => {
                                                 // Fallback to icon if image fails to load
                                                 e.target.style.display = 'none';
-                                                e.target.nextSibling.style.display = 'flex';
+                                                e.target.nextSibling.style.display =
+                                                    'flex';
                                             }}
-                                            style={{opacity: '0.3'}}
+                                            style={{ opacity: '0.3' }}
                                         />
-                                        <div className={styles.cameraIcon} style={{display: 'none'}}>
-                                            <CameraIcon icon={cam.icon} size={24} />
+                                        <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>
                                         )}
@@ -1854,8 +2187,8 @@ const CameraSelectionModal = ({ camera, onSave, onClose }) => {
                         <button onClick={onClose} className={styles.cancelBtn}>
                             Cancel
                         </button>
-                        <button 
-                            onClick={handleSave} 
+                        <button
+                            onClick={handleSave}
                             disabled={!selectedCamera}
                             className={styles.saveBtn}
                         >